Merge pull request TDesignOteam#79 from aaronmhl/refactor/avatar2

Refactor/avatar

src/avatar/README.md

@@ -50,7 +50,6 @@ spline: base
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
-children | TNode | - | 子元素内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
 content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
 hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
 icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N

src/avatar/_example/base.tsx

@@ -12,7 +12,7 @@ export default class Avatar extends Component {
   render() {
     return (
       <t-space>
-        <t-avatar icon={<t-icon name="user-1"></t-icon>} style={{ marginRight: '40px' }} />
+        <t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>} style={{ marginRight: '40px' }} />
         <t-avatar
           image="https://tdesign.gtimg.com/site/avatar.jpg"
           hideOnLoadFailed={false}

src/avatar/_example/group-cascading.tsx

@@ -11,16 +11,16 @@ export default class AvatarGroupCascading extends Component {
   render() {
     return (
       <t-space direction="vertical">
-        <t-avatar-group>
+        <t-avatar-group cascading="left-up">
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
-          <t-avatar>W</t-avatar>
-          <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+          <t-avatar content="W"></t-avatar>
+          <t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
         </t-avatar-group>
 
-        <t-avatar-group cascading="left-up">
+        <t-avatar-group cascading="right-up">
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
-          <t-avatar>W</t-avatar>
-          <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+          <t-avatar content="W"></t-avatar>
+          <t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
         </t-avatar-group>
       </t-space>
     );

src/avatar/_example/group-max.tsx

@@ -14,19 +14,19 @@ export default class AvatarGroupMax extends Component {
       <t-space direction="vertical">
         <t-avatar-group size="large" max={2}>
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
-          <t-avatar>Avatar</t-avatar>
+          <t-avatar content="Avatar"></t-avatar>
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
         </t-avatar-group>
 
         <t-avatar-group size="large" max={2} collapseAvatar={<t-icon name="ellipsis" />}>
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
-          <t-avatar>Avatar</t-avatar>
+          <t-avatar content="Avatar"></t-avatar>
           <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
         </t-avatar-group>
 
         <t-avatar-group size="large" max={2} collapseAvatar="more">
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
-          <t-avatar>Avatar</t-avatar>
+          <t-avatar content="Avatar"></t-avatar>
           <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
         </t-avatar-group>
       </t-space>

src/avatar/_example/group.tsx

@@ -12,16 +12,16 @@ export default class AvatarGroup extends Component {
   render() {
     return (
       <t-space direction="vertical">
-        <t-avatar-group>
+        <t-avatar-group cascading="right-up">
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
-          <t-avatar>W</t-avatar>
-          <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+          <t-avatar content="W"></t-avatar>
+          <t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
         </t-avatar-group>
 
-        <t-avatar-group size="large">
+        <t-avatar-group size="large" cascading="left-up">
           <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
-          <t-avatar>W</t-avatar>
-          <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+          <t-avatar content="W"></t-avatar>
+          <t-avatar icon={<t-icon name="user-1" className="mb-[2px]"></t-icon>}></t-avatar>
         </t-avatar-group>
       </t-space>
     );

src/avatar/avatar-group.tsx

@@ -4,21 +4,16 @@ import { toArray } from 'lodash';
 import { classNames, cloneElement, Component, OmiProps, tag } from 'omi';
 
 import { getClassPrefix } from '../_util/classname';
+import { convertToLightDomNode } from '../_util/lightDom';
 import parseTNode from '../_util/parseTNode';
 import { StyledProps } from '../common';
-import { styleSheet } from './style/index.ts';
 import { TdAvatarGroupProps } from './type';
 
-import borderCss from './style/border.less';
-import offsetLeftCss from './style/offset_left.less';
-import offsetLeftZIndexCss from './style/offset_left_zIndex.less';
-import offsetRightCss from './style/offset_right.less';
-
 export interface AvatarGroupProps extends TdAvatarGroupProps, StyledProps {}
 
 @tag('t-avatar-group')
 export default class AvatarGroup extends Component<AvatarGroupProps> {
-  static css = styleSheet;
+  static css = [];
 
   static defaultProps = { cascading: 'right-up' };
 
@@ -32,8 +27,6 @@ export default class AvatarGroup extends Component<AvatarGroupProps> {
 
   preClass = `${getClassPrefix()}-avatar`;
 
-  allChildrenList: any;
-
   provide = { groupSize: undefined as any };
 
   install() {
@@ -44,21 +37,13 @@ export default class AvatarGroup extends Component<AvatarGroupProps> {
     const { preClass } = this;
     const { children, max, cascading, collapseAvatar } = props;
     const childrenList = toArray(children);
+    let allChildrenList = [];
     if (childrenList.length > 0) {
-      this.allChildrenList = childrenList.map((child, index) => {
-        let childrenCss = borderCss;
-        if (cascading === 'right-up' && index !== childrenList.length - 1) {
-          childrenCss += offsetRightCss;
-        } else if (cascading === 'left-up' && index !== 0) {
-          childrenCss += offsetLeftCss + offsetLeftZIndexCss;
-        } else if (cascading === 'left-up') {
-          childrenCss += offsetLeftZIndexCss;
-        }
-
-        return cloneElement(child, {
+      allChildrenList = childrenList.map((child, index) => {
+        const childNode = cloneElement(child, {
           key: `avatar-group-item-${index}`,
-          css: childrenCss,
         });
+        return convertToLightDomNode(childNode);
       });
     }
     const groupClass = classNames(`${preClass}-group`, this.className, {
@@ -68,17 +53,16 @@ export default class AvatarGroup extends Component<AvatarGroupProps> {
 
     const childrenCount = childrenList.length;
     if (props.max && childrenCount > max) {
-      const showList = this.allChildrenList.slice(0, max);
-      let childrenCss = borderCss;
-      if (cascading === 'left-up') {
-        childrenCss += offsetLeftCss + offsetLeftZIndexCss;
-      }
+      const showList = allChildrenList.slice(0, max);
       const ellipsisAvatar = (
-        <t-avatar css={childrenCss}>{parseTNode(collapseAvatar) || `+${childrenCount - max}`} </t-avatar>
+        <t-avatar
+          key={`${preClass}__collapse`}
+          content={parseTNode(collapseAvatar) || `+${childrenCount - max}`}
+        ></t-avatar>
       );
-      showList.push(<div key="t-avatar__collapse">{ellipsisAvatar}</div>);
+      showList.push(convertToLightDomNode(ellipsisAvatar));
       return <div class={groupClass}>{showList}</div>;
     }
-    return <div class={groupClass}>{this.allChildrenList}</div>;
+    return <div class={groupClass}>{allChildrenList}</div>;
   }
 }

src/avatar/avatar.tsx

@@ -3,18 +3,17 @@ import { classNames, Component, createRef, OmiProps, tag } from 'omi';
 import { getClassPrefix, getCommonClassName } from '../_util/classname';
 import { StyledProps } from '../common';
 import { ImageProps } from '../image';
-import { styleSheet } from './style/index.ts';
 import { TdAvatarProps } from './type';
 
 export interface AvatarProps extends TdAvatarProps, StyledProps {}
 
 @tag('t-avatar')
 export default class Avatar extends Component<AvatarProps> {
-  static css = styleSheet;
+  static css = [];
 
   static defaultProps = { hideOnLoadFailed: false, shape: 'circle' };
 
-  static propsType = {
+  static propTypes = {
     alt: String,
     hideOnLoadFailed: Boolean,
     icon: Object,
@@ -121,9 +120,10 @@ export default class Avatar extends Component<AvatarProps> {
       const childrenStyle = {
         transform: `scale(${this.scale})`,
       };
+      const renderChildrenContent = children && children[0] ? children : content;
       renderChildren = (
         <span ref={avatarChildrenRef} style={childrenStyle}>
-          {children || content}
+          {renderChildrenContent}
         </span>
       );
     }

src/avatar/index.tsx

@@ -1,9 +1,12 @@
+import './style/index.js';
+
 import _Avatar from './avatar';
 import _AvatarGroup from './avatar-group';
 
-export type { TdAvatarGroupProps } from './type';
 export type { AvatarProps } from './avatar';
 export const Avatar = _Avatar;
 export const AvatarGroup = _AvatarGroup;
 
 export default Avatar;
+
+export * from './type';

src/avatar/style/index.ts

@@ -1,10 +1,9 @@
 import { css, globalCSS } from 'omi';
 
 import avatarStyle from '../../_common/style/web/components/avatar/_index.less';
-import theme from '../../_common/style/web/theme/_index.less';
 
 export const styleSheet = css`
-  ${avatarStyle} + ${theme}
+  ${avatarStyle}
 `;
 
 globalCSS(styleSheet);