@cloudbase/weda-ui 3.1.9 → 3.2.1

package/dist/src/web/components/form/checkbox/index.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useState } from 'react';
+import { Checkbox as TeaCheckbox, ConfigProvider } from 'tea-component';
+import classNames from '../../../utils/classnames';
+import getLocalCounter from '../../../utils/getLocalCounter';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import fromEntries from 'object.fromentries';
+import { usePlatform } from '../../../utils/platform';
+import { renderDecorator } from '../renderDecorator';
+import { callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
+import { emptyArray, emptyObject } from '../../../utils/constant';
+export default function Checkbox({ 
+// 系统属性
+id, className, style, events = emptyObject, 
+// 组件属性
+name = 'formCheckbox', label = '标题', labelVisible = true, format = '', enumName = '', range = emptyArray, layout = 'horizontal', disabled = false, requiredFlag = false, decorator, controlValue, }) {
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-checkbox': true,
+        [className]: className,
+    });
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const subCls = classNames({
+        'weui-cell': isH5,
+        'weui-cell_active': isH5,
+        'weui-check__label': isH5,
+        'weui-cell_disabled': isH5 && disabled,
+    });
+    const [option, setOption] = useState(range);
+    const [enumOptions, setEnumOptions] = useState([]);
+    const [checkedItems, setCheckedItems] = React.useState(platform === 'h5'
+        ? fromEntries(option.map(({ value, checked }) => [value, !!checked]))
+        : option.filter(({ checked }) => checked).map(({ value }) => value));
+    // 两次range不同时, 需要刷新checkedItems
+    const prevRangeRef = React.useRef();
+    React.useEffect(() => {
+        if (!isObjectEqual(prevRangeRef.current, option, true)) {
+            prevRangeRef.current = JSON.parse(JSON.stringify(option));
+            setCheckedItems(fromEntries(option.map(({ value, checked }) => [value, !!checked])));
+        }
+    });
+    useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+    }, []);
+    useEffect(() => {
+        if (format === 'x-enum') {
+            const opt = enumOptions &&
+                enumOptions.map((item) => {
+                    const checked = controlValue && controlValue.find((val) => val === item.value);
+                    return {
+                        value: item.value,
+                        label: item.label,
+                        checked: !!checked,
+                    };
+                });
+            setOption(opt);
+        }
+    }, [controlValue]);
+    useEffect(() => {
+        if (format !== 'x-enum') {
+            setOption(range);
+        }
+    }, [range]);
+    const fetchData = async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        /* istanbul ignore next */
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+                checked: false,
+            };
+        });
+        setEnumOptions(enumOption);
+        const opt = enumOption &&
+            enumOption.map((item) => {
+                const checked = controlValue && controlValue.find((val) => val === item.value);
+                return {
+                    value: item.value,
+                    label: item.label,
+                    checked: !!checked,
+                };
+            });
+        setOption(opt);
+    };
+    /**
+     * 在ios h5端, label和input的绑定不生效
+     * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
+     */
+    const getChangeHandler = function (value) {
+        const onChange = function (e) {
+            e.stopPropagation();
+            const checked = !checkedItems[value];
+            const newMap = Object.assign({}, checkedItems, { [value]: checked });
+            if (!disabled) {
+                setCheckedItems(newMap);
+                events.change({
+                    value: Object.entries(newMap)
+                        .filter(([, checked]) => checked)
+                        .map(([value]) => value),
+                }, { originEvent: e });
+            }
+        };
+        return onChange;
+    };
+    // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
+    const hashcode = React.useMemo(() => getLocalCounter(), []);
+    let checkboxElement;
+    if (platform === 'h5') {
+        checkboxElement = option.map(({ label, value }, index) => {
+            const _id = `checkbox-${hashcode}-${index}`;
+            const _name = `checkbox-${hashcode}-${name}`;
+            return (React.createElement("div", { key: _id, onClickCapture: getChangeHandler(value), className: subCls },
+                React.createElement("div", { className: "weui-cell__hd" },
+                    React.createElement("input", { type: "checkbox", className: "weui-check", value: value, id: _id, name: _name, checked: checkedItems[value], disabled: disabled }),
+                    React.createElement("i", { className: "weui-icon-checked" })),
+                React.createElement("div", { className: "weui-cell__bd" },
+                    React.createElement("p", null, label))));
+        });
+    }
+    else {
+        checkboxElement = (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement(TeaCheckbox.Group, { disabled: disabled, value: Object.entries(checkedItems)
+                    .filter(([, checked]) => checked)
+                    .map(([value]) => value), onChange: (value) => {
+                    const newMap = option
+                        .map((opt) => opt.value)
+                        .reduce((acc, cur) => {
+                        const idx = value.indexOf(cur);
+                        if (idx < 0) {
+                            acc[cur] = false;
+                        }
+                        else {
+                            acc[cur] = true;
+                        }
+                        return acc;
+                    }, {});
+                    setCheckedItems(newMap);
+                    events.change({
+                        value: Object.entries(newMap)
+                            .filter(([, checked]) => checked)
+                            .map(([value]) => value),
+                    });
+                } }, option.map(({ value, label }, index) => {
+                const _id = `checkbox-${hashcode}-${index}`;
+                return (React.createElement(TeaCheckbox, { key: _id, name: value, id: _id }, label));
+            }))));
+    }
+    return renderDecorator(checkboxElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: true,
+        requiredFlag,
+    });
+}

