diff --git a/mock/dashboard.js b/mock/dashboard.js index c5ebb9e..7522252 100644 --- a/mock/dashboard.js +++ b/mock/dashboard.js @@ -1,4 +1,4 @@ -import { color } from '../src/utils/theme' +import { Color } from '../src/utils/theme' const Mock = require('mockjs') const config = require('../src/utils/config') @@ -113,25 +113,25 @@ const Dashboard = Mock.mock({ numbers: [ { icon: 'pay-circle-o', - color: color.green, + color: Color.green, title: 'Online Review', number: 2781, }, { icon: 'team', - color: color.blue, + color: Color.blue, title: 'New Customers', number: 3241, }, { icon: 'message', - color: color.purple, + color: Color.purple, title: 'Active Projects', number: 253, }, { icon: 'shopping-cart', - color: color.red, + color: Color.red, title: 'Referrals', number: 4324, }, diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index 15ef1b4..5431000 100644 --- a/src/components/Layout/Sider.js +++ b/src/components/Layout/Sider.js @@ -25,7 +25,7 @@ const Sider = ({ return (
- logo + logo {siderFold ? '' : {config.siteName}}
diff --git a/src/pages/UIElement/editor/index.js b/src/pages/UIElement/editor/index.js index cd75741..052ec87 100644 --- a/src/pages/UIElement/editor/index.js +++ b/src/pages/UIElement/editor/index.js @@ -12,11 +12,13 @@ export default class EditorPage extends React.Component { editorContent: null, } } + onEditorStateChange = editorContent => { this.setState({ editorContent, }) } + render() { const { editorContent } = this.state const colProps = { diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js index 3fcd354..1f8e12d 100644 --- a/src/pages/dashboard/index.js +++ b/src/pages/dashboard/index.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { connect } from 'dva' import { Row, Col, Card } from 'antd' @@ -25,116 +25,121 @@ const bodyStyle = { }, } -function Dashboard({ dashboard, loading }) { - const { - weather, - sales, - quote, - numbers, - recentSales, - comments, - completed, - browser, - cpu, - user, - } = dashboard - const numberCards = numbers.map((item, key) => ( - - - - )) +@connect(({ dashboard, loading }) => ({ dashboard, loading })) +class Dashboard extends PureComponent { + render() { + const { dashboard, loading } = this.props + const { + weather, + sales, + quote, + numbers, + recentSales, + comments, + completed, + browser, + cpu, + user, + } = dashboard - return ( - - - {numberCards} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) + const numberCards = numbers.map((item, key) => ( + + + + )) + + return ( + + + {numberCards} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + } } Dashboard.propTypes = { @@ -142,6 +147,4 @@ Dashboard.propTypes = { loading: PropTypes.object, } -export default connect(({ dashboard, loading }) => ({ dashboard, loading }))( - Dashboard -) +export default Dashboard diff --git a/src/pages/login/index.js b/src/pages/login/index.js index d9e3d7a..64b4750 100644 --- a/src/pages/login/index.js +++ b/src/pages/login/index.js @@ -1,18 +1,18 @@ -import React from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { connect } from 'dva' import { Button, Row, Form, Input } from 'antd' -import { config } from 'utils' -import styles from './index.less' +import config from 'utils/config' +import styles from './index.less' const FormItem = Form.Item -const Login = ({ - loading, - dispatch, - form: { getFieldDecorator, validateFieldsAndScroll }, -}) => { - function handleOk() { +@connect(({ loading }) => ({ loading })) +@Form.create() +class Login extends PureComponent { + handleOk = () => { + const { dispatch, form } = this.props + const { validateFieldsAndScroll } = form validateFieldsAndScroll((errors, values) => { if (errors) { return @@ -21,53 +21,58 @@ const Login = ({ }) } - return ( -
-
- logo - {config.name} + render() { + const { loading, form } = this.props + const { getFieldDecorator } = form + + return ( +
+
+ logo + {config.siteName} +
+
+ + {getFieldDecorator('username', { + rules: [ + { + required: true, + }, + ], + })()} + + + {getFieldDecorator('password', { + rules: [ + { + required: true, + }, + ], + })( + + )} + + + +

+ Username：guest + Password：guest +

+ +
-
- - {getFieldDecorator('username', { - rules: [ - { - required: true, - }, - ], - })()} - - - {getFieldDecorator('password', { - rules: [ - { - required: true, - }, - ], - })( - - )} - - - -

- Username：guest - Password：guest -

- -
-
- ) + ) + } } Login.propTypes = { @@ -76,4 +81,4 @@ Login.propTypes = { loading: PropTypes.object, } -export default connect(({ loading }) => ({ loading }))(Form.create()(Login)) +export default Login diff --git a/src/pages/post/index.js b/src/pages/post/index.js index 34bf6f9..d8bc49d 100644 --- a/src/pages/post/index.js +++ b/src/pages/post/index.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { connect } from 'dva' import { Tabs } from 'antd' @@ -14,65 +14,69 @@ const EnumPostStatus = { PUBLISHED: 2, } -const Index = ({ post, dispatch, loading, location }) => { - const { list, pagination } = post - const { query, pathname } = location +@connect(({ post, loading }) => ({ post, loading })) +class Post extends PureComponent { + render() { + const { post, dispatch, loading, location } = this.props + const { list, pagination } = post + const { query, pathname } = location - const listProps = { - pagination, - dataSource: list, - loading: loading.effects['post/query'], - onChange(page) { + const listProps = { + pagination, + dataSource: list, + loading: loading.effects['post/query'], + onChange(page) { + dispatch( + routerRedux.push({ + pathname, + search: stringify({ + ...query, + page: page.current, + pageSize: page.pageSize, + }), + }) + ) + }, + } + + const handleTabClick = key => { dispatch( routerRedux.push({ pathname, search: stringify({ - ...query, - page: page.current, - pageSize: page.pageSize, + status: key, }), }) ) - }, - } + } - const handleTabClick = key => { - dispatch( - routerRedux.push({ - pathname, - search: stringify({ - status: key, - }), - }) + return ( + + + + + + + + + + ) } - - return ( - - - - - - - - - - - ) } -Index.propTypes = { +Post.propTypes = { post: PropTypes.object, loading: PropTypes.object, location: PropTypes.object, dispatch: PropTypes.func, } -export default connect(({ post, loading }) => ({ post, loading }))(Index) +export default Post diff --git a/src/pages/user/$id/index.js b/src/pages/user/$id/index.js index f721365..ecc9cb8 100644 --- a/src/pages/user/$id/index.js +++ b/src/pages/user/$id/index.js @@ -1,33 +1,32 @@ -import React from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { connect } from 'dva' import styles from './index.less' -const Detail = ({ userDetail }) => { - const { data } = userDetail - const content = [] - for (let key in data) { - if ({}.hasOwnProperty.call(data, key)) { - content.push( -
-
{key}
-
{String(data[key])}
-
- ) +@connect(({ userDetail }) => ({ userDetail })) +class UserDetail extends PureComponent { + render() { + const { userDetail } = this.props + const { data } = userDetail + const content = [] + for (let key in data) { + if ({}.hasOwnProperty.call(data, key)) { + content.push( +
+
{key}
+
{String(data[key])}
+
+ ) + } } + return ( +
+
{content}
+
+ ) } - return ( -
-
{content}
-
- ) } -Detail.propTypes = { +UserDetail.propTypes = { userDetail: PropTypes.object, } - -export default connect(({ userDetail, loading }) => ({ - userDetail, - loading: loading.models.userDetail, -}))(Detail) diff --git a/src/pages/user/index.js b/src/pages/user/index.js index 2c4b643..47b47a4 100644 --- a/src/pages/user/index.js +++ b/src/pages/user/index.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { routerRedux } from 'dva/router' import { connect } from 'dva' @@ -9,162 +9,169 @@ import List from './components/List' import Filter from './components/Filter' import Modal from './components/Modal' -const User = ({ location, dispatch, user, loading }) => { - const { query, pathname } = location - const { - list, - pagination, - currentItem, - modalVisible, - modalType, - isMotion, - selectedRowKeys, - } = user +@connect(({ user, loading }) => ({ user, loading })) +class User extends PureComponent { + render() { + const { location, dispatch, user, loading } = this.props + const { query, pathname } = location + const { + list, + pagination, + currentItem, + modalVisible, + modalType, + isMotion, + selectedRowKeys, + } = user - const handleRefresh = newQuery => { - dispatch( - routerRedux.push({ - pathname, - search: stringify({ - ...query, - ...newQuery, - }), - }) - ) - } + const handleRefresh = newQuery => { + dispatch( + routerRedux.push({ + pathname, + search: stringify( + { + ...query, + ...newQuery, + }, + { arrayFormat: 'repeat' } + ), + }) + ) + } - const modalProps = { - item: modalType === 'create' ? {} : currentItem, - visible: modalVisible, - maskClosable: false, - confirmLoading: loading.effects[`user/${modalType}`], - title: `${modalType === 'create' ? 'Create User' : 'Update User'}`, - wrapClassName: 'vertical-center-modal', - onOk(data) { - dispatch({ - type: `user/${modalType}`, - payload: data, - }).then(() => { - handleRefresh() - }) - }, - onCancel() { - dispatch({ - type: 'user/hideModal', - }) - }, - } + const modalProps = { + item: modalType === 'create' ? {} : currentItem, + visible: modalVisible, + maskClosable: false, + confirmLoading: loading.effects[`user/${modalType}`], + title: `${modalType === 'create' ? 'Create User' : 'Update User'}`, + wrapClassName: 'vertical-center-modal', + onOk(data) { + dispatch({ + type: `user/${modalType}`, + payload: data, + }).then(() => { + handleRefresh() + }) + }, + onCancel() { + dispatch({ + type: 'user/hideModal', + }) + }, + } - const listProps = { - dataSource: list, - loading: loading.effects['user/query'], - pagination, - location, - isMotion, - onChange(page) { - handleRefresh({ - page: page.current, - pageSize: page.pageSize, - }) - }, - onDeleteItem(id) { + const listProps = { + dataSource: list, + loading: loading.effects['user/query'], + pagination, + location, + isMotion, + onChange(page) { + handleRefresh({ + page: page.current, + pageSize: page.pageSize, + }) + }, + onDeleteItem(id) { + dispatch({ + type: 'user/delete', + payload: id, + }).then(() => { + handleRefresh({ + page: + list.length === 1 && pagination.current > 1 + ? pagination.current - 1 + : pagination.current, + }) + }) + }, + onEditItem(item) { + dispatch({ + type: 'user/showModal', + payload: { + modalType: 'update', + currentItem: item, + }, + }) + }, + rowSelection: { + selectedRowKeys, + onChange: keys => { + dispatch({ + type: 'user/updateState', + payload: { + selectedRowKeys: keys, + }, + }) + }, + }, + } + + const filterProps = { + isMotion, + filter: { + ...query, + }, + onFilterChange(value) { + handleRefresh({ + ...value, + page: 1, + }) + }, + onAdd() { + dispatch({ + type: 'user/showModal', + payload: { + modalType: 'create', + }, + }) + }, + switchIsMotion() { + dispatch({ type: 'user/switchIsMotion' }) + }, + } + + const handleDeleteItems = () => { dispatch({ - type: 'user/delete', - payload: id, + type: 'user/multiDelete', + payload: { + ids: selectedRowKeys, + }, }).then(() => { handleRefresh({ page: - list.length === 1 && pagination.current > 1 + list.length === selectedRowKeys.length && pagination.current > 1 ? pagination.current - 1 : pagination.current, }) }) - }, - onEditItem(item) { - dispatch({ - type: 'user/showModal', - payload: { - modalType: 'update', - currentItem: item, - }, - }) - }, - rowSelection: { - selectedRowKeys, - onChange: keys => { - dispatch({ - type: 'user/updateState', - payload: { - selectedRowKeys: keys, - }, - }) - }, - }, - } + } - const filterProps = { - isMotion, - filter: { - ...query, - }, - onFilterChange(value) { - handleRefresh({ - ...value, - page: 1, - }) - }, - onAdd() { - dispatch({ - type: 'user/showModal', - payload: { - modalType: 'create', - }, - }) - }, - switchIsMotion() { - dispatch({ type: 'user/switchIsMotion' }) - }, + return ( + + + {selectedRowKeys.length > 0 && ( + + + {`Selected ${selectedRowKeys.length} items `} + + + + + + )} + + {modalVisible && } + + ) } - - const handleDeleteItems = () => { - dispatch({ - type: 'user/multiDelete', - payload: { - ids: selectedRowKeys, - }, - }).then(() => { - handleRefresh({ - page: - list.length === selectedRowKeys.length && pagination.current > 1 - ? pagination.current - 1 - : pagination.current, - }) - }) - } - - return ( - - - {selectedRowKeys.length > 0 && ( - - - {`Selected ${selectedRowKeys.length} items `} - - - - - - )} - - {modalVisible && } - - ) } User.propTypes = { @@ -174,4 +181,4 @@ User.propTypes = { loading: PropTypes.object, } -export default connect(({ user, loading }) => ({ user, loading }))(User) +export default User diff --git a/src/utils/config.js b/src/utils/config.js index de9218e..0c28063 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -2,7 +2,7 @@ module.exports = { siteName: 'AntD Admin', prefix: 'antdAdmin', footerText: 'Ant Design Admin © 2018 zuiidea', - logo: '/logo.svg', + logoPath: '/logo.svg', apiPrefix: '/api/v1', openPages: ['/login'], }