Remove table animation.

src/components/DataTable/AnimTableBody.js

@@ -1,56 +0,0 @@
-import React from 'react'
-import { TweenOneGroup } from 'rc-tween-one'
-
-const enterAnim = [
-  {
-    opacity: 0,
-    x: 30,
-    backgroundColor: '#fffeee',
-    duration: 0,
-  },
-  {
-    height: 0,
-    duration: 200,
-    type: 'from',
-    delay: 250,
-    ease: 'easeOutQuad',
-    onComplete: e => {
-      e.target.style.height = 'auto'
-    },
-  },
-  {
-    opacity: 1,
-    x: 0,
-    duration: 250,
-    ease: 'easeOutQuad',
-  },
-  {
-    delay: 1000,
-    backgroundColor: '#fff',
-  },
-]
-
-const leaveAnim = [
-  {
-    duration: 250,
-    x: -30,
-    opacity: 0,
-  },
-  {
-    height: 0,
-    duration: 200,
-    ease: 'easeOutQuad',
-  },
-]
-
-const AnimTableBody = props => (
-  <TweenOneGroup
-    component="tbody"
-    {...props}
-    enter={enterAnim}
-    leave={leaveAnim}
-    appear={false}
-  />
-)
-
-export default AnimTableBody

src/components/Layout/Header.js

@@ -157,8 +157,9 @@ class Header extends PureComponent {
 }
 
 Header.propTypes = {
-  menus: PropTypes.array,
+  fixed: PropTypes.bool,
   user: PropTypes.object,
+  menus: PropTypes.array,
   collapsed: PropTypes.bool,
   onSignOut: PropTypes.func,
   notifications: PropTypes.array,

src/pages/user/components/Filter.js

@@ -3,16 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import moment from 'moment'
 import { FilterItem } from 'components'
-import {
-  Form,
-  Button,
-  Row,
-  Col,
-  DatePicker,
-  Input,
-  Cascader,
-  Switch,
-} from 'antd'
+import { Form, Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
 import city from 'utils/city'
 
 const { Search } = Input
@@ -33,8 +24,6 @@ const TwoColProps = {
 
 const Filter = ({
   onAdd,
-  isMotion,
-  switchIsMotion,
   onFilterChange,
   filter,
   form: { getFieldDecorator, getFieldsValue, setFieldsValue },
@@ -130,13 +119,7 @@ const Filter = ({
         md={{ span: 24 }}
         sm={{ span: 24 }}
       >
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-          }}
-        >
+        <Row type="flex" align="middle" justify="space-between">
           <div>
             <Button
               type="primary"
@@ -147,20 +130,10 @@ const Filter = ({
             </Button>
             <Button onClick={handleReset}>Reset</Button>
           </div>
-          <div className="flex-vertical-center">
-            <Switch
-              className="ant-switch-large"
-              style={{ marginRight: 16 }}
-              defaultChecked={isMotion}
-              onChange={switchIsMotion}
-              checkedChildren="Motion"
-              unCheckedChildren="Motion"
-            />
-            <Button type="ghost" onClick={onAdd}>
-              Create
-            </Button>
-          </div>
-        </div>
+          <Button type="ghost" onClick={onAdd}>
+            Create
+          </Button>
+        </Row>
       </Col>
     </Row>
   )
@@ -168,8 +141,6 @@ const Filter = ({
 
 Filter.propTypes = {
   onAdd: PropTypes.func,
-  isMotion: PropTypes.bool,
-  switchIsMotion: PropTypes.func,
   form: PropTypes.object,
   filter: PropTypes.object,
   onFilterChange: PropTypes.func,

src/pages/user/components/List.js

@@ -1,21 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Table, Modal } from 'antd'
-import classnames from 'classnames'
 import { DropOption } from 'components'
 import Link from 'umi/link'
-import AnimTableBody from 'components/DataTable/AnimTableBody'
 import styles from './List.less'
 
 const { confirm } = Modal
 
-const List = ({
-  onDeleteItem,
-  onEditItem,
-  isMotion,
-  location,
-  ...tableProps
-}) => {
+const List = ({ onDeleteItem, onEditItem, location, ...tableProps }) => {
   const handleMenuClick = (record, e) => {
     if (e.key === '1') {
       onEditItem(record)
@@ -98,26 +90,15 @@ const List = ({
     },
   ]
 
-  const AnimateBody = props => {
-    return <AnimTableBody {...props} />
-  }
-
-  const CommonBody = props => {
-    return <tbody {...props} />
-  }
-
   return (
     <Table
       {...tableProps}
-      className={classnames(styles.table, { [styles.motion]: isMotion })}
+      className={styles.table}
       bordered
       scroll={{ x: 1250 }}
       columns={columns}
       simple
       rowKey={record => record.id}
-      components={{
-        body: { wrapper: isMotion ? AnimateBody : CommonBody },
-      }}
     />
   )
 }
@@ -125,7 +106,6 @@ const List = ({
 List.propTypes = {
   onDeleteItem: PropTypes.func,
   onEditItem: PropTypes.func,
-  isMotion: PropTypes.bool,
   location: PropTypes.object,
 }
 

src/pages/user/components/List.less

@@ -11,88 +11,4 @@
       height: 62px;
     }
   }
-
-  &.motion {
-    :global {
-      .ant-table-tbody > tr > td,
-      .ant-table-thead > tr > th {
-        // 选择框 <6 会导致换行
-        &:nth-child(1) {
-          width: 6%;
-        }
-
-        &:nth-child(2) {
-          width: 6%;
-        }
-
-        &:nth-child(3) {
-          width: 8%;
-        }
-
-        &:nth-child(4) {
-          width: 8%;
-        }
-
-        &:nth-child(5) {
-          width: 6%;
-        }
-
-        &:nth-child(6) {
-          width: 6%;
-        }
-
-        &:nth-child(7) {
-          width: 8%;
-        }
-
-        &:nth-child(8) {
-          width: 15%;
-        }
-
-        &:nth-child(9) {
-          width: 18%;
-        }
-
-        &:nth-child(10) {
-          width: 12%;
-        }
-
-        &:nth-child(11) {
-          width: 7%;
-        }
-      }
-
-      .ant-table-thead {
-        & > tr {
-          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;
-          }
-        }
-      }
-    }
-  }
 }

src/pages/user/index.js

@@ -20,7 +20,6 @@ class User extends PureComponent {
       currentItem,
       modalVisible,
       modalType,
-      isMotion,
       selectedRowKeys,
     } = user
 
@@ -64,7 +63,6 @@ class User extends PureComponent {
       loading: loading.effects['user/query'],
       pagination,
       location,
-      isMotion,
       onChange(page) {
         handleRefresh({
           page: page.current,
@@ -107,7 +105,6 @@ class User extends PureComponent {
     }
 
     const filterProps = {
-      isMotion,
       filter: {
         ...query,
       },
@@ -125,9 +122,6 @@ class User extends PureComponent {
           },
         })
       },
-      switchIsMotion() {
-        dispatch({ type: 'user/switchIsMotion' })
-      },
     }
 
     const handleDeleteItems = () => {