package/dist/src/web/components/form/enumSelect/MultipleSelect.d.ts

@@ -0,0 +1,78 @@
+export default MultipleSelect;
+declare function MultipleSelect({ id, style, className, events, label, labelVisible, layout, requiredFlag, decorator, value, placeholder, disabled, onChange, clearable, appearance, allOption, matchButtonWidth, virtual, searchable, size, options, isModelApp, }: {
+    id: any;
+    style: any;
+    className: any;
+    events: any;
+    label: any;
+    labelVisible: any;
+    layout: any;
+    requiredFlag: any;
+    decorator: any;
+    value: any;
+    placeholder: any;
+    disabled: any;
+    onChange: any;
+    clearable: any;
+    appearance: any;
+    allOption: any;
+    matchButtonWidth: any;
+    virtual: any;
+    searchable: any;
+    size: any;
+    options: any;
+    isModelApp: any;
+}): JSX.Element;
+declare namespace MultipleSelect {
+    const propTypes: {
+        events: import("prop-types").Requireable<object>;
+        defaultValue: import("prop-types").Requireable<NonNullable<string | number>>;
+        name: import("prop-types").Requireable<string>;
+        placeholder: import("prop-types").Requireable<string>;
+        disabled: import("prop-types").Requireable<boolean>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        options: import("prop-types").Requireable<any[]>;
+        clearable: import("prop-types").Requireable<boolean>;
+        appearance: import("prop-types").Requireable<string>;
+        allOption: import("prop-types").Requireable<object>;
+        matchButtonWidth: import("prop-types").Requireable<boolean>;
+        virtual: import("prop-types").Requireable<boolean>;
+        searchable: import("prop-types").Requireable<boolean>;
+        size: import("prop-types").Requireable<string>;
+        value: import("prop-types").Requireable<NonNullable<string | any[]>>;
+        enumType: import("prop-types").Requireable<string>;
+        customEnum: import("prop-types").Requireable<any[]>;
+        optionId: import("prop-types").Requireable<string>;
+        isModelApp: import("prop-types").Requireable<boolean>;
+        id: import("prop-types").Requireable<string>;
+        style: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        label: import("prop-types").Requireable<string>;
+        labelVisible: import("prop-types").Requireable<boolean>;
+        layout: import("prop-types").Requireable<string>;
+        requiredFlag: import("prop-types").Requireable<boolean>;
+    };
+    const defaultProps: {
+        value: string;
+        events: {};
+        label: string;
+        labelVisible: boolean;
+        layout: string;
+        requiredFlag: boolean;
+        name: string;
+        placeholder: string;
+        disabled: boolean;
+        onChange: () => void;
+        options: any[];
+        clearable: boolean;
+        appearance: string;
+        matchButtonWidth: boolean;
+        virtual: boolean;
+        searchable: boolean;
+        size: string;
+        enumType: string;
+        customEnum: any[];
+        optionId: any;
+        isModelApp: boolean;
+    };
+}

