amis-rev-ui 6.13.0

package/esm/components/ChainedSelection.js

@@ -0,0 +1,184 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __assign } from 'tslib';
+import { BaseSelection } from './Selection.js';
+import { getTreeDepth, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import React__default from 'react';
+import Checkbox from './Checkbox.js';
+import times from 'lodash/times';
+import Spinner from './Spinner.js';
+import VirtualList from './virtual-list/index.js';
+import AutoSizer from './virtual-list/AutoSizer.js';
+
+var ChainedSelection = /** @class */ (function (_super) {
+    __extends(ChainedSelection, _super);
+    function ChainedSelection() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            selected: []
+        };
+        return _this;
+    }
+    ChainedSelection.prototype.componentDidMount = function () {
+        var defaultSelectedIndex = this.props.defaultSelectedIndex;
+        // todo 以后支持自动展开
+        if (defaultSelectedIndex !== undefined) {
+            this.setState({
+                selected: ["".concat(defaultSelectedIndex)]
+            });
+        }
+    };
+    ChainedSelection.prototype.selectOption = function (option, depth, id) {
+        var _a = this.props, onDeferLoad = _a.onDeferLoad, _b = _a.deferField, deferField = _b === void 0 ? 'defer' : _b;
+        var selected = this.state.selected.concat();
+        selected.splice(depth, selected.length - depth);
+        selected.push(id);
+        this.setState({
+            selected: selected
+        }, option[deferField] && onDeferLoad ? function () { return onDeferLoad(option); } : undefined);
+    };
+    ChainedSelection.prototype.renderItem = function (option, index, depth, id, styles) {
+        var _this = this;
+        if (styles === void 0) { styles = {}; }
+        var _a = this.props, labelClassName = _a.labelClassName, disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender, multiple = _a.multiple, labelField = _a.labelField, testIdBuilder = _a.testIdBuilder;
+        var valueArray = this.valueArray;
+        var itemTIB = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("item-".concat(option.value || index));
+        return (React__default.createElement("div", { style: styles, key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', !!~valueArray.indexOf(option) ? 'is-active' : ''), onClick: function () { return _this.toggleOption(option); } },
+            multiple ? (React__default.createElement(Checkbox, { size: "sm", checked: !!~valueArray.indexOf(option), disabled: disabled || option.disabled, labelClassName: labelClassName, description: option.description, testIdBuilder: itemTIB })) : null,
+            React__default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option, {
+                index: index,
+                multiple: multiple,
+                checked: !!~valueArray.indexOf(option),
+                onChange: function () { return _this.toggleOption(option); },
+                disabled: disabled || option.disabled,
+                labelField: labelField,
+                classnames: cx
+            }))));
+    };
+    ChainedSelection.prototype.renderOption = function (option, index, depth, id, styles) {
+        var _this = this;
+        if (styles === void 0) { styles = {}; }
+        var _a = this.props; _a.labelClassName; var disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender, multiple = _a.multiple, labelField = _a.labelField, _b = _a.deferField, deferField = _b === void 0 ? 'defer' : _b, loadingConfig = _a.loadingConfig, testIdBuilder = _a.testIdBuilder;
+        this.valueArray;
+        var itemTIB = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("item-".concat(option.value || index));
+        if (Array.isArray(option.children) || option[deferField]) {
+            return (React__default.createElement("div", __assign({ style: styles, key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', ~this.state.selected.indexOf(id) ? 'is-active' : ''), onClick: function () { return _this.selectOption(option, depth, id); } }, itemTIB === null || itemTIB === void 0 ? void 0 : itemTIB.getTestId()),
+                React__default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option, {
+                    index: index,
+                    multiple: multiple,
+                    checked: !!~this.state.selected.indexOf(id),
+                    onChange: function () { return _this.selectOption(option, depth, id); },
+                    disabled: disabled || option.disabled,
+                    labelField: labelField,
+                    classnames: cx
+                })),
+                option[deferField] && option.loading ? (React__default.createElement(Spinner, { loadingConfig: loadingConfig, size: "sm", show: true })) : null));
+        }
+        return this.renderItem(option, index, depth, id, styles);
+    };
+    ChainedSelection.prototype.renderCheckAll = function () {
+        var _a = this.props, multiple = _a.multiple, checkAll = _a.checkAll, checkAllLabel = _a.checkAllLabel, cx = _a.classnames, __ = _a.translate, labelClassName = _a.labelClassName, itemClassName = _a.itemClassName;
+        if (!multiple || !checkAll) {
+            return null;
+        }
+        var availableOptions = this.getAvailableOptions();
+        var valueArray = this.valueArray;
+        var checkedAll = availableOptions.every(function (option) { return valueArray.indexOf(option) > -1; });
+        var checkedPartial = availableOptions.some(function (option) { return valueArray.indexOf(option) > -1; });
+        return (React__default.createElement("div", { className: cx('ChainedSelection-item', 'ChainedSelection-checkAll', itemClassName), onClick: this.toggleAll },
+            React__default.createElement(Checkbox, { checked: checkedPartial, partial: checkedPartial && !checkedAll, size: "sm", labelClassName: labelClassName }),
+            React__default.createElement("div", { className: cx('ChainedSelection-itemLabel') },
+                React__default.createElement("span", null, __(checkAllLabel)))));
+    };
+    ChainedSelection.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, value = _a.value, options = _a.options, className = _a.className, placeholder = _a.placeholder, cx = _a.classnames, option2value = _a.option2value; _a.itemRender; var __ = _a.translate, _b = _a.virtualThreshold, virtualThreshold = _b === void 0 ? 1000 : _b, _c = _a.itemHeight, itemHeight = _c === void 0 ? 32 : _c, virtualListHeight = _a.virtualListHeight; _a.testIdBuilder;
+        this.valueArray = BaseSelection.value2array(value, options, option2value);
+        var body = [];
+        if (Array.isArray(options) && options.length) {
+            var selected_1 = this.state.selected.concat();
+            var depth = Math.min(getTreeDepth(options), 3);
+            times(Math.max(depth - selected_1.length, 1), function () { return selected_1.push(null); });
+            selected_1.reduce(function (_a, selected, depth) {
+                var body = _a.body, options = _a.options, subTitle = _a.subTitle, indexes = _a.indexes, placeholder = _a.placeholder;
+                var nextOptions = [];
+                var nextSubTitle = '';
+                var nextPlaceholder = '';
+                var nextIndexes = indexes;
+                if (Array.isArray(options) && options.length > virtualThreshold) {
+                    options.forEach(function (option, index) {
+                        var id = indexes.concat(index).join('-');
+                        if (id === selected) {
+                            nextSubTitle = option.subTitle;
+                            nextOptions = option.children;
+                            nextIndexes = indexes.concat(index);
+                            nextPlaceholder = option.placeholder;
+                        }
+                    });
+                    var finalOptions_1 = options.concat();
+                    if (subTitle) {
+                        finalOptions_1.unshift({
+                            type: 'chainedSelection-subTitle',
+                            value: subTitle
+                        });
+                    }
+                    body.push(React__default.createElement("div", { key: depth, className: cx('ChainedSelection-col') },
+                        React__default.createElement(AutoSizer, { minHeight: virtualListHeight }, function (_a) {
+                            var height = _a.height;
+                            return (React__default.createElement(VirtualList, { height: height, itemCount: finalOptions_1.length, itemSize: itemHeight, renderItem: function (_a) {
+                                    var index = _a.index, style = _a.style;
+                                    var option = finalOptions_1[index];
+                                    if (!option) {
+                                        return null;
+                                    }
+                                    if ((option === null || option === void 0 ? void 0 : option.type) === 'chainedSelection-subTitle') {
+                                        return (React__default.createElement("div", { style: __assign(__assign({}, style), { width: '100%' }), key: indexes.join('-') + 'subTitle', className: cx('ChainedSelection-subTitle') }, option.value));
+                                    }
+                                    index = subTitle ? index - 1 : index;
+                                    var id = indexes.concat(index).join('-');
+                                    return _this.renderOption(option, index, depth, id, __assign(__assign({}, style), { width: '100%' }));
+                                } }));
+                        })));
+                }
+                else {
+                    body.push(React__default.createElement("div", { key: depth, className: cx('ChainedSelection-col') },
+                        subTitle ? (React__default.createElement("div", { className: cx('ChainedSelection-subTitle') }, subTitle)) : null,
+                        Array.isArray(options) && options.length ? (options.map(function (option, index) {
+                            var id = indexes.concat(index).join('-');
+                            if (id === selected) {
+                                nextSubTitle = option.subTitle;
+                                nextOptions = option.children;
+                                nextIndexes = indexes.concat(index);
+                                nextPlaceholder = option.placeholder;
+                            }
+                            return _this.renderOption(option, index, depth, id);
+                        })) : (React__default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)))));
+                }
+                return {
+                    options: nextOptions,
+                    subTitle: nextSubTitle,
+                    placeholder: nextPlaceholder,
+                    indexes: nextIndexes,
+                    body: body
+                };
+            }, {
+                options: options,
+                body: body,
+                indexes: [],
+                placeholder: placeholder
+            });
+        }
+        return (React__default.createElement("div", { className: cx('ChainedSelection', className) }, body && body.length ? (React__default.createElement(React__default.Fragment, null,
+            this.renderCheckAll(),
+            body)) : (React__default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)))));
+    };
+    return ChainedSelection;
+}(BaseSelection));
+var ChainedCheckboxes = themeable(localeable(uncontrollable(ChainedSelection, {
+    value: 'onChange'
+})));
+
+export { ChainedSelection, ChainedCheckboxes as default };

