@hanwenbo/x-web-pro-components 0.0.1

package/es/components/form/index.d.ts

@@ -0,0 +1,285 @@
+import React from 'react';
+import { Form, useForm, useFormInstance, useWatch, type FormInstance, type FormProps, type NamePath } from '@hanwenbo/x-web-ui/form';
+import { type ModalProps } from '@hanwenbo/x-web-ui/modal';
+import { type PopupProps } from '@hanwenbo/x-web-ui/popup';
+import type { ProColumns, ProFormDependencyProps, ProFormFieldItemProps, ProFormInstance, ProSchemaValueEnum, SubmitterProps } from '../../types';
+import { useIntl } from '../provider';
+import { CaptFieldRef, ProFormCaptcha } from './captcha';
+import { ProFormColorPicker } from './colorPicker';
+import { LoginForm, LoginFormPage } from './loginForm';
+import { BetaSchemaForm, SchemaForm } from './schemaForm';
+import { StepForm, StepsForm } from './stepsForm';
+import { ProFormUploadButton, ProFormUploadFile } from './uploadButton';
+import { ProFormUploadDragger } from './uploadDragger';
+export { BetaSchemaForm, SchemaForm } from './schemaForm';
+export { LoginForm, LoginFormPage } from './loginForm';
+export { StepForm, StepsForm } from './stepsForm';
+export { ProFormCaptcha } from './captcha';
+export { ProFormColorPicker } from './colorPicker';
+export { ProFormUploadButton } from './uploadButton';
+export { ProFormUploadDragger } from './uploadDragger';
+export interface ProFormProps<Values = Record<string, any>> extends FormProps<Values> {
+    submitter?: SubmitterProps | false;
+    layoutType?: 'Form' | 'QueryFilter' | 'LightFilter';
+    onReset?: (values?: Values) => void;
+}
+export interface QueryLikeFormProps<Values = Record<string, any>> extends ProFormProps<Values> {
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    defaultColsNumber?: number;
+    defaultFormItemsNumber?: number;
+    split?: boolean;
+    searchText?: string;
+    resetText?: string;
+    labelWidth?: number | 'auto';
+    searchGutter?: number | [number, number];
+    span?: number | {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        xxl?: number;
+    };
+    ignoreRules?: boolean;
+    preserve?: boolean;
+    showHiddenNum?: boolean;
+    hiddenNumCount?: number | false;
+    submitterColSpanProps?: React.HTMLAttributes<HTMLDivElement> & {
+        style?: React.CSSProperties;
+        span?: number;
+    };
+    containerStyle?: React.CSSProperties;
+    collapseRender?: ((collapsed: boolean, props: QueryLikeFormProps<Values> & {
+        form?: FormInstance<Values>;
+        collapse?: boolean;
+        setCollapse?: (collapsed: boolean) => void;
+        showCollapseButton?: boolean;
+    }, intl: ReturnType<typeof useIntl>, hiddenNum?: false | number) => React.ReactNode) | false;
+    optionRender?: ((searchConfig: QueryLikeFormProps<Values> & {
+        form?: FormInstance<Values>;
+        collapse?: boolean;
+        setCollapse?: (collapsed: boolean) => void;
+        showCollapseButton?: boolean;
+        compactActions?: boolean;
+        actionSize?: 'small' | 'middle';
+    }, props: QueryLikeFormProps<Values> & {
+        form?: FormInstance<Values>;
+        collapse?: boolean;
+        setCollapse?: (collapsed: boolean) => void;
+        showCollapseButton?: boolean;
+        compactActions?: boolean;
+        actionSize?: 'small' | 'middle';
+    }, dom: React.ReactNode[]) => React.ReactNode[]) | false;
+}
+export interface LightFilterProps<Values = Record<string, any>> extends ProFormProps<Values> {
+    collapse?: boolean;
+    collapseLabel?: React.ReactNode;
+    variant?: 'outlined' | 'filled' | 'borderless';
+    ignoreRules?: boolean;
+    footerRender?: ((onConfirm?: (e?: React.MouseEvent) => void, onClear?: (e?: React.MouseEvent) => void) => React.ReactNode | false) | false;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'center' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | (string & {});
+    popoverProps?: Omit<PopupProps, 'visible' | 'position' | 'children' | 'onMaskPress' | 'bodyStyle' | 'destroyOnClose'> & {
+        className?: string;
+        overlayStyle?: React.CSSProperties;
+        destroyTooltipOnHide?: boolean;
+    };
+}
+declare type OverlayTrigger = React.ReactNode;
+interface BaseOverlayFormProps<Values = Record<string, any>> extends ProFormProps<Values> {
+    title?: React.ReactNode;
+    width?: number | string;
+    trigger?: OverlayTrigger;
+    open?: boolean;
+    visible?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onVisibleChange?: (open: boolean) => void;
+}
+export interface ModalFormProps<Values = Record<string, any>> extends BaseOverlayFormProps<Values> {
+    modalProps?: Omit<ModalProps, 'visible' | 'onClose' | 'title' | 'body' | 'actions' | 'width'>;
+}
+export interface DrawerFormProps<Values = Record<string, any>> extends BaseOverlayFormProps<Values> {
+    drawerProps?: Omit<PopupProps, 'visible' | 'onMaskPress' | 'children' | 'position' | 'bodyStyle'> & {
+        bodyStyle?: React.CSSProperties;
+    };
+}
+export interface ProFormContextValue {
+    form?: FormInstance<any>;
+    layoutType?: ProFormProps['layoutType'];
+}
+export interface GridContextValue {
+    colProps?: Record<string, any>;
+    grid?: boolean;
+}
+export interface FieldContextValue {
+    formItemProps?: Record<string, any>;
+    setFieldValueType?: (name: NamePath, valueType?: string) => void;
+}
+export interface LightWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const ProFormContext: React.Context<ProFormContextValue>;
+export declare const GridContext: React.Context<GridContextValue>;
+export declare const FieldContext: React.Context<FieldContextValue>;
+export declare const FormListContext: React.Context<Record<string, any>>;
+export declare const LightWrapper: React.ForwardRefExoticComponent<LightWrapperProps & React.RefAttributes<HTMLDivElement>>;
+declare type OptionLike = {
+    label: React.ReactNode;
+    value: string | number | boolean;
+    disabled?: boolean;
+    options?: OptionLike[];
+    children?: OptionLike[];
+};
+declare type RequestLike = (params?: Record<string, any>) => Promise<OptionLike[]>;
+interface ProFormOptionFieldProps<T = Record<string, any>> extends ProFormFieldItemProps<T> {
+    mode?: 'multiple' | 'tags' | 'single';
+    valueEnum?: ProSchemaValueEnum;
+    options?: OptionLike[];
+    request?: RequestLike;
+    params?: Record<string, any>;
+    showSearch?: boolean;
+    debounceTime?: number;
+    fetchDataOnSearch?: boolean;
+    searchOnFocus?: boolean;
+    resetAfterSelect?: boolean;
+}
+declare const BaseProForm: <Values extends Record<string, any> = Record<string, any>>({ submitter, layoutType, layout, form: controlledForm, onReset, classNames, colon, className, children, defaultCollapsed, collapsed, onCollapse, defaultColsNumber, defaultFormItemsNumber, split, searchText, resetText, labelWidth, searchGutter, span, ignoreRules, preserve, showHiddenNum, collapseRender, optionRender, submitterColSpanProps, containerStyle, ...restProps }: QueryLikeFormProps<Values>) => React.JSX.Element;
+export declare const ProFormField: React.FC<ProFormOptionFieldProps>;
+export declare const ProFormText: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormTextArea: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDigit: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDigitRange: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormMoney: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormPercent: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormPassword: React.FC<ProFormFieldItemProps>;
+export declare const ProFormSelect: React.FC<ProFormOptionFieldProps> & {
+    SearchSelect?: React.FC<ProFormOptionFieldProps>;
+};
+export declare const ProFormCheckbox: React.FC<ProFormOptionFieldProps>;
+export declare const ProFormRadio: React.FC<ProFormOptionFieldProps>;
+export declare const ProFormTreeSelect: React.FC<ProFormOptionFieldProps>;
+export declare const ProFormSegmented: React.FC<ProFormOptionFieldProps>;
+export declare const ProFormCascader: React.FC<ProFormOptionFieldProps>;
+export declare const ProFormDatePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateWeekPicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateMonthPicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateQuarterPicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateYearPicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateTimePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormTimePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateRangePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateMonthRangePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateQuarterRangePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateTimeRangePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateWeekRangePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormDateYearRangePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormTimeRangePicker: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormSwitch: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormRate: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export declare const ProFormSlider: React.FC<ProFormFieldItemProps<Record<string, any>>>;
+export interface ProFormFieldSetProps extends Omit<ProFormFieldItemProps<any[]>, 'fieldProps'> {
+    fieldProps?: {
+        type?: 'space' | 'group';
+        className?: string;
+    };
+    children?: React.ReactNode | ((value: any[]) => React.ReactNode);
+}
+export declare const ProFormFieldSet: React.FC<ProFormFieldSetProps>;
+export declare const ProFormGroup: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const ProFormDependency: React.FC<ProFormDependencyProps>;
+export declare const QueryFilter: React.FC<QueryLikeFormProps>;
+export declare const LightFilter: React.FC<LightFilterProps>;
+export declare const ModalForm: <Values extends Record<string, any> = Record<string, any>>({ trigger, open, visible, defaultOpen, onOpenChange, onVisibleChange, modalProps, title, width, form: controlledForm, onFinish, submitter, layout, children, ...restProps }: ModalFormProps<Values>) => React.JSX.Element;
+export declare const DrawerForm: <Values extends Record<string, any> = Record<string, any>>({ trigger, open, visible, defaultOpen, onOpenChange, onVisibleChange, drawerProps, title, width, form: controlledForm, onFinish, submitter, layout, children, ...restProps }: DrawerFormProps<Values>) => React.JSX.Element;
+export declare const ProFormList: any;
+export declare const ProFormErrorList: any;
+declare type ProFormComponent = typeof BaseProForm & {
+    useForm: typeof useForm;
+    useFormInstance: typeof useFormInstance;
+    useWatch: typeof useWatch;
+    Item: typeof Form.Item;
+    List: typeof Form.List;
+    ErrorList: typeof Form.ErrorList;
+    Provider: typeof Form.Provider;
+    Group: typeof ProFormGroup;
+    Dependency: typeof ProFormDependency;
+    QueryFilter: typeof QueryFilter;
+    LightFilter: typeof LightFilter;
+    ModalForm: typeof ModalForm;
+    DrawerForm: typeof DrawerForm;
+    LoginForm: typeof LoginForm;
+    LoginFormPage: typeof LoginFormPage;
+    Captcha: typeof ProFormCaptcha;
+    ColorPicker: typeof ProFormColorPicker;
+    UploadButton: typeof ProFormUploadButton;
+    UploadDragger: typeof ProFormUploadDragger;
+    StepsForm: typeof StepsForm;
+    StepForm: typeof StepForm;
+    SchemaForm: typeof SchemaForm;
+    BetaSchemaForm: typeof BetaSchemaForm;
+    Field: typeof ProFormField;
+    Text: typeof ProFormText;
+    TextArea: typeof ProFormTextArea;
+    Digit: typeof ProFormDigit;
+    DigitRange: typeof ProFormDigitRange;
+    Money: typeof ProFormMoney;
+    Percent: typeof ProFormPercent;
+    Select: typeof ProFormSelect;
+    Checkbox: typeof ProFormCheckbox;
+    Radio: typeof ProFormRadio;
+    TreeSelect: typeof ProFormTreeSelect;
+    Segmented: typeof ProFormSegmented;
+    Cascader: typeof ProFormCascader;
+    DatePicker: typeof ProFormDatePicker;
+    DateWeekPicker: typeof ProFormDateWeekPicker;
+    DateMonthPicker: typeof ProFormDateMonthPicker;
+    DateQuarterPicker: typeof ProFormDateQuarterPicker;
+    DateYearPicker: typeof ProFormDateYearPicker;
+    DateTimePicker: typeof ProFormDateTimePicker;
+    TimePicker: typeof ProFormTimePicker;
+    DateRangePicker: typeof ProFormDateRangePicker;
+    DateMonthRangePicker: typeof ProFormDateMonthRangePicker;
+    DateQuarterRangePicker: typeof ProFormDateQuarterRangePicker;
+    DateTimeRangePicker: typeof ProFormDateTimeRangePicker;
+    DateWeekRangePicker: typeof ProFormDateWeekRangePicker;
+    DateYearRangePicker: typeof ProFormDateYearRangePicker;
+    TimeRangePicker: typeof ProFormTimeRangePicker;
+    FieldSet: typeof ProFormFieldSet;
+    Switch: typeof ProFormSwitch;
+    Rate: typeof ProFormRate;
+    Slider: typeof ProFormSlider;
+};
+export declare const ProForm: ProFormComponent;
+export declare type FormListActionType = {
+    add: (defaultValue?: any, insertIndex?: number) => void;
+    move: (from: number, to: number) => void;
+    remove: (index: number | number[]) => void;
+};
+export declare type ProFormColumnsType = ProColumns;
+export declare type ProFormFieldProps = ProFormFieldItemProps;
+export declare type ProFormItemProps = ProFormFieldItemProps;
+export declare type ProFormLayoutType = NonNullable<ProFormProps['layoutType']>;
+export declare type ProFormListProps = React.ComponentProps<typeof Form.List>;
+export declare type QueryFilterProps = QueryLikeFormProps;
+export declare type ProFormDigitProps = React.ComponentProps<typeof ProFormDigit>;
+export declare type ProFormDigitRangeProps = React.ComponentProps<typeof ProFormDigitRange>;
+export declare type ProFormMoneyProps = React.ComponentProps<typeof ProFormMoney>;
+export declare type ProFormSelectProps = React.ComponentProps<typeof ProFormSelect>;
+export declare type ProFormCheckboxGroupProps = React.ComponentProps<typeof ProFormCheckbox>;
+export declare type ProFormCheckboxProps = React.ComponentProps<typeof ProFormCheckbox>;
+export declare type ProFormRadioGroupProps = React.ComponentProps<typeof ProFormRadio>;
+export declare type ProFormSliderProps = React.ComponentProps<typeof ProFormSlider>;
+export declare type ProFormSwitchProps = React.ComponentProps<typeof ProFormSwitch>;
+export declare type ProFormTreeSelectProps = React.ComponentProps<typeof ProFormTreeSelect>;
+export declare type ProFormCaptchaProps = React.ComponentProps<typeof ProFormCaptcha>;
+export declare type ProFormColorPickerProps = React.ComponentProps<typeof ProFormColorPicker>;
+export declare type ProFormUploadButtonProps = React.ComponentProps<typeof ProFormUploadButton>;
+export declare type ProFormUploadDraggerProps = React.ComponentProps<typeof ProFormUploadDragger>;
+export declare type GroupProps = React.ComponentProps<typeof ProFormGroup>;
+export declare type LightFilterFooterRender = ((onConfirm?: (e?: React.MouseEvent) => void, onClear?: (e?: React.MouseEvent) => void) => React.ReactNode | false) | false;
+export type { CaptFieldRef, ProFormInstance, ProFormUploadFile };
+export type { SubmitterProps, ProFormDependencyProps };
+export declare const ProFormCore: <Values extends Record<string, any> = Record<string, any>>({ submitter, layoutType, layout, form: controlledForm, onReset, classNames, colon, className, children, defaultCollapsed, collapsed, onCollapse, defaultColsNumber, defaultFormItemsNumber, split, searchText, resetText, labelWidth, searchGutter, span, ignoreRules, preserve, showHiddenNum, collapseRender, optionRender, submitterColSpanProps, containerStyle, ...restProps }: QueryLikeFormProps<Values>) => React.JSX.Element;
+export default ProForm;