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

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

pull/37/head
ddcat1115 9 years ago
parent
ba3104120b 47b554a373
commit
6a2fea1c06
12 changed files with 205 additions and 178 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. 56
      mock/api.js
  2. 33
      src/components/TagSelect/demo/expandable.md
  3. 19
      src/components/TagSelect/demo/simple.md
  4. 98
      src/components/TagSelect/index.js
  5. 21
      src/components/TagSelect/index.less
  6. 15
      src/components/TagSelect/index.md
  7. 59
      src/routes/Dashboard/Workplace.js
  8. 2
      src/routes/Dashboard/Workplace.less
  9. 30
      src/routes/List/CoverCardList.js
  10. 24
      src/routes/List/FilterCardList.js
  11. 24
      src/routes/List/SearchList.js
  12. 2
      src/routes/List/SearchList.less

56
mock/api.js
View File

@ -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}',
},
];

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 |

59
src/routes/Dashboard/Workplace.js
View File

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

2
src/routes/Dashboard/Workplace.less
View File

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

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>

2
src/routes/List/SearchList.less
View File

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

Write Preview
Loading…
Cancel
Save