feat: 新增avatar组件

Author: zj2015262624

package.json

@@ -176,6 +176,7 @@
     "react-transition-group": "~4.4.1",
     "tdesign-icons-react": "~0.0.5",
     "tslib": "~2.2.0",
+    "use-resize-observer": "^8.0.0",
     "uuid": "~8.3.2",
     "validator": "~13.7.0"
   }

site/site.config.js

@@ -245,6 +245,13 @@ export default {
       name: 'Data',
       type: 'component', // 组件文档
       children: [
+        {
+          title: 'Avatar 头像',
+          name: 'avatar',
+          docType: 'data',
+          path: '/react/components/avatar',
+          component: () => import('tdesign-react/avatar/README.md'),
+        },
         {
           title: 'Badge 徽标数',
           name: 'badge',

src/avatar/Avatar.tsx

@@ -0,0 +1,121 @@
+import React, { forwardRef, useRef, useState, useEffect, useContext } from 'react';
+import useResizeObserver from 'use-resize-observer';
+import classNames from 'classnames';
+import useConfig from '../_util/useConfig';
+import useCommonClassName from '../_util/useCommonClassName';
+import composeRefs from '../_util/composeRefs';
+import { TdAvatarProps } from './type';
+import { StyledProps } from '../common';
+import AvatarContext from './AvatarContext';
+
+export interface AvatarProps extends TdAvatarProps, StyledProps {
+  children?: React.ReactNode;
+}
+const Avatar = forwardRef<HTMLElement, AvatarProps>((props, ref) => {
+  const {
+    alt,
+    hideOnLoadFailed = false,
+    icon,
+    image,
+    shape = 'circle',
+    size: avatarSize = 'default',
+    onError,
+    children,
+    style,
+    className,
+    ...avatarProps
+  } = props;
+  const groupSize = useContext(AvatarContext);
+  const { classPrefix } = useConfig();
+  const [scale, setScale] = useState(1);
+  const [isImgExist, setIsImgExist] = useState(true);
+  const avatarRef = useRef<HTMLElement>(null);
+  const avatarChildrenRef = useRef<HTMLElement>(null);
+  const size = avatarSize === 'default' ? groupSize : avatarSize;
+  const gap = 4;
+  const handleScale = () => {
+    if (!avatarChildrenRef.current || !avatarRef.current) {
+      return;
+    }
+    const childrenWidth = avatarChildrenRef.current.offsetWidth;
+    const avatarWidth = avatarRef.current.offsetWidth;
+
+    if (childrenWidth !== 0 && avatarWidth !== 0) {
+      if (gap * 2 < avatarWidth) {
+        setScale(avatarWidth - gap * 2 < childrenWidth ? (avatarWidth - gap * 2) / childrenWidth : 1);
+      }
+    }
+  };
+  const { ref: observerRef } = useResizeObserver<HTMLDivElement>({
+    onResize: handleScale,
+  });
+
+  const handleImgLoadError = () => {
+    onError && onError();
+    !hideOnLoadFailed && setIsImgExist(false);
+  };
+
+  useEffect(() => {
+    setIsImgExist(true);
+    setScale(1);
+  }, [props.image]);
+
+  useEffect(() => {
+    handleScale();
+  }, []);
+
+  const { SIZE } = useCommonClassName();
+  const numSizeStyle: React.CSSProperties =
+    size && !SIZE[size]
+      ? {
+          width: size,
+          height: size,
+          fontSize: `${Number.parseInt(size, 10) / 2}px`,
+        }
+      : {};
+  const imageStyle: React.CSSProperties =
+    size && !SIZE[size]
+      ? {
+          width: size,
+          height: size,
+        }
+      : {};
+
+  const preClass = `${classPrefix}-avatar`;
+
+  const avatarClass = classNames(preClass, className, {
+    [SIZE[size]]: !!SIZE[size],
+    [`${preClass}--${shape}`]: !!shape,
+    [`${preClass}-icon`]: !!icon,
+  });
+
+  let content;
+  if (image && isImgExist) {
+    content = <img src={image} alt={alt} style={imageStyle} onError={handleImgLoadError} />;
+  } else if (icon) {
+    content = icon;
+  } else {
+    const childrenStyle: React.CSSProperties = {
+      transform: `scale(${scale})`,
+    };
+    content = (
+      <span ref={composeRefs(ref, avatarChildrenRef, observerRef) as any} style={childrenStyle}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <div
+      ref={composeRefs(ref, avatarRef) as any}
+      className={avatarClass}
+      style={{ ...numSizeStyle, ...style }}
+      {...avatarProps}
+    >
+      {content}
+    </div>
+  );
+});
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;

src/avatar/AvatarContext.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+const AvatarContext = React.createContext('default');
+
+export interface AvatarContextProps {
+  size?: string;
+}
+
+export const AvatarContextProvider: React.FC<AvatarContextProps> = ({ children, size }) => (
+  <AvatarContext.Consumer>
+    {(inputSize) => <AvatarContext.Provider value={size || inputSize}>{children}</AvatarContext.Provider>}
+  </AvatarContext.Consumer>
+);
+
+export default AvatarContext;

src/avatar/Group.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import classNames from 'classnames';
+import Avatar from './Avatar';
+import Popup from '../popup/Popup';
+import useConfig from '../_util/useConfig';
+import { AvatarContextProvider } from './AvatarContext';
+import { TdAvatarGroupProps } from './type';
+import { StyledProps } from '../common';
+
+export interface AvatarGroupProps extends TdAvatarGroupProps, StyledProps {
+  children?: React.ReactNode;
+}
+const Group: React.FC<AvatarGroupProps> = (props) => {
+  const { classPrefix } = useConfig();
+  const preClass = `${classPrefix}-avatar`;
+  const {
+    className,
+    cascading = 'right-up',
+    collapseAvatar,
+    max,
+    placement,
+    popupProps,
+    size = 'medium',
+    children,
+    ...avatarGroupProps
+  } = props;
+
+  const childrenList = React.Children.toArray(children);
+  let allChildrenList;
+  if (childrenList.length > 0) {
+    allChildrenList = childrenList.map((child: JSX.Element, index: number) =>
+      React.cloneElement(child, { key: `avatar-group-item-${index}`, ...child.props }),
+    );
+  }
+  const groupClass = classNames(`${preClass}-group`, className, {
+    [`${preClass}--offset-right`]: cascading === 'right-up',
+    [`${preClass}--offset-left`]: cascading === 'left-up',
+  });
+  const childrenCount = childrenList.length;
+  if (max && childrenCount > max) {
+    const showList = allChildrenList.slice(0, max);
+    const hiddenList = allChildrenList.slice(max, childrenCount);
+    const popupNum = `+${childrenCount - max}`;
+    const popupMergeProps = { ...popupProps, placement };
+    const popupNodes = popupProps ? (
+      <Popup {...popupMergeProps}>
+        {collapseAvatar ? <Avatar size={size}>{collapseAvatar}</Avatar> : <Avatar size={size}>{popupNum}</Avatar>}
+      </Popup>
+    ) : (
+      <Popup key="avatar-popup-key" placement={placement} content={hiddenList} trigger="hover" showArrow>
+        {collapseAvatar ? <Avatar size={size}>{collapseAvatar}</Avatar> : <Avatar size={size}>{popupNum}</Avatar>}
+      </Popup>
+    );
+    showList.push(popupNodes);
+    return (
+      <AvatarContextProvider size={size}>
+        <div className={groupClass}>{showList}</div>
+      </AvatarContextProvider>
+    );
+  }
+  return (
+    <AvatarContextProvider size={size}>
+      <div className={groupClass} {...avatarGroupProps}>
+        {allChildrenList}
+      </div>
+    </AvatarContextProvider>
+  );
+};
+export default Group;