From c97cf3e4f51b021662d43cde34eac3acfa535359 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 9 Feb 2017 23:37:23 +0800 Subject: [PATCH] add:user-motion --- src/components/users/list.js | 228 ++++++++++++++++++------------- src/components/users/list.less | 79 +++++++++++ src/components/users/search.less | 9 +- src/router.js | 8 -- src/routes/usersMotion.js | 109 --------------- 5 files changed, 215 insertions(+), 218 deletions(-) delete mode 100644 src/routes/usersMotion.js diff --git a/src/components/users/list.js b/src/components/users/list.js index 76d14e4..15898ed 100644 --- a/src/components/users/list.js +++ b/src/components/users/list.js @@ -1,101 +1,143 @@ -import React, { PropTypes } from 'react' -import { Table, Popconfirm } from 'antd' +import React from 'react' +import {Table, Popconfirm} from 'antd' +import {TweenOneGroup} from 'rc-tween-one' import styles from './list.less' -function list ({ - loading, - dataSource, - pagination, - onPageChange, - onDeleteItem, - onEditItem -}) { - const columns = [ - { - title: '头像', - dataIndex: 'avatar', - key: 'avatar', - width: 64, - className: styles.avatar, - render: (text) => - }, { - title: '姓名', - dataIndex: 'name', - key: 'name' - }, { - title: '昵称', - dataIndex: 'nickName', - key: 'nickName' - }, { - title: '年龄', - dataIndex: 'age', - key: 'age', - render: (text) => {text}岁 - }, { - title: '性别', - dataIndex: 'isMale', - key: 'isMale', - render: (text) => {text - ? '男' - : '女'} - }, { - title: '电话', - dataIndex: 'phone', - key: 'phone' - }, { - title: '邮箱', - dataIndex: 'email', - key: 'email' - }, { - title: '住址', - dataIndex: 'address', - key: 'address' - }, { - title: '创建时间', - dataIndex: 'createTime', - key: 'createTime' - }, { - title: '操作', - key: 'operation', - width: 100, - render: (text, record) => ( -

- onEditItem(record)} style={{ - marginRight: 4 - }}>编辑 - onDeleteItem(record.id)}> - 删除 - -

- ) +class list extends React.Component { + constructor (props) { + super(props) + this.enterAnim = [ + { + opacity: 0, + x: 30, + backgroundColor: '#fffeee', + duration: 0 + }, { + height: 0, + duration: 200, + type: 'from', + delay: 250, + ease: 'easeOutQuad', + onComplete: this.onEnd + }, { + opacity: 1, + x: 0, + duration: 250, + ease: 'easeOutQuad' + }, { + delay: 1000, + backgroundColor: '#fff' + } + ] + this.leaveAnim = [ + { + duration: 250, + opacity: 0 + }, { + height: 0, + duration: 200, + ease: 'easeOutQuad' + } + ] + this.currentPage = 1 + this.newPage = 1 + } + + getBodyWrapper = (body) => { + if (this.currentPage !== this.newPage) { + this.currentPage = this.newPage + return body } - ] + return ( + + {body.props.children} + + ) + } - return ( -
- record.id} - /> + onEnd = (e) => { + e.target.style.height = 'auto' + } + + render () { + const { + loading, + dataSource, + pagination, + onPageChange, + onDeleteItem, + onEditItem + } = this.props + const columns = [ + { + title: '头像', + dataIndex: 'avatar', + key: 'avatar', + width: 64, + className: styles.avatar, + render: (text) => + }, { + title: '姓名', + dataIndex: 'name', + key: 'name' + }, { + title: '昵称', + dataIndex: 'nickName', + key: 'nickName' + }, { + title: '年龄', + dataIndex: 'age', + key: 'age', + render: (text) => {text}岁 + }, { + title: '性别', + dataIndex: 'isMale', + key: 'isMale', + render: (text) => {text + ? '男' + : '女'} + }, { + title: '电话', + dataIndex: 'phone', + key: 'phone' + }, { + title: '邮箱', + dataIndex: 'email', + key: 'email' + }, { + title: '住址', + dataIndex: 'address', + key: 'address' + }, { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime' + }, { + title: '操作', + key: 'operation', + width: 100, + render: (text, record) => ( +

+ onEditItem(record)} style={{ + marginRight: 4 + }}>编辑 + onDeleteItem(record.id)}> + 删除 + +

+ ) + } + ] + const self = this + return
+
{ + self.newPage = page.current + onPageChange(page) + }} pagination={pagination} simple rowKey={record => record.id} getBodyWrapper={this.getBodyWrapper} /> - ) -} - -list.propTypes = { - onPageChange: PropTypes.func, - onDeleteItem: PropTypes.func, - onEditItem: PropTypes.func, - dataSource: PropTypes.array, - loading: PropTypes.any, - pagination: PropTypes.any + } } export default list diff --git a/src/components/users/list.less b/src/components/users/list.less index b280ec3..a89983f 100644 --- a/src/components/users/list.less +++ b/src/components/users/list.less @@ -7,4 +7,83 @@ border-radius: 50%; } } + + :global { + .ant-table-tbody > tr > td, + .ant-table-thead > tr > th { + &:nth-child(1) { + width: 6%; + } + + &:nth-child(2) { + width: 8%; + } + + &:nth-child(3) { + width: 8%; + } + + &:nth-child(4) { + width: 6%; + } + + &:nth-child(5) { + width: 4%; + } + + &:nth-child(6) { + width: 8%; + } + + &:nth-child(7) { + width: 16%; + } + + &:nth-child(8) { + width: 18%; + } + + &:nth-child(9) { + width: 15%; + } + + &:nth-child(10) { + width: 11%; + } + } + + .ant-table-thead { + & > tr { + height: 60px; + line-height: 60px; + transition: none; + display: block; + + & > th { + display: inline-flex; + align-items: center; + justify-content: center; + } + } + } + + .ant-table-tbody { + & > tr { + transition: none; + display: block; + border-bottom: 1px solid #f5f5f5; + + & > td { + border-bottom: none; + display: inline-flex; + align-items: center; + justify-content: center; + } + + &.ant-table-expanded-row-level-1 > td { + height: auto; + } + } + } + } } diff --git a/src/components/users/search.less b/src/components/users/search.less index 9717728..3c0f934 100644 --- a/src/components/users/search.less +++ b/src/components/users/search.less @@ -1,8 +1 @@ -// .normal { -// display: flex; -// margin-bottom: 20px; -// } -// -// .search { -// flex: 1; -// } +Error: Source sample is missing. diff --git a/src/router.js b/src/router.js index 033ab69..1a6d457 100644 --- a/src/router.js +++ b/src/router.js @@ -29,14 +29,6 @@ export default function ({history, app}) { cb(null, require('./routes/users')) }) } - }, { - path: 'usersMotion', - name: 'usersMotion', - getComponent (nextState, cb) { - require.ensure([], require => { - cb(null, require('./routes/usersMotion')) - }) - } }, { path: 'ui/ico', name: 'ui/ico', diff --git a/src/routes/usersMotion.js b/src/routes/usersMotion.js deleted file mode 100644 index 9823ad1..0000000 --- a/src/routes/usersMotion.js +++ /dev/null @@ -1,109 +0,0 @@ -import React, { PropTypes } from 'react' -import { routerRedux } from 'dva/router' -import { connect } from 'dva' -import UserList from '../components/users/list' -import UserSearch from '../components/users/search' -import UserModal from '../components/users/modal' - -function Users ({ location, dispatch, users }) { - const { loading, list, pagination, currentItem, modalVisible, modalType } = users - const { field, keyword } = location.query - - const userModalProps = { - item: modalType === 'create' ? {} : currentItem, - type: modalType, - visible: modalVisible, - onOk (data) { - dispatch({ - type: `users/${modalType}`, - payload: data - }) - }, - onCancel () { - dispatch({ - type: 'users/hideModal' - }) - } - } - - const userListProps = { - dataSource: list, - loading, - pagination: pagination, - onPageChange (page) { - const query = location.query - dispatch(routerRedux.push({ - pathname: '/users', - query: { - ...query, - page: page.current, - pageSize: page.pageSize - } - })) - }, - onDeleteItem (id) { - dispatch({ - type: 'users/delete', - payload: id - }) - }, - onEditItem (item) { - dispatch({ - type: 'users/showModal', - payload: { - modalType: 'update', - currentItem: item - } - }) - } - } - - const userSearchProps = { - field, - keyword, - onSearch (fieldsValue) { - !!fieldsValue.keyword.length ? - dispatch(routerRedux.push({ - pathname: '/users', - query: { - field: fieldsValue.field, - keyword: fieldsValue.keyword - } - })) : - dispatch(routerRedux.push({ - pathname: '/users' - })) - }, - onAdd () { - dispatch({ - type: 'users/showModal', - payload: { - modalType: 'create' - } - }) - } - } - - const UserModalGen = () => - - - return ( -
- - - -
- ) -} - -Users.propTypes = { - users: PropTypes.object, - location: PropTypes.object, - dispatch: PropTypes.func -} - -function mapStateToProps ({ users }) { - return { users } -} - -export default connect(mapStateToProps)(Users)