add:user-motion

2026-10-28 11:24:50 +00:00 · 2017-02-09 23:37:23 +08:00
parent 4def8c5d70
commit c97cf3e4f5
5 changed files with 215 additions and 218 deletions
@@ -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) => <img width={24} src={text} />
-    }, {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name'
-    }, {
-      title: '昵称',
-      dataIndex: 'nickName',
-      key: 'nickName'
-    }, {
-      title: '年龄',
-      dataIndex: 'age',
-      key: 'age',
-      render: (text) => <span>{text}岁</span>
-    }, {
-      title: '性别',
-      dataIndex: 'isMale',
-      key: 'isMale',
-      render: (text) => <span>{text
-            ? '男'
-            : '女'}</span>
-    }, {
-      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) => (
-        <p>
-          <a onClick={() => onEditItem(record)} style={{
-            marginRight: 4
-          }}>编辑</a>
-          <Popconfirm title='确定要删除吗？' onConfirm={() => onDeleteItem(record.id)}>
-            <a>删除</a>
-          </Popconfirm>
-        </p>
-      )
+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 (
+      <TweenOneGroup component='tbody' className={body.props.className} enter={this.enterAnim} leave={this.leaveAnim} appear={false}>
+        {body.props.children}
+      </TweenOneGroup>
+    )
+  }

-  return (
-    <div>
-      <Table
-        className={styles.table}
-        bordered
-        scroll={{ x: 1200 }}
-        columns={columns}
-        dataSource={dataSource}
-        loading={loading}
-        onChange={onPageChange}
-        pagination={pagination}
-        simple
-        rowKey={record => 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) => <img width={24} src={text} />
+      }, {
+        title: '姓名',
+        dataIndex: 'name',
+        key: 'name'
+      }, {
+        title: '昵称',
+        dataIndex: 'nickName',
+        key: 'nickName'
+      }, {
+        title: '年龄',
+        dataIndex: 'age',
+        key: 'age',
+        render: (text) => <span>{text}岁</span>
+      }, {
+        title: '性别',
+        dataIndex: 'isMale',
+        key: 'isMale',
+        render: (text) => <span>{text
+              ? '男'
+              : '女'}</span>
+      }, {
+        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) => (
+          <p>
+            <a onClick={() => onEditItem(record)} style={{
+              marginRight: 4
+            }}>编辑</a>
+            <Popconfirm title='确定要删除吗？' onConfirm={() => onDeleteItem(record.id)}>
+              <a>删除</a>
+            </Popconfirm>
+          </p>
+        )
+      }
+    ]
+    const self = this
+    return <div>
+      <Table className={styles.table} bordered scroll={{
+        x: 1200
+      }} columns={columns} dataSource={dataSource} loading={loading} onChange={(page) => {
+        self.newPage = page.current
+        onPageChange(page)
+      }} pagination={pagination} simple rowKey={record => record.id} getBodyWrapper={this.getBodyWrapper} />
    </div>
-  )
-}
-
-list.propTypes = {
-  onPageChange: PropTypes.func,
-  onDeleteItem: PropTypes.func,
-  onEditItem: PropTypes.func,
-  dataSource: PropTypes.array,
-  loading: PropTypes.any,
-  pagination: PropTypes.any
+  }
 }

 export default list
@@ -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;
+        }
+      }
+    }
+  }
 }
@@ -1,8 +1 @@
-// .normal {
-//   display: flex;
-//   margin-bottom: 20px;
-// }
-// 
-// .search {
-//   flex: 1;
-// }
+Error: Source sample is missing.
@@ -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',
@@ -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 = () =>
-    <UserModal {...userModalProps} />
-
-  return (
-    <div className='content-inner'>
-      <UserSearch {...userSearchProps} />
-      <UserList {...userListProps} />
-      <UserModalGen />
-    </div>
-  )
-}
-
-Users.propTypes = {
-  users: PropTypes.object,
-  location: PropTypes.object,
-  dispatch: PropTypes.func
-}
-
-function mapStateToProps ({ users }) {
-  return { users }
-}
-
-export default connect(mapStateToProps)(Users)