@spacego/fe-components 0.1.0 → 0.2.0

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

@@ -0,0 +1,356 @@
+import { FormInstance, FormProps, FormRule } from 'antd';
+import { RangePickerProps } from 'antd/es/date-picker';
+import { default as React } from 'react';
+import { FeButtonProps } from '../../fe-button/index.d';
+import { FeCascaderProps } from '../../fe-cascader/index.d';
+import { FeCheckboxGroupProps } from '../../fe-checkbox-group/index.d';
+import { FeDatePickerProps } from '../../fe-date-picker/index.d';
+import { FeInputProps } from '../../fe-input/index.d';
+import { FeInputNumberProps } from '../../fe-input-number/index.d';
+import { FeRadioGroupProps } from '../../fe-radio-group/index.d';
+import { FeRichTextProps } from '../../fe-rich-text/index.d';
+import { FeSelectProps } from '../../fe-select/index.d';
+import { FeSwitchProps } from '../../fe-switch/index.d';
+import { FeTextAreaProps } from '../../fe-text-area/index.d';
+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'>>;
+}

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormAutoComplete: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormAutoComplete;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormBtnGroup: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormBtnGroup;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormCascader: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormCascader;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormCheckbox: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormCheckbox;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormDatePicker: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormDatePicker;

package/lib/types/fe-form/fe-form-date-range-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormDateRangePicker: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormDateRangePicker;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormInput: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormInput;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormInputInput: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormInputInput;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormInputNumber: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormInputNumber;

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

@@ -0,0 +1,70 @@
+import { Rule as FeFormRule } from 'antd';
+import { FeFormLabelProps } from '../fe-form-label/index.d';
+
+
+export type FeFormRule = FeFormRule;
+
+export interface FeFormItemProps extends FeFormLabelProps {
+  /**
+   * 表单标识
+   */
+  name?: string | string[];
+  /**
+   * 表单类型
+   */
+  type: string;
+  /**
+   * 表单规则触发方式
+   */
+  validateTrigger?: string;
+  /**
+   * 表单报错提示
+   */
+  requiredMessage?: string;
+  /**
+   * 表单规则
+   */
+  rules?: FeFormRule[];
+  /**
+   * 初始化值
+   */
+  initialValue?: any;
+  /**
+   * 是否必填
+   */
+  required: boolean;
+  /**
+   * 其他属性
+   */
+  attributes?: Record<string, any>;
+  /**
+   * 表单内容
+   */
+  children?: React.ReactNode;
+  /**
+   * 表单值类型
+   */
+  valueType?:
+    | 'string'
+    | 'number'
+    | 'boolean'
+    | 'method'
+    | 'regexp'
+    | 'integer'
+    | 'float'
+    | 'object'
+    | 'enum'
+    | 'date'
+    | 'url'
+    | 'hex'
+    | 'email'
+    | 'array';
+  /**
+   * 获取值的属性
+   */
+  getValueProps?: (value: any) => any;
+  /**
+   * 标准化值
+   */
+  normalize?: (value: any) => any;
+}

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

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+
+
+export interface FeFormLabelProps {
+  /**
+   * 标签
+   */
+  label: string;
+  /**
+   * 标签左侧内容
+   */
+  labelLeft?: React.ReactNode;
+  /**
+   * 标签右侧内容
+   */
+  labelRight?: React.ReactNode;
+  /**
+   * 标签对齐方式
+   */
+  labelAlign?: 'left' | 'right';
+  /**
+   * 标签宽度
+   */
+  labelWidth?: string;
+  /**
+   * 是否显示新增按钮
+   */
+  showAdd?: boolean;
+  /**
+   * 点击新增按钮
+   */
+  onAddClick?: (evt: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+  /**
+   * 是否显示右侧提示
+   */
+  showHint?: boolean;
+  /**
+   * 提示文案
+   */
+  hintText?: string | React.ReactNode;
+  /**
+   * 是否需要展示label
+   */
+  needLabel?: boolean;
+}

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormRadio: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormRadio;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormRender: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormRender;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormRichText: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormRichText;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormSelect: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormSelect;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormSwitch: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormSwitch;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormText: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormText;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormTextArea: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormTextArea;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormTimePicker: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormTimePicker;

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

@@ -0,0 +1,3 @@
+import { IFeFormItems } from '../fe-form/index.d';
+declare const FeFormUpload: (props: IFeFormItems) => import("react/jsx-runtime").JSX.Element;
+export default FeFormUpload;

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

@@ -0,0 +1,26 @@
+export { default as FeUseForm } from '../hooks/use-form';
+export { default as FeForm } from './fe-form';
+export * from './fe-form';
+export { default as FeFormAutoComplete } from './fe-form-auto-complete';
+export { default as FeFormBtnGroup } from './fe-form-btn-group';
+export { default as FeFormCascader } from './fe-form-cascader';
+export { default as FeFormCheckboxGroup } from './fe-form-checkbox-group';
+export { default as FeFormDatePicker } from './fe-form-date-picker';
+export { default as FeFormDateRangePicker } from './fe-form-date-range-picker';
+export { default as FeFormInput } from './fe-form-input';
+export { default as FeFormInputInput } from './fe-form-input-input';
+export { default as FeFormInputNumber } from './fe-form-input-number';
+export { default as FeFormItem } from './fe-form-item';
+export * from './fe-form-item';
+export { default as FeFormLabel } from './fe-form-label';
+export * from './fe-form-label';
+export { default as FeFormRadio } from './fe-form-radio';
+export { default as FeFormRender } from './fe-form-render';
+export { default as FeFormRichText } from './fe-form-rich-text';
+export { default as FeFormSelect } from './fe-form-select';
+export { default as FeFormSwitch } from './fe-form-switch';
+export { default as FeFormText } from './fe-form-text';
+export { default as FeFormTextArea } from './fe-form-text-area';
+export { default as FeFormTimePicker } from './fe-form-time-picker';
+export { default as FeFormUpload } from './fe-form-upload';
+export * from './utils';

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

@@ -0,0 +1,24 @@
+import { FeFormItemProps } from '../fe-form-item/index.d';
+export declare const getLabelProps: (props: any) => {
+    label: any;
+    labelLeft: any;
+    labelRight: any;
+    labelAlign: any;
+    labelWidth: any;
+    showAdd: any;
+    onAddClick: any;
+    showHint: any;
+    hintText: any;
+    needLabel: any;
+};
+interface IFeFormItemsConfig {
+    /**
+     * 默认表单值类型
+     */
+    valueType: FeFormItemProps['valueType'];
+}
+export declare const getFormItemProps: (props: any, config?: IFeFormItemsConfig) => {
+    validateTrigger: any;
+    valueType: any;
+};
+export {};

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

@@ -0,0 +1,12 @@
+import { InputProps } from 'antd';
+import { PasswordProps } from 'antd/es/input/Password';
+export interface FeInputProps extends InputProps {
+  /**
+   * @name 是否默认开启input的title属性，默认把value当作title
+   */
+  isShowTitle?: boolean;
+  /**
+   * @name 密码输入框的属性
+   */
+  passwordAttr?: PasswordProps;
+}

package/lib/types/fe-input-number/index.d.ts

@@ -0,0 +1,2 @@
+import { InputNumberProps } from 'antd';
+export interface FeInputNumberProps extends InputNumberProps {}