chowa
Version:
UI component library based on React
164 lines (163 loc) • 6.13 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 classnames_1 = require("classnames");
const utils_1 = require("../utils");
const dropdown_1 = require("../dropdown");
const icon_1 = require("../icon");
const radio_group_1 = require("../radio-group");
const checkbox_group_1 = require("../checkbox-group");
const button_1 = require("../button");
class TableFilter extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
filterVisible: false,
selfFilterValues: [],
filterValue: undefined
};
[
'onVisibleChange',
'onMultipleFilterChange',
'onSingleFilterChange',
'resetFilter',
'doFilter'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidMount() {
if (this.props.filtered && Array.isArray(this.props.filterValues)) {
this.setState({
selfFilterValues: this.props.filterValues
}, () => {
this.doFilter();
});
}
}
componentDidUpdate(preProps) {
if (utils_1.isExist(preProps.activeFilter)
&& preProps.activeFilter.dataIndex === this.props.dataIndex
&& utils_1.isExist(this.props.activeFilter)
&& this.props.activeFilter.dataIndex !== this.props.dataIndex) {
this.setState({
selfFilterValues: [],
filterValue: undefined
});
}
if (this.props.filtered
&& Array.isArray(this.props.filterValues)
&& !utils_1.isEqual(preProps.filterValues, this.props.filterValues)) {
this.setState({
selfFilterValues: this.props.filterValues
}, () => {
this.doFilter();
});
}
}
doFilter() {
const { filterMultiple, dataIndex, updateTable, filterMethod } = this.props;
const { filterValue, selfFilterValues } = this.state;
const values = filterMultiple ? selfFilterValues : [filterValue];
if (filterMethod) {
filterMethod(dataIndex, values);
}
else {
throw new Error('Table must provide a filtering method as filterMethod');
}
updateTable({
filterInfo: {
dataIndex,
values
}
});
this.setState({ filterVisible: false });
}
resetFilter() {
const { activeFilter, dataIndex, updateTable, filterMethod } = this.props;
if (filterMethod) {
filterMethod(dataIndex, []);
}
else {
throw new Error('Table must provide a filtering method as filterMethod');
}
if (utils_1.isExist(activeFilter) && activeFilter.dataIndex === dataIndex) {
updateTable({
filterInfo: undefined
});
}
this.setState({
selfFilterValues: [],
filterValue: undefined
});
this.setState({ filterVisible: false });
}
onVisibleChange(v) {
this.setState({
filterVisible: v
});
}
onMultipleFilterChange(values) {
this.setState({
selfFilterValues: values
});
}
onSingleFilterChange(value) {
this.setState({
filterValue: value
});
}
compileFilters() {
const { filters } = this.props;
const ret = [];
filters.forEach((filter) => {
if (typeof filter === 'object') {
ret.push(filter);
}
else {
ret.push({
label: filter,
value: filter
});
}
});
return ret;
}
renderContent() {
const { filterMultiple } = this.props;
const { filterValue, selfFilterValues } = this.state;
const renderFilters = this.compileFilters();
const disabled = filterMultiple
? selfFilterValues.length === 0
: filterValue === undefined;
const selectNode = filterMultiple
? (React.createElement(checkbox_group_1.default, { mode: 'vertical', value: selfFilterValues, onChange: this.onMultipleFilterChange, options: renderFilters }))
: (React.createElement(radio_group_1.default, { mode: 'vertical', value: filterValue, onChange: this.onSingleFilterChange, options: renderFilters }));
return (React.createElement("div", { className: utils_1.preClass('table-filter-menu') },
selectNode,
React.createElement("div", { className: utils_1.preClass('table-filter-handler') },
React.createElement(button_1.default, { size: 'small', type: 'primary', disabled: disabled, onClick: this.doFilter }, "\u786E\u5B9A"),
React.createElement(button_1.default, { size: 'small', disabled: disabled, onClick: this.resetFilter }, "\u91CD\u7F6E"))));
}
render() {
const { filterVisible } = this.state;
const { activeFilter, dataIndex } = this.props;
const filterClass = classnames_1.default({
[utils_1.preClass('table-filter')]: true,
[utils_1.preClass('table-filter-active')]: filterVisible,
[utils_1.preClass('table-filtered')]: utils_1.isExist(activeFilter) && activeFilter.dataIndex === dataIndex
});
return (React.createElement(dropdown_1.default, { visible: filterVisible, onVisibleChange: this.onVisibleChange, withArrow: true, content: this.renderContent(), placement: 'bottom' },
React.createElement("div", { className: filterClass },
React.createElement(icon_1.default, { type: 'filter' }))));
}
}
exports.default = TableFilter;