amis-ui 3.1.0 → 3.2.0

package/esm/components/Cascader.js

@@ -1,9 +1,9 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
-import { __extends, __spreadArray, __assign, __read, __decorate, __metadata, __values } from 'tslib';
+import { __extends, __spreadArray, __read, __decorate, __metadata, __values } from 'tslib';
 import React__default from 'react';
 import { getTreeAncestors, findTree, flattenTree, getTreeDepth, autobind, themeable } from 'amis-core';
 import intersectionBy from 'lodash/intersectionBy';
@@ -11,6 +11,8 @@ import compact from 'lodash/compact';
 import find from 'lodash/find';
 import uniqBy from 'lodash/uniqBy';
 import Button from './Button.js';
+import Checkbox from './Checkbox.js';
+import { Icon } from './icons.js';
 
 /**
  * @file Cascader
@@ -31,8 +33,8 @@ var Cascader = /** @class */ (function (_super) {
             return arr;
         };
         _this.state = {
+            activePaths: [],
             selectedOptions: _this.props.selectedOptions || [],
-            activeTab: 0,
             tabs: [
                 {
                     options: _this.props.options.slice() || []
@@ -43,7 +45,7 @@ var Cascader = /** @class */ (function (_super) {
         return _this;
     }
     Cascader.prototype.componentDidMount = function () {
-        var _a = this.props, multiple = _a.multiple, options = _a.options, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, cascade = _a.cascade, onlyLeaf = _a.onlyLeaf;
+        var _a = this.props, multiple = _a.multiple, options = _a.options, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, cascade = _a.cascade; _a.onlyLeaf;
         var selectedOptions = this.props.selectedOptions.slice();
         var parentsCount = 0;
         var parentTree = [];
@@ -64,28 +66,15 @@ var Cascader = /** @class */ (function (_super) {
                     option.children.forEach(function (option) { return (option.disabled = true); });
                 }
             }
-            return multiple && !onlyLeaf
-                ? {
-                    options: __spreadArray([
-                        __assign(__assign({}, option), { isCheckAll: true })
-                    ], __read((option.children ? option.children : [])), false)
-                }
-                : {
-                    options: option.children ? option.children : []
-                };
+            return {
+                options: option.children ? option.children : []
+            };
         });
         this.setState({
             selectedOptions: selectedOptions,
             tabs: __spreadArray(__spreadArray([], __read(this.state.tabs), false), __read(tabs), false)
         });
     };
-    Cascader.prototype.handleTabSelect = function (index) {
-        var tabs = this.state.tabs.slice(0, index + 1);
-        this.setState({
-            activeTab: index,
-            tabs: tabs
-        });
-    };
     Cascader.prototype.getOptionParent = function (option) {
         var _a = this.props, options = _a.options, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b;
         var ancestors = [];
@@ -136,6 +125,14 @@ var Cascader = /** @class */ (function (_super) {
         }
         return loop(selectedOptions);
     };
+    // 判断配置onlyChildren属性时节点选中情况
+    Cascader.prototype.getOnlyChildrenSelect = function (option, selectedOptions) {
+        var _a;
+        var onlyChildren = this.props.onlyChildren;
+        selectedOptions = selectedOptions || this.state.selectedOptions;
+        return (onlyChildren &&
+            ((_a = option.children) === null || _a === void 0 ? void 0 : _a.filter(function (option) { var _a; return !((_a = option.children) === null || _a === void 0 ? void 0 : _a.length); }).every(function (option) { var _a; return !((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.includes(option)); })));
+    };
     Cascader.prototype.getSelectedChildNum = function (option) {
         var _this = this;
         var count = 0;
@@ -197,10 +194,11 @@ var Cascader = /** @class */ (function (_super) {
         var _a;
         var _b = this.props, _c = _b.valueField, valueField = _c === void 0 ? 'value' : _c, onlyChildren = _b.onlyChildren;
         var index = selectedOptions.findIndex(function (item) { return item[valueField] === option[valueField]; });
+        var isSelect = this.getOnlyChildrenSelect(option, selectedOptions);
         if (index !== -1) {
             selectedOptions.splice(index, 1);
         }
-        else {
+        else if (!isSelect) {
             if (!(onlyChildren && ((_a = option.children) === null || _a === void 0 ? void 0 : _a.length))) {
                 selectedOptions.push(option);
             }
@@ -211,7 +209,7 @@ var Cascader = /** @class */ (function (_super) {
             }
             option.children.forEach(function (item) {
                 var _a;
-                if (index !== -1) {
+                if (index !== -1 || isSelect) {
                     // 删除选中节点及其子节点
                     selectedOptions = selectedOptions.filter(function (sItem) { return sItem[valueField] !== item[valueField]; });
                 }
@@ -228,19 +226,27 @@ var Cascader = /** @class */ (function (_super) {
         return selectedOptions;
     };
     Cascader.prototype.onSelect = function (option, tabIndex) {
-        var _this = this;
-        var _a = this.props, multiple = _a.multiple, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, cascade = _a.cascade, onlyLeaf = _a.onlyLeaf, onlyChildren = _a.onlyChildren;
-        var tabs = this.state.tabs.slice();
-        var activeTab = this.state.activeTab;
+        var _a;
+        var _b = this.props, multiple = _b.multiple, _c = _b.valueField, valueField = _c === void 0 ? 'value' : _c, cascade = _b.cascade, onlyLeaf = _b.onlyLeaf, onlyChildren = _b.onlyChildren, withChildren = _b.withChildren;
         var selectedOptions = this.state.selectedOptions;
         var isDisable = option.disabled;
         if (!isDisable) {
             if (multiple) {
                 // 父子级分离
                 if (cascade) {
-                    if (option.isCheckAll ||
-                        !option.children ||
-                        !option.children.length) {
+                    var index = selectedOptions.findIndex(function (item) { return item[valueField] === option[valueField]; });
+                    if (index !== -1) {
+                        selectedOptions.splice(index, 1);
+                    }
+                    else {
+                        selectedOptions.push(option);
+                    }
+                }
+                else {
+                    if (withChildren || onlyChildren) {
+                        selectedOptions = this.dealChildrenSelect(option, selectedOptions);
+                    }
+                    else {
                         var index = selectedOptions.findIndex(function (item) { return item[valueField] === option[valueField]; });
                         if (index !== -1) {
                             selectedOptions.splice(index, 1);
@@ -249,27 +255,56 @@ var Cascader = /** @class */ (function (_super) {
                             selectedOptions.push(option);
                         }
                     }
-                }
-                else {
-                    if (option.isCheckAll ||
-                        !option.children ||
-                        !option.children.length) {
-                        selectedOptions = this.dealChildrenSelect(option, selectedOptions);
-                        if (!onlyChildren) {
-                            selectedOptions = this.dealParentSelect(option, selectedOptions);
-                        }
-                    }
+                    selectedOptions = this.dealParentSelect(option, selectedOptions);
                 }
             }
             else {
                 // 单选
-                selectedOptions = [option];
+                if (onlyLeaf) {
+                    if (!((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)) {
+                        selectedOptions = [option];
+                    }
+                }
+                else {
+                    selectedOptions = [option];
+                }
             }
         }
         this.dealOptionDisable(selectedOptions);
+        var disableConfirm = false;
+        if (onlyLeaf && selectedOptions.length && selectedOptions[0].children) {
+            disableConfirm = true;
+        }
+        this.setState({
+            selectedOptions: selectedOptions,
+            disableConfirm: disableConfirm
+        });
+    };
+    Cascader.prototype.handleExpand = function (option, tabIndex) {
+        var _this = this;
+        var _a;
+        var activePaths = this.state.activePaths.slice();
+        if ((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) {
+            activePaths[tabIndex] = option;
+        }
+        else {
+            activePaths.splice(tabIndex);
+        }
+        var tabs = this.state.tabs.slice();
         if (tabs.length > tabIndex + 1) {
             tabs = tabs.slice(0, tabIndex + 1);
         }
+        if (option === null || option === void 0 ? void 0 : option.children) {
+            var nextTab = {
+                options: option.children
+            };
+            if (tabs[tabIndex + 1]) {
+                tabs[tabIndex + 1] = nextTab;
+            }
+            else {
+                tabs.push(nextTab);
+            }
+        }
         requestAnimationFrame(function () {
             var _a, _b;
             var tabWidth = ((_a = _this.tabRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1;
@@ -279,54 +314,9 @@ var Cascader = /** @class */ (function (_super) {
                 (_b = _this.tabsRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo(scrollLeft, 0);
             }
         });
-        if ((option === null || option === void 0 ? void 0 : option.children) && !option.isCheckAll) {
-            var nextTab = multiple && !onlyLeaf
-                ? {
-                    options: __spreadArray([
-                        __assign(__assign({}, option), { isCheckAll: true })
-                    ], __read(option.children), false)
-                }
-                : {
-                    options: option.children
-                };
-            if (tabs[tabIndex + 1]) {
-                tabs[tabIndex + 1] = nextTab;
-            }
-            else {
-                tabs.push(nextTab);
-            }
-            activeTab += 1;
-        }
-        var disableConfirm = false;
-        if (onlyLeaf && selectedOptions.length && selectedOptions[0].children) {
-            disableConfirm = true;
-        }
         this.setState({
-            tabs: tabs,
-            activeTab: activeTab,
-            selectedOptions: selectedOptions,
-            disableConfirm: disableConfirm
-        });
-    };
-    Cascader.prototype.onNextClick = function (option, tabIndex) {
-        var activeTab = this.state.activeTab;
-        var tabs = this.state.tabs.slice();
-        if (option.c)
-            if (option === null || option === void 0 ? void 0 : option.children) {
-                var nextTab = {
-                    options: option.children
-                };
-                if (tabs[tabIndex + 1]) {
-                    tabs[tabIndex + 1] = nextTab;
-                }
-                else {
-                    tabs.push(nextTab);
-                }
-                activeTab += 1;
-            }
-        this.setState({
-            tabs: tabs,
-            activeTab: activeTab
+            activePaths: activePaths,
+            tabs: tabs
         });
     };
     Cascader.prototype.getSubmitOptions = function (selectedOptions) {
@@ -353,7 +343,7 @@ var Cascader = /** @class */ (function (_super) {
         return _selectedOptions;
     };
     Cascader.prototype.confirm = function () {
-        var _a = this.props, onChange = _a.onChange; _a.joinValues; _a.delimiter; _a.extractValue; _a.valueField; var onClose = _a.onClose, onlyLeaf = _a.onlyLeaf;
+        var _a = this.props, onChange = _a.onChange, onClose = _a.onClose, onlyLeaf = _a.onlyLeaf;
         var selectedOptions = this.getSelectedOptions();
         if (onlyLeaf && selectedOptions.length && selectedOptions[0].children) {
             return;
@@ -366,17 +356,28 @@ var Cascader = /** @class */ (function (_super) {
     };
     Cascader.prototype.renderOption = function (option, tabIndex) {
         var _this = this;
-        var _a = this.props, activeColor = _a.activeColor, optionRender = _a.optionRender, labelField = _a.labelField, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, cx = _a.classnames; _a.cascade; _a.multiple;
-        var selectedOptions = this.state.selectedOptions;
+        var _a, _b, _c;
+        var _d = this.props, onlyLeaf = _d.onlyLeaf, activeColor = _d.activeColor, optionRender = _d.optionRender, labelField = _d.labelField, _e = _d.valueField, valueField = _e === void 0 ? 'value' : _e, multiple = _d.multiple, cx = _d.classnames;
+        var _f = this.state, selectedOptions = _f.selectedOptions, activePaths = _f.activePaths;
         var selectedValueArr = selectedOptions.map(function (item) { return item[valueField]; });
         var selfChecked = selectedValueArr.includes(option[valueField]);
         var color = option.color || (selfChecked ? activeColor : undefined);
         var Text = optionRender ? (optionRender({ option: option, selected: selfChecked })) : (React__default.createElement("span", null, option[labelField]));
         return (React__default.createElement("li", { className: cx('Cascader-option', {
-                selected: selfChecked,
-                disabled: option.disabled
-            }, option.className), style: { color: color }, onClick: function () { return _this.onSelect(option, tabIndex); }, key: tabIndex + '-' + option[valueField] },
-            React__default.createElement("span", { className: cx('Cascader-option--text') }, Text)));
+                'selected': selfChecked,
+                'disabled': option.disabled,
+                'is-active': activePaths.includes(option)
+            }, option.className), style: { color: color }, key: tabIndex + '-' + option[valueField], onClick: function () {
+                !multiple && _this.onSelect(option, tabIndex);
+                _this.handleExpand(option, tabIndex);
+            } },
+            multiple ? (React__default.createElement(Checkbox, { disabled: option.disabled || (onlyLeaf && ((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)), checked: selectedOptions.includes(option) ||
+                    this.getOnlyChildrenSelect(option), onChange: function () { return _this.onSelect(option, tabIndex); } },
+                React__default.createElement("span", { className: cx('Cascader-option--text') }, Text))) : (React__default.createElement("span", { className: cx('Cascader-option--text', {
+                    disabled: onlyLeaf && ((_b = option.children) === null || _b === void 0 ? void 0 : _b.length)
+                }) }, Text)),
+            ((_c = option.children) === null || _c === void 0 ? void 0 : _c.length) ? (React__default.createElement("span", { className: cx('Cascader-option-arrow') },
+                React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : null));
     };
     Cascader.prototype.renderOptions = function (options, tabIndex) {
         var _this = this;
@@ -391,32 +392,26 @@ var Cascader = /** @class */ (function (_super) {
         return (React__default.createElement("div", { className: cx("Cascader-tabs", depth > 3 ? 'scrollable' : ''), ref: this.tabsRef },
             tabs.map(function (tab, tabIndex) {
                 var options = tab.options;
-                return (React__default.createElement("div", { className: cx("Cascader-tab"), ref: _this.tabRef, key: tabIndex }, _this.renderOptions(options, tabIndex)));
+                return (React__default.createElement("div", { className: cx("Cascader-tab depth-".concat(tabIndex)), ref: _this.tabRef, key: tabIndex }, _this.renderOptions(options, tabIndex)));
             }),
             depth <= 3 && options.length
                 ? Array(getTreeDepth(options) - tabs.length)
                     .fill(1)
-                    .map(function (item, index) { return (React__default.createElement("div", { className: cx("Cascader-tab"), key: index })); })
+                    .map(function (item, index) { return (React__default.createElement("div", { className: cx("Cascader-tab depth-".concat(index + 1)), key: index })); })
                 : null));
     };
     Cascader.prototype.render = function () {
         var _a = this.props; _a.classPrefix; var cx = _a.classnames, className = _a.className, onClose = _a.onClose; _a.valueField; var __ = _a.translate;
         return (React__default.createElement("div", { className: cx("Cascader", className) },
             React__default.createElement("div", { className: cx("Cascader-btnGroup") },
-                React__default.createElement(Button, { className: cx("Cascader-btnCancel"), level: "text", onClick: onClose }, __('cancel')),
-                React__default.createElement(Button, { className: cx("Cascader-btnConfirm"), level: "text", onClick: this.confirm, disabled: this.state.disableConfirm }, __('confirm'))),
+                React__default.createElement(Button, { className: cx("Cascader-btnCancel"), level: "link", onClick: onClose }, __('cancel')),
+                React__default.createElement(Button, { className: cx("Cascader-btnConfirm"), level: "link", onClick: this.confirm, disabled: this.state.disableConfirm }, __('confirm'))),
             this.renderTabs()));
     };
     Cascader.defaultProps = {
         labelField: 'label',
         valueField: 'value'
     };
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Number]),
-        __metadata("design:returntype", void 0)
-    ], Cascader.prototype, "handleTabSelect", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -441,6 +436,12 @@ var Cascader = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", Boolean)
     ], Cascader.prototype, "adjustOptionSelect", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Array]),
+        __metadata("design:returntype", void 0)
+    ], Cascader.prototype, "getOnlyChildrenSelect", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),
@@ -470,7 +471,7 @@ var Cascader = /** @class */ (function (_super) {
         __metadata("design:type", Function),
         __metadata("design:paramtypes", [Object, Number]),
         __metadata("design:returntype", void 0)
-    ], Cascader.prototype, "onNextClick", null);
+    ], Cascader.prototype, "handleExpand", null);
     __decorate([
         autobind,
         __metadata("design:type", Function),