import React from 'react'; import { Input, Checkbox, Switch, Button, DatePicker } from 'antd'; import { TextProps } from 'antd/lib/typography/Text'; import { InputProps, PasswordProps } from 'antd/lib/input'; import { SwitchProps } from 'antd/lib/switch'; import { ButtonProps } from 'antd/lib/button'; import { CheckboxProps } from 'antd/lib/checkbox'; import { CheckboxValueType } from 'antd/lib/checkbox/Group'; import { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker'; import { YFormItemProps, YFormItemsProps } from './Items'; import { searchSelect } from './utils'; import CustomTypography from './component/Typography'; import OneLine, { YFormOneLineProps } from './component/OneLine'; import Radio, { YRadioProps } from './component/Radio'; import List, { YFormListProps } from './component/List'; import CheckboxGroup, { YCheckGroupProps } from './component/CheckboxGroup'; import Select, { YSelectProps } from './component/Select'; import TextArea, { YTextAreaProps } from './component/TextArea'; import Money, { YMoneyProps } from './component/Money'; import Submit, { YFormSubmitProps } from './component/Submit'; import SecureButton, { YFormSecureButtonProps } from './component/SecureButton'; import { YFormProps, YFormConfig } from './Form'; import ComponentView, { YFormComponentViewProps } from './component/ComponentView'; import { datePickerModify, rangePickerModify, checkboxModify, switchModify, textModify, oneLineModify, submitModify, checkboxGroupModify, selectModify, moneyModify, radioModify, SpaceModify, CustomModify, } from './ItemsTypeModify'; import Space, { YFormSpaceProps } from './component/Space'; import Card, { YFormCardProps } from './component/Card'; export interface YFormFieldBaseProps<T = any> { component?: React.ReactElement; type?: string; formItemProps?: YFormItemProps; formatStr?: string; hasFormItem?: boolean; scenes?: YFormConfig['scenes']; modifyProps?: ( props: Required<modifyType<T>>, ) => Pick<modifyType<T>, 'itemProps' | 'componentProps'>; viewProps?: { format?: (value: any, pureValue?: boolean) => React.ReactNode }; diffProps?: { onEqual?: (value: any, oldValue?: any) => boolean }; } export type modifyType<T = any> = { formProps?: YFormProps; itemsProps?: YFormItemsProps; itemProps?: YFormItemProps; componentProps?: T; typeProps?: YFormFieldBaseProps<T>; }; export interface BaseComponentProps { className?: string; style?: React.CSSProperties; } export type stringAndFunc<T> = string | ((record: T, index: number) => React.ReactNode); export type OptionsType = { id?: React.ReactNode; name?: CheckboxValueType; disabled?: boolean; [key: string]: any; }; export interface OptionsProps<T = any> { options?: OptionsType[]; getOptions?: (value: any, parentValues: any, values: any) => OptionsType[]; postField?: stringAndFunc<T>; showField?: stringAndFunc<T>; renderOption?: (item: any) => any; onAddProps?: (item: T, index: number) => { disabled?: boolean; [key: string]: React.ReactNode }; } export interface YFormItemsTypeDefine { // antd 类型 input: { componentProps?: InputProps }; datePicker: { componentProps?: DatePickerProps }; rangePicker: { componentProps?: RangePickerProps }; password: { componentProps?: PasswordProps }; checkbox: { componentProps?: CheckboxProps }; switch: { componentProps?: SwitchProps }; text: { componentProps?: TextProps }; button: { componentProps?: ButtonProps }; // 封装类型 textarea: { componentProps?: YTextAreaProps }; view: YFormComponentViewProps; money: { componentProps?: YMoneyProps }; checkboxGroup: { componentProps?: YCheckGroupProps }; select: { componentProps?: YSelectProps }; radio: { componentProps?: YRadioProps }; oneLine: YFormOneLineProps; card: YFormCardProps; space: YFormSpaceProps; list: YFormListProps; submit: YFormSubmitProps; secureButton: YFormSecureButtonProps; custom: { componentProps?: any }; } export type YFormItemsType<T = YFormFieldBaseProps> = { [P in keyof YFormItemsTypeDefine]?: { type?: P } & YFormItemsTypeDefine[P] & T; }; export type YFormItemsTypeArray<T> = YFormItemsType<T>[keyof YFormItemsType]; export const itemsType: YFormItemsType = { // 纯文本类 input: { component: <Input />, formatStr: '请输入${label}' }, password: { component: <Input.Password />, formatStr: '请输入${label}' }, textarea: { component: <TextArea />, formatStr: '请输入${label}', modifyProps: textModify }, money: { component: <Money />, formatStr: '请输入${label}', modifyProps: moneyModify }, text: { component: <CustomTypography />, formatStr: '请输入${label}' }, // 日期类 datePicker: { component: <DatePicker />, formatStr: '请选择${label}', modifyProps: datePickerModify, }, rangePicker: { component: <DatePicker.RangePicker />, formatStr: '请选择${label}', modifyProps: rangePickerModify, }, // 单选复选类 checkbox: { component: <Checkbox />, formatStr: '请选择${label}', modifyProps: checkboxModify }, switch: { component: <Switch />, formatStr: '请选择${label}', modifyProps: switchModify }, checkboxGroup: { component: <CheckboxGroup />, formatStr: '请选择${label}', modifyProps: checkboxGroupModify, }, radio: { component: <Radio />, modifyProps: radioModify, formatStr: '请选择${label}' }, select: { component: <Select {...searchSelect} />, formatStr: '请选择${label}', modifyProps: selectModify, }, // 工具类 oneLine: { component: <OneLine />, modifyProps: oneLineModify }, card: { component: <Card /> }, list: { component: <List />, hasFormItem: false }, button: { component: <Button /> }, secureButton: { component: <SecureButton /> }, submit: { component: <Submit />, hasFormItem: false, modifyProps: submitModify }, // 展示类 custom: { modifyProps: CustomModify }, view: { component: <ComponentView /> }, space: { component: <Space />, modifyProps: SpaceModify }, }; export default itemsType;