Merge pull request #924 from southorange1228/feat/avatar/demo

style(avater): 统一使用Space组件实现example
Tencent · Jun 23, 2022 · 697517e · 697517e
2 parents 9c06792 + c2e77e8
commit 697517e
Show file tree

Hide file tree

Showing 9 changed files with 301 additions and 232 deletions.
diff --git a/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/src/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
diff --git a/src/avatar/_example/adjust.jsx b/src/avatar/_example/adjust.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 
 export default function AdjustAvatar() {
   return (
-    <div className="demo-avatar">
+    <Space>
       <Avatar style={{ marginRight: '40px' }}>王</Avatar>
       <Avatar style={{ marginRight: '40px' }}>王亿</Avatar>
       <Avatar style={{ marginRight: '40px' }}>王亿亿</Avatar>
-    </div>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/base.jsx b/src/avatar/_example/base.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon } from 'tdesign-icons-react';
 
 export default function BasicAvatar() {
   return (
-    <div className="demo-avatar">
+    <Space>
       <Avatar
         image="https://tdesign.gtimg.com/site/avatar.jpg"
         hideOnLoadFailed="false"
@@ -15,6 +15,6 @@ export default function BasicAvatar() {
       <Avatar style={{ marginRight: '40px' }}>
         <UserIcon />
       </Avatar>
-    </div>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/group-cascading.jsx b/src/avatar/_example/group-cascading.jsx
@@ -1,26 +1,23 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon } from 'tdesign-icons-react';
 
 const { Group: AvatarGroup } = Avatar;
 
 export default function GroupCascadingAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup cascading="left-up">
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-    </div>
+    <Space direction="vertical">
+      <AvatarGroup>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup cascading="left-up">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/group-max.jsx b/src/avatar/_example/group-max.jsx
@@ -1,33 +1,29 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon, EllipsisIcon } from 'tdesign-icons-react';
 
 const { Group: AvatarGroup } = Avatar;
 
 export default function GroupMaxAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup size="large" max={2}>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>Avatar</Avatar>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup size="large" max={2} collapseAvatar={<EllipsisIcon />}>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>Avatar</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block">
-        <AvatarGroup size="large" max={2} collapseAvatar="more">
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>Avatar</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-    </div>
+    <Space direction="vertical">
+      <AvatarGroup size="large" max={2}>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large" max={2} collapseAvatar={<EllipsisIcon />}>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large" max={2} collapseAvatar="more">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>Avatar</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/group.jsx b/src/avatar/_example/group.jsx
@@ -1,26 +1,23 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 import { UserIcon } from 'tdesign-icons-react';
 
 const { Group: AvatarGroup } = Avatar;
 
 export default function GroupAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
-        <AvatarGroup>
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-      <div className="demo-avatar-block">
-        <AvatarGroup size="large">
-          <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
-          <Avatar>W</Avatar>
-          <Avatar icon={<UserIcon />}></Avatar>
-        </AvatarGroup>
-      </div>
-    </div>
+    <Space direction="vertical">
+      <AvatarGroup>
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+
+      <AvatarGroup size="large">
+        <Avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></Avatar>
+        <Avatar>W</Avatar>
+        <Avatar icon={<UserIcon />}></Avatar>
+      </AvatarGroup>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/shape.jsx b/src/avatar/_example/shape.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 
 export default function ShapeAvatar() {
   return (
-    <div className="demo-avatar">
+    <Space>
       <Avatar style={{ marginRight: '40px' }}>W</Avatar>
       <Avatar shape="round" style={{ marginRight: '40px' }}>
         W
       </Avatar>
-    </div>
+    </Space>
   );
 }
diff --git a/src/avatar/_example/size.jsx b/src/avatar/_example/size.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { Avatar } from 'tdesign-react';
+import { Avatar, Space } from 'tdesign-react';
 
 export default function SizeAvatar() {
   return (
-    <div className="demo-avatar">
-      <div className="demo-avatar-block" style={{ marginBottom: '40px' }}>
+    <Space direction="vertical" size="large">
+      <Space align="center">
         <Avatar size="small" style={{ marginRight: '40px' }}>
           W
         </Avatar>
@@ -17,8 +17,8 @@ export default function SizeAvatar() {
         <Avatar size="100px" style={{ marginRight: '40px' }}>
           W
         </Avatar>
-      </div>
-      <div className="demo-avatar-block">
+      </Space>
+      <Space align="center">
         <Avatar shape="round" size="small" style={{ marginRight: '40px' }}>
           W
         </Avatar>
@@ -31,7 +31,7 @@ export default function SizeAvatar() {
         <Avatar shape="round" size="100px" style={{ marginRight: '40px' }}>
           W
         </Avatar>
-      </div>
-    </div>
+      </Space>
+    </Space>
   );
 }