@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
 import { classes, style } from './dateTimeRangePicker.style';
-import { clsx, useControlled } from '../../utils';
+import { clsx, mergeComponentProps, useControlled } from '../../utils';
 import { DateTimePicker } from '../dateTimePicker';
 export const DateTimeRangePicker = memo(({ startPickerProps, endPickerProps, format = 'YYYY-MM-DD', defaultValue, value, onChange, defaultOpenPicker = 'closed', openPicker, onOpenPickerChange, autoClose = !/[Hms]/.test(format), separator, min, max, disabledDates, disabledHours, disabledMinutes, disabledSeconds, 
 // 以下属性除autoFocus外，原样转发，autoFocus只对开始选择器生效
@@ -9,29 +9,51 @@ variant, size, color, disabled, readOnly, autoFocus, ...props }) => {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpenPicker, openPicker, onOpenPickerChange);
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const endPickerInputRef = useRef(null);
-    const commonProps = {
-        format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
-        variant, size, color, disabled, readOnly
-    };
     const showTimer = /[Hms]/.test(format);
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [_jsx(DateTimePicker, { ...commonProps, autoFocus: autoFocus, autoClose: false, placeholder: showTimer ? '开始时间' : '开始日期', max: innerValue.current?.[1] || void 0, open: innerOpen.current === 'start', ...startPickerProps, onOpenChange: open => {
-                    startPickerProps?.onOpenChange?.(open);
-                    setInnerOpen(open ? 'start' : 'closed');
-                }, value: innerValue.current?.[0], onChange: startValue => {
-                    startPickerProps?.onChange?.(startValue);
-                    setInnerValue(o => [startValue, o?.[1] || null]);
-                    if (startValue && !showTimer) {
-                        endPickerInputRef.current.focus();
-                        innerOpen.current === 'start' && setInnerOpen('end');
+    const renderPickerItem = (type) => {
+        const commonProps = {
+            format, disabledDates, disabledHours, disabledMinutes, disabledSeconds,
+            variant, size, color, disabled, readOnly
+        };
+        return (_jsx(DateTimePicker, { ...mergeComponentProps(commonProps, type === 'start'
+                ? {
+                    autoFocus,
+                    autoClose: false,
+                    placeholder: showTimer ? '开始时间' : '开始日期',
+                    max: innerValue.current?.[1] || void 0,
+                    open: innerOpen.current === 'start'
+                }
+                : {
+                    autoClose,
+                    placeholder: showTimer ? '结束时间' : '结束日期',
+                    min: innerValue.current?.[0] || void 0,
+                    open: innerOpen.current === 'end'
+                }, type === 'start'
+                ? startPickerProps
+                : endPickerProps, type === 'start'
+                ? {
+                    onOpenChange: open => setInnerOpen(open ? 'start' : 'closed'),
+                    value: innerValue.current?.[0],
+                    onChange: value => {
+                        setInnerValue(o => [value, o?.[1] || null]);
+                        if (value && !showTimer) {
+                            endPickerInputRef.current.focus();
+                            innerOpen.current === 'start' && setInnerOpen('end');
+                        }
+                    }
+                }
+                : {
+                    inputProps: { ref: endPickerInputRef },
+                    onOpenChange: open => setInnerOpen(open ? 'end' : 'closed'),
+                    value: innerValue.current?.[1],
+                    onChange: value => {
+                        setInnerValue(o => [o?.[0] || null, value]);
+                    },
+                    popperProps: {
+                        ...endPickerProps?.popperProps,
+                        placement: 'bottomRight'
                     }
-                } }), separator ?? _jsx("span", { children: "-" }), _jsx(DateTimePicker, { ...commonProps, autoClose: autoClose, placeholder: showTimer ? '结束时间' : '结束日期', min: innerValue.current?.[0] || void 0, open: innerOpen.current === 'end', ...endPickerProps, inputProps: { ref: endPickerInputRef }, onOpenChange: open => {
-                    startPickerProps?.onOpenChange?.(open);
-                    setInnerOpen(open ? 'end' : 'closed');
-                }, value: innerValue.current?.[1], onChange: endValue => {
-                    endPickerProps?.onChange?.(endValue);
-                    setInnerValue(o => [o?.[0] || null, endValue]);
-                }, popperProps: {
-                    ...endPickerProps?.popperProps,
-                    placement: 'bottomRight'
-                } })] }));
+                }) }));
+    };
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), children: [renderPickerItem('start'), separator ?? _jsx("span", { children: "-" }), renderPickerItem('end')] }));
 });

