amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/ChainedSelection.js

@@ -0,0 +1,184 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { BaseSelection } from './Selection.js';
+import { getTreeDepth, themeable, localeable, uncontrollable } from 'amis-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 !== null && _super.apply(this, arguments) || 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.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @file Checkbox
+ * @author fex
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { TestIdBuilder, ThemeProps } from 'amis-core';
+interface CheckboxProps extends ThemeProps {
+    type: 'checkbox' | 'radio';
+    size?: 'sm' | 'lg' | 'small' | 'large';
+    label?: string;
+    labelClassName?: string;
+    className?: string;
+    onChange?: (value: any, shift?: boolean) => void;
+    value?: boolean | string | number;
+    inline?: boolean;
+    trueValue?: boolean | string | number;
+    falseValue?: boolean | string | number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    checked?: boolean;
+    name?: string;
+    description?: string;
+    partial?: boolean;
+    optionType?: 'default' | 'button';
+    children?: React.ReactNode | Array<React.ReactNode>;
+    testIdBuilder?: TestIdBuilder;
+    dataName?: string;
+}
+export declare class Checkbox extends React.Component<CheckboxProps, any> {
+    static defaultProps: Pick<CheckboxProps, 'trueValue' | 'falseValue' | 'type'>;
+    labelRef: React.RefObject<HTMLLabelElement>;
+    handleCheck(e: React.ChangeEvent<any>): void;
+    setClassName(className: string): void;
+    render(): React.JSX.Element;
+}
+declare const _default: {
+    new (props: Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+        type?: "checkbox" | "radio" | undefined;
+        trueValue?: string | number | boolean | undefined;
+        falseValue?: string | number | boolean | undefined;
+    } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof ThemeProps>, "onChange" | "children" | "label" | "name" | "value" | "inline" | "disabled" | "dataName" | "testIdBuilder" | "description" | "checked" | "size" | "readOnly" | "labelClassName" | "partial" | "optionType"> & {
+            type?: "checkbox" | "radio" | undefined;
+            trueValue?: string | number | boolean | undefined;
+            falseValue?: string | number | boolean | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof Checkbox>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof Checkbox, {}> & {
+    ComposedComponent: typeof Checkbox;
+};
+export default _default;

package/esm/components/Checkbox.js

@@ -0,0 +1,87 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { autobind, themeable } from 'amis-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 !== null && _super.apply(this, arguments) || 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 };