From 12f47971948a18a3fc88c0b9c9a4641fe8c1f2cf Mon Sep 17 00:00:00 2001 From: Rayron Victor Date: Fri, 30 Nov 2018 01:08:34 -0300 Subject: [PATCH] AvatarList: add attribute maxLength (#2984) * AvatarList: add attribute `maxLength` that determine the number of avatar items to show. * fix markdown lint * fix markdown lint --- src/components/AvatarList/demo/maxLength.md | 24 +++++++++++++ src/components/AvatarList/index.d.ts | 2 ++ src/components/AvatarList/index.en-US.md | 16 +++++---- src/components/AvatarList/index.js | 40 +++++++++++++++------ src/components/AvatarList/index.less | 5 +++ src/components/AvatarList/index.test.js | 29 +++++++++++++++ src/components/AvatarList/index.zh-CN.md | 16 +++++---- 7 files changed, 107 insertions(+), 25 deletions(-) create mode 100644 src/components/AvatarList/demo/maxLength.md create mode 100644 src/components/AvatarList/index.test.js diff --git a/src/components/AvatarList/demo/maxLength.md b/src/components/AvatarList/demo/maxLength.md new file mode 100644 index 00000000..76c6b421 --- /dev/null +++ b/src/components/AvatarList/demo/maxLength.md @@ -0,0 +1,24 @@ +--- +order: 0 +title: + zh-CN: 要显示的最大项目 + en-US: Max Items to Show +--- + +`maxLength` attribute specifies the maximum number of items to show while `excessItemsStyle` style the excess +item component. + +````jsx +import AvatarList from 'ant-design-pro/lib/AvatarList'; + +ReactDOM.render( + + + + + + + + +, mountNode); +```` diff --git a/src/components/AvatarList/index.d.ts b/src/components/AvatarList/index.d.ts index 5b9352ef..f49ca010 100644 --- a/src/components/AvatarList/index.d.ts +++ b/src/components/AvatarList/index.d.ts @@ -3,6 +3,8 @@ import AvatarItem from './AvatarItem'; export interface IAvatarListProps { size?: 'large' | 'small' | 'mini' | 'default'; + maxLength?: number; + excessItemsStyle?: React.CSSProperties; style?: React.CSSProperties; children: React.ReactElement | Array>; } diff --git a/src/components/AvatarList/index.en-US.md b/src/components/AvatarList/index.en-US.md index 862446f2..7fc39cc2 100644 --- a/src/components/AvatarList/index.en-US.md +++ b/src/components/AvatarList/index.en-US.md @@ -10,13 +10,15 @@ A list of user's avatar for project or group member list frequently. If a large ### AvatarList -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|-------| -| size | size of list | `large`、`small` 、`mini`, `default` | `default` | +| Property | Description | Type | Default | +| ---------------- | --------------------- | ---------------------------------- | --------- | +| size | size of list | `large`、`small` 、`mini`, `default` | `default` | +| maxLength | max items to show | number | - | +| excessItemsStyle | the excess item style | CSSProperties | - | ### AvatarList.Item -| Property | Description | Type | Default | -|----------|------------------------------------------|-------------|-------| -| tips | title tips for avatar item | ReactNode | - | -| src | the address of the image for an image avatar | string | - | +| Property | Description | Type | Default | +| -------- | -------------------------------------------- | --------- | ------- | +| tips | title tips for avatar item | ReactNode | - | +| src | the address of the image for an image avatar | string | - | diff --git a/src/components/AvatarList/index.js b/src/components/AvatarList/index.js index 6fc59273..9af32bcf 100644 --- a/src/components/AvatarList/index.js +++ b/src/components/AvatarList/index.js @@ -4,12 +4,34 @@ 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, - }) - ); +const avatarSizeToClassName = size => + classNames(styles.avatarItem, { + [styles.avatarItemLarge]: size === 'large', + [styles.avatarItemSmall]: size === 'small', + [styles.avatarItemMini]: size === 'mini', + }); + +const AvatarList = ({ children, size, maxLength, excessItemsStyle, ...other }) => { + const numOfChildren = React.Children.count(children); + const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength; + + const childrenWithProps = React.Children.toArray(children) + .slice(0, numToShow) + .map(child => + React.cloneElement(child, { + size, + }) + ); + + if (numToShow < numOfChildren) { + const cls = avatarSizeToClassName(size); + + childrenWithProps.push( +
  • + {`+${numOfChildren - maxLength}`} +
    • + ); + } return (
    @@ -19,11 +41,7 @@ const AvatarList = ({ children, size, ...other }) => { }; const Item = ({ src, size, tips, onClick = () => {} }) => { - const cls = classNames(styles.avatarItem, { - [styles.avatarItemLarge]: size === 'large', - [styles.avatarItemSmall]: size === 'small', - [styles.avatarItemMini]: size === 'mini', - }); + const cls = avatarSizeToClassName(size); return (
  • diff --git a/src/components/AvatarList/index.less b/src/components/AvatarList/index.less index 8660ba43..31d67056 100644 --- a/src/components/AvatarList/index.less +++ b/src/components/AvatarList/index.less @@ -40,6 +40,11 @@ width: 20px; height: 20px; line-height: 20px; + + .ant-avatar-string { + font-size: 12px; + line-height: 18px; + } } } } diff --git a/src/components/AvatarList/index.test.js b/src/components/AvatarList/index.test.js new file mode 100644 index 00000000..2b5bc438 --- /dev/null +++ b/src/components/AvatarList/index.test.js @@ -0,0 +1,29 @@ +import React from 'react'; +import range from 'lodash/range'; +import { mount } from 'enzyme'; +import AvatarList from './index'; + +const renderItems = numItems => + range(numItems).map(i => ( + + )); + +describe('AvatarList', () => { + it('renders all items', () => { + const wrapper = mount({renderItems(4)}); + expect(wrapper.find('AvatarList').length).toBe(1); + expect(wrapper.find('Item').length).toBe(4); + expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(0); + }); + + it('renders max of 3 items', () => { + const wrapper = mount({renderItems(4)}); + expect(wrapper.find('AvatarList').length).toBe(1); + expect(wrapper.find('Item').length).toBe(3); + expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(1); + }); +}); diff --git a/src/components/AvatarList/index.zh-CN.md b/src/components/AvatarList/index.zh-CN.md index 4ec0c136..bdab181c 100644 --- a/src/components/AvatarList/index.zh-CN.md +++ b/src/components/AvatarList/index.zh-CN.md @@ -11,13 +11,15 @@ cols: 1 ### AvatarList -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | -------- | ---------------------------------- | --------- | +| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` | +| maxLength | 要显示的最大项目 | number | - | +| excessItemsStyle | 多余的项目风格 | CSSProperties | - | ### AvatarList.Item -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| tips | 头像展示文案 | ReactNode | - | -| src | 头像图片连接 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---- | ------ | --------- | --- | +| tips | 头像展示文案 | ReactNode | - | +| src | 头像图片连接 | string | - | -- GitLab