package/dist/esm/components/descriptions/descriptions.js

@@ -11,6 +11,8 @@ export function useDescriptionsContext() {
 }
 const DescriptionsContext = createContext({});
 export const Descriptions = memo(({ size, labelWidth, colon = ':', labelPlacement = 'left', disableMargin, disablePadding, items, itemComponent: ItemComponent = DescriptionItem, variant = 'grid', columnCount = 3, ...props }) => {
+    const theme = useTheme();
+    size ??= theme.size;
     const contextValue = useMemo(() => ({
         size, labelWidth, colon, labelPlacement, disableMargin, disablePadding, variant
     }), [

package/dist/esm/components/descriptions/descriptions.style.d.ts

@@ -2,8 +2,8 @@ export declare const classes: {
     col: string;
     label: string;
     content: string;
-    vertical: string;
     colon: string;
+    vertical: string;
     item: string;
     labelCol: string;
     contentCol: string;

package/dist/esm/components/dialog/dialog.d.ts

@@ -33,4 +33,4 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'prefix'> {
     defaultOpen?: boolean;
     onClose?(closeReason: DialogCloseReason): void;
 }
-export declare function Dialog({ ref, icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Dialog({ icon, title, footer, prefix, suffix, width, minWidth, maxWidth, showClose, closeProps, showConfirm, confirmText, confirmProps, onConfirm, confirmLoading, showCancel, cancelText, cancelProps, onCancel, draggable, maskClosable, escapeClosable, defaultOpen, open, onClose, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/dialog/dialog.js

@@ -7,7 +7,7 @@ import { Button } from '../button';
 import { Draggable } from '../draggable';
 import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
-export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
+export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }) {
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open);
     const close = (closeReason) => {
         if (!innerLoading.current || closeReason === 'confirmed') {
@@ -78,7 +78,7 @@ export function Dialog({ ref, icon, title, footer, prefix, suffix, width = 420,
         }
         return footer;
     };
-    return (_jsx(Modal, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+    return (_jsx(Modal, { ...props, ref: cloneRef(overlayRef, props.ref), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
                         _jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.content, children: [!!(title || showClose) &&
                                 _jsxs("div", { className: classes.titleRow, ...handleProps, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
                                             _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: clsx(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: [!!prefix &&

package/dist/esm/components/dialog/dialog.style.d.ts

@@ -2,11 +2,11 @@ export declare const classes: {
     body: string;
     footer: string;
     title: string;
-    icon: string;
     content: string;
+    close: string;
     prefix: string;
+    icon: string;
     suffix: string;
-    close: string;
     card: string;
     titleRow: string;
     bodyWrap: string;

package/dist/esm/components/draggable/draggable.d.ts

@@ -1,14 +1,24 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode, Ref } from 'react';
 import { DraggableGestureOptions, HandleProps } from '../../utils';
 import { DefineElement } from '../../types';
 export type DraggableTargetProps = {
+    onTransitionEnd(e: React.TransitionEvent): void;
     style: {
         translate: string;
     };
+    'data-dragging': 'true' | 'false';
+};
+export type DraggableRef = {
+    restore(transition?: boolean): void;
 };
 export interface DraggableProps extends DraggableGestureOptions {
+    ref?: Ref<DraggableRef>;
     translateLimit?(targetTranslate: [number, number]): [number, number];
+    /** 拖拽结束后是否恢复原来的位置，默认为`false` */
+    restoreOnDragEnd?: boolean;
+    /** 恢复时是否播放过度动画，默认为`true` */
+    restoreTransition?: boolean;
     container?: DefineElement;
     children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps) => ReactNode);
 }
-export declare function Draggable({ translateLimit, container, children, ...draggableOptions }: DraggableProps): ReactNode;
+export declare function Draggable({ ref, translateLimit, restoreOnDragEnd, restoreTransition, container, children, ...draggableOptions }: DraggableProps): React.ReactNode;

package/dist/esm/components/draggable/draggable.js

@@ -1,12 +1,26 @@
-import { cloneElement, isValidElement, useMemo, useState } from 'react';
+import { cloneElement, isValidElement, useMemo, useState, useImperativeHandle } from 'react';
 import { range, useDraggable } from '../../utils';
-export function Draggable({ translateLimit, container, children, ...draggableOptions }) {
+import { useTheme } from '../theme';
+export function Draggable({ ref, translateLimit, restoreOnDragEnd, restoreTransition = true, container, children, ...draggableOptions }) {
+    useImperativeHandle(ref, () => ({
+        restore
+    }));
+    const [transiting, setTransiting] = useState(false);
+    const restore = (transition = restoreTransition) => {
+        transition && setTransiting(true);
+        setTranslate([0, 0]);
+    };
+    const onTransitionEnd = () => {
+        setTransiting(false);
+    };
     const [translate, setTranslate] = useState([0, 0]);
+    const [isDragging, setIsDragging] = useState(false);
     const props = children.props;
     const draggableHandles = useDraggable({
         ...draggableOptions,
         onDragStart(e) {
             draggableOptions.onDragStart?.(e);
+            setIsDragging(true);
             return [...translate];
         },
         onDrag(info, e) {
@@ -27,20 +41,36 @@ export function Draggable({ translateLimit, container, children, ...draggableOpt
             }
             setTranslate([newX, newY]);
         },
+        onDragEnd(info) {
+            draggableOptions.onDragEnd?.(info);
+            setIsDragging(false);
+            restoreOnDragEnd && restore();
+        },
         onClick: props?.onClick
     });
+    const theme = useTheme();
     const style = useMemo(() => ({
         translate: `${translate[0]}px ${translate[1]}px`,
+        ...transiting && { transition: `translate .3s ${theme.easing.bounce}` },
         ...props?.style
-    }), [translate, props?.style]);
+    }), [translate, transiting, theme, props?.style]);
     if (isValidElement(children)) {
         return cloneElement(children, {
             style,
-            ...draggableHandles
+            'data-dragging': String(isDragging),
+            onTransitionEnd,
+            ...draggableHandles,
         });
     }
     if (typeof children === 'function') {
-        return children({ style: { translate: `${translate[0]}px ${translate[1]}px` } }, draggableHandles);
+        return children({
+            style: {
+                translate: `${translate[0]}px ${translate[1]}px`,
+                ...transiting && { transition: `translate .3s ${theme.easing.bounce}` },
+            },
+            'data-dragging': String(isDragging),
+            onTransitionEnd
+        }, draggableHandles);
     }
     return children;
 }

package/dist/esm/components/flex/flex.d.ts

@@ -1,6 +1,7 @@
-import { CSSProperties } from 'react';
-import { TransportStyleProps } from '../transportStyle';
-export interface FlexProps extends TransportStyleProps {
+import { CSSProperties, ElementType } from 'react';
+import { TransportStyleOwnProps } from '../transportStyle';
+import { OverridableComponent, OverridableProps } from '../../types';
+interface FlexOwnProps extends TransportStyleOwnProps {
     inline?: boolean;
     /** 排列方式，默认为`row` */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -12,4 +13,6 @@ export interface FlexProps extends TransportStyleProps {
     /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
     compact?: boolean;
 }
-export declare function Flex({ inline, direction, wrap, gap, columnGap, rowGap, compact, ...props }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type FlexProps<C extends ElementType = 'div'> = OverridableProps<FlexOwnProps, C>;
+export declare const Flex: OverridableComponent<FlexOwnProps>;
+export {};

package/dist/esm/components/flex/flex.js

@@ -3,7 +3,7 @@ import { Children, cloneElement, isValidElement } from 'react';
 import { classes } from './flex.style';
 import { clsx, filterProperties } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
+export const Flex = (({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) => {
     const renderChildren = () => {
         if (!compact) {
             return props.children;
@@ -26,4 +26,4 @@ export function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowG
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
         }), children: renderChildren() }));
-}
+});

package/dist/esm/components/form/form.d.ts

@@ -14,7 +14,7 @@ export type FormSharedProps = {
     size?: Size;
 };
 interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps, DescriptionsSharedProps, GridOwnProps {
-    ref?: Ref<FormRef<V> | null>;
+    ref?: Ref<FormRef<V>>;
     /** 最外层元素的ref，默认{@link ref}属性已经被{@link FormRef}取代 */
     wrapperRef?: Ref<HTMLFormElement>;
     initialValue?: V;
@@ -24,14 +24,19 @@ interface FormOwnProps<V extends FormValue = FormValue> extends FormSharedProps,
     descriptionsProps?: DescriptionsProps;
 }
 export type FormProps<V extends FormValue = FormValue, C extends ElementType = 'form'> = OverridableProps<FormOwnProps<V>, C>;
-interface FormContext<V extends FormValue> extends FormSharedProps {
-    formValue?: V;
-    setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
+type FormContext<V extends FormValue> = {
+    inForm?: boolean;
     itemsContainer?: Map<string, FormItemRef>;
     formRef?: RefObject<FormRef<V> | null>;
-}
+};
 declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
+type FormValueContextType<V extends FormValue> = {
+    formValue?: V;
+    setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
+};
+export declare function useFormValueContext<V extends FormValue>(): FormValueContextType<V>;
+export declare function useFormStyleContext(): FormSharedProps;
 export type FormRef<V extends FormValue = FormValue> = {
     /** 存在校验不通过的字段时会得到`null` */
     submit(): Promise<V | null>;

package/dist/esm/components/form/form.js

@@ -9,11 +9,43 @@ const FormContext = createContext({});
 export function useFormContext() {
     return useContext(FormContext);
 }
-export const Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark = '*', variant = 'grid', 
+const FormValueContext = createContext({});
+export function useFormValueContext() {
+    return useContext(FormValueContext);
+}
+const FormStyleContext = createContext({});
+export function useFormStyleContext() {
+    return useContext(FormStyleContext);
+}
+export const Form = (({ component: Component = 'form', ref, wrapperRef, initialValue, onChange, onFinish, items, descriptionsProps, requiredMark, variant, 
 // 以下属性从DescriptionsSharedProps继承
 labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, 
 // 以下属性从GridOwnProps继承
 inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
+    const { inForm, formRef: parentFormRef } = useFormContext();
+    const renderChildren = () => {
+        return variant === 'plain'
+            ? props.children
+            : _jsx(Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, variant: variant, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, items: items, itemComponent: FormItem, children: props.children });
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 嵌套在另个一个form中，值取最顶层的form，当前组件仅做样式处理
+     */
+    if (inForm) {
+        useImperativeHandle(ref, () => parentFormRef.current);
+        const context = useFormStyleContext();
+        requiredMark ??= context.requiredMark ?? '*';
+        variant ??= context.variant ?? 'grid';
+        size ??= context.size;
+        return (_jsx(FormStyleContext, { value: useMemo(() => ({
+                requiredMark, variant, size
+            }), [
+                requiredMark, variant, size
+            ]), children: renderChildren() }));
+    }
+    requiredMark ??= '*';
+    variant ??= 'grid';
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -42,8 +74,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
         e?.preventDefault();
         try {
             await Promise.all([...itemsContainer.current].map(async ([, item]) => {
-                const isValid = await item.validate();
-                return isValid ? void 0 : Promise.reject();
+                return await item.validate() || Promise.reject();
             }));
             onFinish?.(formValue.current);
             return formValue.current;
@@ -80,7 +111,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             setFormValue(newValue);
         },
         resetField: field => {
-            itemsContainer.current.get(stringifyField(field))?.reset();
+            itemsContainer.current.get(stringifyField(field))?.reset(formValue.current, initialValue);
             setFormValue(o => ({ ...o }));
         },
         isFormTouched: () => [...itemsContainer.current].some(([, item]) => item.isTouched),
@@ -88,12 +119,15 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
     };
     useImperativeHandle(ref, () => formRef.current);
     return (_jsx(Component, { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), onSubmit: submitHandler, children: _jsx(FormContext, { value: useMemo(() => ({
-                requiredMark, variant, size,
-                formValue: formValue.current, setFieldValue,
+                inForm: true,
                 itemsContainer: itemsContainer.current, formRef
-            }), [requiredMark, variant, size, formValue.current]), children: variant === 'plain'
-                ? props.children
-                : _jsx(Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, items: items, variant: variant, itemComponent: FormItem, inline: inline, columnCount: columnCount, gap: gap, columnGap: columnGap, rowGap: rowGap, children: props.children }) }) }));
+            }), []), children: _jsx(FormStyleContext, { value: useMemo(() => ({
+                    requiredMark, variant, size
+                }), [
+                    requiredMark, variant, size
+                ]), children: _jsx(FormValueContext, { value: useMemo(() => ({
+                        formValue: formValue.current, setFieldValue
+                    }), [formValue.current]), children: renderChildren() }) }) }) }));
 });
 Form.Item = FormItem;
 Form.Relatable = FormRelatable;

package/dist/esm/components/form/formItem.d.ts

@@ -3,11 +3,11 @@ import { FormRef, FormSharedProps, FormValue } from './form';
 import { ColorPropsValue, MergeProps, Size } from '../../types';
 import { FieldPath } from '../../utils';
 import { DescriptionItemProps } from '../descriptions';
-export type FormItemRules<I = any> = {
+export type FormItemRules<I = any, R = FormRef> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formRef: FormRef | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formRef: R | null): any;
 };
 export type FieldProps<I = any> = {
     checked?: boolean;
@@ -18,6 +18,7 @@ export type StyleProps = {
     size?: Size;
     color?: ColorPropsValue;
 };
+export type FormItemChildren<T extends ReactNode = ReactNode, I = any> = T | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key: string) => T);
 export interface FormItemOwnProps<I = any> extends FormSharedProps {
     ref?: Ref<FormItemRef>;
     wrapperRef?: Ref<HTMLDivElement>;
@@ -29,11 +30,13 @@ export interface FormItemOwnProps<I = any> extends FormSharedProps {
     helperText?: ReactNode;
     dependencies?: FieldPath[];
     /**
-     * 若`children`为`function`类型时，第三个参数`key`主要用于强制重渲染，
-     * 在没有{@link initialValue}时非常有用
+     * 若`children`为`function`类型时，
+     * 第三个参数`key`主要用于强制重渲染，在没有{@link initialValue}时非常有用
      */
-    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key?: string) => ReactNode);
+    children?: FormItemChildren;
     noStyle?: boolean;
+    /** @private 内部使用，强制指定字段值 */
+    _fieldValue?: I;
 }
 export type FormItemProps<I = any, C extends ElementType = 'div'> = MergeProps<FormItemOwnProps<I>, DescriptionItemProps<C>>;
 export type FieldError = null | {
@@ -42,7 +45,9 @@ export type FieldError = null | {
 export type FormItemRef = {
     validate(): Promise<boolean>;
     error: FieldError;
-    reset(initialValues?: FormValue): void;
-    isTouched: boolean;
+    reset(): void;
+    /** @private */
+    reset(currentFormValue: FormValue, initialFormValue?: FormValue): void;
+    isTouched(): boolean;
 };
 export declare const FormItem: <I = any, C extends ElementType = 'div'>(props: FormItemProps<I, C>) => ReactNode;

package/dist/esm/components/form/formItem.js

@@ -1,50 +1,58 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { useFormContext } from './form';
-import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID } from '../../utils';
+import { useFormContext, useFormStyleContext, useFormValueContext } from './form';
+import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID, isUnset } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
-export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, ...props }) => {
-    const { formValue, setFieldValue, itemsContainer, formRef, ...context } = useFormContext();
+export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, variant, size, _fieldValue, ...props }) => {
+    const context = useFormStyleContext();
     requiredMark ??= context.requiredMark ?? '*';
     variant ??= context.variant ?? 'grid';
     size ??= context.size;
+    const { formValue, setFieldValue } = useFormValueContext();
+    const { itemsContainer, formRef } = useFormContext();
     const shouldValidate = useRef(false);
+    const isTouched = useRef(false);
     const [innerError, setInnerError] = useDerivedState(error);
+    const [innerHelperText, setInnerHelperText] = useDerivedState(helperText);
+    const stringField = !isUnset(field) ? stringifyField(field) : void 0;
     /**
      * --------------------------------------------------------------------
      * 重置与初始化
      */
-    const isTouched = useRef(false);
-    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
-    const reset = (value = formValue) => {
+    const reset = (currentFormValue = formValue, initialFormValue) => {
+        // formRef的resetForm()方法会传入新的formValue，其他情况使用当前的formValue
         shouldValidate.current = isTouched.current = false;
-        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
-            queryDeep(value, field, () => initialValue);
+        if (!isUnset(field) && currentFormValue) {
+            if (typeof initialValue !== 'undefined') {
+                queryDeep(currentFormValue, field, () => initialValue);
+            }
+            else if (typeof initialFormValue !== 'undefined') {
+                const initialFieldValue = queryDeep(initialFormValue, field);
+                queryDeep(currentFormValue, field, initialFieldValue);
+            }
         }
-        innerError.current && setInnerError(false);
+        setInnerError(false);
     };
-    useMemo(reset, []);
+    useMemo(reset, [stringField]);
     /**
      * --------------------------------------------------------------------
      * 字段值
      */
     const fieldValue = useMemo(() => {
-        if (typeof field !== 'undefined' && formValue) {
+        if (typeof _fieldValue !== 'undefined') {
+            return _fieldValue;
+        }
+        if (!isUnset(field) && formValue) {
             return queryDeep(formValue, field);
         }
-    }, [formValue, field]);
-    const [randomKey] = useDerivedState(prev => {
-        // fieldValue变为undefined时，需要更新key以强制重渲染组件
-        return typeof fieldValue === 'undefined' ? getShortID() : prev;
-    }, [fieldValue]);
+    }, [formValue, field, _fieldValue]);
     /**
      * --------------------------------------------------------------------
      * 校验
      */
     const rulesArr = toArray(rules);
-    const [innerHelperText, setInnerHelperText] = useDerivedState(helperText);
     const validate = async () => {
         if (error) {
             return false;
@@ -53,7 +61,7 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
         const promises = [];
         let invalid = false;
         rulesArr?.some(r => {
-            if ((r.required && (typeof fieldValue === 'undefined' || fieldValue === null || fieldValue === '')) ||
+            if ((r.required && (isUnset(fieldValue) || fieldValue === '')) ||
                 (r.pattern && typeof fieldValue === 'string' && !r.pattern.test(fieldValue))) {
                 setInnerError(true);
                 setInnerHelperText(r.message || defaultMessage);
@@ -83,36 +91,38 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     };
     /**
      * --------------------------------------------------------------------
-     * 依赖更新自动校验
+     * 自动校验与依赖更新
      */
     const dependencyValues = useMemo(() => {
         return formValue && dependencies?.map(d => queryDeep(formValue, d));
     }, [formValue, ...dependencies || []]);
     useMemo(() => {
-        // 跳过首次渲染
-        shouldValidate.current && validate().then();
-        shouldValidate.current = true;
+        if (!shouldValidate.current) {
+            // 跳过首次渲染
+            shouldValidate.current = true;
+            return;
+        }
+        validate().then();
     }, [fieldValue, ...dependencyValues || []]);
     /**
      * --------------------------------------------------------------------
      * 挂载formItemRef
      */
-    const formItemRef = useRef(null);
+    const formItemRef = useRef(void 0);
     formItemRef.current = {
         validate,
         reset,
         error: innerError.current ? { message: innerHelperText.current } : null,
-        isTouched: isTouched.current
+        isTouched: () => isTouched.current
     };
     useImperativeHandle(ref, () => formItemRef.current);
     useEffect(() => {
-        if (typeof field === 'undefined' || !itemsContainer) {
+        if (typeof stringField === 'undefined' || !itemsContainer) {
             return;
         }
-        const fieldStr = stringifyField(field);
-        itemsContainer.set(fieldStr, formItemRef.current);
+        itemsContainer.set(stringField, formItemRef.current);
         return () => {
-            itemsContainer.delete(fieldStr);
+            itemsContainer.delete(stringField);
         };
     });
     /**
@@ -122,9 +132,13 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
     const isRequired = useMemo(() => {
         return required ?? rulesArr?.some(r => r.required);
     }, [rules, required]);
+    const [randomKey] = useDerivedState(prev => {
+        // fieldValue变为undefined时，需要更新key以强制重渲染组件
+        return !prev || typeof fieldValue === 'undefined' ? getShortID() : prev;
+    }, [fieldValue]);
     const renderedChildren = useMemo(() => {
         if (typeof children === 'function') {
-            return children(typeof field !== 'undefined'
+            return children(!isUnset(field)
                 ? {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: fieldValue }
@@ -136,14 +150,14 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
                 }
                 : {}, {
                 ...size && { size },
-                ...innerError.current ? { color: 'error' } : {}
+                ...innerError.current && { color: 'error' }
             }, randomKey.current);
         }
         if (isValidElement(children)) {
             const { props: childProps } = children;
             return cloneElement(children, {
-                key: randomKey.current,
-                ...typeof field !== 'undefined' && {
+                key: children.key ?? randomKey.current,
+                ...!isUnset(field) && {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: childProps.checked ?? fieldValue }
                         : { value: childProps.value ?? fieldValue },
@@ -158,11 +172,11 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
             });
         }
         return children;
-    }, [children, innerError.current, field, size, randomKey.current, fieldValue]);
+    }, [children, fieldValue, size, innerError.current, randomKey.current]);
     if (noStyle || variant === 'plain') {
         return renderedChildren;
     }
-    return (_jsxs(DescriptionItem, { flex: void 0, ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: !!label &&
+    return (_jsxs(DescriptionItem, { ...props, ref: wrapperRef, className: clsx(classes.item, props.className), label: !!label &&
             _jsxs(_Fragment, { children: [isRequired && !!requiredMark &&
                         _jsx("span", { className: classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, _jsx(Collapse, { in: innerError.current || !!helperText, children: _jsx("div", { className: classes.helperText, children: innerHelperText.current }) })] }));
 };