Skip to content

A
ant-design-pro

钟摆人-Puppet゜ / ant-design-pro
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
ant-design-pro

体验新版 GitCode，发现更多精彩内容 >>

提交 66fc774f 编写于 作者: S Shuai Chen
浏览文件
操作

doc: better demo

上级 6e97ea92
隐藏空白更改
内联 并排
Showing with 117 addition and 107 deletion
src/components/NoticeIcon/demo/popover.md
浏览文件 @ 66fc774f
...@@ -5,96 +5,107 @@ title: 带浮层卡片 ...@@ -5,96 +5,107 @@ title: 带浮层卡片
点击展开通知卡片，展现多种类型的通知，通常放在导航工具栏。 点击展开通知卡片，展现多种类型的通知，通常放在导航工具栏。
````jsx ```jsx
import NoticeIcon from 'ant-design-pro/lib/NoticeIcon'; import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
import moment from 'moment';
import groupBy from 'lodash/groupBy';
import { Tag } from 'antd'; import { Tag } from 'antd';
const data = [{ const data = [
id: '000000001', {
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', id: '000000001',
title: '你收到了 14 份新周报', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
datetime: '2017-08-09', title: '你收到了 14 份新周报',
type: '通知', datetime: '2017-08-09',
}, { type: '通知',
id: '000000002', },
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png', {
title: '你推荐的 曲妮妮 已通过第三轮面试', id: '000000002',
datetime: '2017-08-08', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
type: '通知', title: '你推荐的 曲妮妮 已通过第三轮面试',
}, { datetime: '2017-08-08',
id: '000000003', type: '通知',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png', },
title: '这种模板可以区分多种通知类型', {
datetime: '2017-08-07', id: '000000003',
read: true, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
type: '通知', title: '这种模板可以区分多种通知类型',
}, { datetime: '2017-08-07',
id: '000000004', read: true,
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png', type: '通知',
title: '左侧图标用于区分不同的类型', },
datetime: '2017-08-07', {
type: '通知', id: '000000004',
}, { avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
id: '000000005', title: '左侧图标用于区分不同的类型',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', datetime: '2017-08-07',
title: '内容不要超过两行字，超出时自动截断', type: '通知',
datetime: '2017-08-07', },
type: '通知', {
}, { id: '000000005',
id: '000000006', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', title: '内容不要超过两行字，超出时自动截断',
title: '曲丽丽 评论了你', datetime: '2017-08-07',
description: '描述信息描述信息描述信息', type: '通知',
datetime: '2017-08-07', },
type: '消息', {
clickClose: true, id: '000000006',
}, { avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
id: '000000007', title: '曲丽丽 评论了你',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', description: '描述信息描述信息描述信息',
title: '朱偏右 回复了你', datetime: '2017-08-07',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', type: '消息',
datetime: '2017-08-07', clickClose: true,
type: '消息', },
clickClose: true, {
}, { id: '000000007',
id: '000000008', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg', title: '朱偏右 回复了你',
title: '标题', description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像', datetime: '2017-08-07',
datetime: '2017-08-07', type: '消息',
type: '消息', clickClose: true,
clickClose: true, },
}, { {
id: '000000009', id: '000000008',
title: '任务名称', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
description: '任务需要在 2017-01-12 20:00 前启动', title: '标题',
extra: '未开始', description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
status: 'todo', datetime: '2017-08-07',
type: '待办', type: '消息',
}, { clickClose: true,
id: '000000010', },
title: '第三方紧急代码变更', {
description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', id: '000000009',
extra: '马上到期', title: '任务名称',
status: 'urgent', description: '任务需要在 2017-01-12 20:00 前启动',
type: '待办', extra: '未开始',
}, { status: 'todo',
id: '000000011', type: '待办',
title: '信息安全考试', },
description: '指派竹尔于 2017-01-09 前完成更新并发布', {
extra: '已耗时 8 天', id: '000000010',
status: 'doing', title: '第三方紧急代码变更',
type: '待办', description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
}, { extra: '马上到期',
id: '000000012', status: 'urgent',
title: 'ABCD 版本发布', type: '待办',
description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务', },
extra: '进行中', {
status: 'processing', id: '000000011',
type: '待办', title: '信息安全考试',
}]; description: '指派竹尔于 2017-01-09 前完成更新并发布',
extra: '已耗时 8 天',
status: 'doing',
type: '待办',
},
{
id: '000000012',
title: 'ABCD 版本发布',
description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
extra: '进行中',
status: 'processing',
type: '待办',
},
];
function onItemClick(item, tabProps) { function onItemClick(item, tabProps) {
console.log(item, tabProps); console.log(item, tabProps);
...@@ -108,32 +119,38 @@ function getNoticeData(notices) { ...@@ -108,32 +119,38 @@ function getNoticeData(notices) {
if (notices.length === 0) { if (notices.length === 0) {
return {}; return {};
} }
const newNotices = notices.map((notice) => { const newNotices = notices.map(notice => {
const newNotice = { ...notice }; const newNotice = { ...notice };
if (newNotice.datetime) {
newNotice.datetime = moment(notice.datetime).fromNow();
}
// transform id to item key // transform id to item key
if (newNotice.id) { if (newNotice.id) {
newNotice.key = newNotice.id; newNotice.key = newNotice.id;
} }
if (newNotice.extra && newNotice.status) { if (newNotice.extra && newNotice.status) {
const color = ({ const color = {
todo: '', todo: '',
processing: 'blue', processing: 'blue',
urgent: 'red', urgent: 'red',
doing: 'gold', doing: 'gold',
})[newNotice.status]; }[newNotice.status];
newNotice.extra = <Tag color={color} style={{ marginRight: 0 }}>{newNotice.extra}</Tag>; newNotice.extra = (
<Tag color={color} style={{ marginRight: 0 }}>
{newNotice.extra}
</Tag>
);
} }
return newNotice; return newNotice;
}); });
return groupBy(newNotices, 'type'); return newNotices.reduce((pre, data) => {
if (!pre[data.type]) {
pre[data.type] = [];
}
pre[data.type].push(data);
return pre;
}, {});
} }
const noticeData = getNoticeData(data); const noticeData = getNoticeData(data);
const Demo = () => (
ReactDOM.render(
<div <div
style={{ style={{
textAlign: 'right', textAlign: 'right',
...@@ -144,12 +161,7 @@ ReactDOM.render( ...@@ -144,12 +161,7 @@ ReactDOM.render(
width: '400px', width: '400px',
}} }}
> >
<NoticeIcon <NoticeIcon className="notice-icon" count={5} onItemClick={onItemClick} onClear={onClear}>
className="notice-icon"
count={5}
onItemClick={onItemClick}
onClear={onClear}
>
<NoticeIcon.Tab <NoticeIcon.Tab
list={noticeData['通知']} list={noticeData['通知']}
name="通知" name="通知"
...@@ -173,9 +185,7 @@ ReactDOM.render( ...@@ -173,9 +185,7 @@ ReactDOM.render(
/> />
</NoticeIcon> </NoticeIcon>
</div> </div>
, mountNode); );
````
```css
ReactDOM.render(<Demo />, mountNode);
``` ```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或