@canlooks/can-ui 0.0.1

package/dist/cjs/components/dropdown/dropdown.style.d.ts

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

package/dist/cjs/components/dropdown/dropdown.style.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const popper_style_1 = require("../popper/popper.style");
+exports.classes = (0, utils_1.defineClasses)('dropdown', [
+    'content'
+]);
+exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `
+    z-index: ${app_1.zIndex.dropdown};
+
+    .${exports.classes.content} {
+        background-color: ${background.card};
+        box-shadow: ${boxShadow[0]};
+        border-radius: ${borderRadius}px;
+        padding: 4px;
+    }
+
+    ${(0, popper_style_1.popperArrowStyle)(background.card)}
+`);

package/dist/cjs/components/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './dropdown';

package/dist/cjs/components/dropdown/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./dropdown"), exports);

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

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { TransportStyleProps } from '../transportStyle';
+export interface FlexProps extends TransportStyleProps {
+    inline?: boolean;
+    /** 排列方式，@default "row" */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /** 换行方式 */
+    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    gap?: CSSProperties['gap'];
+    columnGap?: CSSProperties['columnGap'];
+    rowGap?: CSSProperties['rowGap'];
+    /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
+    compact?: boolean;
+}
+export declare const Flex: import("react").ForwardRefExoticComponent<Omit<FlexProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/flex/flex.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flex = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const flex_style_1 = require("./flex.style");
+const utils_1 = require("../../utils");
+exports.Flex = (0, react_1.forwardRef)(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
+    const childrenCount = react_1.Children.count(props.children);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: {
+            display: inline ? 'inline-flex' : 'flex',
+            flexDirection: direction,
+            flexWrap: wrap, gap, columnGap, rowGap,
+            ...props.style
+        }, children: compact
+            ? react_1.Children.map(props.children, (child, index) => {
+                if (!(0, react_1.isValidElement)(child)) {
+                    return child;
+                }
+                return (0, react_1.cloneElement)(child, {
+                    ...index === 0 && { 'data-first': true },
+                    ...index === childrenCount - 1 && { 'data-last': true },
+                    ...{ 'data-compact': direction.split('-')[0] }
+                });
+            })
+            : props.children }));
+});

package/dist/cjs/components/flex/flex.style.d.ts

@@ -0,0 +1,3 @@
+export declare const classes: {
+    root: string;
+};

package/dist/cjs/components/flex/flex.style.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('flex');

package/dist/cjs/components/flex/index.d.ts

@@ -0,0 +1 @@
+export * from './flex';

package/dist/cjs/components/flex/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./flex"), exports);

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

