1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | var _typeof = require("@babel/runtime/helpers/typeof");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports["default"] = void 0;
|
11 |
|
12 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13 |
|
14 | var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
15 |
|
16 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
17 |
|
18 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
19 |
|
20 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
21 |
|
22 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
23 |
|
24 | var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
25 |
|
26 | var React = _interopRequireWildcard(require("react"));
|
27 |
|
28 | var _classnames = _interopRequireDefault(require("classnames"));
|
29 |
|
30 | var _list = _interopRequireDefault(require("./list"));
|
31 |
|
32 | var _operation = _interopRequireDefault(require("./operation"));
|
33 |
|
34 | var _search = _interopRequireDefault(require("./search"));
|
35 |
|
36 | var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
|
37 |
|
38 | var _default2 = _interopRequireDefault(require("../locale/default"));
|
39 |
|
40 | var _configProvider = require("../config-provider");
|
41 |
|
42 | var _devWarning = _interopRequireDefault(require("../_util/devWarning"));
|
43 |
|
44 | function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
45 |
|
46 | function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
47 |
|
48 | var Transfer = function (_React$Component) {
|
49 | (0, _inherits2["default"])(Transfer, _React$Component);
|
50 |
|
51 | var _super = (0, _createSuper2["default"])(Transfer);
|
52 |
|
53 | function Transfer(props) {
|
54 | var _this;
|
55 |
|
56 | (0, _classCallCheck2["default"])(this, Transfer);
|
57 | _this = _super.call(this, props);
|
58 | _this.separatedDataSource = null;
|
59 |
|
60 | _this.setStateKeys = function (direction, keys) {
|
61 | if (direction === 'left') {
|
62 | _this.setState(function (_ref) {
|
63 | var sourceSelectedKeys = _ref.sourceSelectedKeys;
|
64 | return {
|
65 | sourceSelectedKeys: typeof keys === 'function' ? keys(sourceSelectedKeys || []) : keys
|
66 | };
|
67 | });
|
68 | } else {
|
69 | _this.setState(function (_ref2) {
|
70 | var targetSelectedKeys = _ref2.targetSelectedKeys;
|
71 | return {
|
72 | targetSelectedKeys: typeof keys === 'function' ? keys(targetSelectedKeys || []) : keys
|
73 | };
|
74 | });
|
75 | }
|
76 | };
|
77 |
|
78 | _this.getLocale = function (transferLocale, renderEmpty) {
|
79 | return (0, _extends2["default"])((0, _extends2["default"])((0, _extends2["default"])({}, transferLocale), {
|
80 | notFoundContent: renderEmpty('Transfer')
|
81 | }), _this.props.locale);
|
82 | };
|
83 |
|
84 | _this.moveTo = function (direction) {
|
85 | var _this$props = _this.props,
|
86 | _this$props$targetKey = _this$props.targetKeys,
|
87 | targetKeys = _this$props$targetKey === void 0 ? [] : _this$props$targetKey,
|
88 | _this$props$dataSourc = _this$props.dataSource,
|
89 | dataSource = _this$props$dataSourc === void 0 ? [] : _this$props$dataSourc,
|
90 | onChange = _this$props.onChange;
|
91 | var _this$state = _this.state,
|
92 | sourceSelectedKeys = _this$state.sourceSelectedKeys,
|
93 | targetSelectedKeys = _this$state.targetSelectedKeys;
|
94 | var moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
|
95 |
|
96 | var newMoveKeys = moveKeys.filter(function (key) {
|
97 | return !dataSource.some(function (data) {
|
98 | return !!(key === data.key && data.disabled);
|
99 | });
|
100 | });
|
101 |
|
102 | var newTargetKeys = direction === 'right' ? newMoveKeys.concat(targetKeys) : targetKeys.filter(function (targetKey) {
|
103 | return newMoveKeys.indexOf(targetKey) === -1;
|
104 | });
|
105 |
|
106 | var oppositeDirection = direction === 'right' ? 'left' : 'right';
|
107 |
|
108 | _this.setStateKeys(oppositeDirection, []);
|
109 |
|
110 | _this.handleSelectChange(oppositeDirection, []);
|
111 |
|
112 | onChange === null || onChange === void 0 ? void 0 : onChange(newTargetKeys, direction, newMoveKeys);
|
113 | };
|
114 |
|
115 | _this.moveToLeft = function () {
|
116 | return _this.moveTo('left');
|
117 | };
|
118 |
|
119 | _this.moveToRight = function () {
|
120 | return _this.moveTo('right');
|
121 | };
|
122 |
|
123 | _this.onItemSelectAll = function (direction, selectedKeys, checkAll) {
|
124 | _this.setStateKeys(direction, function (prevKeys) {
|
125 | var mergedCheckedKeys = [];
|
126 |
|
127 | if (checkAll) {
|
128 |
|
129 | mergedCheckedKeys = Array.from(new Set([].concat((0, _toConsumableArray2["default"])(prevKeys), (0, _toConsumableArray2["default"])(selectedKeys))));
|
130 | } else {
|
131 |
|
132 | mergedCheckedKeys = prevKeys.filter(function (key) {
|
133 | return selectedKeys.indexOf(key) === -1;
|
134 | });
|
135 | }
|
136 |
|
137 | _this.handleSelectChange(direction, mergedCheckedKeys);
|
138 |
|
139 | return mergedCheckedKeys;
|
140 | });
|
141 | };
|
142 |
|
143 | _this.onLeftItemSelectAll = function (selectedKeys, checkAll) {
|
144 | return _this.onItemSelectAll('left', selectedKeys, checkAll);
|
145 | };
|
146 |
|
147 | _this.onRightItemSelectAll = function (selectedKeys, checkAll) {
|
148 | return _this.onItemSelectAll('right', selectedKeys, checkAll);
|
149 | };
|
150 |
|
151 | _this.handleFilter = function (direction, e) {
|
152 | var onSearch = _this.props.onSearch;
|
153 | var value = e.target.value;
|
154 | onSearch === null || onSearch === void 0 ? void 0 : onSearch(direction, value);
|
155 | };
|
156 |
|
157 | _this.handleLeftFilter = function (e) {
|
158 | return _this.handleFilter('left', e);
|
159 | };
|
160 |
|
161 | _this.handleRightFilter = function (e) {
|
162 | return _this.handleFilter('right', e);
|
163 | };
|
164 |
|
165 | _this.handleClear = function (direction) {
|
166 | var onSearch = _this.props.onSearch;
|
167 | onSearch === null || onSearch === void 0 ? void 0 : onSearch(direction, '');
|
168 | };
|
169 |
|
170 | _this.handleLeftClear = function () {
|
171 | return _this.handleClear('left');
|
172 | };
|
173 |
|
174 | _this.handleRightClear = function () {
|
175 | return _this.handleClear('right');
|
176 | };
|
177 |
|
178 | _this.onItemSelect = function (direction, selectedKey, checked) {
|
179 | var _this$state2 = _this.state,
|
180 | sourceSelectedKeys = _this$state2.sourceSelectedKeys,
|
181 | targetSelectedKeys = _this$state2.targetSelectedKeys;
|
182 | var holder = direction === 'left' ? (0, _toConsumableArray2["default"])(sourceSelectedKeys) : (0, _toConsumableArray2["default"])(targetSelectedKeys);
|
183 | var index = holder.indexOf(selectedKey);
|
184 |
|
185 | if (index > -1) {
|
186 | holder.splice(index, 1);
|
187 | }
|
188 |
|
189 | if (checked) {
|
190 | holder.push(selectedKey);
|
191 | }
|
192 |
|
193 | _this.handleSelectChange(direction, holder);
|
194 |
|
195 | if (!_this.props.selectedKeys) {
|
196 | _this.setStateKeys(direction, holder);
|
197 | }
|
198 | };
|
199 |
|
200 | _this.onLeftItemSelect = function (selectedKey, checked) {
|
201 | return _this.onItemSelect('left', selectedKey, checked);
|
202 | };
|
203 |
|
204 | _this.onRightItemSelect = function (selectedKey, checked) {
|
205 | return _this.onItemSelect('right', selectedKey, checked);
|
206 | };
|
207 |
|
208 | _this.onRightItemRemove = function (selectedKeys) {
|
209 | var _this$props2 = _this.props,
|
210 | _this$props2$targetKe = _this$props2.targetKeys,
|
211 | targetKeys = _this$props2$targetKe === void 0 ? [] : _this$props2$targetKe,
|
212 | onChange = _this$props2.onChange;
|
213 |
|
214 | _this.setStateKeys('right', []);
|
215 |
|
216 | onChange === null || onChange === void 0 ? void 0 : onChange(targetKeys.filter(function (key) {
|
217 | return !selectedKeys.includes(key);
|
218 | }), 'left', (0, _toConsumableArray2["default"])(selectedKeys));
|
219 | };
|
220 |
|
221 | _this.handleScroll = function (direction, e) {
|
222 | var onScroll = _this.props.onScroll;
|
223 | onScroll === null || onScroll === void 0 ? void 0 : onScroll(direction, e);
|
224 | };
|
225 |
|
226 | _this.handleLeftScroll = function (e) {
|
227 | return _this.handleScroll('left', e);
|
228 | };
|
229 |
|
230 | _this.handleRightScroll = function (e) {
|
231 | return _this.handleScroll('right', e);
|
232 | };
|
233 |
|
234 | _this.handleListStyle = function (listStyle, direction) {
|
235 | if (typeof listStyle === 'function') {
|
236 | return listStyle({
|
237 | direction: direction
|
238 | });
|
239 | }
|
240 |
|
241 | return listStyle;
|
242 | };
|
243 |
|
244 | _this.renderTransfer = function (transferLocale) {
|
245 | return React.createElement(_configProvider.ConfigConsumer, null, function (_ref3) {
|
246 | var _classNames;
|
247 |
|
248 | var getPrefixCls = _ref3.getPrefixCls,
|
249 | renderEmpty = _ref3.renderEmpty,
|
250 | direction = _ref3.direction;
|
251 | var _this$props3 = _this.props,
|
252 | customizePrefixCls = _this$props3.prefixCls,
|
253 | className = _this$props3.className,
|
254 | disabled = _this$props3.disabled,
|
255 | _this$props3$operatio = _this$props3.operations,
|
256 | operations = _this$props3$operatio === void 0 ? [] : _this$props3$operatio,
|
257 | showSearch = _this$props3.showSearch,
|
258 | footer = _this$props3.footer,
|
259 | style = _this$props3.style,
|
260 | listStyle = _this$props3.listStyle,
|
261 | operationStyle = _this$props3.operationStyle,
|
262 | filterOption = _this$props3.filterOption,
|
263 | render = _this$props3.render,
|
264 | children = _this$props3.children,
|
265 | showSelectAll = _this$props3.showSelectAll,
|
266 | oneWay = _this$props3.oneWay,
|
267 | pagination = _this$props3.pagination;
|
268 | var prefixCls = getPrefixCls('transfer', customizePrefixCls);
|
269 |
|
270 | var locale = _this.getLocale(transferLocale, renderEmpty);
|
271 |
|
272 | var _this$state3 = _this.state,
|
273 | sourceSelectedKeys = _this$state3.sourceSelectedKeys,
|
274 | targetSelectedKeys = _this$state3.targetSelectedKeys;
|
275 | var mergedPagination = !children && pagination;
|
276 |
|
277 | var _this$separateDataSou = _this.separateDataSource(),
|
278 | leftDataSource = _this$separateDataSou.leftDataSource,
|
279 | rightDataSource = _this$separateDataSou.rightDataSource;
|
280 |
|
281 | var leftActive = targetSelectedKeys.length > 0;
|
282 | var rightActive = sourceSelectedKeys.length > 0;
|
283 | var cls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-customize-list"), !!children), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
|
284 |
|
285 | var titles = _this.getTitles(locale);
|
286 |
|
287 | var selectAllLabels = _this.props.selectAllLabels || [];
|
288 | return React.createElement("div", {
|
289 | className: cls,
|
290 | style: style
|
291 | }, React.createElement(_list["default"], (0, _extends2["default"])({
|
292 | prefixCls: "".concat(prefixCls, "-list"),
|
293 | titleText: titles[0],
|
294 | dataSource: leftDataSource,
|
295 | filterOption: filterOption,
|
296 | style: _this.handleListStyle(listStyle, 'left'),
|
297 | checkedKeys: sourceSelectedKeys,
|
298 | handleFilter: _this.handleLeftFilter,
|
299 | handleClear: _this.handleLeftClear,
|
300 | onItemSelect: _this.onLeftItemSelect,
|
301 | onItemSelectAll: _this.onLeftItemSelectAll,
|
302 | render: render,
|
303 | showSearch: showSearch,
|
304 | renderList: children,
|
305 | footer: footer,
|
306 | onScroll: _this.handleLeftScroll,
|
307 | disabled: disabled,
|
308 | direction: "left",
|
309 | showSelectAll: showSelectAll,
|
310 | selectAllLabel: selectAllLabels[0],
|
311 | pagination: mergedPagination
|
312 | }, locale)), React.createElement(_operation["default"], {
|
313 | className: "".concat(prefixCls, "-operation"),
|
314 | rightActive: rightActive,
|
315 | rightArrowText: operations[0],
|
316 | moveToRight: _this.moveToRight,
|
317 | leftActive: leftActive,
|
318 | leftArrowText: operations[1],
|
319 | moveToLeft: _this.moveToLeft,
|
320 | style: operationStyle,
|
321 | disabled: disabled,
|
322 | direction: direction,
|
323 | oneWay: oneWay
|
324 | }), React.createElement(_list["default"], (0, _extends2["default"])({
|
325 | prefixCls: "".concat(prefixCls, "-list"),
|
326 | titleText: titles[1],
|
327 | dataSource: rightDataSource,
|
328 | filterOption: filterOption,
|
329 | style: _this.handleListStyle(listStyle, 'right'),
|
330 | checkedKeys: targetSelectedKeys,
|
331 | handleFilter: _this.handleRightFilter,
|
332 | handleClear: _this.handleRightClear,
|
333 | onItemSelect: _this.onRightItemSelect,
|
334 | onItemSelectAll: _this.onRightItemSelectAll,
|
335 | onItemRemove: _this.onRightItemRemove,
|
336 | render: render,
|
337 | showSearch: showSearch,
|
338 | renderList: children,
|
339 | footer: footer,
|
340 | onScroll: _this.handleRightScroll,
|
341 | disabled: disabled,
|
342 | direction: "right",
|
343 | showSelectAll: showSelectAll,
|
344 | selectAllLabel: selectAllLabels[1],
|
345 | showRemove: oneWay,
|
346 | pagination: mergedPagination
|
347 | }, locale)));
|
348 | });
|
349 | };
|
350 |
|
351 | var _props$selectedKeys = props.selectedKeys,
|
352 | selectedKeys = _props$selectedKeys === void 0 ? [] : _props$selectedKeys,
|
353 | _props$targetKeys = props.targetKeys,
|
354 | targetKeys = _props$targetKeys === void 0 ? [] : _props$targetKeys;
|
355 | _this.state = {
|
356 | sourceSelectedKeys: selectedKeys.filter(function (key) {
|
357 | return targetKeys.indexOf(key) === -1;
|
358 | }),
|
359 | targetSelectedKeys: selectedKeys.filter(function (key) {
|
360 | return targetKeys.indexOf(key) > -1;
|
361 | })
|
362 | };
|
363 | return _this;
|
364 | }
|
365 |
|
366 | (0, _createClass2["default"])(Transfer, [{
|
367 | key: "getTitles",
|
368 | value: function getTitles(transferLocale) {
|
369 | var _a;
|
370 |
|
371 | return (_a = this.props.titles) !== null && _a !== void 0 ? _a : transferLocale.titles;
|
372 | }
|
373 | }, {
|
374 | key: "handleSelectChange",
|
375 | value: function handleSelectChange(direction, holder) {
|
376 | var _this$state4 = this.state,
|
377 | sourceSelectedKeys = _this$state4.sourceSelectedKeys,
|
378 | targetSelectedKeys = _this$state4.targetSelectedKeys;
|
379 | var onSelectChange = this.props.onSelectChange;
|
380 |
|
381 | if (!onSelectChange) {
|
382 | return;
|
383 | }
|
384 |
|
385 | if (direction === 'left') {
|
386 | onSelectChange(holder, targetSelectedKeys);
|
387 | } else {
|
388 | onSelectChange(sourceSelectedKeys, holder);
|
389 | }
|
390 | }
|
391 | }, {
|
392 | key: "separateDataSource",
|
393 | value: function separateDataSource() {
|
394 | var _this$props4 = this.props,
|
395 | dataSource = _this$props4.dataSource,
|
396 | rowKey = _this$props4.rowKey,
|
397 | _this$props4$targetKe = _this$props4.targetKeys,
|
398 | targetKeys = _this$props4$targetKe === void 0 ? [] : _this$props4$targetKe;
|
399 | var leftDataSource = [];
|
400 | var rightDataSource = new Array(targetKeys.length);
|
401 | dataSource.forEach(function (record) {
|
402 | if (rowKey) {
|
403 | record = (0, _extends2["default"])((0, _extends2["default"])({}, record), {
|
404 | key: rowKey(record)
|
405 | });
|
406 | }
|
407 |
|
408 |
|
409 |
|
410 | var indexOfKey = targetKeys.indexOf(record.key);
|
411 |
|
412 | if (indexOfKey !== -1) {
|
413 | rightDataSource[indexOfKey] = record;
|
414 | } else {
|
415 | leftDataSource.push(record);
|
416 | }
|
417 | });
|
418 | return {
|
419 | leftDataSource: leftDataSource,
|
420 | rightDataSource: rightDataSource
|
421 | };
|
422 | }
|
423 | }, {
|
424 | key: "render",
|
425 | value: function render() {
|
426 | return React.createElement(_LocaleReceiver["default"], {
|
427 | componentName: "Transfer",
|
428 | defaultLocale: _default2["default"].Transfer
|
429 | }, this.renderTransfer);
|
430 | }
|
431 | }], [{
|
432 | key: "getDerivedStateFromProps",
|
433 | value: function getDerivedStateFromProps(_ref4) {
|
434 | var selectedKeys = _ref4.selectedKeys,
|
435 | targetKeys = _ref4.targetKeys,
|
436 | pagination = _ref4.pagination,
|
437 | children = _ref4.children;
|
438 |
|
439 | if (selectedKeys) {
|
440 | var mergedTargetKeys = targetKeys || [];
|
441 | return {
|
442 | sourceSelectedKeys: selectedKeys.filter(function (key) {
|
443 | return !mergedTargetKeys.includes(key);
|
444 | }),
|
445 | targetSelectedKeys: selectedKeys.filter(function (key) {
|
446 | return mergedTargetKeys.includes(key);
|
447 | })
|
448 | };
|
449 | }
|
450 |
|
451 | (0, _devWarning["default"])(!pagination || !children, 'Transfer', '`pagination` not support customize render list.');
|
452 | return null;
|
453 | }
|
454 | }]);
|
455 | return Transfer;
|
456 | }(React.Component);
|
457 |
|
458 |
|
459 | Transfer.List = _list["default"];
|
460 | Transfer.Operation = _operation["default"];
|
461 | Transfer.Search = _search["default"];
|
462 | Transfer.defaultProps = {
|
463 | dataSource: [],
|
464 | locale: {},
|
465 | showSearch: false,
|
466 | listStyle: function listStyle() {}
|
467 | };
|
468 | var _default = Transfer;
|
469 | exports["default"] = _default; |
\ | No newline at end of file |