diff --git a/src/components/TagSelect/demo/expandable.md b/src/components/TagSelect/demo/expandable.md new file mode 100644 index 0000000000000000000000000000000000000000..72df4e828174310d9facfeda1649b74385ef8924 --- /dev/null +++ b/src/components/TagSelect/demo/expandable.md @@ -0,0 +1,33 @@ +--- +order: 1 +title: 可展开和收起 +--- + +使用 `expandable` 属性，让标签组可以收起，避免过高。 + +````jsx +import TagSelect from 'ant-design-pro/lib/TagSelect'; + +const TagExpand = TagSelect.Expand; + +function handleFormSubmit(checkedValue) { + console.log(checkedValue); +} + +ReactDOM.render( + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 + +, mountNode); +```` diff --git a/src/components/TagSelect/demo/simple.md b/src/components/TagSelect/demo/simple.md index c081e7943dc79f63808d45eb66339a03fc182c59..9e7a13a495d53997b1848d4e04d44f85fd6d1bbf 100644 --- a/src/components/TagSelect/demo/simple.md +++ b/src/components/TagSelect/demo/simple.md @@ -1,6 +1,6 @@ --- order: 0 -title: 基础样例 +title: 基础样例 --- 结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。 @@ -8,23 +8,18 @@ title: 基础样例 ````jsx import TagSelect from 'ant-design-pro/lib/TagSelect'; -const TagOption = TagSelect.Option; -const TagExpand = TagSelect.Expand; - function handleFormSubmit(checkedValue) { console.log(checkedValue); } ReactDOM.render( - 类目一 - 类目二 - 类目三 - 类目四 - - 类目五 - 类目六 - + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 , mountNode); ```` diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js index 7394152f93eb59cb9cdfbf4f78ef1483f06237ab..620171430ffb7f9c1d143407bd9d55f3a9ef7b7b 100644 --- a/src/components/TagSelect/index.js +++ b/src/components/TagSelect/index.js @@ -19,13 +19,6 @@ TagSelectOption.defaultProps = { displayName: 'TagSelectOption', }; -const TagSelectExpand = ({ children }) => ( -
{children}
-); -TagSelectExpand.defaultProps = { - displayName: 'TagSelectExpand', -}; - class TagSelect extends PureComponent { static defaultProps = { initialValue: [], @@ -40,18 +33,13 @@ class TagSelect extends PureComponent { onSelectAll = (checked) => { const { onChange } = this.props; let checkedTags = []; - let expanded = this.state.expand; - if (checked) { - const tags = this.getAllTags(); - checkedTags = tags.list; - expanded = tags.expand; + checkedTags = this.getAllTags(); } this.setState({ checkedAll: checked, checkedTags, - expand: expanded, }); if (onChange) { @@ -60,21 +48,11 @@ class TagSelect extends PureComponent { } getAllTags() { - let { expand } = this.state; const { children } = this.props; - - let checkedTags = children.filter(child => child.props.displayName === 'TagSelectOption').map(child => child.props.value); - const expandChild = children.filter(child => child.props.displayName === 'TagSelectExpand')[0]; - if (expandChild) { - checkedTags = checkedTags.concat( - expandChild.props.children.map(child => child.props.value) - ); - expand = true; - } - return { - list: checkedTags, - expand, - }; + const checkedTags = children + .filter(child => child.props.displayName === 'TagSelectOption') + .map(child => child.props.value); + return checkedTags; } handleTagChange = (value, checked) => { @@ -90,13 +68,8 @@ class TagSelect extends PureComponent { const tags = this.getAllTags(); - let checkedAll = false; - if (tags.list.length === checkedTags.length) { - checkedAll = true; - } - this.setState({ - checkedAll, + checkedAll: tags.length === checkedTags.length, checkedTags, }); @@ -113,50 +86,34 @@ class TagSelect extends PureComponent { render() { const { checkedTags, checkedAll, expand } = this.state; - const { children, className, style } = this.props; - - const expandNode = children.filter(child => child.props.displayName === 'TagSelectExpand')[0]; + const { children, className, style, expandable } = this.props; const cls = classNames(styles.tagSelect, className, { - [styles.expandTag]: expandNode, + [styles.hasExpandTag]: expandable, + [styles.expanded]: expand, }); return (
-
- - 全部 - - { - children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, { - key: `tag-select-${child.props.value}`, - checked: checkedTags.indexOf(child.props.value) > -1, - onChange: this.handleTagChange, - })) - } - { - expandNode && ( - - { expand ? '收起' : '展开'} - - ) - } -
+ + 全部 + + { + children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, { + key: `tag-select-${child.props.value}`, + checked: checkedTags.indexOf(child.props.value) > -1, + onChange: this.handleTagChange, + })) + } { - expandNode && ( -
- { - expandNode.props.children.map(child => React.cloneElement(child, { - key: `tag-select-${child.props.value}`, - checked: checkedTags.indexOf(child.props.value) > -1, - onChange: this.handleTagChange, - })) - } -
+ expandable && ( + + { expand ? '收起' : '展开'} + ) }
@@ -165,6 +122,5 @@ class TagSelect extends PureComponent { } TagSelect.Option = TagSelectOption; -TagSelect.Expand = TagSelectExpand; export default TagSelect; diff --git a/src/components/TagSelect/index.less b/src/components/TagSelect/index.less index bc02cc89032c2d13c873ec6d23a81ae780cd0d63..ae1941fb8b65b3b330701ee111fb4ebed3b26763 100644 --- a/src/components/TagSelect/index.less +++ b/src/components/TagSelect/index.less @@ -5,20 +5,18 @@ user-select: none; margin-left: -8px; position: relative; + overflow: hidden; + max-height: 32px; + transition: all .3s; :global { .ant-tag { padding: 0 8px; margin-right: 24px; } } - .expand { - transition: all 0.32s ease; - overflow: hidden; - max-height: 100px; - } - .fold { - .expand(); - max-height: 0; + &.expanded { + transition: all .3s; + max-height: 200px; } .trigger { position: absolute; @@ -28,8 +26,7 @@ font-size: 12px; } } + &.hasExpandTag { + padding-right: 50px; + } } -.expandTag { - padding-right: 50px; -} - diff --git a/src/components/TagSelect/index.md b/src/components/TagSelect/index.md index 72f8d3827d9912efab094449de9e48495a66b34c..59ab8f311b1052ba603989c294cdbf9c96453a5d 100644 --- a/src/components/TagSelect/index.md +++ b/src/components/TagSelect/index.md @@ -1,11 +1,11 @@ --- type: General -title: TagSelect +title: TagSelect subtitle: 标签选择器 cols: 1 --- -倒计时组件。 +一组标签选择器，带全选/展开/收起功能。 ## API @@ -14,13 +14,4 @@ cols: 1 | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | onChange | 标签选择的回调函数 | Function(checkedTags) | | - -### TagSelect.TagOption - -| 参数 | 说明 | 类型 | 默认值 | -|----------|------------------------------------------|-------------|-------| -| value | 对应的值 | string | | - -### TagSelect.TagExpand - -包裹在 `TagSelect.TagExpand` 的元素会被折叠。 +| expandable | 是否展示 `展开/收起` 按钮 | Boolean | false | diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js index cf4da3b1456da05295ea690d46b98a8887f199dc..595b575ace90ee36d57b6c9b0761741c849301ac 100644 --- a/src/routes/List/CoverCardList.js +++ b/src/routes/List/CoverCardList.js @@ -13,8 +13,6 @@ import styles from './CoverCardList.less'; const { Option } = Select; const FormItem = Form.Item; -const TagOption = TagSelect.Option; -const TagExpand = TagSelect.Expand; /* eslint react/no-array-index-key: 0 */ @Form.create() @@ -156,21 +154,19 @@ export default class CoverCardList extends PureComponent { {getFieldDecorator('category')( - - 类目一 - 类目二 - 类目三 - 类目四 - 类目五 - 类目六 - 类目七 - 类目八 - 类目九 - 类目十 - - 类目十一 - 类目十二 - + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 )} diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js index a8523eac4a37f958526f6344f05a154b9d6b59d6..2bc3bb669020fb9840faf48ae5536bd9f283f63b 100644 --- a/src/routes/List/FilterCardList.js +++ b/src/routes/List/FilterCardList.js @@ -12,8 +12,6 @@ import styles from './FilterCardList.less'; const { Option } = Select; const FormItem = Form.Item; -const TagOption = TagSelect.Option; -const TagExpand = TagSelect.Expand; const formatWan = (val) => { const v = val * 1; @@ -156,15 +154,19 @@ export default class FilterCardList extends PureComponent { {getFieldDecorator('category')( - - 类目一 - 类目二 - 类目三 - 类目四 - - 类目五 - 类目六 - + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 )} diff --git a/src/routes/List/SearchList.js b/src/routes/List/SearchList.js index a37f21e82eb9247246d8a10ea165547ceaa04184..555be3195d91b3597f944c86c6ad52e34dc92380 100644 --- a/src/routes/List/SearchList.js +++ b/src/routes/List/SearchList.js @@ -11,8 +11,6 @@ import styles from './SearchList.less'; const { Option } = Select; const FormItem = Form.Item; -const TagOption = TagSelect.Option; -const TagExpand = TagSelect.Expand; @Form.create() @connect(state => ({ @@ -189,15 +187,19 @@ export default class SearchList extends Component { {getFieldDecorator('category')( - - 类目一 - 类目二 - 类目三 - 类目四 - - 类目五 - 类目六 - + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 )}