@@ -0,0 +1,54 @@
+import { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
+import { Obj, ResponsiveProp } from '../../../types';
+import { FieldPath } from '../../utils';
+import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
+import { FormRelatable } from './formRelatable';
+import { DescriptionsBaseProps, DescriptionsProps } from '../descriptions';
+export type FormValue = Obj;
+export type FormSharedProps = {
+    /** 最外层元素的ref，默认ref属性已经被{@link FormRef}取代 */
+    wrapperRef?: Ref<HTMLDivElement>;
+    requiredMark?: ReactNode;
+};
+export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
+    ref?: Ref<FormRef<V>>;
+    component?: any;
+    initialValue?: V;
+    onChange?(field: FieldPath, value: any, formValue: V): void;
+    onFinish?(value: V): void;
+    items?: (FormItemProps<any> & Obj)[];
+    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，@default "grid" */
+    variant?: 'plain' | 'grid' | 'table';
+    columnCount?: ResponsiveProp;
+    descriptionsProps?: DescriptionsProps;
+}
+interface FormContext<V extends FormValue> extends FormSharedProps {
+    requiredMark?: ReactNode;
+    formValue?: V;
+    setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
+    itemsContainer?: Map<string, FormItemRef>;
+    formRef?: RefObject<FormRef<V> | undefined>;
+}
+export declare function useFormContext<V extends FormValue>(): FormContext<V>;
+export type FormRef<V extends FormValue = FormValue> = {
+    submit(): Promise<V | null>;
+    getFieldValue<T = any>(field: FieldPath): T;
+    getFormValue(): V;
+    getFieldError(field: FieldPath): FieldError | undefined;
+    getFormErrors(): {
+        [p: string]: FieldError;
+    };
+    setFormValue: Dispatch<SetStateAction<V>>;
+    mergeFormValue(value: Partial<V>): void;
+    setFieldValue(field: FieldPath, value: any): void;
+    resetForm(): void;
+    resetField(field: FieldPath): void;
+    isFormTouched(): boolean;
+    isFieldTouched(field: FieldPath): boolean;
+};
+export declare const Form: {
+    <V extends Obj>(props: FormProps<V>): ReactElement;
+    Item: typeof FormItem;
+    FormRelatable: typeof FormRelatable;
+};
+export {};

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+exports.useFormContext = useFormContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const form_style_1 = require("./form.style");
+const formItem_1 = require("./formItem");
+const formRelatable_1 = require("./formRelatable");
+const descriptions_1 = require("../descriptions");
+const formContext = (0, react_1.createContext)({});
+function useFormContext() {
+    return (0, react_1.useContext)(formContext);
+}
+exports.Form = (0, react_1.forwardRef)(({ component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
+// 以下属性从DescriptionsBaseProps继承
+items, variant = 'grid', 
+// 以下属性从DescriptionsSharedProps继承
+labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }, ref) => {
+    /**
+     * ------------------------------------------------------------------------
+     * 表单值
+     */
+    const [formValue, setFormValue] = (0, utils_1.useSyncState)(() => initialValue ? (0, utils_1.cloneDeep)(initialValue) : {});
+    const syncOnChange = (0, utils_1.useSync)(onChange);
+    /**
+     * 设置某个字段的值
+     * @param field
+     * @param value
+     * @param silent 为true时不会触发onChange回调
+     */
+    const setFieldValue = (field, value, silent) => {
+        setFormValue(({ ...newValue }) => {
+            (0, utils_1.queryDeep)(newValue, field, () => value);
+            return newValue;
+        });
+        !silent && syncOnChange.current?.(field, value, formValue.current);
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 挂载ref
+     */
+    const itemsContainer = (0, react_1.useRef)(new Map());
+    const submitHandler = async (e) => {
+        e?.preventDefault();
+        try {
+            await Promise.all([...itemsContainer.current].map(([, item]) => {
+                return item.validate().then(isValid => {
+                    return isValid ? void 0 : Promise.reject();
+                });
+            }));
+            onFinish?.(formValue.current);
+            return formValue.current;
+        }
+        catch (e) {
+            return null;
+        }
+    };
+    const formRef = (0, react_1.useRef)(null);
+    formRef.current = {
+        submit: submitHandler,
+        getFieldValue: field => (0, utils_1.queryDeep)(formValue.current, field),
+        getFormValue: () => formValue.current,
+        getFieldError: field => itemsContainer.current.get((0, utils_1.stringifyField)(field))?.error,
+        getFormErrors: () => {
+            const errorObj = {};
+            for (const [field, item] of itemsContainer.current) {
+                if (item.error) {
+                    errorObj[field] = item.error;
+                }
+            }
+            return errorObj;
+        },
+        setFormValue,
+        mergeFormValue: value => {
+            setFormValue(o => (0, utils_1.mergeDeep)({ ...o }, value));
+        },
+        setFieldValue: (field, value) => setFieldValue(field, value, true),
+        resetForm: () => {
+            const newValue = initialValue ? (0, utils_1.cloneDeep)(initialValue) : {};
+            for (const [, item] of itemsContainer.current) {
+                item.reset(newValue);
+            }
+            setFormValue(newValue);
+        },
+        resetField: field => {
+            itemsContainer.current.get((0, utils_1.stringifyField)(field))?.reset();
+            setFormValue(o => ({ ...o }));
+        },
+        isFormTouched: () => [...itemsContainer.current].some(([, item]) => item.isTouched),
+        isFieldTouched: field => !!itemsContainer.current.get((0, utils_1.stringifyField)(field))?.isTouched
+    };
+    (0, react_1.useImperativeHandle)(ref, () => formRef.current);
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: form_style_1.style, className: (0, utils_1.classnames)(form_style_1.classes.root, props.className), onSubmit: submitHandler, children: (0, jsx_runtime_1.jsx)(formContext.Provider, { value: (0, react_1.useMemo)(() => ({
+                requiredMark,
+                formValue: formValue.current, setFieldValue,
+                itemsContainer: itemsContainer.current, formRef
+            }), [requiredMark, formValue.current]), children: variant === 'plain'
+                ? props.children
+                : (0, jsx_runtime_1.jsx)(descriptions_1.Descriptions, { ...descriptionsProps, size: size, labelWidth: labelWidth, colon: colon, labelPlacement: labelPlacement, disableMargin: disableMargin, disablePadding: disablePadding, columnCount: columnCount, items: items, variant: variant, itemComponent: formItem_1.FormItem, children: props.children }) }) }));
+});
+exports.Form.Item = formItem_1.FormItem;
+exports.Form.FormRelatable = formRelatable_1.FormRelatable;

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

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

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('form', [
+    'item',
+    'requiredMark',
+    'helperText'
+]);
+exports.style = (0, utils_1.defineCss)(({ colors, spacing }) => (0, react_1.css) `
+    .${exports.classes.requiredMark} {
+        color: ${colors.error};
+        margin-right: ${spacing[1]}px;
+    }
+
+    .${exports.classes.helperText} {
+        font-size: ${13 / 14}em;
+        color: ${colors.error};
+    }
+`);

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

