@td-design/react-native/lib/module/avatar/AvatarGroup/index.js

react-native UI组件库

import React, { Children, cloneElement, isValidElement } from 'react';
import Flex from '../../flex';
import helpers from '../../helpers';
import Avatar from '../Avatar';
const {
  px
} = helpers;
const AvatarGroup = props => {
  const {
    children: childrenProp,
    max = 4,
    spacing = px(23),
    textStyle,
    backgroundColor
  } = props;
  /** 有效的自节点 */
  const children = Children.toArray(childrenProp).filter(child => {
    return /*#__PURE__*/isValidElement(child);
  });
  /** 额外的头像尾巴 */
  const extraAvatars = children.length > max ? children.length - max + 1 : 0;
  /** 头像的间距 */
  const marginLeft = -spacing;
  return /*#__PURE__*/React.createElement(Flex, null, children.slice(0, children.length - extraAvatars).map((child, index) => {
    return /*#__PURE__*/cloneElement(child, {
      containerStyle: {
        marginLeft: index === 0 ? 0 : marginLeft,
        ...child.props.containerStyle
      },
      circular: true
    });
  }), extraAvatars ? /*#__PURE__*/React.createElement(Avatar, {
    circular: true,
    containerStyle: {
      marginLeft
    },
    title: '+' + extraAvatars,
    textStyle: textStyle,
    backgroundColor: backgroundColor
  }) : null);
};
AvatarGroup.displayName = 'AvatarGroup';
export default AvatarGroup;
//# sourceMappingURL=index.js.map