Refactor TagSelect

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(
+  <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

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

src/components/TagSelect/index.js

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

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

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

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

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

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