1 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
3 | import _createClass from "@babel/runtime/helpers/createClass";
|
4 | import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
5 | import _inherits from "@babel/runtime/helpers/inherits";
|
6 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
7 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
8 |
|
9 | function _createSuper(Derived) {
|
10 | function isNativeReflectConstruct() {
|
11 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
12 | if (Reflect.construct.sham) return false;
|
13 | if (typeof Proxy === "function") return true;
|
14 |
|
15 | try {
|
16 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
17 | return true;
|
18 | } catch (e) {
|
19 | return false;
|
20 | }
|
21 | }
|
22 |
|
23 | return function () {
|
24 | var Super = _getPrototypeOf(Derived),
|
25 | result;
|
26 |
|
27 | if (isNativeReflectConstruct()) {
|
28 | var NewTarget = _getPrototypeOf(this).constructor;
|
29 |
|
30 | result = Reflect.construct(Super, arguments, NewTarget);
|
31 | } else {
|
32 | result = Super.apply(this, arguments);
|
33 | }
|
34 |
|
35 | return _possibleConstructorReturn(this, result);
|
36 | };
|
37 | }
|
38 |
|
39 | import React, { cloneElement, Component } from 'react';
|
40 | import { findDOMNode } from 'react-dom';
|
41 | import closest from 'dom-closest';
|
42 | import classNames from 'classnames';
|
43 | import Dropdown from '../dropdown';
|
44 | import Icon from '../icon';
|
45 | import Radio from '../radio';
|
46 | import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper';
|
47 | import Menu, { Item as MenuItem, SubMenu } from '../rc-components/menu';
|
48 |
|
49 | var FilterMenu =
|
50 |
|
51 | function (_Component) {
|
52 | _inherits(FilterMenu, _Component);
|
53 |
|
54 | var _super = _createSuper(FilterMenu);
|
55 |
|
56 | function FilterMenu(props) {
|
57 | var _this;
|
58 |
|
59 | _classCallCheck(this, FilterMenu);
|
60 |
|
61 | _this = _super.call(this, props);
|
62 |
|
63 | _this.setNeverShown = function (column) {
|
64 | var rootNode = findDOMNode(_assertThisInitialized(_this));
|
65 | var prefixCls = _this.props.prefixCls;
|
66 | var filterBelongToScrollBody = !!closest(rootNode, "".concat(prefixCls, "-scroll"));
|
67 |
|
68 | if (filterBelongToScrollBody) {
|
69 |
|
70 |
|
71 | _this.neverShown = !!column.fixed;
|
72 | }
|
73 | };
|
74 |
|
75 | _this.setSelectedKeys = function (_ref) {
|
76 | var selectedKeys = _ref.selectedKeys;
|
77 |
|
78 | _this.setState({
|
79 | selectedKeys: selectedKeys
|
80 | });
|
81 | };
|
82 |
|
83 | _this.handleClearFilters = function () {
|
84 | _this.setState({
|
85 | selectedKeys: []
|
86 | }, _this.handleConfirm);
|
87 | };
|
88 |
|
89 | _this.handleConfirm = function () {
|
90 | _this.setVisible(false);
|
91 |
|
92 | _this.confirmFilter();
|
93 | };
|
94 |
|
95 | _this.onVisibleChange = function (visible) {
|
96 | _this.setVisible(visible);
|
97 |
|
98 | if (!visible) {
|
99 | _this.confirmFilter();
|
100 | }
|
101 | };
|
102 |
|
103 | _this.handleFilterDropdownMenuClick = function (e) {
|
104 | e.preventDefault();
|
105 | };
|
106 |
|
107 | _this.handleMenuItemClick = function (info) {
|
108 | if (info.keyPath.length <= 1) {
|
109 | return;
|
110 | }
|
111 |
|
112 | var _this$state = _this.state,
|
113 | keyPathOfSelectedItem = _this$state.keyPathOfSelectedItem,
|
114 | selectedKeys = _this$state.selectedKeys;
|
115 |
|
116 | if (selectedKeys.indexOf(info.key) >= 0) {
|
117 |
|
118 | delete keyPathOfSelectedItem[info.key];
|
119 | } else {
|
120 |
|
121 | keyPathOfSelectedItem[info.key] = info.keyPath;
|
122 | }
|
123 |
|
124 | _this.setState({
|
125 | keyPathOfSelectedItem: keyPathOfSelectedItem
|
126 | });
|
127 | };
|
128 |
|
129 | _this.renderFilterIcon = function () {
|
130 | var _this$props = _this.props,
|
131 | column = _this$props.column,
|
132 | locale = _this$props.locale,
|
133 | prefixCls = _this$props.prefixCls,
|
134 | selectedKeys = _this$props.selectedKeys;
|
135 | var filterIcon = column.filterIcon;
|
136 | var dropdownSelectedClass = selectedKeys.length > 0 ? "".concat(prefixCls, "-selected") : '';
|
137 | return filterIcon ? cloneElement(filterIcon, {
|
138 | title: locale.filterTitle,
|
139 | className: classNames(filterIcon.className, _defineProperty({}, "".concat(prefixCls, "-icon"), true))
|
140 | }) : React.createElement(Icon, {
|
141 | title: locale.filterTitle,
|
142 | type: "filter_list",
|
143 | className: dropdownSelectedClass
|
144 | });
|
145 | };
|
146 |
|
147 | var visible = 'filterDropdownVisible' in props.column ? props.column.filterDropdownVisible : false;
|
148 | _this.state = {
|
149 | selectedKeys: props.selectedKeys,
|
150 | keyPathOfSelectedItem: {},
|
151 | visible: visible
|
152 | };
|
153 | return _this;
|
154 | }
|
155 |
|
156 | _createClass(FilterMenu, [{
|
157 | key: "componentDidMount",
|
158 | value: function componentDidMount() {
|
159 | var column = this.props.column;
|
160 | this.setNeverShown(column);
|
161 | }
|
162 | }, {
|
163 | key: "componentWillReceiveProps",
|
164 | value: function componentWillReceiveProps(nextProps) {
|
165 | var column = nextProps.column;
|
166 | this.setNeverShown(column);
|
167 | var newState = {};
|
168 |
|
169 | if ('selectedKeys' in nextProps) {
|
170 | newState.selectedKeys = nextProps.selectedKeys;
|
171 | }
|
172 |
|
173 | if ('filterDropdownVisible' in column) {
|
174 | newState.visible = column.filterDropdownVisible;
|
175 | }
|
176 |
|
177 | if (Object.keys(newState).length > 0) {
|
178 | this.setState(newState);
|
179 | }
|
180 | }
|
181 | }, {
|
182 | key: "setVisible",
|
183 | value: function setVisible(visible) {
|
184 | var column = this.props.column;
|
185 |
|
186 | if (!('filterDropdownVisible' in column)) {
|
187 | this.setState({
|
188 | visible: visible
|
189 | });
|
190 | }
|
191 |
|
192 | if (column.onFilterDropdownVisibleChange) {
|
193 | column.onFilterDropdownVisibleChange(visible);
|
194 | }
|
195 | }
|
196 | }, {
|
197 | key: "confirmFilter",
|
198 | value: function confirmFilter() {
|
199 | var _this$props2 = this.props,
|
200 | propSelectedKeys = _this$props2.selectedKeys,
|
201 | column = _this$props2.column,
|
202 | confirmFilter = _this$props2.confirmFilter;
|
203 | var selectedKeys = this.state.selectedKeys;
|
204 |
|
205 | if (selectedKeys !== propSelectedKeys) {
|
206 | confirmFilter(column, selectedKeys);
|
207 | }
|
208 | }
|
209 | }, {
|
210 | key: "renderMenuItem",
|
211 | value: function renderMenuItem(item) {
|
212 | var column = this.props.column;
|
213 | var selectedKeys = this.state.selectedKeys;
|
214 | var multiple = 'filterMultiple' in column ? column.filterMultiple : false;
|
215 | var input = multiple ? null : React.createElement(Radio, {
|
216 | checked: selectedKeys.indexOf(item.value.toString()) >= 0
|
217 | });
|
218 | return React.createElement(MenuItem, {
|
219 | key: item.value
|
220 | }, input, React.createElement("span", null, item.text));
|
221 | }
|
222 | }, {
|
223 | key: "hasSubMenu",
|
224 | value: function hasSubMenu() {
|
225 | var _this$props$column$fi = this.props.column.filters,
|
226 | filters = _this$props$column$fi === void 0 ? [] : _this$props$column$fi;
|
227 | return filters.some(function (item) {
|
228 | return !!(item.children && item.children.length > 0);
|
229 | });
|
230 | }
|
231 | }, {
|
232 | key: "renderMenus",
|
233 | value: function renderMenus(items) {
|
234 | var _this2 = this;
|
235 |
|
236 | return items.map(function (item) {
|
237 | if (item.children && item.children.length > 0) {
|
238 | var dropdownPrefixCls = _this2.props.dropdownPrefixCls;
|
239 | var keyPathOfSelectedItem = _this2.state.keyPathOfSelectedItem;
|
240 | var containSelected = Object.keys(keyPathOfSelectedItem).some(function (key) {
|
241 | return keyPathOfSelectedItem[key].indexOf(item.value) >= 0;
|
242 | });
|
243 | var subMenuCls = containSelected ? "".concat(dropdownPrefixCls, "-submenu-contain-selected") : '';
|
244 | return React.createElement(SubMenu, {
|
245 | title: item.text,
|
246 | className: subMenuCls,
|
247 | key: item.value.toString()
|
248 | }, _this2.renderMenus(item.children));
|
249 | }
|
250 |
|
251 | return _this2.renderMenuItem(item);
|
252 | });
|
253 | }
|
254 | }, {
|
255 | key: "render",
|
256 | value: function render() {
|
257 | var _this$props3 = this.props,
|
258 | column = _this$props3.column,
|
259 | locale = _this$props3.locale,
|
260 | prefixCls = _this$props3.prefixCls,
|
261 | dropdownPrefixCls = _this$props3.dropdownPrefixCls,
|
262 | getPopupContainer = _this$props3.getPopupContainer;
|
263 | var _this$state2 = this.state,
|
264 | visible = _this$state2.visible,
|
265 | selectedKeys = _this$state2.selectedKeys;
|
266 |
|
267 | var multiple = 'filterMultiple' in column ? column.filterMultiple : false;
|
268 | var dropdownMenuClass = classNames(_defineProperty({}, "".concat(dropdownPrefixCls, "-menu-without-submenu"), !this.hasSubMenu()));
|
269 | var menus = column.filterDropdown ? React.createElement(FilterDropdownMenuWrapper, {
|
270 | onClick: this.handleFilterDropdownMenuClick
|
271 | }, column.filterDropdown) : React.createElement(FilterDropdownMenuWrapper, {
|
272 | className: "".concat(prefixCls, "-dropdown"),
|
273 | onClick: this.handleFilterDropdownMenuClick
|
274 | }, React.createElement(Menu, {
|
275 | multiple: multiple,
|
276 | onClick: this.handleMenuItemClick,
|
277 | prefixCls: "".concat(dropdownPrefixCls, "-menu"),
|
278 | className: dropdownMenuClass,
|
279 | onSelect: this.setSelectedKeys,
|
280 | onDeselect: this.setSelectedKeys,
|
281 | selectedKeys: selectedKeys,
|
282 | getPopupContainer: function getPopupContainer(triggerNode) {
|
283 | return triggerNode.parentNode;
|
284 | }
|
285 | }, this.renderMenus(column.filters)), React.createElement("div", {
|
286 | className: "".concat(prefixCls, "-dropdown-btns")
|
287 | }, React.createElement("a", {
|
288 | className: "".concat(prefixCls, "-dropdown-link confirm"),
|
289 | onClick: this.handleConfirm
|
290 | }, locale.filterConfirm), React.createElement("a", {
|
291 | className: "".concat(prefixCls, "-dropdown-link clear"),
|
292 | onClick: this.handleClearFilters
|
293 | }, locale.filterReset)));
|
294 | return React.createElement(Dropdown, {
|
295 | trigger: ['click'],
|
296 | overlay: menus,
|
297 | visible: this.neverShown ? false : visible,
|
298 | onVisibleChange: this.onVisibleChange,
|
299 | getPopupContainer: getPopupContainer,
|
300 | forceRender: true
|
301 | }, this.renderFilterIcon());
|
302 | }
|
303 | }]);
|
304 |
|
305 | return FilterMenu;
|
306 | }(Component);
|
307 |
|
308 | export { FilterMenu as default };
|
309 | FilterMenu.defaultProps = {
|
310 | handleFilter: function handleFilter() {},
|
311 | column: {}
|
312 | };
|
313 |
|