Alawn/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin synced 2026-10-21 23:23:43 +00:00
Code Issues Releases Wiki Activity

add user-IsMotion

Browse Source
This commit is contained in:
zuiidea
2017-02-27 22:15:13 +08:00
parent f303d0ae3c
commit c5dc892300
6 changed files with 102 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/header.js
-1
View File
@@ -16,7 +16,6 @@ function Header ({user, logout, switchSider, siderFold, isNavbar, menuPopoverVis
navOpenKeys,
changeOpenKeys
}
console.log(menuPopoverVisible)
return (
<div className={styles.header}>
{isNavbar
src/components/users/list.js
+6 -14
View File
@@ -1,22 +1,12 @@
import React, {PropTypes} from 'react'
import {Table, Dropdown, Button, Menu, Icon, Modal} from 'antd'
import styles from './list.less'
import classnames from 'classnames'
import TableBodyWrapper from '../common/TableBodyWrapper'
const confirm = Modal.confirm
function list ({
loading,
dataSource,
pagination,
updatePower,
deletePower,
onPageChange,
onDeleteItem,
onEditItem,
onStatusItem,
location
}) {
function list ({ loading, dataSource, pagination, updatePower, deletePower, onPageChange, onDeleteItem, onEditItem, onStatusItem, isMotion, location }) {
const handleMenuClick = (record, e) => {
if (e.key === '1') {
onEditItem(record)
@@ -97,12 +87,14 @@ function list ({
current: pagination.current
}
const getBodyWrapper = (body) => (<TableBodyWrapper {...getBodyWrapperProps} body={body} />)
console.log(isMotion)
const getBodyWrapper = body => isMotion ? <TableBodyWrapper {...getBodyWrapperProps} body={body} /> : body
return (
<div>
<Table
className={styles.table}
className={classnames({[styles.table]: true, [styles.motion]: isMotion})}
bordered
scroll={{ x: 1200 }}
columns={columns}
src/components/users/list.less
+74 -67
View File
@@ -8,77 +8,84 @@
:global {
.ant-table-tbody > tr > td,
.ant-table-thead > tr > th {
height: 60px;
&:nth-child(1) {
width: 6%;
}
&:nth-child(2) {
width: 8%;
}
&:nth-child(3) {
width: 8%;
}
&:nth-child(4) {
width: 6%;
}
&:nth-child(5) {
width: 6%;
}
&:nth-child(6) {
width: 8%;
}
&:nth-child(7) {
width: 16%;
}
&:nth-child(8) {
width: 20%;
}
&:nth-child(9) {
width: 14%;
}
&:nth-child(10) {
width: 8%;
}
height: 62px;
}
}
.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;
&.motion {
:global {
.ant-table-tbody > tr > td,
.ant-table-thead > tr > th {
&:nth-child(1) {
width: 6%;
}
&.ant-table-expanded-row-level-1 > td {
height: auto;
&:nth-child(2) {
width: 8%;
}
&:nth-child(3) {
width: 8%;
}
&:nth-child(4) {
width: 6%;
}
&:nth-child(5) {
width: 6%;
}
&:nth-child(6) {
width: 8%;
}
&:nth-child(7) {
width: 16%;
}
&:nth-child(8) {
width: 20%;
}
&:nth-child(9) {
width: 14%;
}
&:nth-child(10) {
width: 8%;
}
}
.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/components/users/search.js
+4 -1
View File
@@ -1,5 +1,5 @@
import React, { PropTypes } from 'react'
import { Form, Button, Row, Col } from 'antd'
import { Form, Button, Row, Col, Switch } from 'antd'
import SearchGroup from '../ui/search'
const search = ({
@@ -7,6 +7,8 @@ const search = ({
keyword,
onSearch,
onAdd,
isMotion,
switchIsMotion,
form: {
getFieldDecorator,
validateFields,
@@ -33,6 +35,7 @@ const search = ({
<SearchGroup {...searchGroupProps} />
</Col>
<Col lg={{offset: 8, span: 8}} md={12} sm={8} xs={24} style={{marginBottom: 16, textAlign: 'right'}}>
<Switch style={{marginRight: 16}} defaultChecked={isMotion} onChange={switchIsMotion} checkedChildren={'动画开'} unCheckedChildren={'动画关'} />
<Button size='large' type='ghost' onClick={onAdd}>添加</Button>
</Col>
</Row>
src/models/users.js
+12
View File
@@ -11,6 +11,7 @@ export default {
currentItem: {},
modalVisible: false,
modalType: 'create',
isMotion: localStorage.getItem('antdAdminUserIsMotion') === 'true',
pagination: {
showSizeChanger: true,
showQuickJumper: true,
@@ -98,6 +99,13 @@ export default {
}
})
}
},
*switchIsMotion ({
payload
}, {put}) {
yield put({
type: 'handleSwitchIsMotion'
})
}
},
@@ -120,6 +128,10 @@ export default {
},
hideModal (state) {
return { ...state, modalVisible: false }
},
handleSwitchIsMotion (state) {
localStorage.setItem('antdAdminUserIsMotion', !state.isMotion)
return { ...state, isMotion: !state.isMotion }
}
}
src/routes/users.js
+6 -1
View File
@@ -6,7 +6,7 @@ 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 { loading, list, pagination, currentItem, modalVisible, modalType, isMotion } = users
const { field, keyword } = location.query
const userModalProps = {
@@ -31,6 +31,7 @@ function Users ({ location, dispatch, users }) {
loading,
pagination: pagination,
location,
isMotion,
onPageChange (page) {
const { query, pathname } = location
dispatch(routerRedux.push({
@@ -62,6 +63,7 @@ function Users ({ location, dispatch, users }) {
const userSearchProps = {
field,
keyword,
isMotion,
onSearch (fieldsValue) {
fieldsValue.keyword.length ? dispatch(routerRedux.push({
pathname: '/users',
@@ -80,6 +82,9 @@ function Users ({ location, dispatch, users }) {
modalType: 'create'
}
})
},
switchIsMotion () {
dispatch({type: 'users/switchIsMotion'})
}
}