@cloudbase/weda-ui 3.4.8 → 3.4.9

package/dist/web/components/form-input-hooks/index.js

@@ -0,0 +1,284 @@
+/* eslint max-lines: [error, 400] */
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+import { debug } from '../../utils/console';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { isNil } from '../../utils/lodash';
+import { getParentForm, useWedaAppContext } from '../../utils/widget-api';
+import { validType } from './validator';
+import { emptyArray, noop } from '../../utils/constant';
+import { useRerender, useSyncedRef, useUnmountEffect } from '@react-hookz/web';
+const logger = debug('wd-form-item');
+export function useParentForm($widget) {
+    const { ready } = useWedaAppContext();
+    const { data } = useSWR([$widget, ready, getParentForm], ([$node, ready]) => {
+        logger.debug('ready', ready, '$widget', $node);
+        if (!ready)
+            return null;
+        const form = getParentForm($node);
+        if (form === undefined) {
+            logger.debug('useParentForm', $node.id, $node.parent);
+        }
+        return form;
+        // return Promise.resolve().then(() => {
+        //   return getParentForm($node);
+        // });
+    }, {
+        revalidateOnMount: true,
+        refreshWhenHidden: true,
+        refreshWhenOffline: true,
+        onError(err) {
+            console.error('getParentForm', err);
+        },
+    });
+    return data;
+}
+export function useFormInputTrait(inputParams) {
+    const { value, $widget, inputRef, required, requiredMsg, rules = emptyArray, events, layout: currentLayout, setInnerHandle = noop, onChange: outerOnChange = noop, $node, } = inputParams;
+    if (isNil($widget)) {
+        throw new Error('$widget 没传入');
+    }
+    const eventsRef = useSyncedRef(events);
+    const [name] = useSyncValue(inputParams.name);
+    const [disabled, setDisabled] = useSyncValue(inputParams.disabled);
+    const [readOnly] = useSyncValue(inputParams.readOnly);
+    const [validateState, setValidateState] = useState(inputParams.validateStatus);
+    const [validateErrorMsg, setValidateErrorMsg] = useState('');
+    const [visible, setVisible] = useState(true);
+    const forceUpdate = useRerender();
+    const form = useParentForm($widget);
+    logger.debug(inputParams, 'WdFormItem');
+    const layout = useMemo(() => {
+        let finalLayout;
+        if (form && (!currentLayout || currentLayout === 'auto')) {
+            finalLayout = form.layout;
+        }
+        else {
+            finalLayout = currentLayout;
+        }
+        return finalLayout;
+    }, [form, currentLayout]);
+    const [syncValue, _setSyncedValue] = useSyncValue(value, isObjectEqual);
+    const setSyncedValue = useCallback((newVal) => {
+        var _a;
+        logger.debug('updateFormContext', newVal);
+        _setSyncedValue(newVal);
+        if (typeof $node === 'object' && $node !== null) {
+            $node.value = newVal;
+        }
+        (_a = form === null || form === void 0 ? void 0 : form.updateFormContext) === null || _a === void 0 ? void 0 : _a.call(form, name, newVal);
+    }, [_setSyncedValue, $node, form, name]);
+    // const [syncValue] = useSetValueWithFormContextUpdate(value, form, name);
+    useEffect(() => {
+        logger.debug('Form', form);
+    }, [form]);
+    useEffect(() => {
+        var _a, _b;
+        const removeFormItem = (_b = (_a = $widget
+            .closest((w) => { var _a, _b; return ((_b = (_a = w.getConfig) === null || _a === void 0 ? void 0 : _a.call(w)) === null || _b === void 0 ? void 0 : _b.componentType) === 'form'; })) === null || _a === void 0 ? void 0 : _a.addFormItem) === null || _b === void 0 ? void 0 : _b.call(_a, name, $widget);
+        logger.debug('addFormItem', name);
+        return () => {
+            logger.debug('removeFormItem', name);
+            removeFormItem === null || removeFormItem === void 0 ? void 0 : removeFormItem();
+        };
+    }, [$widget, name, form]);
+    const clearValidate = useCallback(() => {
+        setValidateErrorMsg('');
+        setValidateState(undefined);
+    }, [setValidateErrorMsg, setValidateState]);
+    // 挂在setValue方法到 $widget上
+    React.useImperativeHandle(inputRef, () => {
+        const result = {
+            setValue(val) {
+                setSyncedValue(val);
+            },
+            setVisible(val) {
+                if (typeof val !== 'boolean') {
+                    console.warn('参数需要为boolean');
+                    return;
+                }
+                setVisible(val);
+            },
+            setHidden() {
+                setVisible(false);
+            },
+            initialDisabled: inputParams.disabled,
+            setDisable(value) {
+                const originalValue = disabled;
+                setDisabled(value);
+                return () => {
+                    setDisabled(originalValue);
+                };
+            },
+            clearValue() {
+                setSyncedValue(null);
+            },
+            setReadOnly(value) {
+                const originalValue = disabled;
+                // 先用disabled属性来做
+                setDisabled(value);
+                return () => {
+                    setDisabled(originalValue);
+                };
+            },
+            async handleValidate() {
+                let finalValue = syncValue;
+                if (!required && !rules.length)
+                    return;
+                if (finalValue) {
+                    if (typeof finalValue === 'string') {
+                        if (finalValue.trim) {
+                            finalValue = finalValue.trim();
+                        }
+                        else {
+                            finalValue = finalValue.replace(/(^\s*)|(\s*$)/g, '');
+                        }
+                    }
+                }
+                const validPromise = [];
+                if (required) {
+                    if (!validType.required(finalValue)) {
+                        validPromise.push(Promise.resolve({ format: 'required', message: requiredMsg }));
+                    }
+                }
+                logger.debug('finalValue', finalValue);
+                if (finalValue) {
+                    if (rules.length) {
+                        rules.some((item) => {
+                            if (!item.format && !item.pattern) {
+                                // console.log(item)
+                                throw new Error('验证规则必须配置 format/pattern');
+                            }
+                            if (item.format) {
+                                const typeFunc = validType[item.format];
+                                if (typeFunc && !typeFunc(String(finalValue))) {
+                                    // console.log("format 校验>>>>")
+                                    validPromise.push(Promise.resolve(item));
+                                    return false;
+                                }
+                            }
+                            else {
+                                if (item.pattern) {
+                                    // 正则校验
+                                    // console.log("pattern 校验>>>>")
+                                    const reg = new RegExp(item.pattern);
+                                    if (!reg.test(String(finalValue))) {
+                                        validPromise.push(Promise.resolve(item));
+                                        return false;
+                                    }
+                                }
+                            }
+                        });
+                    }
+                }
+                const result = Promise.all(validPromise).then((arr) => {
+                    return arr.filter((item) => item !== void 0);
+                });
+                const errorArr = await result;
+                if (errorArr.length > 0) {
+                    setValidateState('error');
+                    setValidateErrorMsg(errorArr[0].message);
+                }
+                else {
+                    // console.log("校验成功>>>>>>>")
+                    setValidateState('success');
+                    setValidateErrorMsg('');
+                }
+                return errorArr;
+            },
+            getValue() {
+                return syncValue;
+            },
+            name,
+            forceUpdate,
+            value: syncValue,
+            clearValidate,
+        };
+        setInnerHandle(result);
+        logger.debug('useImperativeHandle', result);
+        return result;
+    }, [
+        inputParams.disabled,
+        name,
+        forceUpdate,
+        syncValue,
+        clearValidate,
+        setInnerHandle,
+        setSyncedValue,
+        disabled,
+        setDisabled,
+        required,
+        rules,
+        requiredMsg,
+    ]);
+    const { data: fieldPermission, error: fieldPermissionError, isLoading: fieldPermissionLoading, } = useSWR(() => {
+        return [form.authValue, name];
+    }, ([authValue, name]) => {
+        const { isDataModel, dataSourceFieldsWidthAuthList = emptyArray } = authValue;
+        if (isDataModel) {
+            const fieldPermissions = dataSourceFieldsWidthAuthList.filter((fieldPermission) => {
+                return fieldPermission[name];
+            });
+            if (fieldPermissions.length > 0) {
+                return fieldPermissions[0][name];
+            }
+        }
+        return null;
+    });
+    useEffect(() => {
+        if (fieldPermissionLoading)
+            return;
+        if (fieldPermissionError || !fieldPermission)
+            return;
+        if (fieldPermission === 'rw') {
+            setVisible(true);
+            setDisabled(disabled || false);
+        }
+        else if (fieldPermission === 'r') {
+            setVisible(true);
+            setDisabled(true);
+        }
+        else if (fieldPermission === 'n') {
+            setVisible(false);
+        }
+    }, [
+        disabled,
+        fieldPermission,
+        fieldPermissionError,
+        fieldPermissionLoading,
+        setDisabled,
+    ]);
+    useUnmountEffect(() => {
+        var _a;
+        (_a = form === null || form === void 0 ? void 0 : form.updateFormContext) === null || _a === void 0 ? void 0 : _a.call(form, name, undefined);
+    });
+    // const runOnceRef = useRef(false);
+    // useEffect(() => {
+    //   // 双保险，向上取initialValues
+    //   if (runOnceRef.current) {
+    //     return;
+    //   }
+    //   if (!form) return;
+    //   if (!value && !isNil(lodashGet(form.initialValues, name))) {
+    //     setSyncedValue(lodashGet(form.initialValues, name));
+    //     runOnceRef.current = true;
+    //   }
+    // }, [form, name, setSyncedValue, value]);
+    const onChange = useCallback((value) => {
+        setSyncedValue(value);
+        outerOnChange(value);
+    }, [eventsRef, outerOnChange, setSyncedValue]);
+    return {
+        visible,
+        onChange,
+        value: syncValue,
+        disabled,
+        readOnly,
+        required,
+        name,
+        validateState,
+        validateErrorMsg,
+        layout,
+    };
+}