package/dist/src/web/components/form/enumSelect/MultipleSelect.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { SelectMultiple } from 'tea-component';
+import SelectContainer from './SelectContainer';
+import { normalProps } from './props/defaultProps';
+import { propTypes } from './props/propsTypes';
+const MultipleSelect = ({ 
+// 系统属性
+id, style, className, events, 
+// weda 组件属性
+label, labelVisible, layout, requiredFlag, decorator, 
+// tea组件属性
+value, placeholder, disabled, onChange, clearable, appearance, allOption, matchButtonWidth, virtual, searchable, size, options, 
+// 业务属性
+isModelApp, }) => {
+    const onSelectChange = (values) => {
+        // @ts-ignore jsx
+        events.change && events.change({ value: values });
+        if (onChange) {
+            onChange(values);
+        }
+    };
+    const multipleSelectProps = {
+        placeholder,
+        disabled,
+        clearable,
+        appearance,
+        key: id,
+        options,
+        onChange: onSelectChange,
+        matchButtonWidth,
+        searchable,
+        size,
+        defaultValue: value || [],
+        allOption,
+        staging: false,
+        virtual,
+    };
+    if (isModelApp) {
+        return React.createElement(SelectMultiple, { ...multipleSelectProps });
+    }
+    return (React.createElement(SelectContainer, { style: style, className: className, label: label, labelVisible: labelVisible, layout: layout, 
+        // @ts-ignore jsx
+        multiCell: false, requiredFlag: requiredFlag, decorator: decorator, id: id },
+        React.createElement(SelectMultiple, { ...multipleSelectProps })));
+};
+MultipleSelect.propTypes = {
+    ...propTypes,
+};
+MultipleSelect.defaultProps = {
+    ...normalProps,
+};
+export default MultipleSelect;

package/dist/src/web/components/form/enumSelect/NormalSelect.d.ts

@@ -0,0 +1,83 @@
+/// <reference types="react" />
+declare const NormalSelect: {
+    ({ id, style, className, events, label, labelVisible, layout, requiredFlag, decorator, value, placeholder, disabled, onChange, clearable, appearance, matchButtonWidth, virtual, searchable, size, options, isModelApp, }: {
+        id: any;
+        style: any;
+        className: any;
+        events: any;
+        label: any;
+        labelVisible: any;
+        layout: any;
+        requiredFlag: any;
+        decorator: any;
+        value: any;
+        placeholder: any;
+        disabled: any;
+        onChange: any;
+        clearable: any;
+        appearance: any;
+        matchButtonWidth: any;
+        virtual: any;
+        searchable: any;
+        size: any;
+        options: any;
+        isModelApp: any;
+    }): JSX.Element;
+    propTypes: {
+        events: import("prop-types").Requireable<object>;
+        defaultValue: import("prop-types").Requireable<NonNullable<string | number>>;
+        name: import("prop-types").Requireable<string>;
+        placeholder: import("prop-types").Requireable<string>;
+        disabled: import("prop-types").Requireable<boolean>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        options: import("prop-types").Requireable<any[]>;
+        clearable: import("prop-types").Requireable<boolean>;
+        appearance: import("prop-types").Requireable<string>;
+        allOption: import("prop-types").Requireable<object>;
+        matchButtonWidth: import("prop-types").Requireable<boolean>;
+        virtual: import("prop-types").Requireable<boolean>;
+        searchable: import("prop-types").Requireable<boolean>;
+        size: import("prop-types").Requireable<string>;
+        value: import("prop-types").Requireable<NonNullable<string | any[]>>;
+        enumType: import("prop-types").Requireable<string>;
+        customEnum: import("prop-types").Requireable<any[]>;
+        optionId: import("prop-types").Requireable<string>;
+        isModelApp: import("prop-types").Requireable<boolean>;
+        id: import("prop-types").Requireable<string>;
+        style: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        label: import("prop-types").Requireable<string>;
+        labelVisible: import("prop-types").Requireable<boolean>;
+        layout: import("prop-types").Requireable<string>;
+        requiredFlag: import("prop-types").Requireable<boolean>;
+    };
+    defaultProps: {
+        value: any[];
+        allOption: {
+            value: string;
+            text: string;
+            tooltip: string;
+        };
+        events: {};
+        label: string;
+        labelVisible: boolean;
+        layout: string;
+        requiredFlag: boolean;
+        name: string;
+        placeholder: string;
+        disabled: boolean;
+        onChange: () => void;
+        options: any[];
+        clearable: boolean;
+        appearance: string;
+        matchButtonWidth: boolean;
+        virtual: boolean;
+        searchable: boolean;
+        size: string;
+        enumType: string;
+        customEnum: any[];
+        optionId: any;
+        isModelApp: boolean;
+    };
+};
+export default NormalSelect;

