text: import React from 'react';
  import { Tooltip, Avatar } from 'antd';
  import classNames from 'classnames';
  
  import styles from './index.less';
  
  const AvatarList = ({ children, size, ...other }) => {
    const childrenWithProps = React.Children.map(children, child =>
      React.cloneElement(child, {
        size,
      })
    );
  
    return (
      <div {...other} className={styles.avatarList}>
        <ul> {childrenWithProps} </ul>
      </div>
    );
  };
  
  const Item = ({ src, size, tips, onClick = (() => {}) }) => {
    const cls = classNames(styles.avatarItem, {
      [styles.avatarItemLarge]: size === 'large',
      [styles.avatarItemSmall]: size === 'small',
      [styles.avatarItemMini]: size === 'mini',
    });
  
  
    return (
      <li className={cls} onClick={onClick} >
        {
          tips ? (
            <Tooltip title={tips}>
              <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
            </Tooltip>
          ) : <Avatar src={src} size={size} />
        }
      </li>
    );
  };
  
  AvatarList.Item = Item;
  
  export default AvatarList;
  