tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Refactor TagSelect

pull/37/head
afc163 9 years ago
parent
99162c7183
commit
6fc6d13ed5
8 changed files with 118 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      src/components/TagSelect/demo/expandable.md
  2. 19
      src/components/TagSelect/demo/simple.md
  3. 98
      src/components/TagSelect/index.js
  4. 21
      src/components/TagSelect/index.less
  5. 15
      src/components/TagSelect/index.md
  6. 30
      src/routes/List/CoverCardList.js
  7. 24
      src/routes/List/FilterCardList.js
  8. 24
      src/routes/List/SearchList.js

33
src/components/TagSelect/demo/expandable.md
View File

@ -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(
<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);
````

19
src/components/TagSelect/demo/simple.md
View File

@ -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(
<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);
````

98
src/components/TagSelect/index.js
View File

@ -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;

21
src/components/TagSelect/index.less
View File

@ -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;
}

15
src/components/TagSelect/index.md
View File

@ -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 |

30
src/routes/List/CoverCardList.js
View File

@ -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>

24
src/routes/List/FilterCardList.js
View File

@ -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>

24
src/routes/List/SearchList.js
View File

@ -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>

Write Preview
Loading…
Cancel
Save