Remove dva from component (#26)

* update footer link hover color

* Use linkElement

* remove module-resolver

.roadhogrc

@@ -7,12 +7,7 @@
         "transform-runtime",
         "transform-decorators-legacy",
         "transform-class-properties",
-        ["import", { "libraryName": "antd", "style": true }],
-        ["module-resolver", {
-          "alias": {
-            "react-router": "dva/router"
-          }
-        }]
+        ["import", { "libraryName": "antd", "style": true }]
       ]
     },
     "production": {
@@ -20,12 +15,7 @@
         "transform-runtime",
         "transform-decorators-legacy",
         "transform-class-properties",
-        ["import", { "libraryName": "antd", "style": true }],
-        ["module-resolver", {
-          "alias": {
-            "react-router": "dva/router"
-          }
-        }]
+        ["import", { "libraryName": "antd", "style": true }]
       ]
     }
   },

package.json

@@ -34,7 +34,6 @@
     "babel-jest": "^21.0.0",
     "babel-plugin-dva-hmr": "^0.3.2",
     "babel-plugin-import": "^1.2.1",
-    "babel-plugin-module-resolver": "^2.7.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.9.0",

src/components/EditableLinkGroup/index.js

-import React, { PureComponent } from 'react';
+import React, { PureComponent, createElement } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
 import { Button, Icon } from 'antd';
 import styles from './index.less';
 