package/esm/components/Checkbox.js

@@ -0,0 +1,87 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { autobind, themeable } from 'amis-rev-core';
+import { Icon } from './icons.js';
+
+/**
+ * @file Checkbox
+ * @author fex
+ */
+var preventEvent = function (e) { return e.stopPropagation(); };
+var Checkbox = /** @class */ (function (_super) {
+    __extends(Checkbox, _super);
+    function Checkbox() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.labelRef = React__default.createRef();
+        return _this;
+    }
+    Checkbox.prototype.handleCheck = function (e) {
+        var _a = this.props, trueValue = _a.trueValue, falseValue = _a.falseValue, onChange = _a.onChange;
+        if (!onChange) {
+            return;
+        }
+        onChange(e.currentTarget.checked ? trueValue : falseValue, e.nativeEvent.shiftKey);
+    };
+    Checkbox.prototype.setClassName = function (className) {
+        this.setState({
+            className: className
+        });
+    };
+    Checkbox.prototype.render = function () {
+        var _a;
+        var _b = this.props, size = _b.size, className = _b.className, cx = _b.classnames, value = _b.value, label = _b.label, partial = _b.partial, trueValue = _b.trueValue, children = _b.children, disabled = _b.disabled, description = _b.description, readOnly = _b.readOnly, checked = _b.checked, type = _b.type, name = _b.name, labelClassName = _b.labelClassName, _c = _b.optionType, optionType = _c === void 0 ? 'default' : _c, mobileUI = _b.mobileUI, testIdBuilder = _b.testIdBuilder;
+        var stateClassName = (this.state || {}).className;
+        var _checked = typeof checked !== 'undefined'
+            ? checked
+            : typeof value === 'undefined'
+                ? value
+                : value == trueValue;
+        return (React__default.createElement("label", __assign({ className: cx('Checkbox', "Checkbox--".concat(type, "--").concat(optionType), className, stateClassName, (_a = {
+                    'Checkbox--partial': partial
+                },
+                _a["Checkbox--".concat(size)] = size,
+                _a['is-mobile'] = mobileUI,
+                _a['disabled'] = disabled,
+                _a['checked'] = _checked,
+                _a["Checkbox--".concat(type, "--").concat(optionType, "--checked")] = !disabled && _checked,
+                _a["Checkbox--".concat(type, "--").concat(optionType, "--disabled--unchecked")] = disabled && !_checked,
+                _a["Checkbox--".concat(type, "--").concat(optionType, "--disabled--checked")] = disabled && _checked,
+                _a)), "data-role": "checkbox" }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId(), { "data-amis-name": this.props.dataName, ref: this.labelRef }),
+            React__default.createElement("input", { type: type, checked: typeof checked !== 'undefined'
+                    ? checked
+                    : typeof value === 'undefined'
+                        ? value
+                        : value == trueValue, onChange: this.handleCheck, onClick: preventEvent // 当点击 i 的时候，这个地方也会触发 click，很奇怪，干脆禁掉
+                , disabled: disabled, readOnly: readOnly, name: name }),
+            React__default.createElement("i", __assign({}, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('input').getTestId()),
+                React__default.createElement(Icon, { iconContent: "".concat(type, "-icon"), className: "icon" })),
+            React__default.createElement("span", __assign({ className: cx(labelClassName) }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('label').getTestId()), children || label),
+            description ? (React__default.createElement("div", { className: cx('Checkbox-desc') }, description)) : null));
+    };
+    Checkbox.defaultProps = {
+        trueValue: true,
+        falseValue: false,
+        type: 'checkbox'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Checkbox.prototype, "handleCheck", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], Checkbox.prototype, "setClassName", null);
+    return Checkbox;
+}(React__default.Component));
+var Checkbox$1 = themeable(Checkbox);
+
+export { Checkbox, Checkbox$1 as default };

