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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15 |
|
16 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
17 |
|
18 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
19 |
|
20 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
21 |
|
22 | var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
23 |
|
24 | var React = _interopRequireWildcard(require("react"));
|
25 |
|
26 | var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
|
27 |
|
28 | var _classnames = _interopRequireDefault(require("classnames"));
|
29 |
|
30 | var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
|
31 |
|
32 | var _checkbox = _interopRequireDefault(require("../checkbox"));
|
33 |
|
34 | var _menu = _interopRequireDefault(require("../menu"));
|
35 |
|
36 | var _dropdown = _interopRequireDefault(require("../dropdown"));
|
37 |
|
38 | var _search = _interopRequireDefault(require("./search"));
|
39 |
|
40 | var _ListBody = _interopRequireWildcard(require("./ListBody"));
|
41 |
|
42 | var _reactNode = require("../_util/reactNode");
|
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 defaultRender = function defaultRender() {
|
49 | return null;
|
50 | };
|
51 |
|
52 | function isRenderResultPlainObject(result) {
|
53 | return result && !(0, _reactNode.isValidElement)(result) && Object.prototype.toString.call(result) === '[object Object]';
|
54 | }
|
55 |
|
56 | function getEnabledItemKeys(items) {
|
57 | return items.filter(function (data) {
|
58 | return !data.disabled;
|
59 | }).map(function (data) {
|
60 | return data.key;
|
61 | });
|
62 | }
|
63 |
|
64 | var TransferList = function (_React$PureComponent) {
|
65 | (0, _inherits2["default"])(TransferList, _React$PureComponent);
|
66 |
|
67 | var _super = (0, _createSuper2["default"])(TransferList);
|
68 |
|
69 | function TransferList(props) {
|
70 | var _this;
|
71 |
|
72 | (0, _classCallCheck2["default"])(this, TransferList);
|
73 | _this = _super.call(this, props);
|
74 | _this.defaultListBodyRef = React.createRef();
|
75 |
|
76 | _this.handleFilter = function (e) {
|
77 | var handleFilter = _this.props.handleFilter;
|
78 | var filterValue = e.target.value;
|
79 |
|
80 | _this.setState({
|
81 | filterValue: filterValue
|
82 | });
|
83 |
|
84 | handleFilter(e);
|
85 | };
|
86 |
|
87 | _this.handleClear = function () {
|
88 | var handleClear = _this.props.handleClear;
|
89 |
|
90 | _this.setState({
|
91 | filterValue: ''
|
92 | });
|
93 |
|
94 | handleClear();
|
95 | };
|
96 |
|
97 | _this.matchFilter = function (text, item) {
|
98 | var filterValue = _this.state.filterValue;
|
99 | var filterOption = _this.props.filterOption;
|
100 |
|
101 | if (filterOption) {
|
102 | return filterOption(filterValue, item);
|
103 | }
|
104 |
|
105 | return text.indexOf(filterValue) >= 0;
|
106 | };
|
107 |
|
108 |
|
109 | _this.renderListBody = function (renderList, props) {
|
110 | var bodyContent = renderList ? renderList(props) : null;
|
111 | var customize = !!bodyContent;
|
112 |
|
113 | if (!customize) {
|
114 | bodyContent = React.createElement(_ListBody["default"], (0, _extends2["default"])({
|
115 | ref: _this.defaultListBodyRef
|
116 | }, props));
|
117 | }
|
118 |
|
119 | return {
|
120 | customize: customize,
|
121 | bodyContent: bodyContent
|
122 | };
|
123 | };
|
124 |
|
125 | _this.renderItem = function (item) {
|
126 | var _this$props$render = _this.props.render,
|
127 | render = _this$props$render === void 0 ? defaultRender : _this$props$render;
|
128 | var renderResult = render(item);
|
129 | var isRenderResultPlain = isRenderResultPlainObject(renderResult);
|
130 | return {
|
131 | renderedText: isRenderResultPlain ? renderResult.value : renderResult,
|
132 | renderedEl: isRenderResultPlain ? renderResult.label : renderResult,
|
133 | item: item
|
134 | };
|
135 | };
|
136 |
|
137 | _this.getSelectAllLabel = function (selectedCount, totalCount) {
|
138 | var _this$props = _this.props,
|
139 | itemsUnit = _this$props.itemsUnit,
|
140 | itemUnit = _this$props.itemUnit,
|
141 | selectAllLabel = _this$props.selectAllLabel;
|
142 |
|
143 | if (selectAllLabel) {
|
144 | return typeof selectAllLabel === 'function' ? selectAllLabel({
|
145 | selectedCount: selectedCount,
|
146 | totalCount: totalCount
|
147 | }) : selectAllLabel;
|
148 | }
|
149 |
|
150 | var unit = totalCount > 1 ? itemsUnit : itemUnit;
|
151 | return React.createElement(React.Fragment, null, (selectedCount > 0 ? "".concat(selectedCount, "/") : '') + totalCount, " ", unit);
|
152 | };
|
153 |
|
154 | _this.state = {
|
155 | filterValue: ''
|
156 | };
|
157 | return _this;
|
158 | }
|
159 |
|
160 | (0, _createClass2["default"])(TransferList, [{
|
161 | key: "componentWillUnmount",
|
162 | value: function componentWillUnmount() {
|
163 | clearTimeout(this.triggerScrollTimer);
|
164 | }
|
165 | }, {
|
166 | key: "getCheckStatus",
|
167 | value: function getCheckStatus(filteredItems) {
|
168 | var checkedKeys = this.props.checkedKeys;
|
169 |
|
170 | if (checkedKeys.length === 0) {
|
171 | return 'none';
|
172 | }
|
173 |
|
174 | if (filteredItems.every(function (item) {
|
175 | return checkedKeys.indexOf(item.key) >= 0 || !!item.disabled;
|
176 | })) {
|
177 | return 'all';
|
178 | }
|
179 |
|
180 | return 'part';
|
181 | }
|
182 |
|
183 | }, {
|
184 | key: "getFilteredItems",
|
185 | value: function getFilteredItems(dataSource, filterValue) {
|
186 | var _this2 = this;
|
187 |
|
188 | var filteredItems = [];
|
189 | var filteredRenderItems = [];
|
190 | dataSource.forEach(function (item) {
|
191 | var renderedItem = _this2.renderItem(item);
|
192 |
|
193 | var renderedText = renderedItem.renderedText;
|
194 |
|
195 | if (filterValue && !_this2.matchFilter(renderedText, item)) {
|
196 | return null;
|
197 | }
|
198 |
|
199 | filteredItems.push(item);
|
200 | filteredRenderItems.push(renderedItem);
|
201 | });
|
202 | return {
|
203 | filteredItems: filteredItems,
|
204 | filteredRenderItems: filteredRenderItems
|
205 | };
|
206 | }
|
207 | }, {
|
208 | key: "getListBody",
|
209 | value: function getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, notFoundContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled) {
|
210 | var _this3 = this;
|
211 |
|
212 | var search = showSearch ? React.createElement("div", {
|
213 | className: "".concat(prefixCls, "-body-search-wrapper")
|
214 | }, React.createElement(_search["default"], {
|
215 | prefixCls: "".concat(prefixCls, "-search"),
|
216 | onChange: this.handleFilter,
|
217 | handleClear: this.handleClear,
|
218 | placeholder: searchPlaceholder,
|
219 | value: filterValue,
|
220 | disabled: disabled
|
221 | })) : null;
|
222 |
|
223 | var _this$renderListBody = this.renderListBody(renderList, (0, _extends2["default"])((0, _extends2["default"])({}, (0, _omit["default"])(this.props, _ListBody.OmitProps)), {
|
224 | filteredItems: filteredItems,
|
225 | filteredRenderItems: filteredRenderItems,
|
226 | selectedKeys: checkedKeys
|
227 | })),
|
228 | bodyContent = _this$renderListBody.bodyContent,
|
229 | customize = _this$renderListBody.customize;
|
230 |
|
231 | var getNotFoundContent = function getNotFoundContent() {
|
232 | var contentIndex = _this3.props.direction === 'left' ? 0 : 1;
|
233 | return Array.isArray(notFoundContent) ? notFoundContent[contentIndex] : notFoundContent;
|
234 | };
|
235 |
|
236 | var bodyNode;
|
237 |
|
238 | if (customize) {
|
239 | bodyNode = React.createElement("div", {
|
240 | className: "".concat(prefixCls, "-body-customize-wrapper")
|
241 | }, bodyContent);
|
242 | } else {
|
243 | bodyNode = filteredItems.length ? bodyContent : React.createElement("div", {
|
244 | className: "".concat(prefixCls, "-body-not-found")
|
245 | }, getNotFoundContent());
|
246 | }
|
247 |
|
248 | return React.createElement("div", {
|
249 | className: (0, _classnames["default"])(showSearch ? "".concat(prefixCls, "-body ").concat(prefixCls, "-body-with-search") : "".concat(prefixCls, "-body"))
|
250 | }, search, bodyNode);
|
251 | }
|
252 | }, {
|
253 | key: "getCheckBox",
|
254 | value: function getCheckBox(_ref) {
|
255 | var filteredItems = _ref.filteredItems,
|
256 | onItemSelectAll = _ref.onItemSelectAll,
|
257 | disabled = _ref.disabled,
|
258 | prefixCls = _ref.prefixCls;
|
259 | var checkStatus = this.getCheckStatus(filteredItems);
|
260 | var checkedAll = checkStatus === 'all';
|
261 | var checkAllCheckbox = React.createElement(_checkbox["default"], {
|
262 | disabled: disabled,
|
263 | checked: checkedAll,
|
264 | indeterminate: checkStatus === 'part',
|
265 | className: "".concat(prefixCls, "-checkbox"),
|
266 | onChange: function onChange() {
|
267 |
|
268 | onItemSelectAll(filteredItems.filter(function (item) {
|
269 | return !item.disabled;
|
270 | }).map(function (_ref2) {
|
271 | var key = _ref2.key;
|
272 | return key;
|
273 | }), !checkedAll);
|
274 | }
|
275 | });
|
276 | return checkAllCheckbox;
|
277 | }
|
278 | }, {
|
279 | key: "render",
|
280 | value: function render() {
|
281 | var _classNames,
|
282 | _this4 = this;
|
283 |
|
284 | var filterValue = this.state.filterValue;
|
285 | var _this$props2 = this.props,
|
286 | prefixCls = _this$props2.prefixCls,
|
287 | dataSource = _this$props2.dataSource,
|
288 | titleText = _this$props2.titleText,
|
289 | checkedKeys = _this$props2.checkedKeys,
|
290 | disabled = _this$props2.disabled,
|
291 | footer = _this$props2.footer,
|
292 | showSearch = _this$props2.showSearch,
|
293 | style = _this$props2.style,
|
294 | searchPlaceholder = _this$props2.searchPlaceholder,
|
295 | notFoundContent = _this$props2.notFoundContent,
|
296 | selectAll = _this$props2.selectAll,
|
297 | selectCurrent = _this$props2.selectCurrent,
|
298 | selectInvert = _this$props2.selectInvert,
|
299 | removeAll = _this$props2.removeAll,
|
300 | removeCurrent = _this$props2.removeCurrent,
|
301 | renderList = _this$props2.renderList,
|
302 | onItemSelectAll = _this$props2.onItemSelectAll,
|
303 | onItemRemove = _this$props2.onItemRemove,
|
304 | _this$props2$showSele = _this$props2.showSelectAll,
|
305 | showSelectAll = _this$props2$showSele === void 0 ? true : _this$props2$showSele,
|
306 | showRemove = _this$props2.showRemove,
|
307 | pagination = _this$props2.pagination,
|
308 | direction = _this$props2.direction;
|
309 |
|
310 | var footerDom = footer && (footer.length < 2 ? footer(this.props) : footer(this.props, {
|
311 | direction: direction
|
312 | }));
|
313 | var listCls = (0, _classnames["default"])(prefixCls, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-pagination"), !!pagination), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-with-footer"), !!footerDom), _classNames));
|
314 |
|
315 | var _this$getFilteredItem = this.getFilteredItems(dataSource, filterValue),
|
316 | filteredItems = _this$getFilteredItem.filteredItems,
|
317 | filteredRenderItems = _this$getFilteredItem.filteredRenderItems;
|
318 |
|
319 |
|
320 | var listBody = this.getListBody(prefixCls, searchPlaceholder, filterValue, filteredItems, notFoundContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled);
|
321 |
|
322 | var listFooter = footerDom ? React.createElement("div", {
|
323 | className: "".concat(prefixCls, "-footer")
|
324 | }, footerDom) : null;
|
325 | var checkAllCheckbox = !showRemove && !pagination && this.getCheckBox({
|
326 | filteredItems: filteredItems,
|
327 | onItemSelectAll: onItemSelectAll,
|
328 | disabled: disabled,
|
329 | prefixCls: prefixCls
|
330 | });
|
331 | var menu = null;
|
332 |
|
333 | if (showRemove) {
|
334 | menu = React.createElement(_menu["default"], null, pagination && React.createElement(_menu["default"].Item, {
|
335 | key: "removeCurrent",
|
336 | onClick: function onClick() {
|
337 | var _a;
|
338 |
|
339 | var pageKeys = getEnabledItemKeys((((_a = _this4.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || []).map(function (entity) {
|
340 | return entity.item;
|
341 | }));
|
342 | onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove(pageKeys);
|
343 | }
|
344 | }, removeCurrent), React.createElement(_menu["default"].Item, {
|
345 | key: "removeAll",
|
346 | onClick: function onClick() {
|
347 | onItemRemove === null || onItemRemove === void 0 ? void 0 : onItemRemove(getEnabledItemKeys(filteredItems));
|
348 | }
|
349 | }, removeAll));
|
350 | } else {
|
351 | menu = React.createElement(_menu["default"], null, React.createElement(_menu["default"].Item, {
|
352 | key: "selectAll",
|
353 | onClick: function onClick() {
|
354 | var keys = getEnabledItemKeys(filteredItems);
|
355 | onItemSelectAll(keys, keys.length !== checkedKeys.length);
|
356 | }
|
357 | }, selectAll), pagination && React.createElement(_menu["default"].Item, {
|
358 | onClick: function onClick() {
|
359 | var _a;
|
360 |
|
361 | var pageItems = ((_a = _this4.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || [];
|
362 | onItemSelectAll(getEnabledItemKeys(pageItems.map(function (entity) {
|
363 | return entity.item;
|
364 | })), true);
|
365 | }
|
366 | }, selectCurrent), React.createElement(_menu["default"].Item, {
|
367 | key: "selectInvert",
|
368 | onClick: function onClick() {
|
369 | var _a;
|
370 |
|
371 | var availableKeys;
|
372 |
|
373 | if (pagination) {
|
374 | availableKeys = getEnabledItemKeys((((_a = _this4.defaultListBodyRef.current) === null || _a === void 0 ? void 0 : _a.getItems()) || []).map(function (entity) {
|
375 | return entity.item;
|
376 | }));
|
377 | } else {
|
378 | availableKeys = getEnabledItemKeys(filteredItems);
|
379 | }
|
380 |
|
381 | var checkedKeySet = new Set(checkedKeys);
|
382 | var newCheckedKeys = [];
|
383 | var newUnCheckedKeys = [];
|
384 | availableKeys.forEach(function (key) {
|
385 | if (checkedKeySet.has(key)) {
|
386 | newUnCheckedKeys.push(key);
|
387 | } else {
|
388 | newCheckedKeys.push(key);
|
389 | }
|
390 | });
|
391 | onItemSelectAll(newCheckedKeys, true);
|
392 | onItemSelectAll(newUnCheckedKeys, false);
|
393 | }
|
394 | }, selectInvert));
|
395 | }
|
396 |
|
397 | var dropdown = React.createElement(_dropdown["default"], {
|
398 | className: "".concat(prefixCls, "-header-dropdown"),
|
399 | overlay: menu,
|
400 | disabled: disabled
|
401 | }, React.createElement(_DownOutlined["default"], null));
|
402 |
|
403 | return React.createElement("div", {
|
404 | className: listCls,
|
405 | style: style
|
406 | }, React.createElement("div", {
|
407 | className: "".concat(prefixCls, "-header")
|
408 | }, showSelectAll ? React.createElement(React.Fragment, null, checkAllCheckbox, dropdown) : null, React.createElement("span", {
|
409 | className: "".concat(prefixCls, "-header-selected")
|
410 | }, this.getSelectAllLabel(checkedKeys.length, filteredItems.length)), React.createElement("span", {
|
411 | className: "".concat(prefixCls, "-header-title")
|
412 | }, titleText)), listBody, listFooter);
|
413 | }
|
414 | }]);
|
415 | return TransferList;
|
416 | }(React.PureComponent);
|
417 |
|
418 | exports["default"] = TransferList;
|
419 | TransferList.defaultProps = {
|
420 | dataSource: [],
|
421 | titleText: '',
|
422 | showSearch: false
|
423 | }; |
\ | No newline at end of file |