1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp, _initialiseProps;
|
8 |
|
9 | import React from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import { polyfill } from 'react-lifecycles-compat';
|
12 | import classnames from 'classnames';
|
13 | import Dropdown from '../../dropdown';
|
14 | import Menu from '../../menu';
|
15 | import Button from '../../button';
|
16 | import Icon from '../../icon';
|
17 | import { KEYCODE } from '../../util';
|
18 |
|
19 |
|
20 | var Filter = (_temp = _class = function (_React$Component) {
|
21 | _inherits(Filter, _React$Component);
|
22 |
|
23 | function Filter(props) {
|
24 | _classCallCheck(this, Filter);
|
25 |
|
26 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
27 |
|
28 | _initialiseProps.call(_this);
|
29 |
|
30 | var filterParams = props.filterParams || {};
|
31 | var filterConfig = filterParams[props.dataIndex] || {};
|
32 | _this.state = {
|
33 | visible: filterConfig.visible || false,
|
34 | selectedKeys: filterConfig.selectedKeys || [],
|
35 | selectedKeysChangedByInner: true
|
36 | };
|
37 | _this._selectedKeys = [].concat(_this.state.selectedKeys);
|
38 | return _this;
|
39 | }
|
40 |
|
41 | Filter.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
42 | var state = {};
|
43 | if (nextProps.hasOwnProperty('filterParams') && typeof nextProps.filterParams !== 'undefined') {
|
44 | var dataIndex = nextProps.dataIndex || this.props.dataIndex;
|
45 | var filterParams = nextProps.filterParams || {};
|
46 | var filterConfig = filterParams[dataIndex] || {};
|
47 | var selectedKeys = void 0;
|
48 | if (prevState.selectedKeysChangedByInner) {
|
49 | selectedKeys = prevState.selectedKeys || [];
|
50 | state.selectedKeysChangedByInner = false;
|
51 | } else {
|
52 | selectedKeys = filterConfig.selectedKeys || [];
|
53 | }
|
54 |
|
55 | state.selectedKeys = selectedKeys;
|
56 | }
|
57 |
|
58 | return state;
|
59 | };
|
60 |
|
61 | Filter.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
62 | var selectedKeys = prevState.selectedKeys;
|
63 |
|
64 | this._selectedKeys = [].concat(selectedKeys);
|
65 | };
|
66 |
|
67 | Filter.prototype.render = function render() {
|
68 | var _classnames, _classnames2, _classnames3;
|
69 |
|
70 | var _props = this.props,
|
71 | filters = _props.filters,
|
72 | prefix = _props.prefix,
|
73 | locale = _props.locale,
|
74 | className = _props.className,
|
75 | filterMode = _props.filterMode,
|
76 | filterMenuProps = _props.filterMenuProps,
|
77 | filterProps = _props.filterProps,
|
78 | rtl = _props.rtl;
|
79 |
|
80 |
|
81 | var dropdownClassname = classnames(filterProps && filterProps.className, (_classnames = {}, _classnames[prefix + 'table-filter-menu'] = true, _classnames));
|
82 | var _state = this.state,
|
83 | visible = _state.visible,
|
84 | selectedKeys = _state.selectedKeys;
|
85 |
|
86 | var _ref = filterMenuProps || {},
|
87 | subMenuSelectable = _ref.subMenuSelectable,
|
88 | others = _objectWithoutProperties(_ref, ['subMenuSelectable']);
|
89 |
|
90 | function renderMenuItem(item) {
|
91 | return React.createElement(
|
92 | Menu.Item,
|
93 | { key: item.value },
|
94 | item.label
|
95 | );
|
96 | }
|
97 |
|
98 | function renderSubMenu(parent, children) {
|
99 | return React.createElement(
|
100 | Menu.SubMenu,
|
101 | { label: parent.label, key: parent.value, selectable: subMenuSelectable },
|
102 | renderMenuContent(children)
|
103 | );
|
104 | }
|
105 |
|
106 | function renderMenuContent(list) {
|
107 | return list.map(function (item) {
|
108 | if (item.children) {
|
109 | return renderSubMenu(item, item.children);
|
110 | } else {
|
111 | return renderMenuItem(item);
|
112 | }
|
113 | });
|
114 | }
|
115 |
|
116 | var content = renderMenuContent(filters),
|
117 | footer = React.createElement(
|
118 | 'div',
|
119 | { className: prefix + 'table-filter-footer' },
|
120 | React.createElement(
|
121 | Button,
|
122 | { type: 'primary', onClick: this.onFilterConfirm },
|
123 | locale.ok
|
124 | ),
|
125 | React.createElement(
|
126 | Button,
|
127 | { onClick: this.onFilterClear },
|
128 | locale.reset
|
129 | )
|
130 | );
|
131 |
|
132 | var cls = classnames((_classnames2 = {}, _classnames2[prefix + 'table-filter'] = true, _classnames2[className] = className, _classnames2));
|
133 |
|
134 | var filterIconCls = classnames((_classnames3 = {}, _classnames3[prefix + 'table-filter-active'] = selectedKeys && selectedKeys.length > 0, _classnames3));
|
135 |
|
136 | return React.createElement(
|
137 | Dropdown,
|
138 | _extends({
|
139 | trigger: React.createElement(
|
140 | 'span',
|
141 | {
|
142 | role: 'button',
|
143 | 'aria-label': locale.filter,
|
144 | onKeyDown: this.filterKeydown,
|
145 | tabIndex: '0',
|
146 | className: cls
|
147 | },
|
148 | React.createElement(Icon, { type: 'filter', size: 'small', className: filterIconCls })
|
149 | ),
|
150 | triggerType: 'click',
|
151 | visible: visible,
|
152 | autoFocus: true,
|
153 | rtl: rtl,
|
154 | needAdjust: false,
|
155 | onVisibleChange: this.onFilterVisible,
|
156 | className: dropdownClassname
|
157 | }, filterProps),
|
158 | React.createElement(
|
159 | Menu,
|
160 | _extends({
|
161 | footer: footer,
|
162 | rtl: rtl,
|
163 | selectedKeys: selectedKeys,
|
164 | selectMode: filterMode,
|
165 | onSelect: this.onFilterSelect
|
166 | }, others),
|
167 | content
|
168 | )
|
169 | );
|
170 | };
|
171 |
|
172 | return Filter;
|
173 | }(React.Component), _class.propTypes = {
|
174 | dataIndex: PropTypes.string,
|
175 | filters: PropTypes.array,
|
176 | filterMode: PropTypes.string,
|
177 | filterParams: PropTypes.object,
|
178 | filterMenuProps: PropTypes.object,
|
179 | filterProps: PropTypes.object,
|
180 | locale: PropTypes.object,
|
181 | onFilter: PropTypes.func,
|
182 | prefix: PropTypes.string,
|
183 | rtl: PropTypes.bool
|
184 | }, _class.defaultProps = {
|
185 | onFilter: function onFilter() {}
|
186 | }, _initialiseProps = function _initialiseProps() {
|
187 | var _this2 = this;
|
188 |
|
189 | this.filterKeydown = function (e) {
|
190 | e.preventDefault();
|
191 | e.stopPropagation();
|
192 |
|
193 | if (e.keyCode === KEYCODE.ENTER) {
|
194 | _this2.setState({
|
195 | visible: !_this2.state.visible
|
196 | });
|
197 | }
|
198 | };
|
199 |
|
200 | this.onFilterVisible = function (visible) {
|
201 | _this2.setState({
|
202 | visible: visible
|
203 | });
|
204 |
|
205 | if (!visible) {
|
206 | var selectedKeys = [].concat(_this2._selectedKeys);
|
207 |
|
208 | _this2.setState({
|
209 | selectedKeysChangedByInner: true,
|
210 | selectedKeys: selectedKeys
|
211 | });
|
212 | }
|
213 | };
|
214 |
|
215 | this.onFilterSelect = function (selectedKeys) {
|
216 | _this2.setState({
|
217 | visible: true,
|
218 | selectedKeysChangedByInner: true,
|
219 | selectedKeys: selectedKeys
|
220 | });
|
221 | };
|
222 |
|
223 | this.onFilterConfirm = function () {
|
224 | var selectedKeys = _this2.state.selectedKeys;
|
225 | var filterParams = {},
|
226 | dataIndex = _this2.props.dataIndex;
|
227 |
|
228 |
|
229 | filterParams[dataIndex] = {
|
230 | visible: false,
|
231 | selectedKeys: selectedKeys
|
232 | };
|
233 | _this2._selectedKeys = [].concat(selectedKeys);
|
234 | _this2.setState({
|
235 | visible: false,
|
236 | selectedKeysChangedByInner: true
|
237 | });
|
238 |
|
239 | _this2.props.onFilter(filterParams);
|
240 | };
|
241 |
|
242 | this.onFilterClear = function () {
|
243 | var filterParams = {},
|
244 | dataIndex = _this2.props.dataIndex;
|
245 |
|
246 |
|
247 | filterParams[dataIndex] = {
|
248 | visible: false,
|
249 | selectedKeys: []
|
250 | };
|
251 | _this2._selectedKeys = [];
|
252 | _this2.setState({
|
253 | selectedKeys: [],
|
254 | visible: false,
|
255 | selectedKeysChangedByInner: true
|
256 | });
|
257 |
|
258 | _this2.props.onFilter(filterParams);
|
259 | };
|
260 | }, _temp);
|
261 | Filter.displayName = 'Filter';
|
262 |
|
263 |
|
264 | export default polyfill(Filter); |
\ | No newline at end of file |