amis-ui 3.1.0 → 3.2.0

package/lib/components/ChainedDropdownSelection.js

@@ -0,0 +1,114 @@
+/**
+ * amis-ui v3.2.0
+ * Copyright 2018-2023 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var omit = require('lodash/omit');
+var amisCore = require('amis-core');
+var Selection = require('./Selection.js');
+var DropDownSelection = require('./DropDownSelection.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+
+var ChainedDropdownSelection = /** @class */ (function (_super) {
+    tslib.__extends(ChainedDropdownSelection, _super);
+    function ChainedDropdownSelection(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = _this.computed(props.value, props.options);
+        return _this;
+    }
+    ChainedDropdownSelection.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, options = _a.options, value = _a.value;
+        if (options !== prevProps.options || prevProps.value !== value) {
+            this.setState(this.computed(value, options));
+        }
+    };
+    ChainedDropdownSelection.prototype.computed = function (value, options) {
+        var valueField = this.props.valueField;
+        var values = [];
+        var getValues = function (opts, arr) {
+            if (arr === void 0) { arr = []; }
+            opts.forEach(function (item) {
+                var _a;
+                var cValue = valueField ? item[valueField] : (_a = item === null || item === void 0 ? void 0 : item.value) !== null && _a !== void 0 ? _a : '';
+                if (cValue === value) {
+                    values = tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(arr), false), [cValue], false);
+                }
+                else if (item.children) {
+                    getValues(item.children, tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(arr), false), [cValue], false));
+                }
+            });
+        };
+        getValues(options);
+        return {
+            values: values,
+            stacks: this.computedStask(values)
+        };
+    };
+    ChainedDropdownSelection.prototype.getFlatOptions = function (options) {
+        return options.map(function (item) { return omit__default["default"](item, 'children'); });
+    };
+    ChainedDropdownSelection.prototype.handleSelect = function (index, value) {
+        var _this = this;
+        // 当前层级点击时，需要重新设置下values的值，以及重新计算stacks列表
+        var values = this.state.values;
+        values.splice(index, values.length - index);
+        value && values.push(value);
+        var stacks = this.computedStask(values);
+        this.setState({
+            stacks: stacks,
+            values: values
+        }, function () {
+            var _a, _b;
+            (_b = (_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+        });
+    };
+    // 根据树结构层级，寻找最后一层
+    ChainedDropdownSelection.prototype.computedStask = function (values) {
+        var _this = this;
+        var _a = this.props, options = _a.options, valueField = _a.valueField;
+        var getDeep = function (opts, index, tems) {
+            tems.push(_this.getFlatOptions(opts));
+            opts.forEach(function (op) {
+                var _a;
+                var cValue = valueField ? op[valueField] : (_a = op === null || op === void 0 ? void 0 : op.value) !== null && _a !== void 0 ? _a : '';
+                if (cValue === values[index] &&
+                    op.children &&
+                    values.length - 1 >= index) {
+                    getDeep(op.children, index + 1, tems);
+                }
+            });
+            return tems;
+        };
+        return getDeep(options, 0, []);
+    };
+    ChainedDropdownSelection.prototype.render = function () {
+        var _this = this;
+        var _a = this.state, stacks = _a.stacks, values = _a.values;
+        var _b = this.props, className = _b.className, cx = _b.classnames;
+        return (React__default["default"].createElement("div", { className: cx('ChainedDropdownSelection', className) }, stacks.map(function (item, index) { return (React__default["default"].createElement("div", { className: cx('ChainedDropdownSelection-item'), key: index },
+            React__default["default"].createElement(DropDownSelection["default"], tslib.__assign({}, _this.props, { value: values[index], options: item, onChange: function (value) { return _this.handleSelect(index, value); } })))); })));
+    };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Number, String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ChainedDropdownSelection.prototype, "handleSelect", null);
+    return ChainedDropdownSelection;
+}(Selection.BaseSelection));
+var ChainedDropdownSelection$1 = amisCore.themeable(amisCore.localeable(amisCore.uncontrollable(ChainedDropdownSelection, {
+    value: 'onChange'
+})));
+
+exports.ChainedDropdownSelection = ChainedDropdownSelection;
+exports["default"] = ChainedDropdownSelection$1;