amis-ui 3.1.1 → 3.3.0

package/lib/components/Cascader.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -15,6 +15,8 @@ var compact = require('lodash/compact');
 var find = require('lodash/find');
 var uniqBy = require('lodash/uniqBy');
 var Button = require('./Button.js');
+var Checkbox = require('./Checkbox.js');
+var icons = require('./icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,10 +26,9 @@ var compact__default = /*#__PURE__*/_interopDefaultLegacy(compact);
 var find__default = /*#__PURE__*/_interopDefaultLegacy(find);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 
-/**
- * @file Cascader
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var Cascader = /** @class */ (function (_super) {
     tslib.__extends(Cascader, _super);
     function Cascader(props) {
@@ -43,8 +44,8 @@ var Cascader = /** @class */ (function (_super) {
             return arr;
         };
         _this.state = {
+            activePaths: [],
             selectedOptions: _this.props.selectedOptions || [],
-            activeTab: 0,
             tabs: [
                 {
                     options: _this.props.options.slice() || []
@@ -55,7 +56,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 = [];
@@ -76,28 +77,15 @@ var Cascader = /** @class */ (function (_super) {
                     option.children.forEach(function (option) { return (option.disabled = true); });
                 }
             }
-            return multiple && !onlyLeaf
-                ? {
-                    options: tslib.__spreadArray([
-                        tslib.__assign(tslib.__assign({}, option), { isCheckAll: true })
-                    ], tslib.__read((option.children ? option.children : [])), false)
-                }
-                : {
-                    options: option.children ? option.children : []
-                };
+            return {
+                options: option.children ? option.children : []
+            };
         });
         this.setState({
             selectedOptions: selectedOptions,
             tabs: tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(this.state.tabs), false), tslib.__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 = [];
@@ -148,6 +136,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;
@@ -209,10 +205,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);
             }
@@ -223,7 +220,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]; });
                 }
@@ -240,19 +237,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);
@@ -261,27 +266,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;
@@ -291,54 +325,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: tslib.__spreadArray([
-                        tslib.__assign(tslib.__assign({}, option), { isCheckAll: true })
-                    ], tslib.__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) {
@@ -365,7 +354,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;
@@ -378,57 +367,62 @@ 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["default"].createElement("span", null, option[labelField]));
-        return (React__default["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["default"].createElement("span", { className: cx('Cascader-option--text') }, Text)));
+        var Text = optionRender ? (optionRender({ option: option, selected: selfChecked })) : (_J$X_("span", null, option[labelField]));
+        return (_J$X_("li", { className: cx('Cascader-option', {
+                '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 ? (_J$X_(Checkbox["default"], { 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); } },
+                _J$X_("span", { className: cx('Cascader-option--text') }, Text))) : (_J$X_("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) ? (_J$X_("span", { className: cx('Cascader-option-arrow') },
+                _J$X_(icons.Icon, { icon: "right-arrow-bold", className: "icon" }))) : null));
     };
     Cascader.prototype.renderOptions = function (options, tabIndex) {
         var _this = this;
         var cx = this.props.classnames;
-        return (React__default["default"].createElement("ul", { key: tabIndex, className: cx('Cascader-options') }, options.map(function (option) { return _this.renderOption(option, tabIndex); })));
+        return (_J$X_("ul", { key: tabIndex, className: cx('Cascader-options') }, options.map(function (option) { return _this.renderOption(option, tabIndex); })));
     };
     Cascader.prototype.renderTabs = function () {
         var _this = this;
         var _a = this.props, cx = _a.classnames, options = _a.options;
         var tabs = this.state.tabs;
         var depth = amisCore.getTreeDepth(options);
-        return (React__default["default"].createElement("div", { className: cx("Cascader-tabs", depth > 3 ? 'scrollable' : ''), ref: this.tabsRef },
+        return (_J$X_("div", { className: cx("Cascader-tabs", depth > 3 ? 'scrollable' : ''), ref: this.tabsRef },
             tabs.map(function (tab, tabIndex) {
                 var options = tab.options;
-                return (React__default["default"].createElement("div", { className: cx("Cascader-tab"), ref: _this.tabRef, key: tabIndex }, _this.renderOptions(options, tabIndex)));
+                return (_J$X_("div", { className: cx("Cascader-tab depth-".concat(tabIndex)), ref: _this.tabRef, key: tabIndex }, _this.renderOptions(options, tabIndex)));
             }),
             depth <= 3 && options.length
                 ? Array(amisCore.getTreeDepth(options) - tabs.length)
                     .fill(1)
-                    .map(function (item, index) { return (React__default["default"].createElement("div", { className: cx("Cascader-tab"), key: index })); })
+                    .map(function (item, index) { return (_J$X_("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["default"].createElement("div", { className: cx("Cascader", className) },
-            React__default["default"].createElement("div", { className: cx("Cascader-btnGroup") },
-                React__default["default"].createElement(Button["default"], { className: cx("Cascader-btnCancel"), level: "text", onClick: onClose }, __('cancel')),
-                React__default["default"].createElement(Button["default"], { className: cx("Cascader-btnConfirm"), level: "text", onClick: this.confirm, disabled: this.state.disableConfirm }, __('confirm'))),
+        return (_J$X_("div", { className: cx("Cascader", className) },
+            _J$X_("div", { className: cx("Cascader-btnGroup") },
+                _J$X_(Button["default"], { className: cx("Cascader-btnCancel"), level: "link", onClick: onClose }, __('cancel')),
+                _J$X_(Button["default"], { className: cx("Cascader-btnConfirm"), level: "link", onClick: this.confirm, disabled: this.state.disableConfirm }, __('confirm'))),
             this.renderTabs()));
     };
     Cascader.defaultProps = {
         labelField: 'label',
         valueField: 'value'
     };
-    tslib.__decorate([
-        amisCore.autobind,
-        tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Number]),
-        tslib.__metadata("design:returntype", void 0)
-    ], Cascader.prototype, "handleTabSelect", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
@@ -453,6 +447,12 @@ var Cascader = /** @class */ (function (_super) {
         tslib.__metadata("design:paramtypes", [Object]),
         tslib.__metadata("design:returntype", Boolean)
     ], Cascader.prototype, "adjustOptionSelect", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Array]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Cascader.prototype, "getOnlyChildrenSelect", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
@@ -482,7 +482,7 @@ var Cascader = /** @class */ (function (_super) {
         tslib.__metadata("design:type", Function),
         tslib.__metadata("design:paramtypes", [Object, Number]),
         tslib.__metadata("design:returntype", void 0)
-    ], Cascader.prototype, "onNextClick", null);
+    ], Cascader.prototype, "handleExpand", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),