@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,100 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { DIVProps, Id, Obj } from '../../../types';
+import { ColumnType, DataGridBaseProps, DataGridMultipleProps, DataGridSingleProps, OrderType, RowType } from '../dataGrid';
+import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
+import { CurdFilter, CurdFilterProps } from './curdFilter';
+import { FieldPath } from '../../utils';
+import { ButtonProps } from '../button';
+import { CurdDialogProps } from './curdDialog';
+import { BubbleConfirmProps } from '../bubbleConfirm';
+export type CurdFormItemProps<I = any> = FormItemProps<I> & {
+    /** 对filter或form内的字段单独排序，数字越大越靠后，@default 0 */
+    order?: number;
+} & Obj;
+export type CurdFormItemType<I = any> = CurdFormItemProps<I> | ReactElement | true;
+export interface CurdColumn<R extends RowType = RowType> extends ColumnType<R> {
+    /** 在表格中隐藏，表明该列只用于filter或form */
+    hideInTable?: boolean;
+    filter?: CurdFormItemType | (() => CurdFormItemType);
+    form?: CurdFormItemType | ((activeRow?: R) => CurdFormItemType);
+}
+export type LoadRowsReturn<R extends RowType> = {
+    rows: R[];
+    /** 必须返回总数才能使翻页正常工作 */
+    total: number;
+};
+type EachRowType<R extends RowType, T> = T | ((row: R) => T);
+export interface CurdBaseProps<R extends RowType, F extends FormValue> extends DataGridBaseProps<R> {
+    /** 默认属性会传递给DataGrid组件，外层包裹元素的属性使用wrapperProps */
+    wrapperProps?: DIVProps;
+    wrapperRef?: Ref<HTMLDivElement>;
+    /** 嵌入式样式通常用于Dialog或Card组件内 */
+    variant?: 'standard' | 'embeded';
+    loadRows?: (pagination?: {
+        page: number;
+        pageSize: number;
+    }, filterValue?: FormValue, sorter?: {
+        field: FieldPath;
+        type: OrderType;
+    }) => LoadRowsReturn<R> | Promise<LoadRowsReturn<R>>;
+    columns?: (CurdColumn<R> | symbol)[];
+    toolbarLeft?: ReactNode;
+    toolbarRight?: ReactNode;
+    reloadable?: boolean;
+    onReload?(): void;
+    resizable?: boolean;
+    columnConfigurable?: boolean | {
+        defaultVisible?: Id[];
+        visible?: Id[];
+        onVisibleChange?(visible: Id[]): void;
+        defaultOrder?: Id[];
+        order?: Id[];
+        onOrderChange?(order: Id[]): void;
+    };
+    filterProps?: CurdFilterProps<R>;
+    filterRef?: Ref<FormRef>;
+    initialFilterValue?: CurdFilterProps<R>['initialValue'];
+    onFilter?(filterValue: FormValue): void;
+    renderFilter?(filterProps: CurdFilterProps<R>): ReactNode;
+    copyable?: boolean;
+    creatable?: boolean;
+    updatable?: EachRowType<R, boolean>;
+    deletable?: EachRowType<R, boolean>;
+    createButtonProps?: ButtonProps;
+    updateButtonProps?: EachRowType<R, ButtonProps>;
+    deleteButtonProps?: EachRowType<R, ButtonProps>;
+    deleteConfirmProps?: BubbleConfirmProps;
+    controlColumnTitle?: ReactNode;
+    /** 渲染额外的操作项，不会影响"编辑"与"删除"按钮 */
+    renderExtraControl?(row: R): ReactNode;
+    /** 用于做每行数据标题的字段 */
+    titleKey?: keyof R;
+    /** 数据的名称，@default "数据" */
+    dataName?: ReactNode;
+    /** create操作的名称，@default "添加" */
+    createName?: ReactNode;
+    /** update操作的名称，@default "编辑" */
+    updateName?: ReactNode;
+    /** delete操作的名称，@default "删除" */
+    deleteName?: ReactNode;
+    /** create操作完成后触发，若返回promise则会等待promise返回再触发loadRows */
+    onCreate?(formValue: F): any;
+    onUpdate?(formValue: F, row: R): any;
+    onDelete?(row: R): any;
+    /** 行数据转换为表单值的方法，若不指定，行数据会直接填入表单 */
+    postData?(row: R): F | Promise<F>;
+    dialogProps?: CurdDialogProps<R, F>;
+    formProps?: FormProps<F>;
+    formRef?: Ref<FormRef<F>>;
+}
+interface CurdSingleProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> extends Omit<DataGridSingleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
+}
+interface CurdMultipleProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> extends Omit<DataGridMultipleProps<R, V>, 'columns'>, CurdBaseProps<R, F> {
+}
+export type CurdProps<R extends RowType, V extends Id = Id, F extends FormValue = FormValue> = CurdSingleProps<R, V, F> | CurdMultipleProps<R, V, F>;
+export declare const Curd: {
+    <R extends RowType, V extends Id = Id, F extends FormValue = FormValue>(props: CurdProps<R, V, F>): ReactElement;
+    Filter: typeof CurdFilter;
+    CONTROL_COLUMN: symbol;
+};
+export {};

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

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { DataGrid } from '../dataGrid';
+import { CurdFilter } from './curdFilter';
+import { classes, style } from './curd.style';
+import { classnames, cloneRef, useControlled, useCurdColumns, useDerivedState, useLoading, useSync } from '../../utils';
+import { Button } from '../button';
+import { DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Tooltip } from '../tooltip';
+import { CurdColumnConfig } from './curdColumnConfig';
+import { CurdResizable } from './curdResizable';
+import { Pagination } from '../pagination';
+import { Divider } from '../divider';
+import { CurdDialog } from './curdDialog';
+import { useAppContext } from '../app';
+import { BubbleConfirm } from '../bubbleConfirm';
+import { useSelectionContext } from '../selectionContext';
+export const Curd = memo(forwardRef((props, ref) => {
+    const { 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 innerFilterRef = useRef(null);
+    const syncOnFilter = useSync(onFilter);
+    const renderFilterFn = () => {
+        const _filterProps = {
+            initialValue: initialFilterValue,
+            ...filterProps,
+            ref: useCallback(cloneRef(filterRef, innerFilterRef), []),
+            columns,
+            onFilter: useCallback((filterValue) => {
+                syncOnFilter.current?.(filterValue);
+                syncLoadRows.current();
+            }, [])
+        };
+        if (renderFilter) {
+            return renderFilter(_filterProps);
+        }
+        return _jsx(CurdFilter, { ..._filterProps });
+    };
+    /**
+     * -------------------------------------------------------------
+     * 添加操作列
+     */
+    const completedColumns = useMemo(() => {
+        if (!updatable && !deletable && !renderExtraControl) {
+            return columns;
+        }
+        const controlColumn = {
+            key: '$control',
+            title: controlColumnTitle,
+            render(row) {
+                const _updatable = typeof updatable === 'function' ? updatable(row) : updatable;
+                const _deletable = typeof deletable === 'function' ? deletable(row) : deletable;
+                const _updateProps = _updatable ? (typeof updateButtonProps === 'function' ? updateButtonProps(row) : updateButtonProps) : void 0;
+                const _deleteProps = _deletable ? (typeof deleteButtonProps === 'function' ? deleteButtonProps(row) : deleteButtonProps) : void 0;
+                return (_jsxs("div", { className: classes.control, children: [renderExtraControl?.(row), _updatable &&
+                            _jsx(Button, { prefix: _jsx(EditOutlined, {}), variant: "plain", ..._updateProps, onClick: e => {
+                                    _updateProps?.onClick?.(e);
+                                    updateHandler(row);
+                                }, children: "\u7F16\u8F91" }), _deletable &&
+                            _jsx(BubbleConfirm, { title: `删除${dataName}`, content: `删除后不可恢复，确定要删除该${dataName || '数据'}吗？`, ...deleteConfirmProps, onConfirm: e => deleteHandler(row, e), children: _jsx(Button, { prefix: _jsx(DeleteOutlined, {}), variant: "plain", color: "error", ..._deleteProps, children: "\u5220\u9664" }) })] }));
+            }
+        };
+        return [...columns || [], controlColumn];
+    }, [columns, updatable, deletable]);
+    const { orderedColumns, actualColumns, innerVisible, setInnerVisible, setInnerOrder } = useCurdColumns({
+        columns: completedColumns,
+        columnConfigurable
+    });
+    /**
+     * -------------------------------------------------------------
+     * 表格设置
+     */
+    const [innerSize, setInnerSize] = useDerivedState(props.tableProps?.size || 'medium');
+    const [innerPage, setInnerPage] = useControlled(props.paginationProps?.defaultPage ?? 1, props.paginationProps?.page, props.paginationProps?.onPageChange);
+    const [innerPageSize, setInnerPageSize] = useControlled(props.paginationProps?.defaultPageSize ?? 10, props.paginationProps?.pageSize, props.paginationProps?.onPageSizeChange);
+    const [innerOrderColumn, setInnerOrderColumn] = useControlled(props.defaultOrderColumn, props.orderColumn);
+    const [innerOrderType, setInnerOrderType] = useControlled(props.defaultOrderType || 'descend', props.orderType);
+    const orderChangeHandler = (orderColumn, orderType) => {
+        setInnerOrderColumn(orderColumn);
+        setInnerOrderType(orderType);
+    };
+    /**
+     * -------------------------------------------------------------
+     * 行数据
+     */
+    const { setInnerOptions } = useSelectionContext();
+    const [innerRows, _setInnerRows] = useDerivedState(props.rows);
+    useEffect(() => {
+        innerRows.current?.length && setInnerOptions?.(innerRows.current);
+    }, []);
+    const setInnerRows = (data) => {
+        setInnerOptions?.(data);
+        _setInnerRows(data);
+    };
+    const [innerTotal, setInnerTotal] = useDerivedState(props.paginationProps?.total || 0);
+    const [innerLoading, innerLoadRows] = useLoading(async () => {
+        if (loadRows) {
+            const res = await loadRows(props.paginatable !== false
+                ? {
+                    page: innerPage.current,
+                    pageSize: innerPageSize.current,
+                }
+                : void 0, innerFilterRef.current?.getFormValue(), innerOrderColumn.current
+                ? {
+                    field: innerOrderColumn.current,
+                    type: innerOrderType.current
+                }
+                : void 0);
+            if (res) {
+                setInnerRows(res.rows);
+                setInnerTotal(res.total);
+            }
+        }
+    }, props.loading);
+    useEffect(() => {
+        innerLoadRows();
+    }, [innerPage.current, innerPageSize.current, innerOrderColumn.current, innerOrderType.current]);
+    const reloadHandler = () => {
+        onReload?.();
+        innerLoadRows();
+    };
+    const syncLoadRows = useSync(innerLoadRows);
+    /**
+     * -------------------------------------------------------------
+     * 弹窗与曾删改部分
+     */
+    const curdDialogRef = useRef(null);
+    const activeRow = useRef();
+    const createHandler = (e) => {
+        createButtonProps?.onClick?.(e);
+        activeRow.current = void 0;
+        curdDialogRef.current.open();
+    };
+    const updateHandler = (row) => {
+        activeRow.current = row;
+        curdDialogRef.current.open(row);
+    };
+    const { message } = useAppContext();
+    const syncProps = useSync({ dialogProps, onCreate, onUpdate });
+    const finishHandler = useCallback(async (formValue) => {
+        const { dialogProps, onCreate, onUpdate } = syncProps.current;
+        dialogProps?.onFinish?.(formValue);
+        if (activeRow.current) {
+            await onUpdate?.(formValue, activeRow.current);
+            innerLoadRows();
+            message.success(updateName + '成功');
+        }
+        else {
+            await onCreate?.(formValue);
+            if (innerPage.current !== 1) {
+                // 翻页也会触发innerLoadRows()，因此不在第一页时，直接翻至第一页即可
+                setInnerPage(1);
+            }
+            else {
+                innerLoadRows();
+            }
+            message.success(createName + '成功');
+        }
+    }, []);
+    const deleteHandler = async (row, e) => {
+        deleteConfirmProps?.onConfirm?.(e);
+        await onDelete?.(row);
+        innerLoadRows();
+        message.success(deleteName + '成功');
+    };
+    return (_jsxs("div", { ...wrapperProps, ref: wrapperRef, css: style, className: classnames(classes.root, wrapperProps?.className), "data-variant": variant, children: [renderFilterFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
+                _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
+                                    _jsxs(Button, { prefix: _jsx(PlusOutlined, {}), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
+                                    _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
+                                    _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text", prefix: _jsx(ReloadOutlined, {}), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
+                                    _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), !!columnConfigurable &&
+                                    _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, ref: ref, columns: actualColumns, tableProps: {
+                        ...props.tableProps,
+                        ...resizable && { size: innerSize.current }
+                    }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
+                        ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
+                        : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
+                _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
+}));
+Curd.Filter = CurdFilter;
+Curd.CONTROL_COLUMN = Symbol('control-column');

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

@@ -0,0 +1,21 @@
+export declare const classes: {
+    divider: string;
+    card: string;
+    toolbar: string;
+    filter: string;
+    filterGridContainer: string;
+    filterGrid: string;
+    filterItem: string;
+    filterControl: string;
+    filtered: string;
+    filteredTitle: string;
+    toolbarLeft: string;
+    toolbarRight: string;
+    control: string;
+    dialogTitle: string;
+    copyButton: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const dialogStyle: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,95 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('curd', [
+    'filter',
+    'filterGridContainer',
+    'filterGrid',
+    'filterItem',
+    'filterControl',
+    'filtered',
+    'filteredTitle',
+    'toolbar',
+    'toolbarLeft',
+    'toolbarRight',
+    'divider',
+    'card',
+    'control',
+    'dialogTitle',
+    'copyButton'
+]);
+export const style = defineCss(({ spacing, text, background, borderRadius }) => css `
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .${classes.filter} {
+        display: flex;
+
+        .${classes.filterGridContainer},
+        .${classes.filterGrid} {
+            flex: 1;
+        }
+
+        .${classes.filterControl} {
+            align-self: flex-end;
+            margin-bottom: ${spacing[4]}px;
+        }
+    }
+
+    .${classes.filtered} {
+        display: flex;
+        align-items: center;
+        margin-bottom: ${spacing[8]}px;
+
+        .${classes.filteredTitle} {
+            color: ${text.secondary};
+            font-size: ${13 / 14}em;
+        }
+    }
+
+    .${classes.toolbar} {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: ${spacing[4]}px;
+
+        .${classes.toolbarLeft} {
+            display: flex;
+            gap: ${spacing[2]}px;
+        }
+
+        .${classes.toolbarRight} {
+            display: flex;
+
+            .${classes.divider} {
+                padding: 8px 0;
+            }
+        }
+    }
+
+    .${classes.card} {
+        min-height: 0;
+        border-radius: ${borderRadius}px;
+    }
+
+    &[data-variant=standard] {
+        .${classes.card} {
+            background-color: ${background.card};
+            padding: ${spacing[8]}px;
+        }
+    }
+
+    .${classes.control} {
+        display: flex;
+        gap: ${spacing[5]}px;
+    }
+`);
+export const dialogStyle = defineCss(({ spacing }) => css `
+    .${classes.dialogTitle} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[8]}px;
+    }
+`);

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

@@ -0,0 +1,12 @@
+import { Dispatch, ReactElement, SetStateAction } from 'react';
+import { CurdColumn } from './curd';
+import { RowType } from '../dataGrid';
+import { Id } from '../../../types';
+type CurdColumnConfigProps<R extends RowType> = {
+    columns?: CurdColumn<R>[];
+    innerVisible: Id[];
+    setInnerVisible: Dispatch<SetStateAction<Id[]>>;
+    setInnerOrder: Dispatch<SetStateAction<Id[]>>;
+};
+export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { Button } from '../button';
+import { SettingOutlined } from '@ant-design/icons';
+import { Bubble } from '../bubble';
+import { classes, style } from './curdColumnConfig.style';
+import { MenuItem } from '../menuItem';
+import { Checkbox } from '../checkbox';
+import { SortableItem } from '../sortableItem';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import { isUnset, onDndDragEnd, useDndSensors } from '../../utils';
+export const CurdColumnConfig = memo(({ columns = [], innerVisible, setInnerVisible, setInnerOrder, }) => {
+    const dragEndHandler = (e) => {
+        const newColumns = onDndDragEnd(e, columns, '_key');
+        newColumns && setInnerOrder(newColumns.flatMap(col => col._key ?? []));
+    };
+    const visibleSet = useMemo(() => {
+        return new Set(innerVisible);
+    }, [innerVisible]);
+    const toggleVisible = (key, checked) => {
+        setInnerVisible(o => checked
+            ? [...o, key]
+            : o.filter(k => k !== key));
+    };
+    return (_jsx(Bubble, { css: style, placement: "bottomRight", content: _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: _jsxs("div", { className: classes.content, children: [_jsx("div", { className: classes.title, children: "\u5217\u8BBE\u7F6E" }), columns?.map((col, i) => _jsx(SortableItem, { id: col._key ?? i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: !isUnset(col._key) && visibleSet.has(col._key), onChange: e => !isUnset(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), children: _jsx(Button, { shape: "circular", variant: "text", color: "text", children: _jsx(SettingOutlined, {}) }) }));
+});

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

@@ -0,0 +1,9 @@
+export declare const classes: {
+    title: string;
+    content: string;
+    checkbox: string;
+    item: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('curd-column-config', [
+    'content',
+    'title',
+    'item',
+    'checkbox'
+]);
+export const style = defineCss(({ spacing }) => css `
+    .${classes.content} {
+        min-width: 160px;
+
+        .${classes.title} {
+            font-weight: bold;
+            padding: ${spacing[3]}px;
+        }
+
+        .${classes.item} {
+            cursor: move;
+
+            &[data-dragging=true] {
+                position: relative;
+                z-index: 1;
+            }
+        }
+
+        .${classes.checkbox} {
+            display: flex;
+            margin-right: ${spacing[1]}px;
+        }
+    }
+`);

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

@@ -0,0 +1,14 @@
+import { ReactElement, Ref } from 'react';
+import { DialogProps } from '../dialog';
+import { RowType } from '../dataGrid';
+import { FormValue } from '../form';
+import { CurdBaseProps } from './curd';
+export type CurdDialogRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
+    open(activeRow?: R): Promise<F>;
+};
+export interface CurdDialogProps<R extends RowType, F extends FormValue = FormValue> extends Omit<DialogProps, 'ref'> {
+    ref?: Ref<CurdDialogRef<R, F>>;
+    onFinish?(value: F): any;
+    curdProps: CurdBaseProps<R, F>;
+}
+export declare const CurdDialog: <R extends RowType, F extends FormValue>(props: CurdDialogProps<R, F>) => ReactElement;

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Dialog } from '../dialog';
+import { Form, FormItem } from '../form';
+import { Curd } from './curd';
+import { cloneRef, columnsToFormItem, isUnset, useControlled, useLoading } from '../../utils';
+import { Loading } from '../loading';
+import { Button } from '../button';
+import { CopyOutlined } from '@ant-design/icons';
+import { classes, dialogStyle } from './curd.style';
+import { PickerDialog } from '../pickerDialog';
+export const CurdDialog = memo(forwardRef(({ onFinish, 
+// 继承来的属性
+curdProps, ...props }, ref) => {
+    const { columns, postData, copyable, titleKey, formProps, formRef, dataName = '', createName = '添加', updateName = '编辑' } = curdProps;
+    /**
+     * ----------------------------------------------------------------
+     * ref与promise部分
+     */
+    const innerFormRef = useRef(null);
+    const resolveFn = useRef();
+    const rejectFn = useRef();
+    const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
+    const closeHandler = (reason) => {
+        if (reason === 'confirmed') {
+            return;
+        }
+        props.onClose?.(reason);
+        rejectFn.current?.({
+            type: 'canceled',
+            value: innerFormRef.current.getFormValue()
+        });
+        resolveFn.current = rejectFn.current = void 0;
+        setInnerOpen(false);
+    };
+    useImperativeHandle(ref, () => ({
+        open(row) {
+            innerFormRef.current?.resetForm();
+            setInnerOpen(true);
+            setActiveRow(row);
+            return new Promise((resolve, reject) => {
+                resolveFn.current = resolve;
+                rejectFn.current = reject;
+            });
+        }
+    }));
+    /**
+     * ----------------------------------------------------------------
+     * 表单项
+     */
+    const [activeRow, setActiveRow] = useState();
+    const [transforming, setFormValue] = useLoading(async (row) => {
+        const formValue = postData && row ? await postData(row) : row;
+        formValue && innerFormRef.current?.setFormValue(formValue);
+    });
+    useEffect(() => {
+        innerOpen.current && setFormValue(activeRow);
+    }, [innerOpen.current]); // 依赖innerOpen而不依赖activeRow的原因是，有可能连续两次打开的activeRow是相同的
+    const renderedFormItems = useMemo(() => {
+        return columnsToFormItem(columns, activeRow)?.map(p => _jsx(FormItem, { ...p }));
+    }, [columns, activeRow]);
+    /**
+     * ----------------------------------------------------------------
+     * 结果处理与loading
+     */
+    const confirmHandler = () => {
+        innerFormRef.current.submit();
+    };
+    const [innerLoading, finishHandler] = useLoading(async (value) => {
+        formProps?.onFinish?.(value);
+        resolveFn.current?.(value);
+        await onFinish?.(value);
+        setInnerOpen(false);
+    }, props.confirmLoading);
+    /**
+     * ----------------------------------------------------------------
+     * 复制
+     */
+    const pickerDialogRef = useRef(null);
+    const copiedHandler = (checked, value, row) => {
+        const title = !isUnset(titleKey) ? row[titleKey] : void 0;
+        typeof title === 'string'
+            ? setFormValue({
+                ...row,
+                [titleKey]: `${title} - 副本`
+            })
+            : setFormValue(row);
+    };
+    const rowTitle = activeRow && !isUnset(titleKey) ? activeRow[titleKey] : void 0;
+    return (_jsxs(Dialog, { css: dialogStyle, width: 600, title: activeRow
+            ? `${updateName}${dataName}${rowTitle ? ' - ' + rowTitle : ''}`
+            : _jsxs("div", { className: classes.dialogTitle, children: [_jsxs("span", { children: [createName, dataName] }), copyable &&
+                        _jsxs(Button, { variant: "plain", prefix: _jsx(CopyOutlined, {}), onClick: () => pickerDialogRef.current.open(), children: ["\u4ECE\u5DF2\u6709", dataName || '数据', "\u590D\u5236"] })] }), ...props, open: innerOpen.current, onClose: closeHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: [_jsx(Loading, { loading: transforming.current, children: _jsx(Form, { labelWidth: "20%", ...formProps, ref: cloneRef(formRef, innerFormRef), onFinish: finishHandler, children: renderedFormItems }) }), copyable &&
+                _jsx(PickerDialog, { ref: pickerDialogRef, onToggle: copiedHandler, children: _jsx(Curd, { ...curdProps, variant: "embeded", copyable: false, creatable: false, updatable: false, deletable: false }) })] }));
+}));

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

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormProps, FormRef, FormValue } from '../form';
+import { CurdBaseProps } from './curd';
+import { ButtonProps } from '../button';
+import { RowType } from '../dataGrid';
+export interface CurdFilterProps<R extends RowType, F extends FormValue = FormValue> extends Omit<FormProps<F>, 'variant'>, Pick<CurdBaseProps<R, F>, 'columns'> {
+    /** 筛选项是否可收起与展开，若开启此功能，需保证每项的高度一致，否则可能出现样式问题 */
+    expandable?: boolean;
+    /** 是否显示"筛选"按钮，若为false，则每次触发onChange的同时会触发onFilter，若为true，则onFilter只会在点击按钮时触发，@default false */
+    showButton?: boolean;
+    /** 是否显示已生效的筛选条件 */
+    renderConditions?(filterValue: F, formInstance: FormRef<F> | null): ReactNode;
+    buttonProps?: ButtonProps;
+    onFilter?(filterValue: F): void;
+}
+export declare const CurdFilter: <R extends RowType, F extends FormValue = FormValue>(props: CurdFilterProps<R, F>) => ReactElement;