Merge branch 'master' of https://github.com/ant-design/test2

mock/api.js

@@ -176,7 +176,15 @@ export const getActivities = [
       name: '林东东',
       avatar: imgMap.a,
     },
-    action: '在 [高逼格设计天团](http://github.com/) 新建项目 [六月迭代](http://github.com/)',
+    group: {
+      name: '高逼格设计天团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
   {
     id: 'trend-2',
@@ -185,7 +193,15 @@ export const getActivities = [
       name: '付小小',
       avatar: imgMap.c,
     },
-    action: '在 [高逼格设计天团](http://github.com/) 新建项目 [六月迭代](http://github.com/)',
+    group: {
+      name: '高逼格设计天团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
   {
     id: 'trend-3',
@@ -194,7 +210,15 @@ export const getActivities = [
       name: '曲丽丽',
       avatar: imgMap.b,
     },
-    action: '在 [中二少女团](http://github.com/) 新建项目 [六月迭代](http://github.com/)',
+    group: {
+      name: '中二少女团',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '六月迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
   {
     id: 'trend-4',
@@ -203,7 +227,11 @@ export const getActivities = [
       name: '周星星',
       avatar: imgMap.c,
     },
-    action: '在 [5 月日常迭代](http://github.com/) 更新至已发布状态',
+    project: {
+      name: '5 月日常迭代',
+      link: 'http://github.com/',
+    },
+    template: '将 @{project} 更新至已发布状态',
   },
   {
     id: 'trend-5',
@@ -212,7 +240,15 @@ export const getActivities = [
       name: '朱偏右',
       avatar: imgMap.a,
     },
-    action: '在 [工程效能](http://github.com/) 发布了 [留言](http://github.com/)',
+    project: {
+      name: '工程效能',
+      link: 'http://github.com/',
+    },
+    comment: {
+      name: '留言',
+      link: 'http://github.com/',
+    },
+    template: '在 @{project} 发布了 @{comment}',
   },
   {
     id: 'trend-6',
@@ -221,7 +257,15 @@ export const getActivities = [
       name: '乐哥',
       avatar: imgMap.d,
     },
-    action: '在 [程序员日常](http://github.com/) 新建项目 [品牌迭代](http://github.com/)',
+    group: {
+      name: '程序员日常',
+      link: 'http://github.com/',
+    },
+    project: {
+      name: '品牌迭代',
+      link: 'http://github.com/',
+    },
+    template: '在 @{group} 新建项目 @{project}',
   },
 ];
 

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/Dashboard/Workplace.js

@@ -96,10 +96,43 @@ export default class Workplace extends PureComponent {
     });
   }
 
+  renderActivities() {
+    const {
+      activities: { list },
+    } = this.props;
+    return list.map((item) => {
+      const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
+        if (item[key]) {
+          return <a href={item[key].link} key={item[key].name}>{item[key].name}</a>;
+        }
+        return key;
+      });
+      return (
+        <List.Item key={item.id}>
+          <List.Item.Meta
+            avatar={<Avatar src={item.user.avatar} />}
+            title={
+              <span>
+                <a className={styles.username}>{item.user.name}</a>
+                &nbsp;
+                <span className={styles.event}>{events}</span>
+              </span>
+            }
+            description={
+              <span className={styles.datetime} title={item.updatedAt}>
+                {moment(item.updatedAt).fromNow()}
+              </span>
+            }
+          />
+        </List.Item>
+      );
+    });
+  }
+
   render() {
     const {
       project: { loading: projectLoading, notice },
-      activities: { loading: activitiesLoading, list: activitiesList },
+      activities: { loading: activitiesLoading },
       chart: { radarData },
     } = this.props;
 
@@ -183,29 +216,7 @@ export default class Workplace extends PureComponent {
             >
               <List loading={activitiesLoading} size="large">
                 <div className={styles.activitiesList}>
-                  {
-                    activitiesList.map(item => (
-                      <List.Item key={item.id}>
-                        <List.Item.Meta
-                          avatar={<Avatar src={item.user.avatar} />}
-                          title={
-                            <span>
-                              <a className={styles.username}>{item.user.name}</a>
-                              &nbsp;
-                              <span className={styles.operation}>
-                                在 <a>xx</a> 新建了项目 <a>xxxx</a>
-                              </span>
-                            </span>
-                          }
-                          description={
-                            <span className={styles.datetime} title={item.updatedAt}>
-                              {moment(item.updatedAt).fromNow()}
-                            </span>
-                          }
-                        />
-                      </List.Item>
-                    ))
-                  }
+                  {this.renderActivities()}
                 </div>
               </List>
             </Card>

src/routes/Dashboard/Workplace.less

@@ -6,7 +6,7 @@
   .username {
     color: @text-color;
   }
-  .operation {
+  .event {
     font-weight: normal;
   }
 }

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>

src/routes/List/SearchList.less

@@ -44,7 +44,7 @@
   height: 1px;
 }
 .selfTrigger {
-  margin-left: 24px;
+  margin-left: 12px;
 }
 
 @media screen and (max-width: @screen-xs) {