package/dist/web/components/form-input-hooks/validator.js

@@ -0,0 +1,124 @@
+/* eslint-disable no-useless-escape */
+const pattern = {
+    email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+    url: new RegExp('^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$', 'i'),
+    cn: /^[\u2E80-\uFE4F]+$/,
+    enName: /^[\da-zA-Z\s]{2,}$/,
+    cnName: /^[\u2E80-\uFE4F]{2,6}(?:·[\u2E80-\uFE4F]{2,6})*$/,
+    userName: /^[\da-zA-Z\u2E80-\uFE4F \s]{2,}$/,
+    carId: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/,
+    mobile: /^1[3456789]\d{9}$/,
+    tel: /^(0\d{2,3}-)?(\d{7,8})$/,
+    address: /^[\da-zA-Z\u2E80-\uFE4F \s-]{4,400}$/,
+    date: /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/,
+    numVcode: /^[0-9]{4,8}$/,
+    vcode: /^[a-zA-Z0-9]{4,8}$/,
+    code: /^[a-zA-Z0-9]{4,}$/,
+    hkMc: /^[WC][0-9]{8}$/,
+    taiWan: /^T[0-9]{8}$/,
+    passport: /^1[45][0-9]{7}|([E|e]\d{8})|([P|p|S|s]\d{7})|([S|s|G|g]\d{8})|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8})|([H|h|M|m]\d{8，10})$/,
+    num: /^[1-9][0-9]*$/,
+    money: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
+    id: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
+};
+// 定义字符串的trim方法
+if (String.prototype.trim === void 0) {
+    String.prototype.trim = function () {
+        return this.replace(/(^\s*)|(\s*$)/g, '');
+    };
+}
+export const validType = {
+    // required 校验方法
+    required(value) {
+        // 如果是数组，则判断数组长度
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+        else if (value && typeof value === 'object') {
+            return Object.keys(value).length > 0;
+        }
+        else if (typeof value === 'boolean') {
+            return true;
+        }
+        return !!(value || value === 0);
+    },
+    // 身份证规则检测
+    id(value) {
+        return typeof value === 'string' && pattern.id.test(value.trim());
+    },
+    // 中文检测
+    cn(value) {
+        return typeof value === 'string' && pattern.cn.test(value.trim());
+    },
+    // 手机号码检测
+    mobile(value) {
+        return pattern.mobile.test(String(value).trim());
+    },
+    // 固定电话检测
+    tel(value) {
+        return pattern.tel.test(String(value).trim());
+    },
+    // 邮箱检测
+    email(value) {
+        return typeof value === 'string' && pattern.email.test(value.trim());
+    },
+    // URL检测
+    url(value) {
+        return typeof value === 'string' && pattern.url.test(value.trim());
+    },
+    // 车牌检测
+    carId(value) {
+        return typeof value === 'string' && pattern.carId.test(value.trim());
+    },
+    // 中文名检测
+    cnName(value) {
+        return typeof value === 'string' && pattern.cnName.test(value.trim());
+    },
+    // 英文名检测
+    enName(value) {
+        return typeof value === 'string' && pattern.enName.test(value.trim());
+    },
+    // 用户名检测
+    userName(value) {
+        return typeof value === 'string' && pattern.userName.test(value.trim());
+    },
+    // 地址检测
+    address(value) {
+        return typeof value === 'string' && pattern.address.test(value.trim());
+    },
+    // 日期检测
+    date(value) {
+        return typeof value === 'string' && pattern.date.test(value.trim());
+    },
+    // 数字验证码检测
+    numVcode(value) {
+        return typeof value === 'string' && pattern.numVcode.test(value.trim());
+    },
+    // 其它验证码检测
+    vcode(value) {
+        return typeof value === 'string' && pattern.vcode.test(value.trim());
+    },
+    // 编码检测
+    code(value) {
+        return typeof value === 'string' && pattern.code.test(value.trim());
+    },
+    // 港澳通行证检测
+    hkMc(value) {
+        return typeof value === 'string' && pattern.hkMc.test(value.trim());
+    },
+    // 台湾通行证检测
+    taiWan(value) {
+        return typeof value === 'string' && pattern.taiWan.test(value.trim());
+    },
+    // 护照检测
+    passport(value) {
+        return typeof value === 'string' && pattern.passport.test(value.trim());
+    },
+    num(value) {
+        return typeof value === 'string' && pattern.num.test(value.trim());
+    },
+    // 金额检测
+    money(value) {
+        return typeof value === 'string' && pattern.money.test(value.trim());
+    },
+};

