Form

just one hook~.

hook:

• useFields

fields:

• fieldText

Demo

Live Editor

const useFormConfigCreater_root = (
  props: { id?: string } = {}
): (() => FormConfig) => {
  return () => ({
    title: {
      fieldConfig: {
        required: true,
      },
    },
    sub_title: {
      label: "subTitle",
    },
    amount: {
      schema: Yup.number().min(1, "Amount must be greater than or equal to 1"),
      fieldConfig: {
        type: "number",
      },
      label: "Amount",
    },
    ask_desc: {
      schema: Yup.string().max(
        1000,
        "Description must be less than 1000 characters"
      ),
      fieldConfig: {
        type: "textarea",
      },
      label: "Description of Ask",
    },
    vendor_financing: {
      label: "Vendor Financing",
      type: "checkbox",
      fieldConfig: {},
    },
    expire_at: {
      type: "datePicker",
      defaultValue: dayjs(),
    },
    logo: {
      type: "upload",
      label: "Logo",
      fieldConfig: {
        multiple: false,
        uploadAction: async (file) => {
          return uuidv4();
        },
      },
    },
    highlights: {
      type: "editer",
    },
  });
};

const Play = () => {
  const formConfig = useFormConfigCreater_root()();
  const { formNode } = useFields(formConfig);
  return <>{formNode}</>;
};
render(<Play />);

Result

Loading...

PlayGround

http://localhost:3000

show code

componennt

import { useFields } from "mui-eazy";
import { useFormConfigCreater_root } from "./formConfig";

export default () => {
  const formConfig = useFormConfigCreater_root()();
  const { formNode } = useFields(formConfig);
  return <>{formNode}</>;
};

form config

import dayjs from "dayjs";
import { FormConfig, uuidv4 } from "mui-eazy";
import * as Yup from "yup";

export const useFormConfigCreater_root = (
  props: { id?: string } = {}
): (() => FormConfig) => {
  return () => ({
    title: {
      fieldConfig: {
        required: true,
      },
    },
    sub_title: {
      label: "subTitle",
    },
    amount: {
      schema: Yup.number().min(1, "Amount must be greater than or equal to 1"),
      fieldConfig: {
        type: "number",
      },
      label: "Amount",
    },
    ask_desc: {
      schema: Yup.string().max(
        1000,
        "Description must be less than 1000 characters"
      ),
      fieldConfig: {
        type: "textarea",
      },
      label: "Description of Ask",
    },
    vendor_financing: {
      label: "Vendor Financing",
      type: "checkbox",
      fieldConfig: {},
    },
    expire_at: {
      type: "datePicker",
      defaultValue: dayjs(),
    },
    logo: {
      type: "upload",
      label: "Logo",
      fieldConfig: {
        multiple: false,
        uploadAction: async (file) => {
          return uuidv4();
        },
      },
    },
    highlights: {
      type: "editer",
    },
  });
};

Props

tip

• Type: any, can be customized as needed.
• Default value:
  • Not specified: optional.
  • Specified as "require": mandatory.
• Type link: Click to navigate to the details below.

Option	Type	Default	Description
formConfig		required

Ts Type

FormConfigItem

Option	Type	Default	Description
id	string	-	可配置，不配置变自动生成唯一值 uuid
prefix	string	-	表单名前缀
type	InputType		表单类型
schema	any		使用yup创建的表单校验
defaultValue	unknown		表单的默认值，往往用于表单回显
name	string		表单的名字，作为表单提交的字段名
label	string		表单项的标题
isHidden	boolean		是否隐藏
fieldConfig	FieldConfig	required	表单项组件的配置
config	InputConfig	required	基础 Input 组件的配置
watch	Function	required	监听

FieldConfig

type FieldConfig = Partial<RHFTextFieldProps> &
  Partial<RHFSelectProps> &
  Partial<RHFUploadProps> &
  Partial<RHFDatePickerProps> &
  Partial<RHFCheckboxProps> &
  Partial<RHFEditorProps> &
  Partial<RHFMultiSelectProps>;

InputConfig

type InputConfig = {
  options?:
    | string[]
    | {
        key: string | number;
        value: string | number;
        label: string | number;
      }[];
};

watch

type watch = (props: {
  currentConfig: Omit<FormConfigItem, "watch">;
  values: { [key: string]: any };
  info: Info;
  api: UseFormReturn<any>;
}) => void;

interface Info {
  name: string;
  type: EventType;
}

export type EventType =
  | "focus"
  | "blur"
  | "change"
  | "changeText"
  | "valueChange"
  | "contentSizeChange"
  | "endEditing"
  | "keyPress"
  | "submitEditing"
  | "layout"
  | "selectionChange"
  | "longPress"
  | "press"
  | "pressIn"
  | "pressOut"
  | "momentumScrollBegin"
  | "momentumScrollEnd"
  | "scroll"
  | "scrollBeginDrag"
  | "scrollEndDrag"
  | "load"
  | "error"
  | "progress"
  | "custom";

props

Option	Type	Description
currentConfig	FormConfigItem	该表单项目的配置信息，可以进行查询和修改
values	{[key: string]: any}	所属表单下的所有表单项的键值对结合。
info	Info	事件的信息
api	UseFormReturn<any>	react hook form 的 form 实例

demo

{
  ...
  watch: ({ currentConfig, values, info, api }) => {
          if (info.name == 'Parent_Category_id') {
            currentConfig.config!.options = allChildCategory
              .filter((item) => {
                let flag = item.parent_id == values['Parent_Category_id'];
                return flag;
              })
              .map((item) => {
                const { id, name } = item;
                return {
                  value: id,
                  key: id,
                  label: name,
                };
              });
          }
        },
  ...
}