chowa
Version:
UI component library based on React
140 lines (139 loc) • 6.8 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const button_1 = require("../button");
const i18n_1 = require("../i18n");
const transfer_model_1 = require("./transfer-model");
const tool_1 = require("./tool");
class Transfer extends React.PureComponent {
constructor(props) {
super(props);
const result = utils_1.isExist(props.value) ? props.value : props.defaultValue;
this.state = Object.assign({ result, renderData: tool_1.perfectDataIndex(props.data) }, tool_1.compuntedSelectedIndexs(props.selectedIndexs, result));
[
'onSourceSelectChangeHandler',
'onTargetSelectChangeHandler',
'moveToTarget',
'moveToSource'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.value, this.props.value) && !utils_1.isEqual(this.state.result, this.props.value)) {
this.setState({ result: this.props.value });
}
if (!utils_1.isEqual(preProps.selectedIndexs, this.props.selectedIndexs)) {
this.setState(Object.assign({}, tool_1.compuntedSelectedIndexs(this.props.selectedIndexs, this.state.result)));
}
if (!utils_1.isEqual(preProps.data, this.props.data)) {
this.setState({ renderData: tool_1.perfectDataIndex(this.props.data) });
}
}
onSourceSelectChangeHandler(list) {
this.setState({ sourceSelectedIndexs: list });
if (this.props.onSelectChange) {
this.props.onSelectChange(list, this.state.targetSelectedIndexs);
}
}
onTargetSelectChangeHandler(list) {
this.setState({ targetSelectedIndexs: list });
if (this.props.onSelectChange) {
this.props.onSelectChange(this.state.sourceSelectedIndexs, list);
}
}
moveToTarget() {
const { onChange } = this.props;
const { sourceSelectedIndexs } = this.state;
const result = this.state.result.concat(sourceSelectedIndexs);
this.setState({
result,
sourceSelectedIndexs: []
});
if (onChange) {
onChange(result);
}
}
moveToSource() {
const { onChange } = this.props;
const { targetSelectedIndexs } = this.state;
const result = [];
this.state.result.forEach((index) => {
if (!targetSelectedIndexs.includes(index)) {
result.push(index);
}
});
this.setState({
result,
targetSelectedIndexs: []
});
if (onChange) {
onChange(result);
}
}
render() {
const { className, style, searchable, searchPlaceholder, operations, titles, sourceFooter, targetFooter, listStyle, noDataDescription, noDataImg, noDataImgStyle, formatter, disabled, onSearch, filterOption, tabIndex } = this.props;
const { result, renderData, sourceSelectedIndexs, targetSelectedIndexs } = this.state;
const componentClass = classnames_1.default({
[utils_1.preClass('transfer')]: true,
[utils_1.preClass('transfer-disabled')]: disabled,
[className]: utils_1.isExist(className)
});
return (React.createElement(i18n_1.I18nReceiver, { module: 'Transfer' }, (i18n) => (React.createElement("section", { className: componentClass, style: style, tabIndex: disabled ? -1 : tabIndex },
React.createElement(transfer_model_1.default, { searchable: searchable, searchPlaceholder: searchPlaceholder || i18n.searchPlaceholder, title: utils_1.isExist(titles) ? titles[0] : i18n.titles[0], footer: sourceFooter, listStyle: listStyle, data: renderData.filter((item) => {
return !result.includes(item.index);
}), selectedIndexs: sourceSelectedIndexs, formatter: formatter, disabled: disabled, onSearch: onSearch, filterOption: filterOption, mode: 'source', onChange: this.onSourceSelectChangeHandler, noDataImg: noDataImg, noDataImgStyle: noDataImgStyle, noDataDescription: noDataDescription || i18n.noDataDescription }),
React.createElement("div", { className: utils_1.preClass('transfer-operate-wrapper') },
React.createElement(button_1.default, { className: utils_1.preClass('transfer-operate-btn'), disabled: sourceSelectedIndexs.length === 0 || disabled, onClick: this.moveToTarget, type: 'primary' }, operations[0]),
React.createElement(button_1.default, { className: utils_1.preClass('transfer-operate-btn'), disabled: targetSelectedIndexs.length === 0 || disabled, onClick: this.moveToSource, type: 'primary' }, operations[1])),
React.createElement(transfer_model_1.default, { searchable: searchable, searchPlaceholder: searchPlaceholder || i18n.searchPlaceholder, title: utils_1.isExist(titles) ? titles[1] : i18n.titles[1], footer: targetFooter, listStyle: listStyle, data: renderData.filter((item) => {
return result.includes(item.index);
}), selectedIndexs: targetSelectedIndexs, formatter: formatter, disabled: disabled, onSearch: onSearch, filterOption: filterOption, mode: 'target', onChange: this.onTargetSelectChangeHandler, noDataImg: noDataImg, noDataImgStyle: noDataImgStyle, noDataDescription: noDataDescription || i18n.noDataDescription })))));
}
}
Transfer.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
tabIndex: PropTypes.number,
data: PropTypes.array.isRequired,
value: PropTypes.array,
defaultValue: PropTypes.array,
formatter: PropTypes.func,
selectedIndexs: PropTypes.array,
titles: PropTypes.array,
searchable: PropTypes.bool,
onSearch: PropTypes.func,
filterOption: PropTypes.func,
searchPlaceholder: PropTypes.string,
noDataDescription: PropTypes.string,
noDataImg: PropTypes.string,
noDataImgStyle: PropTypes.object,
onChange: PropTypes.func,
listStyle: PropTypes.object,
operations: PropTypes.array,
onSelectChange: PropTypes.func,
sourceFooter: PropTypes.node,
targetFooter: PropTypes.node,
disabled: PropTypes.bool
};
Transfer.defaultProps = {
tabIndex: 0,
searchable: false,
value: [],
defaultValue: [],
selectedIndexs: [],
operations: ['>', '<'],
disabled: false
};
exports.default = Transfer;