package/dist/web/components/form-location/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+import Location from '../form/location';
+import Tips from '../form/tips';
+import { useFormInputTrait } from '../form-input-hooks';
+const FormLocation = React.forwardRef(function FormLocation(props, inputRef) {
+    const { className, id, style, events, required, requiredFlag, label, labelVisible, customRange, dataSource, defauleShowLocation, locationRange, locationType, showLngLat, showMap, zoom, drag, 
+    // @ts-expect-error 里面有，但dataForm没有，但json有传
+    customLocation, ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        ...restProps,
+    });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Location, { id: id, style: style, className: className, events: events, name: name, disabled: disabled, label: label, labelVisible: labelVisible, layout: layout, requiredFlag: required && requiredFlag, value: value, customLocation: customLocation, customRange: customRange, dataSource: dataSource, defauleShowLocation: defauleShowLocation, drag: drag, locationType: locationType, locationRange: locationRange, showLngLat: showLngLat, showMap: showMap, zoom: zoom, onChange: onChange }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormLocation;

package/dist/web/components/form-multi-region/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+import Select from '../form/select';
+import Tips from '../form/tips';
+import { useFormInputTrait } from '../form-input-hooks';
+const FormSwitch = React.forwardRef(function FormSwitch(props, inputRef) {
+    const { className, id, style, events, required, requiredFlag, label, labelVisible, regionType, size, placeholder, ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        ...restProps,
+    });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Select, { id: id, style: style, onChange: onChange, className: className, events: events, name: name, disabled: disabled, label: label, labelVisible: labelVisible, layout: layout, requiredFlag: required && requiredFlag, defaultMutiRegion: value, placeholder: placeholder, mode: "mutiRegion", size: size, regionType: regionType }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormSwitch;

package/dist/web/components/form-phone/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { debug } from '../../utils/console';
+import { useFormInputTrait } from '../form-input-hooks';
+import Input from '../form/input';
+import Tips from '../form/tips';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+const rules = [
+    {
+        format: 'mobile',
+        message: '手机校验失败',
+    },
+];
+const logger = debug('wd-input');
+const FormPhone = React.forwardRef(function FormPhone(props, inputRef) {
+    const { className, id, style, required, requiredFlag, label, labelVisible, placeholder, size, focus, clearable, events, ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        rules,
+        ...restProps,
+    });
+    logger.debug(restProps, name, 'WDINPUT_NAME', id);
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Input, { defaultValue: value, id: id, className: className, style: style, onChange: onChange, disabled: disabled, requiredFlag: requiredFlag && required, layout: layout, label: label, labelVisible: labelVisible, clearable: clearable, maxLength: 11, password: false, size: size, type: "number", focus: focus, events: events, placeholder: placeholder }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormPhone;

package/dist/web/components/form-radio/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+import Radio from '../form/radio';
+import Tips from '../form/tips';
+import { useFormInputTrait } from '../form-input-hooks';
+const FormRadio = React.forwardRef(function FormRadio(props, inputRef) {
+    const { className, id, style, label, labelVisible, 
+    // size,
+    events, required, requiredFlag, range: propRange, 
+    // tipBlock,
+    ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        ...restProps,
+    });
+    const range = React.useMemo(() => {
+        const range = propRange &&
+            propRange.map((item) => {
+                const checked = value === item.value;
+                return {
+                    value: item.value,
+                    label: item.label,
+                    checked: !!checked,
+                };
+            });
+        return range;
+    }, [propRange, value]);
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Radio, { id: id, style: style, className: className, requiredFlag: required && requiredFlag, name: name, label: label, labelVisible: labelVisible, disabled: disabled, range: range, onChange: onChange, events: events, layout: layout }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormRadio;

package/dist/web/components/form-region/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+import Select from '../form/select';
+import Tips from '../form/tips';
+import { useFormInputTrait } from '../form-input-hooks';
+const FormRegion = React.forwardRef(function FormSwitch(props, inputRef) {
+    const { className, id, style, events, required, requiredFlag, label, labelVisible, placeholder, size, separator, ...restProps } = props;
+    const { value, name, 
+    // onChange,
+    disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        ...restProps,
+    });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Select, { id: id, style: style, className: className, events: events, name: name, disabled: disabled, label: label, regionType: 'levelThree', labelVisible: labelVisible, layout: layout, requiredFlag: required && requiredFlag, defaultRegion: value, placeholder: placeholder, separator: separator, size: size, mode: "region" }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormRegion;

package/dist/web/components/form-rich-text/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useFormInputTrait } from '../form-input-hooks';
+import Tips from '../form/tips';
+import RichText from '../richText';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+const FromRichText = React.forwardRef(function FormRichText(props, inputRef) {
+    const { className, id, style, events, title, titleVisible, maxSize, acceptTypes, required, requiredFlag, ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, readOnly, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        ...restProps,
+    });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(RichText, { id: id, style: style, className: className, events: events, onChange: onChange, acceptTypes: acceptTypes, label: title, labelVisible: titleVisible, disabled: disabled, layout: layout, maxSize: maxSize, name: name, readOnly: readOnly, requiredFlag: required && requiredFlag, value: value }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FromRichText;

package/dist/web/components/form-select/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+import Select from '../form/select';
+import Tips from '../form/tips';
+import { useFormInputTrait } from '../form-input-hooks';
+const FormSelect = React.forwardRef(function FormSelect(props, inputRef) {
+    const { className, id, style, events, required, requiredFlag, label, labelVisible, dataSourceName, enumName, format, placeholder, primaryField, range, size, tipBlock, viewId, where, ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        inputRef,
+        required,
+        ...restProps,
+    });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Select, { id: id, style: style, className: className, events: events, name: name, onChange: onChange, disabled: disabled, label: label, labelVisible: labelVisible, layout: layout, requiredFlag: required && requiredFlag, defaultValue: value, enumName: enumName, format: format, placeholder: placeholder, primaryField: primaryField, range: range, size: size, tipBlock: tipBlock, viewId: viewId, where: where, dataSourceName: dataSourceName, mode: "selector" }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormSelect;

package/dist/web/components/form-switch/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+import Switch from '../form/switch';
+import Tips from '../form/tips';
+import { useFormInputTrait } from '../form-input-hooks';
+const FormSwitch = React.forwardRef(function FormSwitch(props, inputRef) {
+    const { className, id, style, events, required, requiredFlag, label, labelVisible, ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        ...restProps,
+    });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Switch, { id: id, onChange: onChange, style: style, className: className, events: events, name: name, checked: value !== null && value !== void 0 ? value : false, disabled: disabled, label: label, labelVisible: labelVisible, layout: layout, requiredFlag: required && requiredFlag }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormSwitch;

package/dist/web/components/form-text-area/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { FormItemWrapper } from '../common/form-item-wrapper';
+import Textarea from '../form/textarea';
+import Tips from '../form/tips';
+import { useFormInputTrait } from '../form-input-hooks';
+const FormTextArea = React.forwardRef(function FormTextArea(props, inputRef) {
+    const { className, id, style, required, requiredFlag, label, labelVisible, placeholder, size, maxLength, focus, events, counterVisible, ...restProps } = props;
+    const { value, name, onChange, disabled, layout, 
+    // readOnly,
+    validateErrorMsg, validateState, visible, } = useFormInputTrait({
+        name: restProps.name,
+        inputRef,
+        required,
+        ...restProps,
+    });
+    if (!visible) {
+        return null;
+    }
+    return (_jsxs(FormItemWrapper, { children: [_jsx(Textarea, { id: id, style: style, className: className, defaultValue: value !== null && value !== void 0 ? value : '', name: name, disabled: disabled, layout: layout, onChange: onChange, size: size, maxLength: maxLength, label: label, labelVisible: labelVisible, requiredFlag: required && requiredFlag, counterVisible: counterVisible, placeholder: placeholder, focus: focus, events: events }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+});
+export default FormTextArea;