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
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(
<TagSelect onChange={handleFormSubmit}>
<TagOption value="cat1">类目一</TagOption>
<TagOption value="cat2">类目二</TagOption>
<TagOption value="cat3">类目三</TagOption>
<TagOption value="cat4">类目四</TagOption>
<TagExpand>
<TagOption value="cat5">类目五</TagOption>
<TagOption value="cat6">类目六</TagOption>
</TagExpand>
<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>
, mountNode);
````
src/components/TagSelect/index.js
View file @ 6fc6d13e
......@@ -19,13 +19,6 @@ TagSelectOption.defaultProps = {
displayName: 'TagSelectOption',
};
const TagSelectExpand = ({ children }) => (
<div>{children}</div>
);
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 (
<div className={cls} style={style}>
<div>
<CheckableTag
checked={checkedAll}
key="tag-select-__all__"
onChange={this.onSelectAll}
>
全部
</CheckableTag>
{
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 && (
<a className={styles.trigger} onClick={this.handleExpand}>
{ expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
</a>
)
}
</div>
<CheckableTag
checked={checkedAll}
key="tag-select-__all__"
onChange={this.onSelectAll}
>
全部
</CheckableTag>
{
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 && (
<div className={expand ? styles.expand : styles.fold}>
{
expandNode.props.children.map(child => React.cloneElement(child, {
key: `tag-select-${child.props.value}`,
checked: checkedTags.indexOf(child.props.value) > -1,
onChange: this.handleTagChange,
}))
}
</div>
expandable && (
<a className={styles.trigger} onClick={this.handleExpand}>
{ expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
</a>
)
}
</div>
......@@ -165,6 +122,5 @@ class TagSelect extends PureComponent {
}
TagSelect.Option = TagSelectOption;
TagSelect.Expand = TagSelectExpand;
export default TagSelect;
src/components/TagSelect/index.less
View file @ 6fc6d13e
......@@ -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;
}
src/components/TagSelect/index.md
View file @ 6fc6d13e
---
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 |
src/routes/List/CoverCardList.js
View file @ 6fc6d13e
......@@ -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 {
<StandardFormRow title="所属类目" block>
<FormItem>
{getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit}>
<TagOption value="cat1">类目一</TagOption>
<TagOption value="cat2">类目二</TagOption>
<TagOption value="cat3">类目三</TagOption>
<TagOption value="cat4">类目四</TagOption>
<TagOption value="cat5">类目五</TagOption>
<TagOption value="cat6">类目六</TagOption>
<TagOption value="cat7">类目七</TagOption>
<TagOption value="cat8">类目八</TagOption>
<TagOption value="cat9">类目九</TagOption>
<TagOption value="cat10">类目十</TagOption>
<TagExpand>
<TagOption value="cat11">类目十一</TagOption>
<TagOption value="cat12">类目十二</TagOption>
</TagExpand>
<TagSelect onChange={this.handleFormSubmit} expandable>
<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>
)}
</FormItem>
......
src/routes/List/FilterCardList.js
View file @ 6fc6d13e
......@@ -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 {
<StandardFormRow title="所属类目" block>
<FormItem>
{getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit}>
<TagOption value="cat1">类目一</TagOption>
<TagOption value="cat2">类目二</TagOption>
<TagOption value="cat3">类目三</TagOption>
<TagOption value="cat4">类目四</TagOption>
<TagExpand>
<TagOption value="cat5">类目五</TagOption>
<TagOption value="cat6">类目六</TagOption>
</TagExpand>
<TagSelect onChange={this.handleFormSubmit} expandable>
<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>
)}
</FormItem>
......
src/routes/List/SearchList.js
View file @ 6fc6d13e
......@@ -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 {
<StandardFormRow title="所属类目" block>
<FormItem>
{getFieldDecorator('category')(
<TagSelect onChange={this.handleFormSubmit}>
<TagOption value="cat1">类目一</TagOption>
<TagOption value="cat2">类目二</TagOption>
<TagOption value="cat3">类目三</TagOption>
<TagOption value="cat4">类目四</TagOption>
<TagExpand>
<TagOption value="cat5">类目五</TagOption>
<TagOption value="cat6">类目六</TagOption>
</TagExpand>
<TagSelect onChange={this.handleFormSubmit} expandable>
<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>
)}
</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