Skip to content

GitLab

A
ant-design-pro
Commit 6fc6d13e authored by afc163's avatar afc163
Browse files
Options

Refactor TagSelect

parent 99162c71
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 146 deletions
src/components/TagSelect/demo/expandable.md 0 → 100644
View file @ 6fc6d13e
---
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(
<TagSelect onChange={handleFormSubmit}>
<TagSelect.Option value="cat1">类目一</TagSelect.Option>
<TagSelect.Option value="cat2">类目二</TagSelect.Option>
<TagSelect.Option value="cat3">类目三</TagSelect.Option>
<TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagSelect.Option value="cat6">类目六</TagSelect.Option>
<TagSelect.Option value="cat7">类目七</TagSelect.Option>
<TagSelect.Option value="cat8">类目八</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option>
</TagSelect>
, mountNode);
````
src/components/TagSelect/demo/simple.md
View file @ 6fc6d13e
--- ---
order: 0 order: 0
title: 基础样例 title: 基础样例
--- ---
结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。 结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。
...@@ -8,23 +8,18 @@ title: 基础样例 ...@@ -8,23 +8,18 @@ title: 基础样例
````jsx ````jsx
import TagSelect from 'ant-design-pro/lib/TagSelect'; import TagSelect from 'ant-design-pro/lib/TagSelect';
const TagOption = TagSelect.Option;
const TagExpand = TagSelect.Expand;
function handleFormSubmit(checkedValue) { function handleFormSubmit(checkedValue) {
console.log(checkedValue); console.log(checkedValue);
} }
ReactDOM.render( ReactDOM.render(
<TagSelect onChange={handleFormSubmit}> <TagSelect onChange={handleFormSubmit}>
<TagOption value="cat1">类目一</TagOption> <TagSelect.Option value="cat1">类目一</TagSelect.Option>
<TagOption value="cat2">类目二</TagOption> <TagSelect.Option value="cat2">类目二</TagSelect.Option>
<TagOption value="cat3">类目三</TagOption> <TagSelect.Option value="cat3">类目三</TagSelect.Option>
<TagOption value="cat4">类目四</TagOption> <TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagExpand> <TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagOption value="cat5">类目五</TagOption> <TagSelect.Option value="cat6">类目六</TagSelect.Option>
<TagOption value="cat6">类目六</TagOption>
</TagExpand>
</TagSelect> </TagSelect>
, mountNode); , mountNode);
```` ````
src/components/TagSelect/index.js
View file @ 6fc6d13e
...@@ -19,13 +19,6 @@ TagSelectOption.defaultProps = { ...@@ -19,13 +19,6 @@ TagSelectOption.defaultProps = {
displayName: 'TagSelectOption', displayName: 'TagSelectOption',
}; };
const TagSelectExpand = ({ children }) => (
<div>{children}</div>
);
TagSelectExpand.defaultProps = {
displayName: 'TagSelectExpand',
};
class TagSelect extends PureComponent { class TagSelect extends PureComponent {
static defaultProps = { static defaultProps = {
initialValue: [], initialValue: [],
...@@ -40,18 +33,13 @@ class TagSelect extends PureComponent { ...@@ -40,18 +33,13 @@ class TagSelect extends PureComponent {
onSelectAll = (checked) => { onSelectAll = (checked) => {
const { onChange } = this.props; const { onChange } = this.props;
let checkedTags = []; let checkedTags = [];
let expanded = this.state.expand;
if (checked) { if (checked) {
const tags = this.getAllTags(); checkedTags = this.getAllTags();
checkedTags = tags.list;
expanded = tags.expand;
} }
this.setState({ this.setState({
checkedAll: checked, checkedAll: checked,
checkedTags, checkedTags,
expand: expanded,
}); });
if (onChange) { if (onChange) {
...@@ -60,21 +48,11 @@ class TagSelect extends PureComponent { ...@@ -60,21 +48,11 @@ class TagSelect extends PureComponent {
} }
getAllTags() { getAllTags() {
let { expand } = this.state;
const { children } = this.props; const { children } = this.props;
const checkedTags = children
let checkedTags = children.filter(child => child.props.displayName === 'TagSelectOption').map(child => child.props.value); .filter(child => child.props.displayName === 'TagSelectOption')
const expandChild = children.filter(child => child.props.displayName === 'TagSelectExpand')[0]; .map(child => child.props.value);
if (expandChild) { return checkedTags;
checkedTags = checkedTags.concat(
expandChild.props.children.map(child => child.props.value)
);
expand = true;
}
return {
list: checkedTags,
expand,
};
} }
handleTagChange = (value, checked) => { handleTagChange = (value, checked) => {
...@@ -90,13 +68,8 @@ class TagSelect extends PureComponent { ...@@ -90,13 +68,8 @@ class TagSelect extends PureComponent {
const tags = this.getAllTags(); const tags = this.getAllTags();
let checkedAll = false;
if (tags.list.length === checkedTags.length) {
checkedAll = true;
}
this.setState({ this.setState({
checkedAll, checkedAll: tags.length === checkedTags.length,
checkedTags, checkedTags,
}); });
...@@ -113,50 +86,34 @@ class TagSelect extends PureComponent { ...@@ -113,50 +86,34 @@ class TagSelect extends PureComponent {
render() { render() {
const { checkedTags, checkedAll, expand } = this.state; const { checkedTags, checkedAll, expand } = this.state;
const { children, className, style } = this.props; const { children, className, style, expandable } = this.props;
const expandNode = children.filter(child => child.props.displayName === 'TagSelectExpand')[0];
const cls = classNames(styles.tagSelect, className, { const cls = classNames(styles.tagSelect, className, {
[styles.expandTag]: expandNode, [styles.hasExpandTag]: expandable,
[styles.expanded]: expand,
}); });
return ( return (
<div className={cls} style={style}> <div className={cls} style={style}>
<div> <CheckableTag
<CheckableTag checked={checkedAll}
checked={checkedAll} key="tag-select-__all__"
key="tag-select-__all__" onChange={this.onSelectAll}
onChange={this.onSelectAll} >
> 全部
全部 </CheckableTag>
</CheckableTag> {
{ children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, {
children.filter(child => child.props.displayName === 'TagSelectOption').map(child => React.cloneElement(child, { key: `tag-select-${child.props.value}`,
key: `tag-select-${child.props.value}`, checked: checkedTags.indexOf(child.props.value) > -1,
checked: checkedTags.indexOf(child.props.value) > -1, onChange: this.handleTagChange,
onChange: this.handleTagChange, }))
})) }
}
{
expandNode && (
<a className={styles.trigger} onClick={this.handleExpand}>
{ expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
</a>
)
}
</div>
{ {
expandNode && ( expandable && (
<div className={expand ? styles.expand : styles.fold}> <a className={styles.trigger} onClick={this.handleExpand}>
{ { expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
expandNode.props.children.map(child => React.cloneElement(child, { </a>
key: `tag-select-${child.props.value}`,
checked: checkedTags.indexOf(child.props.value) > -1,
onChange: this.handleTagChange,
}))
}
</div>
) )
} }
</div> </div>
...@@ -165,6 +122,5 @@ class TagSelect extends PureComponent { ...@@ -165,6 +122,5 @@ class TagSelect extends PureComponent {
} }
TagSelect.Option = TagSelectOption; TagSelect.Option = TagSelectOption;
TagSelect.Expand = TagSelectExpand;
export default TagSelect; export default TagSelect;
src/components/TagSelect/index.less
View file @ 6fc6d13e
...@@ -5,20 +5,18 @@ ...@@ -5,20 +5,18 @@
user-select: none; user-select: none;
margin-left: -8px; margin-left: -8px;
position: relative; position: relative;
overflow: hidden;
max-height: 32px;
transition: all .3s;
:global { :global {
.ant-tag { .ant-tag {
padding: 0 8px; padding: 0 8px;
margin-right: 24px; margin-right: 24px;
} }
} }
.expand { &.expanded {
transition: all 0.32s ease; transition: all .3s;
overflow: hidden; max-height: 200px;
max-height: 100px;
}
.fold {
.expand();
max-height: 0;
} }
.trigger { .trigger {
position: absolute; position: absolute;
...@@ -28,8 +26,7 @@ ...@@ -28,8 +26,7 @@
font-size: 12px; font-size: 12px;
} }
} }
&.hasExpandTag {
padding-right: 50px;
}
} }
.expandTag {
padding-right: 50px;
}
src/components/TagSelect/index.md
View file @ 6fc6d13e
--- ---
type: General type: General
title: TagSelect title: TagSelect
subtitle: 标签选择器 subtitle: 标签选择器
cols: 1 cols: 1
--- ---
倒计时组件。 一组标签选择器，带全选/展开/收起功能。
## API ## API
...@@ -14,13 +14,4 @@ cols: 1 ...@@ -14,13 +14,4 @@ cols: 1
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------| |----------|------------------------------------------|-------------|-------|
| onChange | 标签选择的回调函数 | Function(checkedTags) | | | onChange | 标签选择的回调函数 | Function(checkedTags) | |
| expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
### TagSelect.TagOption
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| value | 对应的值 | string | |
### TagSelect.TagExpand
包裹在 `TagSelect.TagExpand` 的元素会被折叠。
src/routes/List/CoverCardList.js
View file @ 6fc6d13e
...@@ -13,8 +13,6 @@ import styles from './CoverCardList.less'; ...@@ -13,8 +13,6 @@ import styles from './CoverCardList.less';
const { Option } = Select; const { Option } = Select;
const FormItem = Form.Item; const FormItem = Form.Item;
const TagOption = TagSelect.Option;
const TagExpand = TagSelect.Expand;
/* eslint react/no-array-index-key: 0 */ /* eslint react/no-array-index-key: 0 */
@Form.create() @Form.create()
...@@ -156,21 +154,19 @@ export default class CoverCardList extends PureComponent { ...@@ -156,21 +154,19 @@ export default class CoverCardList extends PureComponent {
<StandardFormRow title="所属类目" block> <StandardFormRow title="所属类目" block>
<FormItem> <FormItem>
{getFieldDecorator('category')( {getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit}> <TagSelect onChange={this.handleFormSubmit} expandable>
<TagOption value="cat1">类目一</TagOption> <TagSelect.Option value="cat1">类目一</TagSelect.Option>
<TagOption value="cat2">类目二</TagOption> <TagSelect.Option value="cat2">类目二</TagSelect.Option>
<TagOption value="cat3">类目三</TagOption> <TagSelect.Option value="cat3">类目三</TagSelect.Option>
<TagOption value="cat4">类目四</TagOption> <TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagOption value="cat5">类目五</TagOption> <TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagOption value="cat6">类目六</TagOption> <TagSelect.Option value="cat6">类目六</TagSelect.Option>
<TagOption value="cat7">类目七</TagOption> <TagSelect.Option value="cat7">类目七</TagSelect.Option>
<TagOption value="cat8">类目八</TagOption> <TagSelect.Option value="cat8">类目八</TagSelect.Option>
<TagOption value="cat9">类目九</TagOption> <TagSelect.Option value="cat9">类目九</TagSelect.Option>
<TagOption value="cat10">类目十</TagOption> <TagSelect.Option value="cat10">类目十</TagSelect.Option>
<TagExpand> <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
<TagOption value="cat11">类目十一</TagOption> <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
<TagOption value="cat12">类目十二</TagOption>
</TagExpand>
</TagSelect> </TagSelect>
)} )}
</FormItem> </FormItem>
......
src/routes/List/FilterCardList.js
View file @ 6fc6d13e
...@@ -12,8 +12,6 @@ import styles from './FilterCardList.less'; ...@@ -12,8 +12,6 @@ import styles from './FilterCardList.less';
const { Option } = Select; const { Option } = Select;
const FormItem = Form.Item; const FormItem = Form.Item;
const TagOption = TagSelect.Option;
const TagExpand = TagSelect.Expand;
const formatWan = (val) => { const formatWan = (val) => {
const v = val * 1; const v = val * 1;
...@@ -156,15 +154,19 @@ export default class FilterCardList extends PureComponent { ...@@ -156,15 +154,19 @@ export default class FilterCardList extends PureComponent {
<StandardFormRow title="所属类目" block> <StandardFormRow title="所属类目" block>
<FormItem> <FormItem>
{getFieldDecorator('category')( {getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit}> <TagSelect onChange={this.handleFormSubmit} expandable>
<TagOption value="cat1">类目一</TagOption> <TagSelect.Option value="cat1">类目一</TagSelect.Option>
<TagOption value="cat2">类目二</TagOption> <TagSelect.Option value="cat2">类目二</TagSelect.Option>
<TagOption value="cat3">类目三</TagOption> <TagSelect.Option value="cat3">类目三</TagSelect.Option>
<TagOption value="cat4">类目四</TagOption> <TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagExpand> <TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagOption value="cat5">类目五</TagOption> <TagSelect.Option value="cat6">类目六</TagSelect.Option>
<TagOption value="cat6">类目六</TagOption> <TagSelect.Option value="cat7">类目七</TagSelect.Option>
</TagExpand> <TagSelect.Option value="cat8">类目八</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option>
</TagSelect> </TagSelect>
)} )}
</FormItem> </FormItem>
......
src/routes/List/SearchList.js
View file @ 6fc6d13e
...@@ -11,8 +11,6 @@ import styles from './SearchList.less'; ...@@ -11,8 +11,6 @@ import styles from './SearchList.less';
const { Option } = Select; const { Option } = Select;
const FormItem = Form.Item; const FormItem = Form.Item;
const TagOption = TagSelect.Option;
const TagExpand = TagSelect.Expand;
@Form.create() @Form.create()
@connect(state => ({ @connect(state => ({
...@@ -189,15 +187,19 @@ export default class SearchList extends Component { ...@@ -189,15 +187,19 @@ export default class SearchList extends Component {
<StandardFormRow title="所属类目" block> <StandardFormRow title="所属类目" block>
<FormItem> <FormItem>
{getFieldDecorator('category')( {getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit}> <TagSelect onChange={this.handleFormSubmit} expandable>
<TagOption value="cat1">类目一</TagOption> <TagSelect.Option value="cat1">类目一</TagSelect.Option>
<TagOption value="cat2">类目二</TagOption> <TagSelect.Option value="cat2">类目二</TagSelect.Option>
<TagOption value="cat3">类目三</TagOption> <TagSelect.Option value="cat3">类目三</TagSelect.Option>
<TagOption value="cat4">类目四</TagOption> <TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagExpand> <TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagOption value="cat5">类目五</TagOption> <TagSelect.Option value="cat6">类目六</TagSelect.Option>
<TagOption value="cat6">类目六</TagOption> <TagSelect.Option value="cat7">类目七</TagSelect.Option>
</TagExpand> <TagSelect.Option value="cat8">类目八</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option>
</TagSelect> </TagSelect>
)} )}
</FormItem> </FormItem>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment