doc: better demo

src/components/NoticeIcon/demo/popover.md

@@ -5,96 +5,107 @@ title: 带浮层卡片
 
 点击展开通知卡片，展现多种类型的通知，通常放在导航工具栏。
 
-````jsx
+```jsx
 import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
-import moment from 'moment';
-import groupBy from 'lodash/groupBy';
 import { Tag } from 'antd';
 
-const data = [{
-  id: '000000001',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-  title: '你收到了 14 份新周报',
-  datetime: '2017-08-09',
-  type: '通知',
-}, {
-  id: '000000002',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
-  title: '你推荐的 曲妮妮 已通过第三轮面试',
-  datetime: '2017-08-08',
-  type: '通知',
-}, {
-  id: '000000003',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
-  title: '这种模板可以区分多种通知类型',
-  datetime: '2017-08-07',
-  read: true,
-  type: '通知',
-}, {
-  id: '000000004',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
-  title: '左侧图标用于区分不同的类型',
-  datetime: '2017-08-07',
-  type: '通知',
-}, {
-  id: '000000005',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
-  title: '内容不要超过两行字，超出时自动截断',
-  datetime: '2017-08-07',
-  type: '通知',
-}, {
-  id: '000000006',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-  title: '曲丽丽 评论了你',
-  description: '描述信息描述信息描述信息',
-  datetime: '2017-08-07',
-  type: '消息',
-  clickClose: true,
-}, {
-  id: '000000007',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-  title: '朱偏右 回复了你',
-  description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-  datetime: '2017-08-07',
-  type: '消息',
-  clickClose: true,
-}, {
-  id: '000000008',
-  avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
-  title: '标题',
-  description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
-  datetime: '2017-08-07',
-  type: '消息',
-  clickClose: true,
-}, {
-  id: '000000009',
-  title: '任务名称',
-  description: '任务需要在 2017-01-12 20:00 前启动',
-  extra: '未开始',
-  status: 'todo',
-  type: '待办',
-}, {
-  id: '000000010',
-  title: '第三方紧急代码变更',
-  description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
-  extra: '马上到期',
-  status: 'urgent',
-  type: '待办',
-}, {
-  id: '000000011',
-  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: '待办',
-}];
+const data = [
+  {
+    id: '000000001',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+    title: '你收到了 14 份新周报',
+    datetime: '2017-08-09',
+    type: '通知',
+  },
+  {
+    id: '000000002',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+    title: '你推荐的 曲妮妮 已通过第三轮面试',
+    datetime: '2017-08-08',
+    type: '通知',
+  },
+  {
+    id: '000000003',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+    title: '这种模板可以区分多种通知类型',
+    datetime: '2017-08-07',
+    read: true,
+    type: '通知',
+  },
+  {
+    id: '000000004',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+    title: '左侧图标用于区分不同的类型',
+    datetime: '2017-08-07',
+    type: '通知',
+  },
+  {
+    id: '000000005',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+    title: '内容不要超过两行字，超出时自动截断',
+    datetime: '2017-08-07',
+    type: '通知',
+  },
+  {
+    id: '000000006',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+    title: '曲丽丽 评论了你',
+    description: '描述信息描述信息描述信息',
+    datetime: '2017-08-07',
+    type: '消息',
+    clickClose: true,
+  },
+  {
+    id: '000000007',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+    title: '朱偏右 回复了你',
+    description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+    datetime: '2017-08-07',
+    type: '消息',
+    clickClose: true,
+  },
+  {
+    id: '000000008',
+    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+    title: '标题',
+    description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+    datetime: '2017-08-07',
+    type: '消息',
+    clickClose: true,
+  },
+  {
+    id: '000000009',
+    title: '任务名称',
+    description: '任务需要在 2017-01-12 20:00 前启动',
+    extra: '未开始',
+    status: 'todo',
+    type: '待办',
+  },
+  {
+    id: '000000010',
+    title: '第三方紧急代码变更',
+    description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+    extra: '马上到期',
+    status: 'urgent',
+    type: '待办',
+  },
+  {
+    id: '000000011',
+    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) {
   console.log(item, tabProps);
@@ -108,32 +119,38 @@ function getNoticeData(notices) {
   if (notices.length === 0) {
     return {};
   }
-  const newNotices = notices.map((notice) => {
+  const newNotices = notices.map(notice => {
     const newNotice = { ...notice };
-    if (newNotice.datetime) {
-      newNotice.datetime = moment(notice.datetime).fromNow();
-    }
     // transform id to item key
     if (newNotice.id) {
       newNotice.key = newNotice.id;
     }
     if (newNotice.extra && newNotice.status) {
-      const color = ({
+      const color = {
         todo: '',
         processing: 'blue',
         urgent: 'red',
         doing: 'gold',
-      })[newNotice.status];
-      newNotice.extra = <Tag color={color} style={{ marginRight: 0 }}>{newNotice.extra}</Tag>;
+      }[newNotice.status];
+      newNotice.extra = (
+        <Tag color={color} style={{ marginRight: 0 }}>
+          {newNotice.extra}
+        </Tag>
+      );
     }
     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);
-
-ReactDOM.render(
+const Demo = () => (
   <div
     style={{
       textAlign: 'right',
@@ -144,12 +161,7 @@ ReactDOM.render(
       width: '400px',
     }}
   >
-    <NoticeIcon
-      className="notice-icon"
-      count={5}
-      onItemClick={onItemClick}
-      onClear={onClear}
-    >
+    <NoticeIcon className="notice-icon" count={5} onItemClick={onItemClick} onClear={onClear}>
       <NoticeIcon.Tab
         list={noticeData['通知']}
         name="通知"
@@ -173,9 +185,7 @@ ReactDOM.render(
       />
     </NoticeIcon>
   </div>
-, mountNode);
-````
-
-```css
+);
 
+ReactDOM.render(<Demo />, mountNode);
 ```