From f8e8b2b9c764d235ebd415bac4c8466aa6545e9c Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Thu, 10 Dec 2020 20:32:44 +0800
Subject: [PATCH] feat: add registerable icon component

---
 packages/app/src/components/icons/index.tsx   | 55 +++++++++++++++++++
 .../components/pages/SideMenuLayout/index.tsx |  3 +-
 .../components/pages/TopMenuLayout/index.tsx  |  3 +-
 packages/plugin-pages/src/server.ts           |  8 +--
 4 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 packages/app/src/components/icons/index.tsx

diff --git a/packages/app/src/components/icons/index.tsx b/packages/app/src/components/icons/index.tsx
new file mode 100644
index 000000000..300ab2120
--- /dev/null
+++ b/packages/app/src/components/icons/index.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  createFromIconfontCN,
+  UserOutlined,
+  TeamOutlined,
+  DatabaseOutlined,
+  DashboardOutlined,
+  SettingOutlined,
+  TableOutlined,
+  MenuOutlined,
+} from '@ant-design/icons';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: [
+    '//at.alicdn.com/t/font_2261954_u9jzwc44ug.js',
+  ],
+});
+
+const icons = new Map<string, any>();
+
+export function registerIcon(type: string, icon) {
+  icons.set(type.toLowerCase(), icon);
+}
+
+export function registerIcons(components) {
+  Object.keys(components).forEach(type => {
+    registerIcon(type, components[type]);
+  });
+}
+
+registerIcons({
+  MenuOutlined,
+  TableOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  UserOutlined,
+  DatabaseOutlined,
+  DashboardOutlined,
+});
+
+interface IconProps {
+  type: string;
+  [key: string]: any;
+}
+
+export function Icon(props: IconProps) {
+  const { type = '', ...restProps } = props;
+  if (type && icons.has(type.toLowerCase())) {
+    const IconComponent = icons.get(type.toLowerCase());
+    return <IconComponent {...restProps}/>;
+  }
+  return <IconFont type={type} />;
+}
+
+export default Icon;
diff --git a/packages/app/src/components/pages/SideMenuLayout/index.tsx b/packages/app/src/components/pages/SideMenuLayout/index.tsx
index f77e0ca4a..c5d9ac964 100644
--- a/packages/app/src/components/pages/SideMenuLayout/index.tsx
+++ b/packages/app/src/components/pages/SideMenuLayout/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Layout, Menu, Breadcrumb } from 'antd';
 import { Link } from 'umi';
 import './style.less';
+import Icon from '@/components/icons';
 
 export function SideMenuLayout(props: any) {
   const { menu = [] } = props.page;
@@ -12,7 +13,7 @@ export function SideMenuLayout(props: any) {
         <Menu mode={'inline'}  defaultSelectedKeys={['2']}>
           {menu.map(item => (
             <Menu.Item key={item.path}>
-              <Link to={item.path}>{item.title}</Link>
+              <Link to={item.path}><Icon type={item.icon}/> {item.title}</Link>
             </Menu.Item>
           ))}
         </Menu>
diff --git a/packages/app/src/components/pages/TopMenuLayout/index.tsx b/packages/app/src/components/pages/TopMenuLayout/index.tsx
index 3b1397968..c9bba5a0a 100644
--- a/packages/app/src/components/pages/TopMenuLayout/index.tsx
+++ b/packages/app/src/components/pages/TopMenuLayout/index.tsx
@@ -3,6 +3,7 @@ import { Layout, Menu, Dropdown, Avatar } from 'antd';
 import './style.less';
 import { history, Link, request, useModel } from 'umi';
 import { UserOutlined } from '@ant-design/icons';
+import Icon from '@/components/icons';
 
 const overlay = (
   <Menu>
@@ -28,7 +29,7 @@ export function TopMenuLayout(props: any) {
         <Menu style={{float: 'left'}} theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
           {menu.map(item => (
             <Menu.Item key={item.path}>
-              <Link to={item.path}>{item.title}</Link>
+              <Link to={item.path}><Icon type={item.icon}/>{item.title}</Link>
             </Menu.Item>
           ))}
         </Menu>
diff --git a/packages/plugin-pages/src/server.ts b/packages/plugin-pages/src/server.ts
index 1633e8851..ccbf8cb85 100644
--- a/packages/plugin-pages/src/server.ts
+++ b/packages/plugin-pages/src/server.ts
@@ -22,9 +22,9 @@ export default async function (options = {}) {
   const [Collection, Page] = database.getModels(['collections', 'pages']);
 
   async function createCollectionPage(model) {
-    if (!model.get('showInDataMenu')) {
-      return;
-    }
+    // if (!model.get('showInDataMenu')) {
+    //   return;
+    // }
     const parent = await Page.findOne({
       where: {
         path: '/collections',
@@ -48,7 +48,7 @@ export default async function (options = {}) {
     page.set({
       title: model.get('title'),
       icon: model.get('icon'),
-      showInMenu: model.get('showInDataMenu'),
+      showInMenu: !!model.get('showInDataMenu'),
     });
     page.save();
   }