@@ -0,0 +1,42 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormRef, FormSharedProps, FormValue } from './form';
+import { ColorPropsValue, Size } from '../../../types';
+import { FieldPath } from '../../utils';
+import { DescriptionItemProps, DescriptionsSharedProps } from '../descriptions';
+export type FormItemRules<I> = {
+    message?: ReactNode;
+    required?: boolean;
+    pattern?: RegExp;
+    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef<FormValue> | null): any;
+};
+export type FieldProps<I> = {
+    checked?: boolean;
+    value?: I;
+    onChange?(e: React.ChangeEvent): void;
+};
+export type StyleProps = {
+    size?: Size;
+    color?: ColorPropsValue;
+};
+export interface FormItemBaseProps<I> extends FormSharedProps, DescriptionsSharedProps {
+    field?: FieldPath;
+    initialValue?: I;
+    rules?: FormItemRules<I> | FormItemRules<I>[];
+    required?: boolean;
+    error?: boolean;
+    helperText?: ReactNode;
+    dependencies?: FieldPath[];
+    children?: ReactNode | ((fieldProps: FieldProps<I>, styleProps: StyleProps) => ReactNode);
+    noStyle?: boolean;
+}
+export type FormItemProps<I> = FormItemBaseProps<I> & DescriptionItemProps;
+export type FieldError = null | {
+    message: ReactNode;
+};
+export type FormItemRef = {
+    validate(): Promise<boolean>;
+    error: FieldError;
+    reset(initialValues?: FormValue): void;
+    isTouched: boolean;
+};
+export declare const FormItem: <I>(props: FormItemProps<I>) => ReactElement;

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

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const form_1 = require("./form");
+const utils_1 = require("../../utils");
+const descriptions_1 = require("../descriptions");
+const form_style_1 = require("./form.style");
+const transitionBase_1 = require("../transitionBase");
+exports.FormItem = (0, react_1.forwardRef)(({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
+    const { formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
+    requiredMark ??= context.requiredMark ?? '*';
+    /**
+     * --------------------------------------------------------------------
+     * 重置与初始化
+     */
+    const shouldValidate = (0, react_1.useRef)(false);
+    const isTouched = (0, react_1.useRef)(false);
+    // formRef的resetForm()方法会传入新的initialValue
+    const reset = (value = formValue) => {
+        shouldValidate.current = isTouched.current = false;
+        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
+            (0, utils_1.queryDeep)(value, field, () => initialValue);
+        }
+    };
+    (0, react_1.useMemo)(reset, []);
+    /**
+     * --------------------------------------------------------------------
+     * 字段值
+     */
+    const isActiveChanging = (0, react_1.useRef)(false);
+    const [innerValue, setInnerValue] = (0, utils_1.useDerivedState)(prev => {
+        isActiveChanging.current = false;
+        const value = typeof field !== 'undefined' && formValue
+            ? (0, utils_1.queryDeep)(formValue, field)
+            : void 0;
+        if (typeof prev !== 'undefined' && typeof value === 'undefined') {
+            console.error(`The field "${(0, utils_1.stringifyField)(field)}"'s value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
+        }
+        return value;
+    }, [formValue, field]);
+    const deferredValue = (0, react_1.useDeferredValue)(innerValue.current);
+    (0, react_1.useEffect)(() => {
+        // 主动改变值，需要触发上层setFieldValue
+        isActiveChanging.current && setFieldValue?.(field, deferredValue);
+    }, [deferredValue]);
+    /**
+     * --------------------------------------------------------------------
+     * 校验
+     */
+    const rulesArr = Array.isArray(rules) ? rules : rules && [rules];
+    const [innerError, setInnerError] = (0, utils_1.useDerivedState)(error);
+    const [innerHelperText, setInnerHelperText] = (0, utils_1.useDerivedState)(helperText);
+    const validate = async () => {
+        if (error) {
+            return false;
+        }
+        const defaultMessage = `请输入${label}`;
+        const promises = [];
+        let invalid = false;
+        rulesArr?.some(r => {
+            if ((r.required && (typeof deferredValue === 'undefined' || deferredValue === null || deferredValue === '')) ||
+                (r.pattern && typeof deferredValue === 'string' && !r.pattern.test(deferredValue))) {
+                setInnerError(true);
+                setInnerHelperText(r.message || defaultMessage);
+                return invalid = true;
+            }
+            if (r.validator) {
+                promises.push((async () => {
+                    try {
+                        await r.validator(deferredValue, formValue, formRef?.current || null);
+                        setInnerError(false);
+                        setInnerHelperText(void 0);
+                    }
+                    catch (e) {
+                        setInnerError(invalid = true);
+                        setInnerHelperText(typeof e === 'string' || typeof e === 'number' || (0, react_1.isValidElement)(e) ? e
+                            : e instanceof Error ? e.message
+                                : r.message || defaultMessage);
+                    }
+                })());
+            }
+            return false;
+        });
+        await Promise.all(promises);
+        if (!invalid) {
+            setInnerError(false);
+            setInnerHelperText(void 0);
+        }
+        return !invalid;
+    };
+    /**
+     * --------------------------------------------------------------------
+     * 依赖更新自动校验
+     */
+    const dependencyValues = (0, react_1.useMemo)(() => {
+        return formValue && dependencies?.map(d => (0, utils_1.queryDeep)(formValue, d));
+    }, [formValue, ...dependencies || []]);
+    (0, react_1.useMemo)(() => {
+        shouldValidate.current && validate().then();
+        shouldValidate.current = true;
+    }, [deferredValue, ...dependencyValues || []]);
+    /**
+     * --------------------------------------------------------------------
+     * 挂载formItemRef
+     */
+    const formItemRef = (0, react_1.useRef)(null);
+    formItemRef.current = {
+        validate,
+        reset,
+        error: innerError.current ? { message: innerHelperText.current } : null,
+        isTouched: isTouched.current
+    };
+    (0, react_1.useImperativeHandle)(ref, () => formItemRef.current);
+    (0, react_1.useEffect)(() => {
+        if (typeof field === 'undefined' || !itemsContainer) {
+            return;
+        }
+        const fieldStr = (0, utils_1.stringifyField)(field);
+        itemsContainer.set(fieldStr, formItemRef.current);
+        return () => {
+            itemsContainer.delete(fieldStr);
+        };
+    });
+    /**
+     * --------------------------------------------------------------------
+     * 渲染部分
+    */
+    const isRequired = (0, react_1.useMemo)(() => {
+        return required ?? rulesArr?.some(r => r.required);
+    }, [rules, required]);
+    const renderedChildren = (0, react_1.useMemo)(() => {
+        if (typeof children === 'function') {
+            return children(typeof field !== 'undefined'
+                ? {
+                    ...typeof innerValue.current === 'boolean'
+                        ? { checked: innerValue.current }
+                        : { value: innerValue.current },
+                    onChange(e) {
+                        isTouched.current = isActiveChanging.current = true;
+                        setInnerValue(o => (0, utils_1.getValueOnChange)(e, o));
+                    }
+                }
+                : {}, {
+                size: props.size,
+                ...innerError.current ? { color: 'error' } : {}
+            });
+        }
+        if ((0, react_1.isValidElement)(children)) {
+            return (0, react_1.cloneElement)(children, {
+                ...typeof field !== 'undefined' && {
+                    ...typeof innerValue.current === 'boolean'
+                        ? { checked: children.props.checked ?? innerValue.current }
+                        : { value: children.props.value ?? innerValue.current },
+                    onChange(e) {
+                        children.props.onChange?.(e);
+                        isTouched.current = isActiveChanging.current = true;
+                        setInnerValue(o => (0, utils_1.getValueOnChange)(e, o));
+                    }
+                },
+                size: children.props.size ?? props.size,
+                ...innerError.current && { color: 'error' }
+            });
+        }
+        return children;
+    }, [children, innerValue.current, innerError.current, field, props.size]);
+    if (noStyle) {
+        return renderedChildren;
+    }
+    return ((0, jsx_runtime_1.jsxs)(descriptions_1.DescriptionItem, { ...props, ref: wrapperRef, className: (0, utils_1.classnames)(form_style_1.classes.item, props.className), label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRequired && !!requiredMark &&
+                    (0, jsx_runtime_1.jsx)("span", { className: form_style_1.classes.requiredMark, children: requiredMark }), label] }), children: [renderedChildren, (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerError.current || !!innerHelperText.current, children: (0, jsx_runtime_1.jsx)("div", { className: form_style_1.classes.helperText, children: innerHelperText.current }) })] }));
+});

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { FormRef, FormValue } from './form';
+export type FormRelatableProps<V extends FormValue> = {
+    shouldUpdate(prevValue: V, nextValue: V): boolean;
+    children(formValue: V, formInstance: FormRef<V>): ReactNode;
+};
+export declare function FormRelatable<V extends FormValue>(props: FormRelatableProps<V>): ReactNode;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormRelatable = FormRelatable;
+const react_1 = require("react");
+const form_1 = require("./form");
+const utils_1 = require("../../utils");
+function FormRelatable(props) {
+    const { formValue, formRef } = (0, form_1.useFormContext)();
+    const prevFormValue = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        prevFormValue.current = (0, utils_1.cloneDeep)(formValue);
+    }, [formValue]);
+    const childrenBackup = (0, react_1.useRef)();
+    if (!prevFormValue.current || props.shouldUpdate(prevFormValue.current, formValue)) {
+        childrenBackup.current = props.children(formValue, formRef.current);
+    }
+    return childrenBackup.current;
+}

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

@@ -0,0 +1,3 @@
+export * from './form';
+export * from './formItem';
+export * from './formRelatable';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./form"), exports);
+tslib_1.__exportStar(require("./formItem"), exports);
+tslib_1.__exportStar(require("./formRelatable"), exports);

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

@@ -0,0 +1,20 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { DialogProps } from '../dialog';
+import { FormProps, FormRef, FormValue } from '../form/form';
+import { FormItemProps } from '../form/formItem';
+import { Obj } from '../../../types';
+interface FormDialogItemProps<I = any> extends Omit<FormItemProps<I>, 'key'>, Obj {
+    key?: string | number;
+}
+export interface FormDialogProps<V extends FormValue> extends Omit<DialogProps, 'title'> {
+    title?: ReactNode | ((value?: V) => ReactNode);
+    formProps?: FormProps<V>;
+    formRef?: Ref<FormRef<V>>;
+    items?: (FormDialogItemProps | ((value?: V) => FormDialogItemProps))[];
+    onFinish?(value: V): any;
+}
+export interface FormDialogRef<V extends FormValue> extends HTMLDivElement {
+    open(value?: V): Promise<V>;
+}
+export declare const FormDialog: <V extends FormValue>(props: FormDialogProps<V>) => ReactElement;
+export {};

package/dist/cjs/components/formDialog/formDialog.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormDialog = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const dialog_1 = require("../dialog");
+const form_1 = require("../form/form");
+const formItem_1 = require("../form/formItem");
+const utils_1 = require("../../utils");
+exports.FormDialog = (0, react_2.forwardRef)(({ title, formProps, formRef, items, onFinish, ...props }, ref) => {
+    const dialogRef = (0, react_2.useRef)(null);
+    const innerFormRef = (0, react_2.useRef)(null);
+    const resolveFn = (0, react_2.useRef)();
+    const rejectFn = (0, react_2.useRef)();
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(props.defaultOpen, props.open);
+    const onCloseHandler = (reason) => {
+        if (reason === 'confirmed') {
+            return;
+        }
+        props.onClose?.(reason);
+        if (!open) {
+            rejectFn.current?.({
+                type: 'canceled',
+                value: innerFormRef.current.getFormValue()
+            });
+            resolveFn.current = rejectFn.current = void 0;
+        }
+        setInnerOpen(false);
+    };
+    (0, react_2.useImperativeHandle)(ref, () => {
+        if (dialogRef.current) {
+            dialogRef.current.open = value => {
+                value
+                    ? innerFormRef.current?.setFormValue(value)
+                    : innerFormRef.current?.resetForm();
+                setInnerOpen(true);
+                setValue(value);
+                return new Promise((resolve, reject) => {
+                    resolveFn.current = resolve;
+                    rejectFn.current = reject;
+                });
+            };
+        }
+        return dialogRef.current;
+    });
+    const [value, setValue] = (0, react_2.useState)();
+    const confirmHandler = () => {
+        innerFormRef.current.submit();
+    };
+    const [innerLoading, finishHandler] = (0, utils_1.useLoading)(async (value) => {
+        formProps?.onFinish?.(value);
+        resolveFn.current?.(value);
+        await onFinish?.(value);
+        setInnerOpen(false);
+    }, props.confirmLoading);
+    const renderItems = () => {
+        if (items?.length) {
+            return items.map((item, i) => {
+                const itemProps = typeof item === 'function' ? item(value) : item;
+                return ((0, react_1.createElement)(formItem_1.FormItem, { ...itemProps, key: (0, utils_1.setDefaultColumnKey)(itemProps) ?? i }));
+            });
+        }
+        return props.children;
+    };
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { ...props, title: typeof title === 'function' ? title(value) : title, ref: dialogRef, open: innerOpen.current, onClose: onCloseHandler, onConfirm: confirmHandler, confirmLoading: innerLoading.current, children: (0, jsx_runtime_1.jsx)(form_1.Form, { ...formProps, ref: (0, utils_1.cloneRef)(formRef, innerFormRef), onFinish: finishHandler, children: renderItems() }) }));
+});

package/dist/cjs/components/formDialog/index.d.ts

@@ -0,0 +1 @@
+export * from './formDialog';

package/dist/cjs/components/formDialog/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./formDialog"), exports);