diff --git a/mock/api.js b/mock/api.js index ddbf3bc0416d0a0df818109315bb8841cd628aa9..b444b47c14f629841c97559a711ba5cc8da198f8 100644 --- a/mock/api.js +++ b/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}', }, ]; diff --git a/src/components/TagSelect/demo/expandable.md b/src/components/TagSelect/demo/expandable.md new file mode 100644 index 0000000000000000000000000000000000000000..72df4e828174310d9facfeda1649b74385ef8924 --- /dev/null +++ b/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( + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 + +, mountNode); +```` diff --git a/src/components/TagSelect/demo/simple.md b/src/components/TagSelect/demo/simple.md index c081e7943dc79f63808d45eb66339a03fc182c59..9e7a13a495d53997b1848d4e04d44f85fd6d1bbf 100644 --- a/src/components/TagSelect/demo/simple.md +++ b/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( - 类目一 - 类目二 - 类目三 - 类目四 - - 类目五 - 类目六 - + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 , mountNode); ```` diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js index 7394152f93eb59cb9cdfbf4f78ef1483f06237ab..620171430ffb7f9c1d143407bd9d55f3a9ef7b7b 100644 --- a/src/components/TagSelect/index.js +++ b/src/components/TagSelect/index.js @@ -19,13 +19,6 @@ TagSelectOption.defaultProps = { displayName: 'TagSelectOption', }; -const TagSelectExpand = ({ children }) => ( -
{children}
-); -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 (
-
- - 全部 - - { - 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 && ( - - { expand ? '收起' : '展开'} - - ) - } -
+ + 全部 + + { + 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 && ( -
- { - expandNode.props.children.map(child => React.cloneElement(child, { - key: `tag-select-${child.props.value}`, - checked: checkedTags.indexOf(child.props.value) > -1, - onChange: this.handleTagChange, - })) - } -
+ expandable && ( + + { expand ? '收起' : '展开'} + ) }
@@ -165,6 +122,5 @@ class TagSelect extends PureComponent { } TagSelect.Option = TagSelectOption; -TagSelect.Expand = TagSelectExpand; export default TagSelect; diff --git a/src/components/TagSelect/index.less b/src/components/TagSelect/index.less index bc02cc89032c2d13c873ec6d23a81ae780cd0d63..ae1941fb8b65b3b330701ee111fb4ebed3b26763 100644 --- a/src/components/TagSelect/index.less +++ b/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; -} - diff --git a/src/components/TagSelect/index.md b/src/components/TagSelect/index.md index 72f8d3827d9912efab094449de9e48495a66b34c..59ab8f311b1052ba603989c294cdbf9c96453a5d 100644 --- a/src/components/TagSelect/index.md +++ b/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 | diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js index 935a3a58d4abe2e077cf903b60629bf6b257695f..ba1bd0868fc37d493bfdc7e8f8f15e01ca9f0382 100644 --- a/src/routes/Dashboard/Workplace.js +++ b/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 {item[key].name}; + } + return key; + }); + return ( + + } + title={ + + {item.user.name} +   + {events} + + } + description={ + + {moment(item.updatedAt).fromNow()} + + } + /> + + ); + }); + } + 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 { >
- { - activitiesList.map(item => ( - - } - title={ - - {item.user.name} -   - - 在 xx 新建了项目 xxxx - - - } - description={ - - {moment(item.updatedAt).fromNow()} - - } - /> - - )) - } + {this.renderActivities()}
diff --git a/src/routes/Dashboard/Workplace.less b/src/routes/Dashboard/Workplace.less index 0174a3170b30a92b4673c8fc150171d6ad4014c5..7889bd6d01b34ee2f4c85ee6bbac3ea5468b0dce 100644 --- a/src/routes/Dashboard/Workplace.less +++ b/src/routes/Dashboard/Workplace.less @@ -6,7 +6,7 @@ .username { color: @text-color; } - .operation { + .event { font-weight: normal; } } diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js index cf4da3b1456da05295ea690d46b98a8887f199dc..595b575ace90ee36d57b6c9b0761741c849301ac 100644 --- a/src/routes/List/CoverCardList.js +++ b/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 { {getFieldDecorator('category')( - - 类目一 - 类目二 - 类目三 - 类目四 - 类目五 - 类目六 - 类目七 - 类目八 - 类目九 - 类目十 - - 类目十一 - 类目十二 - + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 )} diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js index a8523eac4a37f958526f6344f05a154b9d6b59d6..2bc3bb669020fb9840faf48ae5536bd9f283f63b 100644 --- a/src/routes/List/FilterCardList.js +++ b/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 { {getFieldDecorator('category')( - - 类目一 - 类目二 - 类目三 - 类目四 - - 类目五 - 类目六 - + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 )} diff --git a/src/routes/List/SearchList.js b/src/routes/List/SearchList.js index a37f21e82eb9247246d8a10ea165547ceaa04184..555be3195d91b3597f944c86c6ad52e34dc92380 100644 --- a/src/routes/List/SearchList.js +++ b/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 { {getFieldDecorator('category')( - - 类目一 - 类目二 - 类目三 - 类目四 - - 类目五 - 类目六 - + + 类目一 + 类目二 + 类目三 + 类目四 + 类目五 + 类目六 + 类目七 + 类目八 + 类目九 + 类目十 + 类目十一 + 类目十二 )} diff --git a/src/routes/List/SearchList.less b/src/routes/List/SearchList.less index 3cb0d2816419c690352bebf2c557d957418f6812..6fb88e60b7419fd414404d9945c5b66bee119126 100644 --- a/src/routes/List/SearchList.less +++ b/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) {