package/dist/src/web/components/form/enumSelect/NormalSelect.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Select } from 'tea-component';
+import SelectContainer from './SelectContainer';
+import { multipleProps } from './props/defaultProps';
+import { propTypes } from './props/propsTypes';
+import { useSyncValue } from '../../../utils/useSyncValue';
+const NormalSelect = ({ 
+// 系统属性
+id, style, className, events, 
+// weda 组件属性
+label, labelVisible, layout, requiredFlag, decorator, 
+// tea组件属性
+value, placeholder, disabled, onChange, clearable, appearance, matchButtonWidth, virtual, searchable, size, options, 
+// 业务属性
+isModelApp, }) => {
+    const [selectedValue, setSelectedValue] = useSyncValue(value);
+    const onSelectChange = (value) => {
+        setSelectedValue(value);
+        events.change && events.change({ value });
+        if (onChange) {
+            onChange(value || '');
+        }
+    };
+    const singleSelectProps = {
+        placeholder,
+        disabled,
+        clearable,
+        appearance,
+        key: id,
+        options,
+        onChange: onSelectChange,
+        value: selectedValue,
+        matchButtonWidth,
+        virtual,
+        searchable,
+        size,
+    };
+    if (isModelApp) {
+        return React.createElement(Select, { ...singleSelectProps });
+    }
+    return (React.createElement(SelectContainer, { style: style, className: className, label: label, labelVisible: labelVisible, layout: layout, 
+        // @ts-expect-error selectcontainer type inorrect
+        multiCell: false, requiredFlag: requiredFlag, decorator: decorator, id: id },
+        React.createElement(Select, { ...singleSelectProps })));
+};
+NormalSelect.propTypes = {
+    ...propTypes,
+};
+NormalSelect.defaultProps = {
+    ...multipleProps,
+};
+export default NormalSelect;

package/dist/src/web/components/form/enumSelect/SelectContainer.d.ts

@@ -0,0 +1,16 @@
+export default SelectContainer;
+declare function SelectContainer({ style, className, id, label, labelVisible, layout, requiredFlag, decorator, children, }: {
+    style: any;
+    className: any;
+    id: any;
+    label: any;
+    labelVisible: any;
+    layout: any;
+    requiredFlag: any;
+    decorator: any;
+    children: any;
+}): JSX.Element;
+declare namespace SelectContainer {
+    export { selectContainerPropsTypes as propTypes };
+}
+import { selectContainerPropsTypes } from "./props/propsTypes";

package/dist/src/web/components/form/enumSelect/SelectContainer.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from '../../../utils/classnames';
+import { selectContainerPropsTypes } from './props/propsTypes';
+import { renderDecorator } from '../renderDecorator';
+const SelectContainer = ({ style, className, 
+// weda 组件属性
+id, label, labelVisible, layout, requiredFlag, decorator, children, }) => {
+    const cls = classNames({
+        'weda-ui': true,
+        [className]: className,
+    });
+    const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-cell_form': true,
+        'weui-cell_disabled': true,
+    });
+    const SelectComponent = React.createElement("div", { className: subCls }, children);
+    return renderDecorator(SelectComponent, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+};
+SelectContainer.propTypes = selectContainerPropsTypes;
+export default SelectContainer;

package/dist/src/web/components/form/enumSelect/index.d.ts

