From c10ca6f3634573a6a7b143eeade07863aa04fc3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 25 Oct 2017 04:30:47 -0500 Subject: [PATCH] Remove dva from component (#26) * update footer link hover color * Use linkElement * remove module-resolver --- .roadhogrc | 14 ++------ package.json | 1 - src/components/EditableLinkGroup/index.js | 36 ++++++++++---------- src/components/Exception/index.js | 14 +++++--- src/components/Exception/index.md | 1 + src/components/GlobalFooter/index.less | 5 +++ src/components/PageHeader/index.js | 40 ++++++++++++++--------- src/components/PageHeader/index.md | 3 +- src/layouts/PageHeaderLayout.js | 3 +- src/routes/Dashboard/Workplace.js | 1 + src/routes/Exception/403.js | 5 ++- src/routes/Exception/404.js | 5 ++- src/routes/Exception/500.js | 5 ++- 13 files changed, 75 insertions(+), 58 deletions(-) diff --git a/.roadhogrc b/.roadhogrc index 3449c335..3a08204b 100755 --- a/.roadhogrc +++ b/.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 }] ] } }, diff --git a/package.json b/package.json index 84539dc5..5b7674ad 100755 --- a/package.json +++ b/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", diff --git a/src/components/EditableLinkGroup/index.js b/src/components/EditableLinkGroup/index.js index ba997964..c876103b 100644 --- a/src/components/EditableLinkGroup/index.js +++ b/src/components/EditableLinkGroup/index.js @@ -1,6 +1,5 @@ -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 (
{ - links.map(link => {link.title}) + links.map(link => ( + createElement(linkElement, { + key: `linkGroup-item-${link.id || link.title}`, + to: link.href, + href: link.href, + }, link.title) + )) } { - } @@ -38,9 +41,4 @@ class EditableLinkGroup extends PureComponent { } } -EditableLinkGroup.propTypes = { - links: PropTypes.array, - onAdd: PropTypes.func, -}; - export default EditableLinkGroup; diff --git a/src/components/Exception/index.js b/src/components/Exception/index.js index d6d847b9..7d877043 100644 --- a/src/components/Exception/index.js +++ b/src/components/Exception/index.js @@ -1,12 +1,10 @@ -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 }) => {

{title || config[pageType].title}

{desc || config[pageType].desc}
- {actions || } + { + actions || + createElement(linkElement, { + to: '/', + href: '/', + }, ) + }
diff --git a/src/components/Exception/index.md b/src/components/Exception/index.md index c5f6dd73..8eea00c5 100644 --- a/src/components/Exception/index.md +++ b/src/components/Exception/index.md @@ -16,3 +16,4 @@ cols: 1 | desc | 补充描述 | ReactNode | - | | img | 背景图片地址 | string | - | | actions | 建议操作，配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - | +| linkElement | 定义链接的元素，默认为 `a` | string\|ReactElement | - | diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less index c5e1cad4..7fce6004 100644 --- a/src/components/GlobalFooter/index.less +++ b/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; + } } } diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js index 97ea900d..5fbe3648 100644 --- a/src/components/PageHeader/index.js +++ b/src/components/PageHeader/index.js @@ -1,19 +1,11 @@ -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) - ? {route.breadcrumbName} - : {route.breadcrumbName}; -} - 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) + ? {route.breadcrumbName} + : 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 ( - - {breadcrumbNameMap[url] || breadcrumbNameMap[url.replace('/', '')] || url} - + {createElement(linkElement, { + to: url, + href: url, + }, breadcrumbNameMap[url] || breadcrumbNameMap[url.replace('/', '')] || url)} ); }); const breadcrumbItems = [( - Home + {createElement(linkElement, { + to: '/', + href: '/', + }, '首页')} )].concat(extraBreadcrumbItems); breadcrumb = ( diff --git a/src/components/PageHeader/index.md b/src/components/PageHeader/index.md index 6ec9b6da..5900e703 100644 --- a/src/components/PageHeader/index.md +++ b/src/components/PageHeader/index.md @@ -1,6 +1,6 @@ --- type: General -title: PageHeader +title: PageHeader subtitle: 页头 cols: 1 --- @@ -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` 组件会自动获取。 diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js index 0b04067a..8ab20188 100644 --- a/src/layouts/PageHeaderLayout.js +++ b/src/layouts/PageHeaderLayout.js @@ -1,10 +1,11 @@ import React from 'react'; +import { Link } from 'dva/router'; import PageHeader from '../components/PageHeader'; export default ({ children, wrapperClassName, top, ...restProps }) => (
{top} - + {children ?
{children}
: null}
); diff --git a/src/routes/Dashboard/Workplace.js b/src/routes/Dashboard/Workplace.js index bb293d6d..d964fc47 100644 --- a/src/routes/Dashboard/Workplace.js +++ b/src/routes/Dashboard/Workplace.js @@ -212,6 +212,7 @@ export default class Workplace extends PureComponent { {}} links={links} + linkElement={Link} /> ; +export default () => ( + +); diff --git a/src/routes/Exception/404.js b/src/routes/Exception/404.js index c5ac53b0..7d76d938 100644 --- a/src/routes/Exception/404.js +++ b/src/routes/Exception/404.js @@ -1,4 +1,7 @@ import React from 'react'; +import { Link } from 'dva/router'; import Exception from '../../components/Exception'; -export default () => ; +export default () => ( + +); diff --git a/src/routes/Exception/500.js b/src/routes/Exception/500.js index 61d77c1e..fa84eee5 100644 --- a/src/routes/Exception/500.js +++ b/src/routes/Exception/500.js @@ -1,4 +1,7 @@ import React from 'react'; +import { Link } from 'dva/router'; import Exception from '../../components/Exception'; -export default () => ; +export default () => ( + +); -- GitLab