@@ -9,27 +8,31 @@ import styles from './index.less';
 class EditableLinkGroup extends PureComponent {
   static defaultProps = {
     links: [],
-    onAdd: () => {
-    },
-  }
-  state = {
-    links: this.props.links,
+    onAdd: () => {},
+    linkElement: 'a',
   };
 
-  handleOnClick() {
-    const { onAdd } = this.props;
-    onAdd();
-  }
+  static propTypes = {
+    links: PropTypes.array,
+    onAdd: PropTypes.func,
+    linkElement: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  };
 
   render() {
-    const { links } = this.state;
+    const { links, linkElement, onAdd } = this.props;
     return (
       <div className={styles.linkGroup}>
         {
-          links.map(link => <Link key={`linkGroup-item-${link.id || link.title}`} to={link.href}>{link.title}</Link>)
+          links.map(link => (
+            createElement(linkElement, {
+              key: `linkGroup-item-${link.id || link.title}`,
+              to: link.href,
+              href: link.href,
+            }, link.title)
+          ))
         }
         {
-          <Button size="small" onClick={() => this.handleOnClick()}>
+          <Button size="small" onClick={onAdd}>
             <Icon type="plus" />添加
           </Button>
         }
@@ -38,9 +41,4 @@ class EditableLinkGroup extends PureComponent {
   }
 }
 
-EditableLinkGroup.propTypes = {
-  links: PropTypes.array,
-  onAdd: PropTypes.func,
-};
-
 export default EditableLinkGroup;

src/components/Exception/index.js

-import React from 'react';
+import React, { createElement } from 'react';
 import classNames from 'classnames';
 import { Button } from 'antd';
-import { Link } from 'react-router';
 import config from './typeConfig';
 import styles from './index.less';
 
-
-export default ({ className, type, title, desc, img, actions, ...rest }) => {
+export default ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => {
   const pageType = type in config ? type : '404';
   const clsString = classNames(styles.exception, className);
   return (
@@ -21,7 +19,13 @@ export default ({ className, type, title, desc, img, actions, ...rest }) => {
         <h1>{title || config[pageType].title}</h1>
         <div className={styles.desc}>{desc || config[pageType].desc}</div>
         <div className={styles.actions}>
-          {actions || <Link to="/"><Button type="primary">返回首页</Button></Link>}
+          {
+            actions ||
+              createElement(linkElement, {
+                to: '/',
+                href: '/',
+              }, <Button type="primary">返回首页</Button>)
+          }
         </div>
       </div>
     </div>

src/components/Exception/index.md

@@ -16,3 +16,4 @@ cols: 1
 | desc        | 补充描述    | ReactNode  | -    |
 | img         | 背景图片地址     | string  | -    |
 | actions     | 建议操作，配置此属性时默认的『返回首页』按钮不生效    | ReactNode  | -    |
+| linkElement | 定义链接的元素，默认为 `a` | string\|ReactElement | - |

src/components/GlobalFooter/index.less

@@ -10,10 +10,15 @@
 
     a {
       color: @text-color-secondary;
+      transition: all .3s;
 
       &:not(:last-child) {
         margin-right: 40px;
       }
+
+      &:hover {
+        color: @text-color;
+      }
     }
   }
 

src/components/PageHeader/index.js

-import React, { PureComponent } from 'react';
+import React, { PureComponent, createElement } from 'react';
 import PropTypes from 'prop-types';
 import { Breadcrumb, Tabs } from 'antd';
-import { Link } from 'react-router';
 import classNames from 'classnames';
 import styles from './index.less';
 
 const { TabPane } = Tabs;
 
-function itemRender(route, params, routes, paths) {
-  const last = routes.indexOf(route) === routes.length - 1;
-  return (last || !route.component)
-    ? <span>{route.breadcrumbName}</span>
-    : <Link to={paths.join('/') || '/'}>{route.breadcrumbName}</Link>;
-}
-
 export default class PageHeader extends PureComponent {
   static contextTypes = {
     routes: PropTypes.array,
@@ -34,10 +26,22 @@ export default class PageHeader extends PureComponent {
       breadcrumbNameMap: this.props.breadcrumbNameMap || this.context.breadcrumbNameMap,
     };
   };
+  itemRender = (route, params, routes, paths) => {
+    const { linkElement = 'a' } = this.props;
+    const last = routes.indexOf(route) === routes.length - 1;
+    return (last || !route.component)
+      ? <span>{route.breadcrumbName}</span>
+      : createElement(linkElement, {
+        href: paths.join('/') || '/',
+        to: paths.join('/') || '/',
+      }, route.breadcrumbName);
+  }
   render() {
     const { routes, params, location, breadcrumbNameMap } = this.getBreadcrumbProps();
-    const { title, logo, action, content, extraContent,
-      breadcrumbList, tabList, className } = this.props;
+    const {
+      title, logo, action, content, extraContent,
+      breadcrumbList, tabList, className, linkElement = 'a',
+    } = this.props;
     const clsString = classNames(styles.pageHeader, className);
     let breadcrumb;
     if (routes && params) {
@@ -46,7 +50,7 @@ export default class PageHeader extends PureComponent {
           className={styles.breadcrumb}
           routes={routes.filter(route => route.breadcrumbName)}
           params={params}
-          itemRender={itemRender}
+          itemRender={this.itemRender}
         />
       );
     } else if (location && location.pathname) {
@@ -55,15 +59,19 @@ export default class PageHeader extends PureComponent {
         const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
         return (
           <Breadcrumb.Item key={url}>
-            <Link to={url}>
-              {breadcrumbNameMap[url] || breadcrumbNameMap[url.replace('/', '')] || url}
-            </Link>
+            {createElement(linkElement, {
+              to: url,
+              href: url,
+            }, breadcrumbNameMap[url] || breadcrumbNameMap[url.replace('/', '')] || url)}
           </Breadcrumb.Item>
         );
       });
       const breadcrumbItems = [(
         <Breadcrumb.Item key="home">
-          <Link to="/">Home</Link>
+          {createElement(linkElement, {
+            to: '/',
+            href: '/',
+          }, '首页')}
         </Breadcrumb.Item>
       )].concat(extraBreadcrumbItems);
       breadcrumb = (

src/components/PageHeader/index.md

@@ -21,5 +21,6 @@ cols: 1
 | breadcrumbList | 面包屑数据，配置了 `routes` `params` 时此属性无效 | array<{title: ReactNode, href?: string}> | - |
 | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | -  |
 | onTabChange | 切换面板的回调 | (key) => void | -  |
+| linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
 
 > 面包屑的配置方式有两种，一是结合 `react-router`，通过配置 `routes` 及 `params` 实现，类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router)；二是直接配置 `breadcrumbList`。 你也可以将 `routes` 及 `params` 放到 context 中，`PageHeader` 组件会自动获取。

src/layouts/PageHeaderLayout.js

 import React from 'react';
+import { Link } from 'dva/router';
 import PageHeader from '../components/PageHeader';
 
 export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
     {top}
-    <PageHeader {...restProps} />
+    <PageHeader {...restProps} linkElement={Link} />
     {children ? <div style={{ margin: '24px 24px 0' }}>{children}</div> : null}
   </div>
 );

src/routes/Dashboard/Workplace.js

@@ -212,6 +212,7 @@ export default class Workplace extends PureComponent {
               <EditableLinkGroup
                 onAdd={() => {}}
                 links={links}
+                linkElement={Link}
               />
             </Card>
             <Card

src/routes/Exception/403.js

 import React from 'react';
+import { Link } from 'dva/router';
 import Exception from '../../components/Exception';
 
-export default () => <Exception type="403" style={{ minHeight: 500, height: '80%' }} />;
+export default () => (
+  <Exception type="403" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />
+);

src/routes/Exception/404.js

 import React from 'react';
+import { Link } from 'dva/router';
 import Exception from '../../components/Exception';
 
-export default () => <Exception type="404" style={{ minHeight: 500, height: '80%' }} />;
+export default () => (
+  <Exception type="404" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />
+);

src/routes/Exception/500.js

 import React from 'react';
+import { Link } from 'dva/router';
 import Exception from '../../components/Exception';
 
-export default () => <Exception type="500" style={{ minHeight: 500, height: '80%' }} />;
+export default () => (
+  <Exception type="500" style={{ minHeight: 500, height: '80%' }} linkElement={Link} />
+);