amis-ui 6.1.0 → 6.2.1

package/esm/components/Transfer.js

@@ -1,9 +1,9 @@
 /**
- * amis-ui v6.1.0
+ * amis-ui v6.2.1
  * Copyright 2018-2024 fex
  */
 
-import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
+import { __extends, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
 import intersectionWith from 'lodash/intersectionWith';
 import includes from 'lodash/includes';
@@ -32,37 +32,15 @@ var Transfer = /** @class */ (function (_super) {
         _this.state = {
             inputValue: '',
             searchResult: null,
+            searchResultPage: null,
             isTreeDeferLoad: false,
             resultSelectMode: 'list'
         };
         _this.unmounted = false;
-        _this.lazySearch = debounce(function () { return __awaiter(_this, void 0, void 0, function () {
-            var inputValue, onSearch, result;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        inputValue = this.state.inputValue;
-                        if (!inputValue) {
-                            return [2 /*return*/];
-                        }
-                        onSearch = this.props.onSearch;
-                        return [4 /*yield*/, onSearch(inputValue, function (cancelExecutor) { return (_this.cancelSearch = cancelExecutor); })];
-                    case 1:
-                        result = _a.sent();
-                        if (this.unmounted) {
-                            return [2 /*return*/];
-                        }
-                        if (!Array.isArray(result)) {
-                            throw new Error('onSearch 需要返回数组');
-                        }
-                        this.setState({
-                            searchResult: result
-                        });
-                        return [2 /*return*/];
-                }
-            });
-        }); }, 250, { trailing: true, leading: false });
+        _this.lazySearch = debounce(_this.searchRequest, 250, {
+            trailing: true,
+            leading: false
+        });
         return _this;
     }
     Transfer.prototype.componentDidMount = function () {
@@ -192,7 +170,45 @@ var Transfer = /** @class */ (function (_super) {
     Transfer.prototype.handleSeachCancel = function () {
         this.setState({
             inputValue: '',
-            searchResult: null
+            searchResult: null,
+            searchResultPage: null
+        });
+    };
+    Transfer.prototype.searchRequest = function (page, perPage) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var pagination, inputValue, onSearch, result, items, currentPage;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        pagination = this.props.pagination;
+                        inputValue = this.state.inputValue;
+                        if (!inputValue) {
+                            return [2 /*return*/];
+                        }
+                        onSearch = this.props.onSearch;
+                        return [4 /*yield*/, onSearch(inputValue, function (cancelExecutor) { return (_this.cancelSearch = cancelExecutor); }, ((_a = this.props.pagination) === null || _a === void 0 ? void 0 : _a.enable)
+                                ? { page: page || 1, perPage: perPage || (pagination === null || pagination === void 0 ? void 0 : pagination.perPage) || 10 }
+                                : undefined)];
+                    case 1:
+                        result = _b.sent();
+                        if (this.unmounted) {
+                            return [2 /*return*/];
+                        }
+                        if (result) {
+                            items = result.items, currentPage = __rest(result, ["items"]);
+                            if (!Array.isArray(items)) {
+                                throw new Error('onSearch 需要返回数组');
+                            }
+                            this.setState({
+                                searchResult: items,
+                                searchResultPage: __assign({}, currentPage)
+                            });
+                        }
+                        return [2 /*return*/];
+                }
+            });
         });
     };
     Transfer.prototype.getFlattenArr = function (options) {
@@ -239,6 +255,16 @@ var Transfer = /** @class */ (function (_super) {
             ? resultItemRender(option, states)
             : ResultList.itemRender(option, __assign(__assign({}, states), { classnames: classnames }));
     };
+    Transfer.prototype.onPageChangeHandle = function (page, perPage, direction) {
+        var _a = this.props, onPageChange = _a.onPageChange; _a.onSearch;
+        var _b = this.state, searchResult = _b.searchResult; _b.inputValue;
+        if (searchResult) {
+            this.searchRequest(page, perPage);
+        }
+        else if (onPageChange) {
+            onPageChange(page, perPage, direction);
+        }
+    };
     Transfer.prototype.renderSelect = function (props) {
         var selectRender = props.selectRender, selectMode = props.selectMode, cx = props.classnames, selectTitle = props.selectTitle, onSearch = props.onSearch, disabled = props.disabled, options = props.options, statistics = props.statistics, __ = props.translate, _a = props.searchPlaceholder, searchPlaceholder = _a === void 0 ? __('Transfer.searchKeyword') : _a, mobileUI = props.mobileUI, _b = props.valueField, valueField = _b === void 0 ? 'value' : _b;
         if (selectRender) {
@@ -278,9 +304,24 @@ var Transfer = /** @class */ (function (_super) {
             this.renderFooter()));
     };
     Transfer.prototype.renderFooter = function () {
-        var _a = this.props, cx = _a.classnames, pagination = _a.pagination, onPageChange = _a.onPageChange;
-        return (pagination === null || pagination === void 0 ? void 0 : pagination.enable) ? (React__default.createElement("div", { className: cx('Transfer-footer') },
-            React__default.createElement(Pagination, { className: cx('Transfer-footer-pagination', pagination.className), activePage: pagination.page, perPage: pagination.perPage, total: pagination.total, layout: pagination.layout, maxButtons: pagination.maxButtons, perPageAvailable: pagination.perPageAvailable, popOverContainer: pagination.popOverContainer, popOverContainerSelector: pagination.popOverContainerSelector, onPageChange: onPageChange }))) : null;
+        var _a = this.props, cx = _a.classnames, pagination = _a.pagination;
+        var _b = this.state, searchResult = _b.searchResult, searchResultPage = _b.searchResultPage;
+        if (!pagination || !(pagination === null || pagination === void 0 ? void 0 : pagination.enable)) {
+            return null;
+        }
+        var currentPage = searchResult && searchResultPage
+            ? {
+                page: searchResultPage.page,
+                perPage: searchResultPage.perPage,
+                total: searchResultPage.total
+            }
+            : {
+                page: pagination.page,
+                perPage: pagination.perPage,
+                total: pagination.total
+            };
+        return (React__default.createElement("div", { className: cx('Transfer-footer') },
+            React__default.createElement(Pagination, { className: cx('Transfer-footer-pagination', pagination.className), activePage: currentPage.page, perPage: currentPage.perPage, total: currentPage.total, layout: pagination.layout, maxButtons: pagination.maxButtons, perPageAvailable: pagination.perPageAvailable, popOverContainer: pagination.popOverContainer, popOverContainerSelector: pagination.popOverContainerSelector, onPageChange: this.onPageChangeHandle })));
     };
     Transfer.prototype.renderSearchResult = function (props) {
         var _this = this;
@@ -296,8 +337,8 @@ var Transfer = /** @class */ (function (_super) {
             }, joinValues: false, showIcon: false, multiple: multiple, cascade: true, onlyChildren: onlyChildren !== null && onlyChildren !== void 0 ? onlyChildren : !isTreeDeferLoad, highlightTxt: highlightTxt, itemRender: treeItemRender, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : mode === 'chained' ? (React__default.createElement(ChainedCheckboxes, { placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : (React__default.createElement(GroupedSelection, { placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll }));
     };
     Transfer.prototype.renderOptions = function (props) {
-        var selectMode = props.selectMode, columns = props.columns, options = props.options, value = props.value, disabled = props.disabled, onChange = props.onChange, option2value = props.option2value, cx = props.classnames, onDeferLoad = props.onDeferLoad, leftOptions = props.leftOptions, leftMode = props.leftMode, rightMode = props.rightMode, cellRender = props.cellRender, leftDefaultValue = props.leftDefaultValue, multiple = props.multiple, noResultsText = props.noResultsText, labelField = props.labelField, _a = props.valueField, valueField = _a === void 0 ? 'value' : _a, _b = props.deferField, deferField = _b === void 0 ? 'defer' : _b, virtualThreshold = props.virtualThreshold, itemHeight = props.itemHeight, virtualListHeight = props.virtualListHeight, loadingConfig = props.loadingConfig, checkAll = props.checkAll, checkAllLabel = props.checkAllLabel, onlyChildren = props.onlyChildren;
-        return selectMode === 'table' ? (React__default.createElement(TableCheckboxes, { className: cx('Transfer-selection'), columns: columns, options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, cellRender: cellRender, multiple: multiple, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : selectMode === 'tree' ? (React__default.createElement(Tree, { ref: this.domRef, placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, onChange: onChange, onlyChildren: onlyChildren !== null && onlyChildren !== void 0 ? onlyChildren : !this.state.isTreeDeferLoad, itemRender: this.optionItemRender, onDeferLoad: onDeferLoad, joinValues: false, showIcon: false, multiple: multiple, cascade: true, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : selectMode === 'chained' ? (React__default.createElement(ChainedCheckboxes, { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : selectMode === 'associated' ? (React__default.createElement(AssociatedCheckboxes, { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, columns: columns, leftOptions: leftOptions || [], leftMode: leftMode, rightMode: rightMode, leftDefaultValue: leftDefaultValue, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, deferField: deferField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : (React__default.createElement(GroupedSelection, { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll }));
+        var selectMode = props.selectMode, columns = props.columns, options = props.options, value = props.value, disabled = props.disabled, onChange = props.onChange, option2value = props.option2value, cx = props.classnames, onDeferLoad = props.onDeferLoad, leftOptions = props.leftOptions, leftMode = props.leftMode, rightMode = props.rightMode, cellRender = props.cellRender, leftDefaultValue = props.leftDefaultValue, multiple = props.multiple, noResultsText = props.noResultsText, labelField = props.labelField, _a = props.valueField, valueField = _a === void 0 ? 'value' : _a, _b = props.deferField, deferField = _b === void 0 ? 'defer' : _b, virtualThreshold = props.virtualThreshold, itemHeight = props.itemHeight, virtualListHeight = props.virtualListHeight, loadingConfig = props.loadingConfig, checkAll = props.checkAll, checkAllLabel = props.checkAllLabel, onlyChildren = props.onlyChildren, _c = props.autoCheckChildren, autoCheckChildren = _c === void 0 ? true : _c, _d = props.initiallyOpen, initiallyOpen = _d === void 0 ? true : _d;
+        return selectMode === 'table' ? (React__default.createElement(TableCheckboxes, { className: cx('Transfer-selection'), columns: columns, options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, cellRender: cellRender, multiple: multiple, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : selectMode === 'tree' ? (React__default.createElement(Tree, { ref: this.domRef, placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, onChange: onChange, onlyChildren: onlyChildren !== null && onlyChildren !== void 0 ? onlyChildren : !this.state.isTreeDeferLoad, itemRender: this.optionItemRender, onDeferLoad: onDeferLoad, joinValues: false, showIcon: false, multiple: multiple, cascade: true, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll, initiallyOpen: initiallyOpen, autoCheckChildren: autoCheckChildren })) : selectMode === 'chained' ? (React__default.createElement(ChainedCheckboxes, { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : selectMode === 'associated' ? (React__default.createElement(AssociatedCheckboxes, { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, columns: columns, leftOptions: leftOptions || [], leftMode: leftMode, rightMode: rightMode, leftDefaultValue: leftDefaultValue, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, deferField: deferField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : (React__default.createElement(GroupedSelection, { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll }));
     };
     Transfer.prototype.renderResult = function () {
         var _a = this.props, columns = _a.columns, options = _a.options, disabled = _a.disabled, option2value = _a.option2value, cx = _a.classnames, cellRender = _a.cellRender, onChange = _a.onChange, value = _a.value, resultSearchable = _a.resultSearchable, resultSearchPlaceholder = _a.resultSearchPlaceholder, onResultSearch = _a.onResultSearch, sortable = _a.sortable, labelField = _a.labelField, __ = _a.translate, _b = _a.placeholder, placeholder = _b === void 0 ? __('Transfer.selectFromLeft') : _b, virtualThreshold = _a.virtualThreshold, itemHeight = _a.itemHeight, loadingConfig = _a.loadingConfig, showInvalidMatch = _a.showInvalidMatch, pagination = _a.pagination, accumulatedOptions = _a.accumulatedOptions;
@@ -394,6 +435,12 @@ var Transfer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
     ], Transfer.prototype, "handleSeachCancel", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number, Number]),
+        __metadata("design:returntype", Promise)
+    ], Transfer.prototype, "searchRequest", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -413,6 +460,12 @@ var Transfer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object, Object]),
         __metadata("design:returntype", void 0)
     ], Transfer.prototype, "resultItemRender", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number, Number, String]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "onPageChangeHandle", null);
     return Transfer;
 }(React__default.Component));
 var Transfer$1 = themeable(localeable(uncontrollable(/** @class */ (function (_super) {