@cloudbase/weda-ui 3.5.3 → 3.6.0

package/dist/web/components/form-input-hooks/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { CommonPropsType } from '../../types';
-export declare function useParentForm($widget: CommonPropsType['$widget']): import("../../types").IWidget;
+export declare function useParentForm(widgetIgnored: CommonPropsType['$widget']): import("../../types").IWidget;
 type Rule = {
     format: string;
     message: string;
@@ -26,6 +26,8 @@ export type FormInputTraitParams<Value> = {
     status?: 'edit' | 'disabled' | 'readOnly';
     setInnerHandle?: (arg: unknown) => void;
     label: string;
+    before?: string;
+    after?: string;
 } & Pick<CommonPropsType, '$widget' | '$node'>;
 export declare function useFormInputTrait<Value = unknown>(inputParams: FormInputTraitParams<Value>): {
     visible: boolean;
@@ -37,6 +39,9 @@ export declare function useFormInputTrait<Value = unknown>(inputParams: FormInpu
     name: string;
     validateState: "success" | "error" | "warn";
     validateErrorMsg: string;
+    /**
+     * @deprecated 在Wd组件中应该直接用输入的那个，通过css联动而不是js
+     */
     layout: "vertical" | "horizontal";
     initValidate: (validateState: any, validateErrorMsg: any) => void;
 };

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

@@ -1,70 +1,63 @@
 /* eslint-disable max-lines */
 /* eslint max-lines: [error, 400] */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { 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 { getParentForm, useFormDetailContext } from '../../utils/widget-api';
 import { validType } from './validator';
 import { emptyArray, noop } from '../../utils/constant';
-import { useRerender, useUnmountEffect } from '@react-hookz/web';
+import { useDeepCompareEffect, useRerender, useUnmountEffect, } from '@react-hookz/web';
 import { useStatus, convertMethodParam } from '../../utils/hooks/useFormLegacy';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import { useFormType } from '../wd-form/contexts/form-type-context';
+import { useFormLayout } from '../wd-form/contexts/form-layout-context';
+import { useFormWidget } from '../wd-form/contexts/form-widget-context';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 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, `ready: ${ready}`);
-        }
-        return form;
-        // return Promise.resolve().then(() => {
-        //   return getParentForm($node);
-        // });
-    }, {
-        revalidateOnMount: true,
-        refreshWhenHidden: true,
-        refreshWhenOffline: true,
-        onError(err) {
-            console.error('getParentForm', err);
-        },
-    });
-    return data;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useParentForm(widgetIgnored) {
+    return useFormWidget();
 }
 export function useFormInputTrait(inputParams) {
     var _a;
-    const { value, $widget, inputRef, required, requiredMsg = '该项为必填项', rules = emptyArray, layout: currentLayout, setInnerHandle = noop, onChange: outerOnChange = noop, $node, } = inputParams;
+    const { value, $widget, inputRef, required = X_RUNTIME_DEFAULT.required, requiredMsg = '该项为必填项', rules = emptyArray, layout: currentLayout, setInnerHandle = noop, onChange: outerOnChange = noop, $node, before, after, } = inputParams;
     const label = inputParams.label;
     if (isNil($widget)) {
         throw new Error('$widget 没传入');
     }
     const [name] = useSyncValue(inputParams.name);
+    const formType = useFormType();
     const statusParams = useStatus(inputParams);
-    const [disabled, setDisabled] = useSyncValue((_a = statusParams.disabled) !== null && _a !== void 0 ? _a : false);
-    const [readOnly, setReadOnly] = useSyncValue(statusParams.readOnly);
+    const formDetailStatus = useFormDetailContext();
+    const [disabled, setDisabled] = useSyncValue(((_a = statusParams.disabled) !== null && _a !== void 0 ? _a : false) ||
+        formType === 'read' ||
+        formDetailStatus === 'disabled');
+    const [readOnly, setReadOnly] = useSyncValue(statusParams.readOnly ||
+        formType === 'read' ||
+        formDetailStatus === '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('WdFormItem', form, name, inputParams);
+    const layoutInForm = useFormLayout();
     const layout = useMemo(() => {
         let finalLayout;
-        if (form && (!currentLayout || currentLayout === 'auto')) {
-            finalLayout = form.layout;
+        if (layoutInForm && (!currentLayout || currentLayout === 'auto')) {
+            finalLayout = layoutInForm;
         }
         else {
             finalLayout = currentLayout;
         }
         return finalLayout;
-        // eslint-disable-next-line react-hooks/exhaustive-deps --- add form.layout as dependencies
-    }, [form, currentLayout, form === null || form === void 0 ? void 0 : form.layout]);
-    const [syncValue, _setSyncedValue] = useSyncValue(value, isObjectEqual);
+    }, [currentLayout, layoutInForm]);
+    const [syncValue, _setSyncedValue, 
+    // 只在暴露方法的闭包内用，别的地方别用
+    valueRef,] = useSyncValue(value, isObjectEqual);
     const setSyncedValue = useCallback((newVal) => {
         var _a;
         logger.debug('updateFormContext', newVal);
@@ -73,6 +66,11 @@ export function useFormInputTrait(inputParams) {
         const f = form !== null && form !== void 0 ? form : getParentForm($widget);
         (_a = f === null || f === void 0 ? void 0 : f.updateFormContext) === null || _a === void 0 ? void 0 : _a.call(f, name, newVal);
     }, [$widget, _setSyncedValue, form, name]);
+    useDeepCompareEffect(() => {
+        var _a;
+        const f = form !== null && form !== void 0 ? form : getParentForm($widget);
+        (_a = f === null || f === void 0 ? void 0 : f.updateFormContext) === null || _a === void 0 ? void 0 : _a.call(f, name, syncValue);
+    }, [name, syncValue]);
     useEffect(() => {
         logger.debug('Form', form, name);
     }, [form, name]);
@@ -96,8 +94,8 @@ export function useFormInputTrait(inputParams) {
         setValidateState(undefined);
     }, [setValidateErrorMsg, setValidateState]);
     // 挂在 setValue 方法到 $widget 上
-    React.useImperativeHandle(inputRef, () => {
-        logger.debug('useImperativeHandle', { name, syncValue });
+    useSetWidgetApi(() => {
+        logger.debug('useImperativeHandle', { name, valueRef });
         const result = {
             setValue(val) {
                 const value = convertMethodParam(val);
@@ -138,7 +136,7 @@ export function useFormInputTrait(inputParams) {
                 };
             },
             async handleValidate() {
-                let finalValue = syncValue;
+                let finalValue = valueRef.current;
                 if (!required && !rules.length)
                     return;
                 if (finalValue) {
@@ -202,6 +200,10 @@ export function useFormInputTrait(inputParams) {
                             else if (item.func) {
                                 // 校验规则是函数的时候
                                 if (!item.func(finalValue)) {
+                                    // 如果提示信息是通过函数动态生成，则执行
+                                    if (item.messageFunc) {
+                                        item.message = item.messageFunc(finalValue);
+                                    }
                                     validResult.push(Promise.resolve(item));
                                     return false;
                                 }
@@ -229,35 +231,45 @@ export function useFormInputTrait(inputParams) {
                 return errorArr;
             },
             getValue() {
-                return syncValue;
+                return valueRef.current;
             },
             name,
             forceUpdate,
             value: syncValue,
             clearValidate,
             label,
+            required,
+            disabled,
+            readOnly,
+            visible,
+            before,
+            after,
         };
         setInnerHandle(result);
         logger.debug('useImperativeHandle', result);
         return result;
     }, [
         name,
-        syncValue,
+        valueRef,
         statusParams.disabled,
         statusParams.readOnly,
         forceUpdate,
+        syncValue,
         clearValidate,
+        label,
         setInnerHandle,
         setSyncedValue,
         disabled,
-        label,
         setDisabled,
         readOnly,
         setReadOnly,
         required,
         rules,
         requiredMsg,
-    ]);
+        visible,
+        before,
+        after,
+    ], inputRef);
     const { data: fieldPermission, error: fieldPermissionError, isLoading: fieldPermissionLoading, } = useSWR(() => {
         return [form.authValue, name];
     }, ([authValue, name]) => {
@@ -336,6 +348,9 @@ export function useFormInputTrait(inputParams) {
         name,
         validateState,
         validateErrorMsg,
+        /**
+         * @deprecated 在Wd组件中应该直接用输入的那个，通过css联动而不是js
+         */
         layout,
         initValidate,
     };

package/dist/web/components/form-location/index.d.ts

@@ -19,19 +19,19 @@ declare const FormLocation: React.ForwardRefExoticComponent<CommonPropsType & im
     required: boolean;
     disabled: boolean;
     layout: "" | "vertical" | "horizontal";
-    drag: boolean;
     zoom: boolean;
-    requiredFlag: boolean;
+    drag: boolean;
+    locationType: 2 | 1;
     labelVisible: boolean;
     showLngLat: boolean;
-    locationType: 2 | 1;
     showMap: boolean;
-    defauleShowLocation: boolean;
-    dataSource: Record<string, unknown>;
     validateStatus: "success" | "error" | "warn";
-    requiredMsg: string;
-    locationRange: 0 | -1 | 100 | 500 | 2000 | 1000 | 300;
+    locationRange: 0 | -1 | 100 | 500 | 1000 | 300 | 2000;
     customRange: number;
+    requiredFlag: boolean;
+    requiredMsg: string;
+    defauleShowLocation: boolean;
+    dataSource: Record<string, unknown>;
 }> & {
     onChange: (v: DataType['value']) => void;
     disabled: boolean;

package/dist/web/components/form-multi-region/index.d.ts

@@ -15,9 +15,9 @@ declare const FormMultiRegion: React.ForwardRefExoticComponent<CommonPropsType &
     disabled: boolean;
     placeholder: string;
     layout: "" | "vertical" | "horizontal";
-    requiredFlag: boolean;
+    regionType: "levelThree" | "levelTwo" | "levelOne";
     labelVisible: boolean;
-    regionType: "levelOne" | "levelTwo" | "levelThree";
+    requiredFlag: boolean;
     requiredMsg: string;
 }> & {
     onChange: (v: DataType['value']) => void;

package/dist/web/components/form-phone/index.d.ts

@@ -16,9 +16,9 @@ declare const FormPhone: React.ForwardRefExoticComponent<CommonPropsType & impor
     placeholder: string;
     layout: "" | "vertical" | "horizontal";
     focus: boolean;
-    requiredFlag: boolean;
     labelVisible: boolean;
     clearable: boolean;
+    requiredFlag: boolean;
     requiredMsg: string;
 }> & {
     onChange: (v: string) => void;

package/dist/web/components/form-radio/index.d.ts

@@ -22,11 +22,11 @@ declare const FormRadio: React.ForwardRefExoticComponent<CommonPropsType & {
         label: string;
         value: string;
     }[];
-    requiredFlag: boolean;
-    labelVisible: boolean;
-    enumName: string;
     tipBlock: string;
+    labelVisible: boolean;
+    requiredFlag: boolean;
     requiredMsg: string;
+    enumName: string;
 }> & import("type-fest").Simplify<import("../../../configs/type-utils").StaticEventsType<readonly [{
     readonly title: "值改变";
     readonly name: "change";

package/dist/web/components/form-region/index.d.ts

@@ -16,8 +16,8 @@ declare const FormRegion: React.ForwardRefExoticComponent<CommonPropsType & impo
     placeholder: string;
     separator: string;
     layout: "" | "vertical" | "horizontal";
-    requiredFlag: boolean;
     labelVisible: boolean;
+    requiredFlag: boolean;
     requiredMsg: string;
 }> & {
     onChange: (v: DataType['value']) => void;

package/dist/web/components/form-rich-text/index.d.ts

@@ -13,12 +13,12 @@ declare const FromRichText: React.ForwardRefExoticComponent<CommonPropsType & im
     required: boolean;
     disabled: boolean;
     layout: "" | "vertical" | "horizontal";
+    readOnly: boolean;
+    acceptTypes: ("image/*" | "image/jpeg" | "image/png" | "image/bmp" | "image/tif" | "image/tiff")[];
     maxSize: number;
-    acceptTypes: ("image/png" | "image/tif" | "image/bmp" | "image/jpeg" | "image/tiff" | "image/*")[];
     requiredFlag: boolean;
-    readOnly: boolean;
-    titleVisible: boolean;
     requiredMsg: string;
+    titleVisible: boolean;
 }> & {
     onChange: (v: string) => void;
     disabled: boolean;

package/dist/web/components/form-select/index.d.ts

@@ -21,14 +21,14 @@ declare const FormSelect: React.ForwardRefExoticComponent<CommonPropsType & impo
         value: string;
     }[];
     dataSourceName: string;
-    requiredFlag: boolean;
-    labelVisible: boolean;
+    tipBlock: string;
     where: any[];
-    enumName: string;
+    labelVisible: boolean;
+    requiredFlag: boolean;
+    requiredMsg: string;
     viewId: string;
+    enumName: string;
     primaryField: string;
-    tipBlock: string;
-    requiredMsg: string;
 }> & {
     onChange: (v: DataType['value']) => void;
     disabled: boolean;
@@ -39,5 +39,11 @@ declare const FormSelect: React.ForwardRefExoticComponent<CommonPropsType & impo
 }, {
     readonly title: "取消";
     readonly name: "cancel";
+}, {
+    readonly title: "输入搜索内容";
+    readonly name: "search";
+    readonly detail: import("@sinclair/typebox").TObject<{
+        value: import("@sinclair/typebox").TString;
+    }>;
 }]>> & React.RefAttributes<any>>;
 export default FormSelect;

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

@@ -5,6 +5,7 @@ import Select from '../form/select';
 import Tips from '../form/tips';
 import { useFormInputTrait } from '../form-input-hooks';
 import { useState } from 'react';
+import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web';
 const FormSelect = React.forwardRef(function FormSelect(props, ref) {
     const { className, id, style, events, required = false, requiredFlag = true, label, labelVisible = true, dataSourceName, enumName, format, placeholder = '请选择', primaryField, range, size = 'full', tipBlock, viewId, where, ...restProps } = props;
     const inputRef = React.useRef(null);
@@ -19,10 +20,20 @@ const FormSelect = React.forwardRef(function FormSelect(props, ref) {
     const selectFields = React.useMemo(() => {
         return [primaryField];
     }, [primaryField]);
+    const [searchValue, setSearchValue] = useState(''); // searchValue properties
+    const eventsRef = useSyncedRef(events);
+    const debouncedTriggerSearchEvent = useDebouncedCallback((value) => {
+        eventsRef.current.search({ value });
+    }, [eventsRef], 300);
+    const onSearchValueInput = React.useCallback((searchValue) => {
+        setSearchValue(searchValue);
+        debouncedTriggerSearchEvent(searchValue);
+    }, []);
     React.useLayoutEffect(() => {
         const result = {
             ...innerHandle,
             selectFields,
+            searchValue,
         };
         if (typeof ref === 'function') {
             ref(result);
@@ -30,11 +41,11 @@ const FormSelect = React.forwardRef(function FormSelect(props, ref) {
         else if (typeof ref === 'object' && ref !== null) {
             ref.current = result;
         }
-    }, [innerHandle, ref, selectFields]);
+    }, [innerHandle, ref, searchValue, selectFields]);
     if (!visible) {
         return null;
     }
-    return (_jsxs(FormItemWrapper, { ...restProps, readOnly: readOnly, disabled: disabled, children: [_jsx(Select, { id: id, style: style, className: className, events: events, name: name, onChange: onChange, disabled: disabled || readOnly, 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, readOnly: readOnly, mode: "selector" }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
+    return (_jsxs(FormItemWrapper, { ...restProps, readOnly: readOnly, disabled: disabled, children: [_jsx(Select, { id: id, style: style, className: className, events: events, name: name, onChange: onChange, onSearchValueInput: onSearchValueInput, disabled: disabled || readOnly, 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, readOnly: readOnly, mode: "selector" }), (validateState === 'error' || validateState === 'warn') && (_jsx(Tips, { tips: validateErrorMsg, type: "warn" }))] }));
 });
 // FormSelect.whyDidYouRender = true;
 export default FormSelect;

package/dist/web/components/form-select-multiple/index.d.ts

@@ -21,13 +21,13 @@ declare const FormSelectMultiple: React.ForwardRefExoticComponent<CommonPropsTyp
         value: string;
     }[];
     dataSourceName: string;
-    requiredFlag: boolean;
+    tipBlock: string;
     labelVisible: boolean;
-    enumName: string;
+    requiredFlag: boolean;
+    requiredMsg: string;
     viewId: string;
+    enumName: string;
     primaryField: string;
-    tipBlock: string;
-    requiredMsg: string;
 }> & {
     onChange: (v: DataType['value']) => void;
     disabled: boolean;

package/dist/web/components/form-switch/index.d.ts

@@ -13,8 +13,8 @@ declare const FormSwitch: React.ForwardRefExoticComponent<CommonPropsType & impo
     required: boolean;
     disabled: boolean;
     layout: "" | "vertical" | "horizontal";
-    requiredFlag: boolean;
     labelVisible: boolean;
+    requiredFlag: boolean;
     requiredMsg: string;
 }> & {
     onChange: (v: DataType['value']) => void;

package/dist/web/components/form-text-area/index.d.ts

@@ -17,9 +17,9 @@ declare const FormTextArea: React.ForwardRefExoticComponent<CommonPropsType & im
     placeholder: string;
     layout: "" | "vertical" | "horizontal";
     focus: boolean;
-    requiredFlag: boolean;
     labelVisible: boolean;
     counterVisible: boolean;
+    requiredFlag: boolean;
     requiredMsg: string;
 }> & {
     onChange: (v: string) => void;

package/dist/web/components/form-time/index.d.ts

@@ -17,9 +17,9 @@ declare const FormTime: React.ForwardRefExoticComponent<CommonPropsType & import
     end: string;
     start: string;
     layout: "" | "vertical" | "horizontal";
-    requiredFlag: boolean;
     labelVisible: boolean;
     clearable: boolean;
+    requiredFlag: boolean;
     requiredMsg: string;
 }> & {
     onChange: (v: DataType['value']) => void;

package/dist/web/components/form-upload-file/index.d.ts

@@ -15,12 +15,12 @@ declare const FormUploadFile: React.ForwardRefExoticComponent<CommonPropsType &
     layout: "" | "vertical" | "horizontal";
     single: boolean;
     maxUploadCount: number;
-    maxSize: number;
-    acceptTypes: string[];
-    requiredFlag: boolean;
     labelVisible: boolean;
     downloadVisible: boolean;
     deleteVisible: boolean;
+    acceptTypes: string[];
+    maxSize: number;
+    requiredFlag: boolean;
     requiredMsg: string;
     disableMultiSwitch: boolean;
 }> & {

package/dist/web/components/form-url/index.d.ts

@@ -17,9 +17,9 @@ declare const FormUrl: React.ForwardRefExoticComponent<CommonPropsType & import(
     placeholder: string;
     layout: "" | "vertical" | "horizontal";
     focus: boolean;
-    requiredFlag: boolean;
     labelVisible: boolean;
     clearable: boolean;
+    requiredFlag: boolean;
     requiredMsg: string;
 }> & {
     onChange: (v: string) => void;

package/dist/web/components/form-user-tree-select/index.d.ts

@@ -16,14 +16,14 @@ declare const FormUserTreeSelect: React.ForwardRefExoticComponent<CommonPropsTyp
     placeholder: string;
     layout: "" | "vertical" | "horizontal";
     multiple: boolean;
-    requiredFlag: boolean;
-    labelVisible: boolean;
     where: any[];
-    confirmValue: string;
-    defaultValueType: "noneUser" | "confirmUser" | "loginUser";
+    labelVisible: boolean;
     secondDisplay: string;
-    requiredMsg: string;
     corpScope: string[];
+    requiredFlag: boolean;
+    requiredMsg: string;
+    confirmValue: string;
+    defaultValueType: "noneUser" | "confirmUser" | "loginUser";
 }> & {
     onChange: (v: DataType['value']) => void;
     disabled: boolean;