@@ -0,0 +1,82 @@
+export default EnumSelect;
+declare const EnumSelect: {
+    ({ id, style, className, events, label, labelVisible, layout, requiredFlag, decorator, value, placeholder, disabled, onChange, clearable, appearance, matchButtonWidth, virtual, searchable, size, options, isModelApp, }: {
+        id: any;
+        style: any;
+        className: any;
+        events: any;
+        label: any;
+        labelVisible: any;
+        layout: any;
+        requiredFlag: any;
+        decorator: any;
+        value: any;
+        placeholder: any;
+        disabled: any;
+        onChange: any;
+        clearable: any;
+        appearance: any;
+        matchButtonWidth: any;
+        virtual: any;
+        searchable: any;
+        size: any;
+        options: any;
+        isModelApp: any;
+    }): JSX.Element;
+    propTypes: {
+        events: import("prop-types").Requireable<object>;
+        defaultValue: import("prop-types").Requireable<NonNullable<string | number>>;
+        name: import("prop-types").Requireable<string>;
+        placeholder: import("prop-types").Requireable<string>;
+        disabled: import("prop-types").Requireable<boolean>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        options: import("prop-types").Requireable<any[]>;
+        clearable: import("prop-types").Requireable<boolean>;
+        appearance: import("prop-types").Requireable<string>;
+        allOption: import("prop-types").Requireable<object>;
+        matchButtonWidth: import("prop-types").Requireable<boolean>;
+        virtual: import("prop-types").Requireable<boolean>;
+        searchable: import("prop-types").Requireable<boolean>;
+        size: import("prop-types").Requireable<string>;
+        value: import("prop-types").Requireable<NonNullable<string | any[]>>;
+        enumType: import("prop-types").Requireable<string>;
+        customEnum: import("prop-types").Requireable<any[]>;
+        optionId: import("prop-types").Requireable<string>;
+        isModelApp: import("prop-types").Requireable<boolean>;
+        id: import("prop-types").Requireable<string>;
+        style: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        label: import("prop-types").Requireable<string>;
+        labelVisible: import("prop-types").Requireable<boolean>;
+        layout: import("prop-types").Requireable<string>;
+        requiredFlag: import("prop-types").Requireable<boolean>;
+    };
+    defaultProps: {
+        value: any[];
+        allOption: {
+            value: string;
+            text: string;
+            tooltip: string;
+        };
+        events: {};
+        label: string;
+        labelVisible: boolean;
+        layout: string;
+        requiredFlag: boolean;
+        name: string;
+        placeholder: string;
+        disabled: boolean;
+        onChange: () => void;
+        options: any[];
+        clearable: boolean;
+        appearance: string;
+        matchButtonWidth: boolean;
+        virtual: boolean;
+        searchable: boolean;
+        size: string;
+        enumType: string;
+        customEnum: any[];
+        optionId: any;
+        isModelApp: boolean;
+    };
+};

package/dist/src/web/components/form/enumSelect/index.js

@@ -0,0 +1,6 @@
+import MultipleSelect from './MultipleSelect';
+import NormalSelect from './NormalSelect';
+const EnumSelect = NormalSelect;
+/** @ts-ignore jsx */
+EnumSelect.MultipleSelect = MultipleSelect;
+export default EnumSelect;

package/dist/src/web/components/form/enumSelect/props/defaultProps.d.ts

@@ -0,0 +1,34 @@
+export namespace normalProps {
+    export const value: string;
+    export const events: {};
+    export const label: string;
+    export const labelVisible: boolean;
+    export const layout: string;
+    export const requiredFlag: boolean;
+    export const name: string;
+    export const placeholder: string;
+    export const disabled: boolean;
+    export { noop as onChange };
+    export const options: any[];
+    export const clearable: boolean;
+    export const appearance: string;
+    export const matchButtonWidth: boolean;
+    export const virtual: boolean;
+    export const searchable: boolean;
+    export const size: string;
+    export const enumType: string;
+    export const customEnum: any[];
+    export const optionId: any;
+    export const isModelApp: boolean;
+}
+export namespace multipleProps {
+    const value_1: any[];
+    export { value_1 as value };
+    export namespace allOption {
+        const value_2: string;
+        export { value_2 as value };
+        export const text: string;
+        export const tooltip: string;
+    }
+}
+import { noop } from "../../../../utils/constant";

package/dist/src/web/components/form/enumSelect/props/defaultProps.js

@@ -0,0 +1,40 @@
+import { noop } from '../../../../utils/constant';
+const commonProps = {
+    // 系统属性
+    events: {},
+    // weda 组件属性
+    label: '标题',
+    labelVisible: true,
+    layout: 'horizontal',
+    requiredFlag: false,
+    // tea组件属性
+    name: 'enumSelect',
+    placeholder: '请选择',
+    disabled: false,
+    onChange: noop,
+    options: [],
+    clearable: true,
+    appearance: 'button',
+    matchButtonWidth: true,
+    virtual: true,
+    searchable: true,
+    size: 'm',
+    // 业务属性
+    enumType: '',
+    customEnum: [],
+    optionId: null,
+    isModelApp: false,
+};
+export const normalProps = {
+    ...commonProps,
+    value: '',
+};
+export const multipleProps = {
+    ...commonProps,
+    value: [],
+    allOption: {
+        value: 'all',
+        text: '全选',
+        tooltip: '全选',
+    },
+};