@spacego/fe-components 0.2.0 → 0.2.2

package/lib/types/fe-form/fe-form/index.d.ts

@@ -16,341 +16,339 @@ import { FeTimePickerProps } from '../../fe-time-picker/index.d';
 import { IFeUploadProps } from '../../fe-upload/index.d';
 import { FeFormItemProps } from '../fe-form-item/index.d';
 import { FeFormLabelProps } from '../fe-form-label/index.d';
-
-
-export type FeFormRule = FormRule;
-
-export type TFormItemType =
-  | 'input'
-  | 'inputNumber'
-  | 'text'
-  | 'select'
-  | 'date'
-  | 'textarea'
-  | 'checkbox'
-  | 'radio'
-  | 'btnGroup'
-  | 'switch'
-  | 'upload'
-  | 'cascader'
-  | 'timePicker'
-  | 'timeRange'
-  | 'datePicker'
-  | 'dateRange'
-  | 'upload'
-  | 'richText'
-  | 'render'
-  | 'autoComplete'
-
-export interface IFeFormItems<DataType = Record<string, any>> extends FeFormLabelProps {
-  /**
-   * @name 表单值
-   */
-  value?: any;
-  /**
-   * @name 表单项类型
-   */
-  type: TFormItemType;
-  /**
-   * @name 与实体映射的key
-   */
-  dataIndex: keyof DataType | (keyof DataType)[];
-  /**
-   * @name 标题
-   */
-  label: string;
-  /**
-   * @name 是否必填
-   * @default false
-   */
-  required?: boolean;
-  /**
-   * @name 校验规则
-   */
-  rules?: FeFormRule[];
-  /**
-   * @name 表单栅格占位
-   * @default 6
-   */
-  colSpan?: number;
-  /**
-   * @name 自定义placeholder
-   *
-   * 使用 placeholder 代表placeholder完全自定义，且placeholder跟form-item的message一致
-   *
-   * 目前仅在 inputInpu t和 selectInput 中生效
-   * @default `请选择${label}`
-   */
-  placeholder?: string | string[];
-  /**
-   * @name 是否隐藏
-   * @default false
-   */
-  isHidden?: boolean;
-  /**
-   * @name 当前需要重置，此值改变时需要重置自定义的受控组件状态
-   * @default "" 空字符串
-   */
-  forceValue?: string;
-  /**
-   * @name 数据发生变化时事件
-   * @param val 修改后的值
-   */
-  onChange?: (val) => void;
-  /**
-   * @name 自定义属性
-   */
-  attributes?: Record<string, any>;
-  /**
-   * @name 自定义表单必填时的提示信息
-   */
-  requiredMessage?: string;
-  /**
-   * @name 表单值类型
-   */
-  valueType?: FeFormItemProps['valueType'];
-  /**
-   * @name 表单属性
-   */
-  divAttributes?: React.HTMLAttributes<HTMLDivElement>;
-  inputAttributes?: FeInputProps & {
-    /**
-     * @name 输入框类型 input普通输入框 inputWithBtn右侧带按钮
-     * @default input
-     */
-    inputType?: 'input' | 'inputWithBtn';
-  };
-  selectAttributes?: FeSelectProps & {
-    /**
-     * @name 下拉框类型 single单选 multiple多选
-     * @default single
-     */
-    selectType?: 'single' | 'multiple';
-    /**
-     * @name 下拉框数据
-     */
-    options?: Array<{ dataIndex: string | number; label: string }>;
-    /**
-     * @name 是否显示全选功能
-     * @default false
-     */
-    showSelectAll?: boolean;
-    /**
-     * @name 全选功能回调
-     * @param checked 是否选中
-     * @param values 选中的值
-     */
-    onSelectAll?: (checked: boolean, values: any[]) => void;
-  };
-  buttonAttributes?: FeButtonProps;
-  timePickerAttributes?: FeTimePickerProps;
-  datePickerAttributes?: FeDatePickerProps & {
-    /**
-     * @name 日期选择框类型
-     * @default datePicker
-     */
-    datePickerType?: 'datePicker' | 'datePickerLongTime';
-  };
-  dateRangePickerAttributes?: RangePickerProps & {
-    onChange?: (dates: any, dateStrings: [string, string]) => void;
-    /**
-     * @name 区间是否需要带时间
-     * @example 2024 12-12 00:00:00 2024 12-12 23:59:59
-     * @default true
-     */
-    hasTime?: boolean;
-  };
-  /**
-   * @name 文本域属性
-   */
-  textAreaAttributes?: FeTextAreaProps;
-  /**
-   * @name 级联属性
-   */
-  cascaderAttributes?: FeCascaderProps;
-  /**
-   * @name 数字输入框属性
-   */
-  inputNumberAttributes?: FeInputNumberProps & {
-    /**
-     * @name 是否需要千分位
-     * @default false
-     */
-    hasThousands?: boolean;
-    /**
-     * @name 千分位配置
-     */
-    thousandsParams?: {
-      precision?: number;
-      fillZero?: boolean;
-      separator?: string;
-    };
-  };
-  /**
-   * @name Upload属性
-   */
-  uploadAttributes?: IFeUploadProps;
-  /**
-   * @name Upload属性 - 多个上传 适用于正反身份证
-   */
-  uploadMultiple?: boolean;
-  /**
-   * @name 富文本属性
-   * */
-  richTextAttributes?: FeRichTextProps;
-  /**
-   * @name 输入框输入框属性
-   */
-  inputInputAttributes?: FeInputProps & {
-    /**
-     * @name colSpan 已启用珊格布局 选择器栅格占位，支持传递数组单独定义每一个input colspan
-     * @default 24 / ['dataIndex'].length
-     */
-    colSpan?: number | number[];
-  };
-  /**
-   * @name 选择器输入框属性
-   */
-  selectInputAttributes?: {
-    /**
-     * @name 选择器属性
-     */
-    selectAttributes?: IFeFormItems['selectAttributes'] & {
-      /**
-       * @name pure 模式下 下拉框数据
-       */
-      pureOptions?: Array<{ dataIndex: keyof DataType; label: string }>;
-      /**
-       * @name pure 模式下 select的值，值为pureOptions的dataIndex
-       */
-      pureSelectValue?: keyof DataType;
-      /**
-       * @name colSpan 已启用珊格布局 选择器栅格占位
-       * @default 12
-       */
-      colSpan?: number;
-    };
-    /**
-     * @name 输入框属性
-     */
-    inputAttributes?: IFeFormItems['inputAttributes'] & {
-      /**
-       * @name colSpan 已启用珊格布局 选择器栅格占位
-       * @default 12
-       */
-      colSpan?: number;
-    };
-    /**
-     * @name 数字输入框属性
-     */
-    inputNumberAttributes?: IFeFormItems['inputNumberAttributes'] & {
-      /**
-       * @name colSpan 已启用珊格布局 选择器栅格占位
-       * @default 12
-       */
-      colSpan?: number;
-    };
-    /**
-     * @name 是否纯净模式
-     *
-     * 纯净模式意为：不占用额外的key，select的value为input的key。故纯净模式下dataIndex无效
-     */
-    isPure?: boolean;
-    /**
-     * @name input类型 普通input和数字input
-     */
-    inputType?: 'input' | 'inputNumber';
-  };
-  /**
-   * @name 单选属性
-   */
-  radioGroupAttributes?: FeRadioGroupProps & { };
-  /**
-   * @name 开关属性
-   */
-  switchAttributes?: FeSwitchProps;
-  /**
-   * @name 按钮组属性
-   */
-  buttonGroupAttributes?: FeRadioGroupProps & {
-    buttonStyle: 'outline' | 'solid';
-  };
-  /**
-   * @name 多选属性
-   */
-  checkboxGroupAttributes?: FeCheckboxGroupProps & {};
-  /**
-   * @name 自定义渲染
-   */
-  renderAttributes?: {
-    /*
-     * @name 自定义渲染子组件
-     */
-    children: (props: any) => any;
-    /**
-     * 值类型
-     */
-    valueType?: FeFormItemProps['valueType'];
-  };
-  autoCompleteAttributes?: {
-    options?: Array<string>;
-    /**
-     * @name 自定义过滤选项
-     */
-    filterOption?: (input: string, option: any) => boolean;
-  };
-}
-
-export interface FeFormProps<DataType = Record<string, any>> {
-  /**
-   * @name 表单ref
-   */
-  formRef?: React.RefObject<FormInstance>;
-  /**
-   * @name 表单项
-   */
-  formItems: IFeFormItems<DataType>[];
-  /**
-   * @name 表单数据
-   */
-  formData: DataType;
-  /**
-   * 是否开启响应式(仅search类型)
-   * @default true
-   */
-  formReactive?: boolean;
-  /**
-   * @name 表单栅格占位
-   */
-  formColSpan?: number;
-  /**
-   * @name 表单类型 search | form
-   */
-  type: 'search' | 'form';
-  /**
-   * @name 标签宽度
-   */
-  labelWidth?: string;
-  /**
-   * @name 是否展开
-   * @default true
-   */
-  isExpanded?: boolean;
-  /**
-   * @name 表单数据发生变化时事件
-   * @param formData 表单数据
-   */
-  onValueChange?: React.Dispatch<React.SetStateAction<DataType>>;
-  /**
-   * @name 搜索事件
-   */
-  onSearch?: () => void;
-  /**
-   * @name 重置事件
-   */
-  onReload?: () => void;
-  /**
-   * @name 表单基础属性，用于覆盖antd的Form组件的默认属性
-   */
-  baseFormAttributes?: Partial<Omit<FormProps, 'form' | 'onValuesChange'>>;
-}
+export type FeFormRule = FormRule;
+
+export type TFormItemType =
+  | 'input'
+  | 'inputNumber'
+  | 'text'
+  | 'select'
+  | 'date'
+  | 'textarea'
+  | 'checkbox'
+  | 'radio'
+  | 'btnGroup'
+  | 'switch'
+  | 'upload'
+  | 'cascader'
+  | 'timePicker'
+  | 'timeRange'
+  | 'datePicker'
+  | 'dateRange'
+  | 'upload'
+  | 'richText'
+  | 'render'
+  | 'autoComplete'
+
+export interface IFeFormItems<DataType = Record<string, any>> extends FeFormLabelProps {
+  /**
+   * @name 表单值
+   */
+  value?: any;
+  /**
+   * @name 表单项类型
+   */
+  type: TFormItemType;
+  /**
+   * @name 与实体映射的key
+   */
+  dataIndex: keyof DataType | (keyof DataType)[];
+  /**
+   * @name 标题
+   */
+  label: string;
+  /**
+   * @name 是否必填
+   * @default false
+   */
+  required?: boolean;
+  /**
+   * @name 校验规则
+   */
+  rules?: FeFormRule[];
+  /**
+   * @name 表单栅格占位
+   * @default 6
+   */
+  colSpan?: number;
+  /**
+   * @name 自定义placeholder
+   *
+   * 使用 placeholder 代表placeholder完全自定义，且placeholder跟form-item的message一致
+   *
+   * 目前仅在 inputInpu t和 selectInput 中生效
+   * @default `请选择${label}`
+   */
+  placeholder?: string | string[];
+  /**
+   * @name 是否隐藏
+   * @default false
+   */
+  isHidden?: boolean;
+  /**
+   * @name 当前需要重置，此值改变时需要重置自定义的受控组件状态
+   * @default "" 空字符串
+   */
+  forceValue?: string;
+  /**
+   * @name 数据发生变化时事件
+   * @param val 修改后的值
+   */
+  onChange?: (val) => void;
+  /**
+   * @name 自定义属性
+   */
+  attributes?: Record<string, any>;
+  /**
+   * @name 自定义表单必填时的提示信息
+   */
+  requiredMessage?: string;
+  /**
+   * @name 表单值类型
+   */
+  valueType?: FeFormItemProps['valueType'];
+  /**
+   * @name 表单属性
+   */
+  divAttributes?: React.HTMLAttributes<HTMLDivElement>;
+  inputAttributes?: FeInputProps & {
+    /**
+     * @name 输入框类型 input普通输入框 inputWithBtn右侧带按钮
+     * @default input
+     */
+    inputType?: 'input' | 'inputWithBtn';
+  };
+  selectAttributes?: FeSelectProps & {
+    /**
+     * @name 下拉框类型 single单选 multiple多选
+     * @default single
+     */
+    selectType?: 'single' | 'multiple';
+    /**
+     * @name 下拉框数据
+     */
+    options?: Array<{ dataIndex: string | number; label: string }>;
+    /**
+     * @name 是否显示全选功能
+     * @default false
+     */
+    showSelectAll?: boolean;
+    /**
+     * @name 全选功能回调
+     * @param checked 是否选中
+     * @param values 选中的值
+     */
+    onSelectAll?: (checked: boolean, values: any[]) => void;
+  };
+  buttonAttributes?: FeButtonProps;
+  timePickerAttributes?: FeTimePickerProps;
+  datePickerAttributes?: FeDatePickerProps & {
+    /**
+     * @name 日期选择框类型
+     * @default datePicker
+     */
+    datePickerType?: 'datePicker' | 'datePickerLongTime';
+  };
+  dateRangePickerAttributes?: RangePickerProps & {
+    onChange?: (dates: any, dateStrings: [string, string]) => void;
+    /**
+     * @name 区间是否需要带时间
+     * @example 2024 12-12 00:00:00 2024 12-12 23:59:59
+     * @default true
+     */
+    hasTime?: boolean;
+  };
+  /**
+   * @name 文本域属性
+   */
+  textAreaAttributes?: FeTextAreaProps;
+  /**
+   * @name 级联属性
+   */
+  cascaderAttributes?: FeCascaderProps;
+  /**
+   * @name 数字输入框属性
+   */
+  inputNumberAttributes?: FeInputNumberProps & {
+    /**
+     * @name 是否需要千分位
+     * @default false
+     */
+    hasThousands?: boolean;
+    /**
+     * @name 千分位配置
+     */
+    thousandsParams?: {
+      precision?: number;
+      fillZero?: boolean;
+      separator?: string;
+    };
+  };
+  /**
+   * @name Upload属性
+   */
+  uploadAttributes?: IFeUploadProps;
+  /**
+   * @name Upload属性 - 多个上传 适用于正反身份证
+   */
+  uploadMultiple?: boolean;
+  /**
+   * @name 富文本属性
+   * */
+  richTextAttributes?: FeRichTextProps;
+  /**
+   * @name 输入框输入框属性
+   */
+  inputInputAttributes?: FeInputProps & {
+    /**
+     * @name colSpan 已启用珊格布局 选择器栅格占位，支持传递数组单独定义每一个input colspan
+     * @default 24 / ['dataIndex'].length
+     */
+    colSpan?: number | number[];
+  };
+  /**
+   * @name 选择器输入框属性
+   */
+  selectInputAttributes?: {
+    /**
+     * @name 选择器属性
+     */
+    selectAttributes?: IFeFormItems['selectAttributes'] & {
+      /**
+       * @name pure 模式下 下拉框数据
+       */
+      pureOptions?: Array<{ dataIndex: keyof DataType; label: string }>;
+      /**
+       * @name pure 模式下 select的值，值为pureOptions的dataIndex
+       */
+      pureSelectValue?: keyof DataType;
+      /**
+       * @name colSpan 已启用珊格布局 选择器栅格占位
+       * @default 12
+       */
+      colSpan?: number;
+    };
+    /**
+     * @name 输入框属性
+     */
+    inputAttributes?: IFeFormItems['inputAttributes'] & {
+      /**
+       * @name colSpan 已启用珊格布局 选择器栅格占位
+       * @default 12
+       */
+      colSpan?: number;
+    };
+    /**
+     * @name 数字输入框属性
+     */
+    inputNumberAttributes?: IFeFormItems['inputNumberAttributes'] & {
+      /**
+       * @name colSpan 已启用珊格布局 选择器栅格占位
+       * @default 12
+       */
+      colSpan?: number;
+    };
+    /**
+     * @name 是否纯净模式
+     *
+     * 纯净模式意为：不占用额外的key，select的value为input的key。故纯净模式下dataIndex无效
+     */
+    isPure?: boolean;
+    /**
+     * @name input类型 普通input和数字input
+     */
+    inputType?: 'input' | 'inputNumber';
+  };
+  /**
+   * @name 单选属性
+   */
+  radioGroupAttributes?: FeRadioGroupProps & { };
+  /**
+   * @name 开关属性
+   */
+  switchAttributes?: FeSwitchProps;
+  /**
+   * @name 按钮组属性
+   */
+  buttonGroupAttributes?: FeRadioGroupProps & {
+    buttonStyle: 'outline' | 'solid';
+  };
+  /**
+   * @name 多选属性
+   */
+  checkboxGroupAttributes?: FeCheckboxGroupProps & {};
+  /**
+   * @name 自定义渲染
+   */
+  renderAttributes?: {
+    /*
+     * @name 自定义渲染子组件
+     */
+    children: (props: any) => any;
+    /**
+     * 值类型
+     */
+    valueType?: FeFormItemProps['valueType'];
+  };
+  autoCompleteAttributes?: {
+    options?: Array<string>;
+    /**
+     * @name 自定义过滤选项
+     */
+    filterOption?: (input: string, option: any) => boolean;
+  };
+}
+
+export interface FeFormProps<DataType = Record<string, any>> {
+  /**
+   * @name 表单ref
+   */
+  formRef?: React.RefObject<FormInstance>;
+  /**
+   * @name 表单项
+   */
+  formItems: IFeFormItems<DataType>[];
+  /**
+   * @name 表单数据
+   */
+  formData: DataType;
+  /**
+   * 是否开启响应式(仅search类型)
+   * @default true
+   */
+  formReactive?: boolean;
+  /**
+   * @name 表单栅格占位
+   */
+  formColSpan?: number;
+  /**
+   * @name 表单类型 search | form
+   */
+  type: 'search' | 'form';
+  /**
+   * @name 标签宽度
+   */
+  labelWidth?: string;
+  /**
+   * @name 是否展开
+   * @default true
+   */
+  isExpanded?: boolean;
+  /**
+   * @name 表单数据发生变化时事件
+   * @param formData 表单数据
+   */
+  onValueChange?: React.Dispatch<React.SetStateAction<DataType>>;
+  /**
+   * @name 搜索事件
+   */
+  onSearch?: () => void;
+  /**
+   * @name 重置事件
+   */
+  onReload?: () => void;
+  /**
+   * @name 表单基础属性，用于覆盖antd的Form组件的默认属性
+   */
+  baseFormAttributes?: Partial<Omit<FormProps, 'form' | 'onValuesChange'>>;
+}