@canlooks/can-ui 0.0.55 → 0.0.57

package/dist/cjs/components/curd/curdDialog.js

@@ -39,8 +39,7 @@ exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props })
     (0, react_2.useImperativeHandle)(ref, () => ({
         open(row, initialFormValue) {
             innerFormRef.current?.resetForm();
-            suppressTransform.current = !!initialFormValue;
-            initialFormValue && innerFormRef.current?.setFormValue(initialFormValue);
+            handlingFormValue.current = initialFormValue;
             setActiveRow(row);
             setInnerOpen(true);
             const { promise } = openResolvers.current = Promise.withResolvers();
@@ -64,13 +63,21 @@ exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props })
      * 表单项
      */
     const [activeRow, setActiveRow] = (0, react_2.useState)();
-    const suppressTransform = (0, react_2.useRef)(false);
+    const handlingFormValue = (0, react_2.useRef)(void 0);
     const [transforming, setFormValue] = (0, utils_1.useLoading)(async (row) => {
         const formValue = rowToForm && row ? await rowToForm(row) : row;
         formValue && innerFormRef.current?.setFormValue(formValue);
     });
     (0, react_2.useEffect)(() => {
-        innerOpen.current && !suppressTransform.current && setFormValue(activeRow);
+        if (!innerOpen.current) {
+            return;
+        }
+        if (handlingFormValue.current) {
+            innerFormRef.current?.setFormValue(handlingFormValue.current);
+        }
+        else {
+            setFormValue(activeRow);
+        }
     }, [innerOpen.current, activeRow]);
     const renderedFormItems = (0, react_2.useMemo)(() => {
         return (0, utils_1.columnsToFormItem)(columns, activeRow)?.map(col => {

package/dist/cjs/components/form/form.js

@@ -81,6 +81,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             for (const [, item] of itemsContainer.current) {
                 item.reset(newValue);
             }
+            console.log('after', newValue);
             setFormValue(newValue);
         },
         resetField: field => {

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

@@ -28,7 +28,11 @@ export interface FormItemOwnProps<I = any> extends FormSharedProps {
     error?: boolean;
     helperText?: ReactNode;
     dependencies?: FieldPath[];
-    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps) => ReactNode);
+    /**
+     * 若`children`为`function`类型时，第三个参数`key`主要用于强制重渲染，
+     * 在没有{@link initialValue}时非常有用
+     */
+    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key?: string) => ReactNode);
     noStyle?: boolean;
 }
 export type FormItemProps<I = any, C extends ElementType = 'div'> = MergeProps<FormItemOwnProps<I>, DescriptionItemProps<C>>;

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

@@ -21,6 +21,10 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
             return (0, utils_1.queryDeep)(formValue, field);
         }
     }, [formValue, field]);
+    const [randomKey] = (0, utils_1.useDerivedState)(prev => {
+        // fieldValue变为undefined时，需要更新key以强制重渲染组件
+        return typeof fieldValue === 'undefined' ? (0, utils_1.getShortID)() : prev;
+    }, [fieldValue]);
     /**
      * --------------------------------------------------------------------
      * 校验
@@ -135,11 +139,12 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
                 : {}, {
                 ...props.size && { size: props.size },
                 ...innerError.current ? { color: 'error' } : {}
-            });
+            }, randomKey.current);
         }
         if ((0, react_1.isValidElement)(children)) {
             const { props: childProps } = children;
             return (0, react_1.cloneElement)(children, {
+                key: randomKey.current,
                 ...typeof field !== 'undefined' && {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: childProps.checked ?? fieldValue }

package/dist/esm/components/curd/curdDialog.js

@@ -36,8 +36,7 @@ export const CurdDialog = memo(({ ref, onFinish, curdProps, ...props }) => {
     useImperativeHandle(ref, () => ({
         open(row, initialFormValue) {
             innerFormRef.current?.resetForm();
-            suppressTransform.current = !!initialFormValue;
-            initialFormValue && innerFormRef.current?.setFormValue(initialFormValue);
+            handlingFormValue.current = initialFormValue;
             setActiveRow(row);
             setInnerOpen(true);
             const { promise } = openResolvers.current = Promise.withResolvers();
@@ -61,13 +60,21 @@ export const CurdDialog = memo(({ ref, onFinish, curdProps, ...props }) => {
      * 表单项
      */
     const [activeRow, setActiveRow] = useState();
-    const suppressTransform = useRef(false);
+    const handlingFormValue = useRef(void 0);
     const [transforming, setFormValue] = useLoading(async (row) => {
         const formValue = rowToForm && row ? await rowToForm(row) : row;
         formValue && innerFormRef.current?.setFormValue(formValue);
     });
     useEffect(() => {
-        innerOpen.current && !suppressTransform.current && setFormValue(activeRow);
+        if (!innerOpen.current) {
+            return;
+        }
+        if (handlingFormValue.current) {
+            innerFormRef.current?.setFormValue(handlingFormValue.current);
+        }
+        else {
+            setFormValue(activeRow);
+        }
     }, [innerOpen.current, activeRow]);
     const renderedFormItems = useMemo(() => {
         return columnsToFormItem(columns, activeRow)?.map(col => {

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

@@ -77,6 +77,7 @@ inline, columnCount = 1, gap, columnGap, rowGap, ...props }) => {
             for (const [, item] of itemsContainer.current) {
                 item.reset(newValue);
             }
+            console.log('after', newValue);
             setFormValue(newValue);
         },
         resetField: field => {

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

@@ -28,7 +28,11 @@ export interface FormItemOwnProps<I = any> extends FormSharedProps {
     error?: boolean;
     helperText?: ReactNode;
     dependencies?: FieldPath[];
-    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps) => ReactNode);
+    /**
+     * 若`children`为`function`类型时，第三个参数`key`主要用于强制重渲染，
+     * 在没有{@link initialValue}时非常有用
+     */
+    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps, key?: string) => ReactNode);
     noStyle?: boolean;
 }
 export type FormItemProps<I = any, C extends ElementType = 'div'> = MergeProps<FormItemOwnProps<I>, DescriptionItemProps<C>>;

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

@@ -1,7 +1,7 @@
 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 } from '../../utils';
+import { clsx, getValueOnChange, queryDeep, stringifyField, useDerivedState, toArray, getShortID } from '../../utils';
 import { DescriptionItem } from '../descriptions';
 import { classes } from './form.style';
 import { Collapse } from '../transitionBase';
@@ -18,6 +18,10 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
             return queryDeep(formValue, field);
         }
     }, [formValue, field]);
+    const [randomKey] = useDerivedState(prev => {
+        // fieldValue变为undefined时，需要更新key以强制重渲染组件
+        return typeof fieldValue === 'undefined' ? getShortID() : prev;
+    }, [fieldValue]);
     /**
      * --------------------------------------------------------------------
      * 校验
@@ -132,11 +136,12 @@ export const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rul
                 : {}, {
                 ...props.size && { size: props.size },
                 ...innerError.current ? { color: 'error' } : {}
-            });
+            }, randomKey.current);
         }
         if (isValidElement(children)) {
             const { props: childProps } = children;
             return cloneElement(children, {
+                key: randomKey.current,
                 ...typeof field !== 'undefined' && {
                     ...typeof fieldValue === 'boolean'
                         ? { checked: childProps.checked ?? fieldValue }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",