chowa
Version:
UI component library based on React
157 lines (156 loc) • 7.09 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 input_1 = require("../input");
const checkbox_1 = require("../checkbox");
const icon_1 = require("../icon");
const no_data_1 = require("../no-data");
class TransferModel extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
searchVal: '',
selectAll: false,
renderData: props.data
};
[
'onSearchInputChangeHandler',
'onSelectAllChangeHandler',
'selectItemHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
getFilterRenderData(searchVal) {
const { filterOption, mode, data } = this.props;
let renderData = [].concat(data);
if (searchVal) {
if (filterOption) {
renderData = filterOption(renderData, searchVal, mode);
}
else {
renderData = renderData.filter((item) => {
return item.title.toString().indexOf(searchVal) > -1
|| (utils_1.hasProperty(item, 'guessers')
&& item.guessers.some((guesser) => guesser.indexOf(searchVal) > -1));
});
}
}
return renderData;
}
onSearchInputChangeHandler(e) {
const searchVal = e.target.value;
this.setState({
searchVal,
renderData: this.getFilterRenderData(searchVal)
});
if (this.props.onSearch) {
this.props.onSearch(e.target.value, this.props.mode);
}
}
onSelectAllChangeHandler(e) {
const { onChange } = this.props;
const { renderData } = this.state;
const selectAll = e.target.checked;
this.setState({
selectAll
});
const newSelectIndexs = [];
if (selectAll) {
renderData.forEach((item) => {
if (!item.disabled) {
newSelectIndexs.push(item.index);
}
});
}
onChange(newSelectIndexs);
}
selectItemHandler(item, e) {
const { selectedIndexs, onChange } = this.props;
const newSelectIndexs = [].concat(selectedIndexs);
if (e.target.checked) {
newSelectIndexs.push(item.index);
}
else {
newSelectIndexs.splice(newSelectIndexs.indexOf(item.index), 1);
}
onChange(newSelectIndexs);
}
componentDidUpdate(preProps) {
if (preProps.selectedIndexs.length !== this.props.selectedIndexs.length) {
const { selectedIndexs } = this.props;
const { renderData } = this.state;
let disabledCount = 0;
let selectCount = 0;
renderData.forEach((item) => {
if (item.disabled) {
return disabledCount++;
}
if (selectedIndexs.includes(item.index)) {
selectCount++;
}
});
this.setState({
selectAll: renderData.length === disabledCount + selectCount
&& renderData.length !== disabledCount
});
}
if (!utils_1.isEqual(preProps.data, this.props.data)) {
this.setState({ renderData: this.getFilterRenderData(this.state.searchVal) });
}
}
render() {
const { searchable, footer, title, listStyle, searchPlaceholder, formatter, noDataDescription, noDataImg, noDataImgStyle, selectedIndexs, disabled } = this.props;
const { searchVal, selectAll, renderData } = this.state;
return (React.createElement("div", { className: utils_1.preClass('transfer-model'), style: listStyle },
React.createElement("div", { className: utils_1.preClass('transfer-model-header') },
React.createElement(checkbox_1.default, { checked: selectAll, tabIndex: -1, indeterminate: !selectAll && selectedIndexs.length > 0, disabled: disabled || renderData.length === 0, onChange: this.onSelectAllChangeHandler, label: `${selectedIndexs.length > 0 ? selectedIndexs.length + '/' : ''}${renderData.length}项` }),
React.createElement("span", { className: utils_1.preClass('transfer-model-title') }, title)),
React.createElement("div", { className: utils_1.preClass('transfer-model-body') },
searchable &&
React.createElement("div", { className: utils_1.preClass('transfer-search-wrapper') },
React.createElement(input_1.default, { prefix: React.createElement(icon_1.default, { type: 'search' }), tabIndex: -1, type: 'text', disabled: disabled, onChange: this.onSearchInputChangeHandler, value: searchVal, clearable: true, placeholder: searchPlaceholder })),
React.createElement("ul", { className: utils_1.preClass('transfer-selector-wrapper') },
renderData.map((item) => {
const itemClass = classnames_1.default({
[utils_1.preClass('transfer-item')]: true,
[utils_1.preClass('transfer-item-disabled')]: item.disabled || disabled
});
return (React.createElement("li", { key: item.index, className: itemClass },
React.createElement(checkbox_1.default, { tabIndex: -1, onChange: this.selectItemHandler.bind(this, item), disabled: item.disabled || disabled, checked: !item.disabled && selectedIndexs.includes(item.index), label: utils_1.isExist(formatter) ? formatter(item) : item.title })));
}),
renderData.length === 0 && searchVal &&
React.createElement("li", { className: utils_1.preClass('transfer-empty') },
React.createElement(no_data_1.default, { description: noDataDescription, img: noDataImg, imgStyle: noDataImgStyle })))),
footer &&
React.createElement("div", { className: utils_1.preClass('transfer-model-footer') }, footer)));
}
}
TransferModel.propTypes = {
data: PropTypes.array.isRequired,
formatter: PropTypes.func,
title: PropTypes.node,
searchable: PropTypes.bool,
searchPlaceholder: PropTypes.string,
noDataDescription: PropTypes.string,
onChange: PropTypes.func,
listStyle: PropTypes.object,
footer: PropTypes.node,
selectedIndexs: PropTypes.array,
onSearch: PropTypes.func,
filterOption: PropTypes.func,
mode: PropTypes.string,
disabled: PropTypes.bool
};
exports.default = TransferModel;