@canlooks/can-ui 0.0.51 → 0.0.53

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

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurdDialog = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const dialog_1 = require("../dialog");
 const form_1 = require("../form");
 const curd_1 = require("./curd");
@@ -13,7 +14,7 @@ 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_1.memo)(({ ref, onFinish, 
+exports.CurdDialog = (0, react_2.memo)(({ ref, onFinish, 
 // 继承来的属性
 curdProps, ...props }) => {
     const { columns, postData, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
@@ -21,8 +22,8 @@ curdProps, ...props }) => {
      * ----------------------------------------------------------------
      * ref与promise部分
      */
-    const innerFormRef = (0, react_1.useRef)(null);
-    const resolvers = (0, react_1.useRef)(void 0);
+    const innerFormRef = (0, react_2.useRef)(null);
+    const resolvers = (0, react_2.useRef)(void 0);
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
     const closeHandler = (reason) => {
         if (reason === 'confirmed') {
@@ -35,7 +36,7 @@ curdProps, ...props }) => {
         });
         setInnerOpen(false);
     };
-    (0, react_1.useImperativeHandle)(ref, () => ({
+    (0, react_2.useImperativeHandle)(ref, () => ({
         open(row) {
             innerFormRef.current?.resetForm();
             setInnerOpen(true);
@@ -48,16 +49,22 @@ curdProps, ...props }) => {
      * ----------------------------------------------------------------
      * 表单项
      */
-    const [activeRow, setActiveRow] = (0, react_1.useState)();
+    const [activeRow, setActiveRow] = (0, react_2.useState)();
     const [transforming, setFormValue] = (0, utils_1.useLoading)(async (row) => {
         const formValue = postData && row ? await postData(row) : row;
         formValue && innerFormRef.current?.setFormValue(formValue);
     });
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         innerOpen.current && setFormValue(activeRow);
     }, [innerOpen.current]); // 依赖innerOpen而不依赖activeRow的原因是，有可能连续两次打开的activeRow是相同的
-    const renderedFormItems = (0, react_1.useMemo)(() => {
-        return (0, utils_1.columnsToFormItem)(columns, activeRow)?.map(p => (0, jsx_runtime_1.jsx)(form_1.FormItem, { ...p }));
+    const renderedFormItems = (0, react_2.useMemo)(() => {
+        return (0, utils_1.columnsToFormItem)(columns, activeRow)?.map(col => {
+            if ((0, react_2.isValidElement)(col)) {
+                return col;
+            }
+            const { key, ...p } = col;
+            return (0, react_1.createElement)(form_1.FormItem, { ...p, key: key });
+        });
     }, [columns, activeRow]);
     /**
      * ----------------------------------------------------------------
@@ -76,7 +83,7 @@ curdProps, ...props }) => {
      * ----------------------------------------------------------------
      * 复制
      */
-    const pickerDialogRef = (0, react_1.useRef)(null);
+    const pickerDialogRef = (0, react_2.useRef)(null);
     const copiedHandler = (checked, value, row) => {
         const title = !(0, utils_1.isUnset)(titleKey) ? row[titleKey] : void 0;
         typeof title === 'string'

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -96,9 +96,7 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             return filteredOptions.map((opt, index) => {
                 const value = opt[primaryKey];
                 const label = opt[labelKey] ?? value;
-                return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: value, 
-                    // 手动传递而不使用{...opt}，可避免多余的props挂载上DOM
-                    size: opt.size, color: opt.color, emphasized: opt.emphasized, disabled: opt.disabled, checkboxProps: opt.checkboxProps, ellipsis: opt.ellipsis, prefix: opt.prefix, suffix: opt.suffix, ...makeProps({
+                return ((0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { value: value, ...opt, ...makeProps({
                         opt,
                         label,
                         value,

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { CurdColumn, CurdFormItemProps, CurdProps } from '../components/curd';
 import { ColumnType, RowType } from '../components/dataGrid';
 import { Id, Obj } from '../types';
@@ -6,13 +7,13 @@ import { FormValue } from '../components/form';
  * 将Curd的Columns转换为FilterItem
  * @param columns
  */
-export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)[]): CurdFormItemProps[] | undefined;
+export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)[]): (ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | CurdFormItemProps)[] | undefined;
 /**
  * 将Curd的Columns转换为FormItem
  * @param columns
  * @param row
  */
-export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): CurdFormItemProps[] | undefined;
+export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): (ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | CurdFormItemProps)[] | undefined;
 /**
  * 统一处理Columns
  */

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createElement as _createElement } from "@emotion/react";
+import { memo, useEffect, useImperativeHandle, useMemo, useRef, useState, isValidElement } from 'react';
 import { Dialog } from '../dialog';
 import { Form, FormItem } from '../form';
 import { Curd } from './curd';
@@ -54,7 +55,13 @@ curdProps, ...props }) => {
         innerOpen.current && setFormValue(activeRow);
     }, [innerOpen.current]); // 依赖innerOpen而不依赖activeRow的原因是，有可能连续两次打开的activeRow是相同的
     const renderedFormItems = useMemo(() => {
-        return columnsToFormItem(columns, activeRow)?.map(p => _jsx(FormItem, { ...p }));
+        return columnsToFormItem(columns, activeRow)?.map(col => {
+            if (isValidElement(col)) {
+                return col;
+            }
+            const { key, ...p } = col;
+            return _createElement(FormItem, { ...p, key: key });
+        });
     }, [columns, activeRow]);
     /**
      * ----------------------------------------------------------------

package/dist/esm/components/optionsBase/optionsBase.js

@@ -93,9 +93,7 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
             return filteredOptions.map((opt, index) => {
                 const value = opt[primaryKey];
                 const label = opt[labelKey] ?? value;
-                return (_jsx(MenuItem, { value: value, 
-                    // 手动传递而不使用{...opt}，可避免多余的props挂载上DOM
-                    size: opt.size, color: opt.color, emphasized: opt.emphasized, disabled: opt.disabled, checkboxProps: opt.checkboxProps, ellipsis: opt.ellipsis, prefix: opt.prefix, suffix: opt.suffix, ...makeProps({
+                return (_jsx(MenuItem, { value: value, ...opt, ...makeProps({
                         opt,
                         label,
                         value,

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { CurdColumn, CurdFormItemProps, CurdProps } from '../components/curd';
 import { ColumnType, RowType } from '../components/dataGrid';
 import { Id, Obj } from '../types';
@@ -6,13 +7,13 @@ import { FormValue } from '../components/form';
  * 将Curd的Columns转换为FilterItem
  * @param columns
  */
-export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)[]): CurdFormItemProps[] | undefined;
+export declare function columnsToFilterItem(columns?: (CurdColumn<any> | symbol)[]): (ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | CurdFormItemProps)[] | undefined;
 /**
  * 将Curd的Columns转换为FormItem
  * @param columns
  * @param row
  */
-export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): CurdFormItemProps[] | undefined;
+export declare function columnsToFormItem(columns?: (CurdColumn<any> | symbol)[], row?: Obj): (ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | CurdFormItemProps)[] | undefined;
 /**
  * 统一处理Columns
  */