@canlooks/can-ui 0.0.54 → 0.0.55

package/dist/cjs/components/curd/curd.d.ts

@@ -25,7 +25,7 @@ export type LoadRowsReturn<R extends RowType> = {
 };
 type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
-    openCreateDialog(initialValue?: R): Promise<F> | undefined;
+    openCreateDialog(initialValue?: F): Promise<F> | undefined;
     selectSingle(): Promise<R> | undefined;
     selectMultiple(selected?: Id[]): Promise<Id[]> | undefined;
 };
@@ -88,7 +88,7 @@ export interface CurdBaseProps<R extends RowType, F extends FormValue> extends O
     onUpdate?(formValue: F, row: R): any;
     onDelete?(row: R): any;
     /** 行数据转换为表单值的方法，若不指定，行数据会直接填入表单 */
-    postData?(row: R): F | Promise<F>;
+    rowToForm?(row: R): F | Promise<F>;
     dialogProps?: CurdDialogProps<R, F>;
     formProps?: FormProps<F>;
     formRef?: Ref<FormRef<F>>;

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

@@ -23,14 +23,14 @@ const faPenToSquare_1 = require("@fortawesome/free-regular-svg-icons/faPenToSqua
 const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
 exports.Curd = (0, react_1.memo)((props) => {
-    const { ref, wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, postData, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
      */
     (0, react_1.useImperativeHandle)(ref, () => ({
         openCreateDialog(initialValue) {
-            return curdDialogRef.current?.open(initialValue);
+            return curdDialogRef.current?.open(void 0, initialValue);
         },
         selectSingle() {
             return curdDialogRef.current?.selectSingle();

package/dist/cjs/components/curd/curdDialog.d.ts

@@ -5,7 +5,7 @@ import { FormValue } from '../form';
 import { CurdBaseProps } from './curd';
 import { Id } from '../../types';
 export type CurdDialogRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
-    open(activeRow?: R): Promise<F>;
+    open(activeRow?: R, initialFormValue?: F): Promise<F>;
     selectSingle(): Promise<R>;
     selectMultiple(selected?: Id[]): Promise<Id[]>;
 };

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

@@ -14,10 +14,8 @@ const curd_style_1 = require("./curd.style");
 const pickerDialog_1 = require("../pickerDialog");
 const __1 = require("../..");
 const faCopy_1 = require("@fortawesome/free-regular-svg-icons/faCopy");
-exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, 
-// 继承来的属性
-curdProps, ...props }) => {
-    const { columns, postData, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
+exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, curdProps, ...props }) => {
+    const { columns, rowToForm, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
     /**
      * ----------------------------------------------------------------
      * ref与promise部分
@@ -39,10 +37,12 @@ curdProps, ...props }) => {
     const [selectMode, setSelectMode] = (0, react_2.useState)('single');
     const selectResolvers = (0, react_2.useRef)(void 0);
     (0, react_2.useImperativeHandle)(ref, () => ({
-        open(row) {
+        open(row, initialFormValue) {
             innerFormRef.current?.resetForm();
-            setInnerOpen(true);
+            suppressTransform.current = !!initialFormValue;
+            initialFormValue && innerFormRef.current?.setFormValue(initialFormValue);
             setActiveRow(row);
+            setInnerOpen(true);
             const { promise } = openResolvers.current = Promise.withResolvers();
             return promise;
         },
@@ -64,13 +64,14 @@ curdProps, ...props }) => {
      * 表单项
      */
     const [activeRow, setActiveRow] = (0, react_2.useState)();
+    const suppressTransform = (0, react_2.useRef)(false);
     const [transforming, setFormValue] = (0, utils_1.useLoading)(async (row) => {
-        const formValue = postData && row ? await postData(row) : row;
+        const formValue = rowToForm && row ? await rowToForm(row) : row;
         formValue && innerFormRef.current?.setFormValue(formValue);
     });
     (0, react_2.useEffect)(() => {
-        innerOpen.current && setFormValue(activeRow);
-    }, [innerOpen.current]); // 依赖innerOpen而不依赖activeRow的原因是，有可能连续两次打开的activeRow是相同的
+        innerOpen.current && !suppressTransform.current && setFormValue(activeRow);
+    }, [innerOpen.current, activeRow]);
     const renderedFormItems = (0, react_2.useMemo)(() => {
         return (0, utils_1.columnsToFormItem)(columns, activeRow)?.map(col => {
             if ((0, react_2.isValidElement)(col)) {

package/dist/cjs/extensions/curd/curd.d.ts

@@ -10,24 +10,24 @@ import { Id } from '../../types';
 export declare function CURD<R extends RowType, F extends FormValue = FormValue>(props?: CurdBaseProps<R, F>): <T extends ComponentClass>(target: T) => T;
 export declare namespace CURD {
     var Column: typeof import("./curd").Column;
-    var Reqeust: typeof import("./curd").Reqeust;
+    var LoadRows: typeof import("./curd").LoadRows;
     var OnReload: typeof import("./curd").OnReload;
     var OnFilter: typeof import("./curd").OnFilter;
     var OnCreate: typeof import("./curd").OnCreate;
     var OnUpdate: typeof import("./curd").OnUpdate;
     var OnDelete: typeof import("./curd").OnDelete;
-    var PostData: typeof import("./curd").PostData;
+    var RowToForm: typeof import("./curd").RowToForm;
 }
 export declare function DATA_GRID<R extends RowType, V extends Id = Id>(props?: DataGridProps<R, V>): <T extends ComponentClass>(target: T) => T;
 export declare namespace DATA_GRID {
     var Column: typeof import("./curd").Column;
-    var Reqeust: typeof import("./curd").Reqeust;
+    var LoadRows: typeof import("./curd").LoadRows;
     var OnReload: typeof import("./curd").OnReload;
     var OnFilter: typeof import("./curd").OnFilter;
     var OnCreate: typeof import("./curd").OnCreate;
     var OnUpdate: typeof import("./curd").OnUpdate;
     var OnDelete: typeof import("./curd").OnDelete;
-    var PostData: typeof import("./curd").PostData;
+    var RowToForm: typeof import("./curd").RowToForm;
 }
 type ColumnDecorator = (prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>) => void;
 export declare function Column(title: ReactNode): ColumnDecorator;
@@ -51,8 +51,8 @@ export declare function Form(prototype: Object, property: string, descriptor?: T
  * 方法修饰器
  */
 type MethodDecorator = (prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>) => void;
-export declare function Reqeust(): MethodDecorator;
-export declare function Reqeust(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function LoadRows(): MethodDecorator;
+export declare function LoadRows(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export declare function OnReload(): MethodDecorator;
 export declare function OnReload(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export declare function OnFilter(): MethodDecorator;
@@ -63,6 +63,6 @@ export declare function OnUpdate(): MethodDecorator;
 export declare function OnUpdate(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export declare function OnDelete(): MethodDecorator;
 export declare function OnDelete(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
-export declare function PostData(): MethodDecorator;
-export declare function PostData(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function RowToForm(): MethodDecorator;
+export declare function RowToForm(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export {};

package/dist/cjs/extensions/curd/curd.js

@@ -7,13 +7,13 @@ exports.Hide = Hide;
 exports.Sort = Sort;
 exports.Filter = Filter;
 exports.Form = Form;
-exports.Reqeust = Reqeust;
+exports.LoadRows = LoadRows;
 exports.OnReload = OnReload;
 exports.OnFilter = OnFilter;
 exports.OnCreate = OnCreate;
 exports.OnUpdate = OnUpdate;
 exports.OnDelete = OnDelete;
-exports.PostData = PostData;
+exports.RowToForm = RowToForm;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const curd_1 = require("../../components/curd");
 const dataGrid_1 = require("../../components/dataGrid");
@@ -119,8 +119,8 @@ function setColumnConfigValue(key, value = true) {
     };
 }
 const prototype_methods = new WeakMap();
-CURD.Reqeust = DATA_GRID.Reqeust = Reqeust;
-function Reqeust(a, b, c) {
+CURD.LoadRows = DATA_GRID.LoadRows = LoadRows;
+function LoadRows(a, b, c) {
     return typeof c === 'undefined'
         ? setMethods('loadRows')
         : setMethods('loadRows')(a, b, c);
@@ -155,11 +155,11 @@ function OnDelete(a, b, c) {
         ? setMethods('onDelete')
         : setMethods('onDelete')(a, b, c);
 }
-CURD.PostData = DATA_GRID.PostData = PostData;
-function PostData(a, b, c) {
+CURD.RowToForm = DATA_GRID.RowToForm = RowToForm;
+function RowToForm(a, b, c) {
     return typeof c === 'undefined'
-        ? setMethods('postData')
-        : setMethods('postData')(a, b, c);
+        ? setMethods('rowToForm')
+        : setMethods('rowToForm')(a, b, c);
 }
 /**
  * 通用设置prototype_methods的方法

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

@@ -25,7 +25,7 @@ export type LoadRowsReturn<R extends RowType> = {
 };
 type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
-    openCreateDialog(initialValue?: R): Promise<F> | undefined;
+    openCreateDialog(initialValue?: F): Promise<F> | undefined;
     selectSingle(): Promise<R> | undefined;
     selectMultiple(selected?: Id[]): Promise<Id[]> | undefined;
 };
@@ -88,7 +88,7 @@ export interface CurdBaseProps<R extends RowType, F extends FormValue> extends O
     onUpdate?(formValue: F, row: R): any;
     onDelete?(row: R): any;
     /** 行数据转换为表单值的方法，若不指定，行数据会直接填入表单 */
-    postData?(row: R): F | Promise<F>;
+    rowToForm?(row: R): F | Promise<F>;
     dialogProps?: CurdDialogProps<R, F>;
     formProps?: FormProps<F>;
     formRef?: Ref<FormRef<F>>;

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

@@ -20,14 +20,14 @@ import { faPenToSquare } from '@fortawesome/free-regular-svg-icons/faPenToSquare
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 export const Curd = memo((props) => {
-    const { ref, wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, postData, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
+    const { ref, wrapperProps, wrapperRef, variant = 'standard', loadRows, columns, toolbarLeft, toolbarRight, reloadable = true, onReload, resizable = true, columnConfigurable = true, filterProps, filterRef, initialFilterValue, onFilter, renderFilter, copyable, creatable = true, updatable = true, deletable = true, createButtonProps, updateButtonProps, deleteButtonProps, deleteConfirmProps, controlColumnTitle = '操作', renderExtraControl, titleKey, dataName = '', createName = '添加', updateName = '编辑', deleteName = '删除', onCreate, onUpdate, onDelete, rowToForm, dialogProps, formProps, formRef, onChange, ...dataGridProps } = props;
     /**
      * -------------------------------------------------------------
      * ref
      */
     useImperativeHandle(ref, () => ({
         openCreateDialog(initialValue) {
-            return curdDialogRef.current?.open(initialValue);
+            return curdDialogRef.current?.open(void 0, initialValue);
         },
         selectSingle() {
             return curdDialogRef.current?.selectSingle();

package/dist/esm/components/curd/curdDialog.d.ts

@@ -5,7 +5,7 @@ import { FormValue } from '../form';
 import { CurdBaseProps } from './curd';
 import { Id } from '../../types';
 export type CurdDialogRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
-    open(activeRow?: R): Promise<F>;
+    open(activeRow?: R, initialFormValue?: F): Promise<F>;
     selectSingle(): Promise<R>;
     selectMultiple(selected?: Id[]): Promise<Id[]>;
 };

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

@@ -11,10 +11,8 @@ import { classes, dialogStyle } from './curd.style';
 import { PickerDialog } from '../pickerDialog';
 import { Icon } from '../..';
 import { faCopy } from '@fortawesome/free-regular-svg-icons/faCopy';
-export const CurdDialog = memo(({ ref, onFinish, 
-// 继承来的属性
-curdProps, ...props }) => {
-    const { columns, postData, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
+export const CurdDialog = memo(({ ref, onFinish, curdProps, ...props }) => {
+    const { columns, rowToForm, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
     /**
      * ----------------------------------------------------------------
      * ref与promise部分
@@ -36,10 +34,12 @@ curdProps, ...props }) => {
     const [selectMode, setSelectMode] = useState('single');
     const selectResolvers = useRef(void 0);
     useImperativeHandle(ref, () => ({
-        open(row) {
+        open(row, initialFormValue) {
             innerFormRef.current?.resetForm();
-            setInnerOpen(true);
+            suppressTransform.current = !!initialFormValue;
+            initialFormValue && innerFormRef.current?.setFormValue(initialFormValue);
             setActiveRow(row);
+            setInnerOpen(true);
             const { promise } = openResolvers.current = Promise.withResolvers();
             return promise;
         },
@@ -61,13 +61,14 @@ curdProps, ...props }) => {
      * 表单项
      */
     const [activeRow, setActiveRow] = useState();
+    const suppressTransform = useRef(false);
     const [transforming, setFormValue] = useLoading(async (row) => {
-        const formValue = postData && row ? await postData(row) : row;
+        const formValue = rowToForm && row ? await rowToForm(row) : row;
         formValue && innerFormRef.current?.setFormValue(formValue);
     });
     useEffect(() => {
-        innerOpen.current && setFormValue(activeRow);
-    }, [innerOpen.current]); // 依赖innerOpen而不依赖activeRow的原因是，有可能连续两次打开的activeRow是相同的
+        innerOpen.current && !suppressTransform.current && setFormValue(activeRow);
+    }, [innerOpen.current, activeRow]);
     const renderedFormItems = useMemo(() => {
         return columnsToFormItem(columns, activeRow)?.map(col => {
             if (isValidElement(col)) {

package/dist/esm/extensions/curd/curd.d.ts

@@ -10,24 +10,24 @@ import { Id } from '../../types';
 export declare function CURD<R extends RowType, F extends FormValue = FormValue>(props?: CurdBaseProps<R, F>): <T extends ComponentClass>(target: T) => T;
 export declare namespace CURD {
     var Column: typeof import("./curd").Column;
-    var Reqeust: typeof import("./curd").Reqeust;
+    var LoadRows: typeof import("./curd").LoadRows;
     var OnReload: typeof import("./curd").OnReload;
     var OnFilter: typeof import("./curd").OnFilter;
     var OnCreate: typeof import("./curd").OnCreate;
     var OnUpdate: typeof import("./curd").OnUpdate;
     var OnDelete: typeof import("./curd").OnDelete;
-    var PostData: typeof import("./curd").PostData;
+    var RowToForm: typeof import("./curd").RowToForm;
 }
 export declare function DATA_GRID<R extends RowType, V extends Id = Id>(props?: DataGridProps<R, V>): <T extends ComponentClass>(target: T) => T;
 export declare namespace DATA_GRID {
     var Column: typeof import("./curd").Column;
-    var Reqeust: typeof import("./curd").Reqeust;
+    var LoadRows: typeof import("./curd").LoadRows;
     var OnReload: typeof import("./curd").OnReload;
     var OnFilter: typeof import("./curd").OnFilter;
     var OnCreate: typeof import("./curd").OnCreate;
     var OnUpdate: typeof import("./curd").OnUpdate;
     var OnDelete: typeof import("./curd").OnDelete;
-    var PostData: typeof import("./curd").PostData;
+    var RowToForm: typeof import("./curd").RowToForm;
 }
 type ColumnDecorator = (prototype: Object, property: string, descriptor?: TypedPropertyDescriptor<any>) => void;
 export declare function Column(title: ReactNode): ColumnDecorator;
@@ -51,8 +51,8 @@ export declare function Form(prototype: Object, property: string, descriptor?: T
  * 方法修饰器
  */
 type MethodDecorator = (prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>) => void;
-export declare function Reqeust(): MethodDecorator;
-export declare function Reqeust(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function LoadRows(): MethodDecorator;
+export declare function LoadRows(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export declare function OnReload(): MethodDecorator;
 export declare function OnReload(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export declare function OnFilter(): MethodDecorator;
@@ -63,6 +63,6 @@ export declare function OnUpdate(): MethodDecorator;
 export declare function OnUpdate(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export declare function OnDelete(): MethodDecorator;
 export declare function OnDelete(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
-export declare function PostData(): MethodDecorator;
-export declare function PostData(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
+export declare function RowToForm(): MethodDecorator;
+export declare function RowToForm(prototype: Object, property: string, descriptor: TypedPropertyDescriptor<any>): void;
 export {};

package/dist/esm/extensions/curd/curd.js

@@ -103,8 +103,8 @@ function setColumnConfigValue(key, value = true) {
     };
 }
 const prototype_methods = new WeakMap();
-CURD.Reqeust = DATA_GRID.Reqeust = Reqeust;
-export function Reqeust(a, b, c) {
+CURD.LoadRows = DATA_GRID.LoadRows = LoadRows;
+export function LoadRows(a, b, c) {
     return typeof c === 'undefined'
         ? setMethods('loadRows')
         : setMethods('loadRows')(a, b, c);
@@ -139,11 +139,11 @@ export function OnDelete(a, b, c) {
         ? setMethods('onDelete')
         : setMethods('onDelete')(a, b, c);
 }
-CURD.PostData = DATA_GRID.PostData = PostData;
-export function PostData(a, b, c) {
+CURD.RowToForm = DATA_GRID.RowToForm = RowToForm;
+export function RowToForm(a, b, c) {
     return typeof c === 'undefined'
-        ? setMethods('postData')
-        : setMethods('postData')(a, b, c);
+        ? setMethods('rowToForm')
+        : setMethods('rowToForm')(a, b, c);
 }
 /**
  * 通用设置prototype_methods的方法

package/package.json

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