Skip to content

GitLab

A
ant-design-pro
Commit 6a2fea1c authored by ddcat1115's avatar ddcat1115
Browse files
Options

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

parents ba310412 47b554a3
Show whitespace changes
Inline Side-by-side
Showing with 205 additions and 178 deletions
mock/api.js
View file @ 6a2fea1c
......@@ -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 → 100644
View file @ 6a2fea1c
---
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
View file @ 6a2fea1c
......@@ -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
View file @ 6a2fea1c
......@@ -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,17 +86,15 @@ 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__"
......@@ -139,32 +110,17 @@ class TagSelect extends PureComponent {
}))
}
{
expandNode && (
expandable && (
<a className={styles.trigger} onClick={this.handleExpand}>
{ expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
</a>
)
}
</div>
{
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>
)
}
</div>
);
}
}
TagSelect.Option = TagSelectOption;
TagSelect.Expand = TagSelectExpand;
export default TagSelect;
src/components/TagSelect/index.less
View file @ 6a2fea1c
......@@ -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;
}
}
}
.expandTag {
&.hasExpandTag {
padding-right: 50px;
}
}
src/components/TagSelect/index.md
View file @ 6a2fea1c
......@@ -5,7 +5,7 @@ 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
View file @ 6a2fea1c
......@@ -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
View file @ 6a2fea1c
......@@ -6,7 +6,7 @@
.username {
color: @text-color;
}
.operation {
.event {
font-weight: normal;
}
}
......
src/routes/List/CoverCardList.js
View file @ 6a2fea1c
......@@ -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
View file @ 6a2fea1c
......@@ -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
View file @ 6a2fea1c
......@@ -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
View file @ 6a2fea1c
......@@ -44,7 +44,7 @@
height: 1px;
}
.selfTrigger {
margin-left: 24px;
margin-left: 12px;
}
@media screen and (max-width: @screen-xs) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment