diff --git a/src/components/AvatarList/demo/maxLength.md b/src/components/AvatarList/demo/maxLength.md new file mode 100644 index 0000000000000000000000000000000000000000..76c6b421cb0b976e2b0752a61522fca1f9a747b6 --- /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 5b9352ef58996f5c5bcfe8efd3c7cdd0877f7dc3..f49ca010d9fe19febd4eaed391278012109dd444 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 862446f27f139ae331722aa3a6d28003f2aa2697..7fc39cc2b72efe91689637bca3603eeb3f2634cf 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 6fc59273c41db5cc279646c34b6da685f50ec48a..9af32bcfdaea12c35cdaabda302be4b57622aafd 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 8660ba4352eb91434fe68ddbbd356303cc2a170e..31d670565bd82fe8b08138d5dfa1d8082682aaa8 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 0000000000000000000000000000000000000000..2b5bc438d882fc608a1e25869118e01c38a4484c --- /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 4ec0c136adb883c9cef94a8cbddfc33fcc831569..bdab181ce0ed6f1ff8d07422672085410033a815 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 | - |