diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md index 6f8f03c8f7..bfc737f0fb 100644 --- a/components/transfer/demo/basic.md +++ b/components/transfer/demo/basic.md @@ -7,9 +7,23 @@ --- ````jsx -import { Transfer, Button } from 'antd'; +import { Transfer, Button, Menu, Dropdown, Icon } from 'antd'; const container = document.getElementById('components-transfer-demo-basic'); +const menu = + + 编辑 + +; + +function makeDropdown(item) { + return + + ; +} + const App = React.createClass({ getInitialState() { return { @@ -17,6 +31,10 @@ const App = React.createClass({ }; }, + componentDidMount() { + this.getMock(); + }, + getMock() { let mockData = []; for (let i = 0; i < 10; i++) { @@ -33,7 +51,7 @@ const App = React.createClass({ }, render() { return
- +
; } diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx index 4b2cc270b7..32538796de 100644 --- a/components/transfer/index.jsx +++ b/components/transfer/index.jsx @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import List from './list.jsx'; -import Button from '../button'; +import Operation from './operation.jsx'; function noop() { } @@ -12,6 +12,8 @@ class Transfer extends Component { this.state = { dataSource: props.dataSource, + leftFilter: '', + rightFilter: '', }; } @@ -22,7 +24,7 @@ class Transfer extends Component { } moveTo(direction) { - // TODO: 讨论是否要将新移动的元素置顶 + // TODO: 将新移动的元素置顶: 存index至state中 const { filterKey } = this.props; let { dataSource } = this.state; if ( direction === 'right' ) { @@ -33,6 +35,10 @@ class Transfer extends Component { data.checked = false; } }); + this.setState({ + leftFilter: '', + dataSource: dataSource, + }); } else { dataSource.forEach((data) => { if ( data[filterKey] && data.checked ) { @@ -40,32 +46,32 @@ class Transfer extends Component { data.checked = false; } }); + this.setState({ + rightFilter: '', + dataSource: dataSource, + }); } - - this.setState({ - dataSource: dataSource, - }); } handleSelectAll(direction, globalCheckStatus) { const { filterKey } = this.props; - const { dataSource } = this.state; + const { dataSource, leftFilter, rightFilter } = this.state; switch ( globalCheckStatus ) { // 选中部分,则全选 case 'part': case 'none': dataSource.forEach((data)=> { // data[filterKey] true 时,在右侧 - if ( direction === 'right' && data[filterKey] - || direction === 'left' && !data[filterKey] ) { + if ( direction === 'right' && data[filterKey] && this.matchFilter(data.title, rightFilter) + || direction === 'left' && !data[filterKey] && this.matchFilter(data.title, leftFilter)) { data.checked = true; } }); break; case 'all': dataSource.forEach((data)=> { - if ( direction === 'right' && data[filterKey] - || direction === 'left' && !data[filterKey] ) { + if ( direction === 'right' && data[filterKey] && this.matchFilter(data.title, rightFilter) + || direction === 'left' && !data[filterKey] && this.matchFilter(data.title, leftFilter)) { data.checked = false; } }); @@ -79,6 +85,24 @@ class Transfer extends Component { }); } + handleFilter(direction, e) { + const filterText = e.target.value; + if ( direction === 'left') { + this.setState({ + 'leftFilter': filterText + }); + } else { + this.setState({ + 'rightFilter': filterText + }); + } + } + + matchFilter(text, filterText) { + const regex = new RegExp(filterText); + return text.match(regex); + } + handleSelect(selectedItem, checked) { const { dataSource } = this.state; dataSource.forEach((data)=> { @@ -93,29 +117,40 @@ class Transfer extends Component { } render() { - const { prefixCls, leftConfig, rightConfig, filterKey } = this.props; - const { dataSource } = this.state; + const { prefixCls, leftConfig, rightConfig, filterKey, extraRender } = this.props; + const { dataSource, leftFilter, rightFilter } = this.state; let leftDataSource = []; let rightDataSource = []; dataSource.map((item)=> { + // filter item if ( item[filterKey] ) { - rightDataSource.push(item); + if ( this.matchFilter(item.title, rightFilter) ) { + rightDataSource.push(item); + } } else { - leftDataSource.push(item); + if ( this.matchFilter(item.title, leftFilter) ) { + leftDataSource.push(item); + } } }); return
- -
- - -
- + + +
; } } @@ -141,7 +176,8 @@ Transfer.defaultProps = { showSearch: false, searchPlaceholder: '请输入搜索内容', extraRender: noop, - footer: noop, + footer: ()=> { + }, }; Transfer.propTypes = { diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx index 65fded17c9..6183e2fa66 100644 --- a/components/transfer/list.jsx +++ b/components/transfer/list.jsx @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import Checkbox from '../checkbox'; -import Button from '../button'; +import Search from './search.jsx'; import {classSet} from 'rc-util'; function noop() { @@ -20,6 +20,10 @@ class TransferList extends Component { this.props.handleSelect(selectedItem, e.target.checked); } + handleFilter(e) { + this.props.handleFilter(e); + } + getGlobalCheckStatus() { let { dataSource } = this.props; @@ -65,20 +69,7 @@ class TransferList extends Component { } render() { - const { prefixCls, config, footer, extraRender, dataSource } = this.props; - - let defaultFooter = [ - , - - ]; + const { prefixCls, config, footer, extraRender, dataSource, filter } = this.props; let globalCheckStatus = this.getGlobalCheckStatus(); @@ -92,6 +83,7 @@ class TransferList extends Component { })} {dataSource.length} 条{config.title}
+
-
- { defaultFooter || footer } -
+ { footer ?
+ { footer } +
: null } ); } } @@ -114,6 +108,7 @@ TransferList.defaultProps = { prefixCls: 'ant-transfer-list', dataSource: [], onChange: noop, + footer: [], extraRender: noop, }; @@ -122,6 +117,7 @@ TransferList.propTypes = { dataSource: PropTypes.array, footer: PropTypes.array, searchPlaceholder: PropTypes.string, + handleFilter: PropTypes.func, handleSelect: PropTypes.func, handleSelectAll: PropTypes.func, config: PropTypes.object, diff --git a/components/transfer/operation.jsx b/components/transfer/operation.jsx index e69de29bb2..36be377bf3 100644 --- a/components/transfer/operation.jsx +++ b/components/transfer/operation.jsx @@ -0,0 +1,34 @@ +import React, { Component, PropTypes } from 'react'; +import Button from '../button'; + +function noop() { +} + +class TransferOperation extends Component { + render() { + const { moveToLeft, moveToRight, leftArrowText, rightArrowText } = this.props; + + return
+ + +
; + } +} + +TransferOperation.defaultProps = { + prefixCls: 'ant-transfer-operation', + leftArrowText: '', + rightArrowText: '', + moveToLeft: noop, + moveToRight: noop, +}; + +TransferOperation.propTypes = { + prefixCls: PropTypes.string, + leftArrowText: PropTypes.string, + rightArrowText: PropTypes.string, + moveToLeft: PropTypes.func, + moveToRight: PropTypes.func, +}; + +export default TransferOperation; diff --git a/components/transfer/search.jsx b/components/transfer/search.jsx index 376745058a..34221e6d36 100644 --- a/components/transfer/search.jsx +++ b/components/transfer/search.jsx @@ -1,28 +1,34 @@ -import { Component, PropTypes } from 'react'; +import React, { Component, PropTypes } from 'react'; function noop() { } -class TransferSearch extends Component { - render() { +class Search extends Component { + constructor(props) { + super(props); + } + handleChange(e) { + this.props.onChange(e); + } + + render() { + const {placeholder, value} = this.props; + return ; } } -TransferSearch.defaultProps = { +Search.defaultProps = { prefixCls: 'ant-transfer-search', - value: PropTypes.string, - defaultValue: PropTypes.string, + placeholder: '请输入搜索内容', onChange: noop, onDelete: noop, }; -TransferSearch.propTypes = { +Search.propTypes = { prefixCls: PropTypes.string, - value: PropTypes.string, - defaultValue: PropTypes.string, - onChange: PropTypes.func, - onDelete: PropTypes.func, + placeholder: PropTypes.string, + onChange: PropTypes.func }; -export default TransferSearch; +export default Search; diff --git a/style/components/transfer.less b/style/components/transfer.less index e9c239a6c9..ebd97a7f5e 100644 --- a/style/components/transfer.less +++ b/style/components/transfer.less @@ -25,9 +25,18 @@ li { padding: 7px 16px; + .extra-holder { + display: none; + } + &:hover { cursor: pointer; background-color: #EEF9FE; + + .extra-holder { + float: right; + display: inline-block; + } } } }