package/esm/components/CityArea.js

@@ -0,0 +1,190 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __read, __assign } from 'tslib';
+import React__default, { memo, useState, useEffect } from 'react';
+import Picker from './Picker.js';
+import ResultBox from './ResultBox.js';
+import useSetState from '../hooks/use-set-state.js';
+import useUpdateEffect from '../hooks/use-update-effect.js';
+import 'lodash/pick';
+import { themeable, localeable, uncontrollable } from 'amis-rev-core';
+import PopUp from './PopUp.js';
+
+var CityArea = memo(function (props) {
+    var _a;
+    var _b = props.joinValues, joinValues = _b === void 0 ? true : _b, _c = props.extractValue, extractValue = _c === void 0 ? true : _c, _d = props.delimiter, delimiter = _d === void 0 ? ',' : _d, _e = props.allowCity, allowCity = _e === void 0 ? true : _e, _f = props.allowDistrict, allowDistrict = _f === void 0 ? true : _f, _g = props.allowStreet, allowStreet = _g === void 0 ? false : _g, 
+    // 默认北京东城区
+    _h = props.value, 
+    // 默认北京东城区
+    value = _h === void 0 ? 110101 : _h, cx = props.classnames, style = props.style, __ = props.translate, _j = props.disabled, disabled = _j === void 0 ? false : _j, popOverContainer = props.popOverContainer, mobileUI = props.mobileUI;
+    var _k = __read(useState([]), 2), values = _k[0], setValues = _k[1];
+    var _l = __read(useState(''), 2), street = _l[0], setStreet = _l[1];
+    var _m = __read(useState(), 2), confirmValues = _m[0], setConfirmValues = _m[1];
+    var _o = __read(useSetState(), 2), db = _o[0], updateDb = _o[1];
+    var _p = __read(useSetState({
+        columns: []
+    }), 2), state = _p[0], updateState = _p[1];
+    var _q = __read(useState(false), 2), isOpened = _q[0], setIsOpened = _q[1];
+    var onChange = function (columnValues, columnIndex) {
+        var _a, _b, _c, _d, _e;
+        // 清空后面的值
+        while (columnValues[columnIndex++]) {
+            columnValues[columnIndex++] = -1;
+        }
+        var _f = __read(columnValues, 3), provience = _f[0], city = _f[1], district = _f[2];
+        if (city === -1) {
+            city = (_b = (_a = db.city) === null || _a === void 0 ? void 0 : _a[provience]) === null || _b === void 0 ? void 0 : _b[0];
+        }
+        if (district === -1) {
+            district = (_e = (_d = (_c = db.district) === null || _c === void 0 ? void 0 : _c[provience]) === null || _d === void 0 ? void 0 : _d[city]) === null || _e === void 0 ? void 0 : _e[0];
+        }
+        var tempValues = [provience, city, district];
+        if (!allowDistrict) {
+            tempValues.splice(2, 1);
+        }
+        if (!allowCity) {
+            tempValues.splice(1, 1);
+        }
+        setValues(tempValues);
+    };
+    var propsChange = function () {
+        var onChange = props.onChange;
+        var _a = __read(values, 3), province = _a[0], city = _a[1], district = _a[2];
+        var code = allowDistrict && district
+            ? district
+            : allowCity && city
+                ? city
+                : province;
+        if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
+            code
+                ? onChange(allowStreet && street
+                    ? [code, street].join(delimiter)
+                    : String(code))
+                : onChange('');
+        }
+        else {
+            onChange({
+                code: code,
+                provinceCode: province,
+                province: db[province],
+                cityCode: city,
+                city: db[city],
+                districtCode: district,
+                district: db[district],
+                street: street
+            });
+        }
+    };
+    var onConfirm = function () {
+        var confirmValues = values.map(function (item) { return ({
+            text: db[item],
+            value: item
+        }); });
+        setConfirmValues(confirmValues);
+        propsChange();
+        setIsOpened(false);
+    };
+    var onCancel = function () {
+        setIsOpened(false);
+        if (props.onCancel)
+            props.onCancel();
+    };
+    var getPropsValue = function () {
+        var _a;
+        // 最后一项的值、默认北京东城区
+        var code = (value && value.code) ||
+            (typeof value === 'number' && value) ||
+            (typeof value === 'string' && /(\d{6})/.test(value) && RegExp.$1) ||
+            110101;
+        var values = [];
+        if (code && db[code]) {
+            code = parseInt(code, 10);
+            var provinceCode = code - (code % 10000);
+            var cityCode = code - (code % 100);
+            if (db[provinceCode]) {
+                values[0] = provinceCode;
+            }
+            if (db[cityCode] && allowCity) {
+                values[1] = cityCode;
+            }
+            else if (~((_a = db.city[provinceCode]) === null || _a === void 0 ? void 0 : _a.indexOf(code)) && allowCity) {
+                values[1] = code;
+            }
+            if (code % 100 && allowDistrict) {
+                values[2] = code;
+            }
+            setValues(values);
+            if (props.value) {
+                var confirmValues_1 = values.map(function (item) { return ({
+                    text: db[item],
+                    value: item
+                }); });
+                setConfirmValues(confirmValues_1);
+            }
+        }
+    };
+    var updateColumns = function () {
+        if (!db) {
+            return;
+        }
+        var _a = __read(values, 3), provience = _a[0], city = _a[1], district = _a[2];
+        var provienceColumn = db.province.map(function (code) {
+            return { text: db[code], value: code, disabled: disabled };
+        });
+        var cityColumn = city
+            ? db.city[provience].map(function (code) {
+                return { text: db[code], value: code, disabled: disabled };
+            })
+            : [];
+        var districtColumn = city && district
+            ? db.district[provience][city].map(function (code) {
+                return { text: db[code], value: code, disabled: disabled };
+            })
+            : [];
+        var columns = [
+            { options: provienceColumn },
+            { options: cityColumn },
+            { options: districtColumn }
+        ];
+        if (!allowDistrict || !allowCity) {
+            columns.splice(2, 1);
+        }
+        if (!allowCity) {
+            columns.splice(1, 1);
+        }
+        updateState({ columns: columns });
+    };
+    var loadDb = function () {
+        import('./CityDB.js').then(function (db) {
+            updateDb(__assign(__assign({}, db.default), { province: db.province, city: db.city, district: db.district }));
+        });
+    };
+    useEffect(function () {
+        loadDb();
+    }, []);
+    useEffect(function () {
+        db && (props.value || isOpened) && getPropsValue();
+    }, [db, isOpened, props.value]);
+    useEffect(function () {
+        street && propsChange();
+    }, [street]);
+    useUpdateEffect(function () {
+        values.length && updateColumns();
+    }, [values]);
+    var result = (_a = confirmValues === null || confirmValues === void 0 ? void 0 : confirmValues.filter(function (item) { return item === null || item === void 0 ? void 0 : item.value; })) === null || _a === void 0 ? void 0 : _a.map(function (item) { return item.text; }).join(delimiter);
+    return (React__default.createElement("div", { className: cx("CityArea"), style: style },
+        React__default.createElement(ResultBox, { className: cx('CityArea-Input', isOpened ? 'is-active' : ''), allowInput: false, result: result, onResultChange: function () { }, onResultClick: function () { return setIsOpened(!isOpened); }, placeholder: __('Select.placeholder'), mobileUI: mobileUI, disabled: disabled }),
+        allowStreet && values[0] ? (React__default.createElement("input", { className: cx('CityArea-Input'), value: street, onChange: function (e) {
+                return setStreet(e.currentTarget.value);
+            }, placeholder: __('City.street'), disabled: disabled, readOnly: true })) : null,
+        React__default.createElement(PopUp, { className: cx("CityArea-popup"), container: popOverContainer, isShow: isOpened, showConfirm: true, onConfirm: onConfirm, onHide: onCancel },
+            React__default.createElement(Picker, { className: 'CityArea-picker', columns: state.columns, onChange: onChange, showToolbar: false, labelField: "text", itemHeight: 40, value: values, classnames: props.classnames, classPrefix: props.classPrefix }))));
+});
+var CityArea$1 = themeable(localeable(uncontrollable(CityArea, {
+    value: 'onChange'
+})));
+
+export { CityArea$1 as default };

package/esm/components/CityDB.d.ts

@@ -0,0 +1,13 @@
+declare const db: {
+    [propName: string]: string;
+};
+export declare const province: Array<number>;
+export declare const city: {
+    [propName: number]: Array<number>;
+};
+export declare const district: {
+    [propName: number]: {
+        [propName: number]: Array<number>;
+    } | Array<number>;
+};
+export default db;