plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/components/Form/validate/validate.utils.tsx

@@ -0,0 +1,436 @@
+import {PlainObject} from "plain-utils/utils/event";
+import {computed, ExtractPropTypes, PropType} from "plain-design-composition";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {toArray} from "plain-utils/utils/toArray";
+
+/**
+ * 表单的校验模式
+ * @author  韦胜健
+ * @date    2022/8/22 17:50
+ * @param   form:    会通过watch的方式监听值变化，随后触发change校验
+ * @param   table:   会通过edit control的方式监听change
+ */
+export const eFormValidateMode = createEnum(['form', 'table'] as const);
+
+/**
+ * 校验的触发类型
+ * @author  韦胜健
+ * @date    2022/8/22 21:51
+ * @param   change  值变化的时候校验
+ * @param   blur    编辑器失去焦点的时候触发校验
+ */
+export const eFormValidateTrigger = createEnum(['change', 'blur'] as const);
+
+/**
+ * FormItem与FormEditor组件共同使用的属性（FormEditor组件暴露的FormEditor的属性）
+ * @author  韦胜健
+ * @date    2022/8/24 10:23
+ */
+export const FormItemValidateExposePropsOption = {
+  /*---------------------------------------对比iValidateRuleConfig名称不变的属性-------------------------------------------*/
+  label: { type: String as PropType<string | null | undefined> },       // 字段显示文本
+  field: { type: String },                                              // 字段绑定名称（字段访问路径）
+  required: { type: [Function, Boolean] as PropType<iValidateRule["required"]> },
+  validator: { type: Function as PropType<iValidateRule["validator"]> },
+  /*---------------------------------------额外添加校验规则-------------------------------------------*/
+  rules: { type: [Object, Array] as PropType<iValidateRule | iValidateRule[]> },
+} as const;
+/**
+ * FormItem校验相关的属性定义
+ * @author  韦胜健
+ * @date    2022/8/22 15:16
+ */
+export const FormItemValidatePropsOption = {
+  ...FormItemValidateExposePropsOption,
+  /*---------------------------------------对比iValidateRuleConfig，名称变化的属性-------------------------------------------*/
+  validateTrigger: { type: String as PropType<typeof eFormValidateTrigger.TYPE> },
+  validateType: { type: String },
+  validateValueGetter: { type: Function as PropType<iValidateRule["valueGetter"]> },
+  validatePattern: {},
+  validateMax: { type: Number },
+  validateMin: { type: Number },
+  validateLen: { type: Number },
+  validateEnum: { type: Array as PropType<any[]> },
+  validateTransform: { type: Function as PropType<iValidateRule["transform"]> },
+  validateMessage: { type: [String, Function] as PropType<iValidateRule["message"]> },
+} as const;
+
+/**
+ * FormItemValidateProps转化成props对象的类型
+ * @author  韦胜健
+ * @date    2022/8/22 15:18
+ */
+export type iFormItemValidatePropsType = ExtractPropTypes<typeof FormItemValidatePropsOption>
+
+/**
+ * Form校验相关的属性定义
+ * @author  韦胜健
+ * @date    2022/8/22 17:47
+ */
+export const FormValidatePropsOption = {
+  modelValue: { type: Object as PropType<PlainObject> },                                          // 校验的表单对象
+  rules: { type: Object as PropType<Record<string, iValidateRule | iValidateRule[]>> },           // 额外的校验规则，key为field，value为校验规则
+  validateMode: { type: String as PropType<typeof eFormValidateMode.TYPE> },                      // 校验模式，看eFormValidateMode说明
+  // associateFields: { type: Object as PropType<Record<string, string>> },                       // 校验关联字段，当key的field校验时自动校验value对应的field
+  hideRequiredAsterisk: { type: Boolean },                                                        // 是否隐藏label旁边的红色必填星号标识
+  hideValidateMessage: { type: Boolean },                                                         // 是否隐藏校验失败信息
+
+  disabledFields: { type: Object as PropType<iValidationDisabledFields> },                        // 禁用的字段
+  readonlyFields: { type: Object as PropType<iValidationReadonlyFields> },                        // 只读的字段
+} as const;
+
+/**
+ * FormValidatePropsType转化成props对象类型
+ * @author  韦胜健
+ * @date    2022/8/22 17:48
+ */
+export type iFormValidatePropsType = ExtractPropTypes<typeof FormValidatePropsOption>
+
+/**
+ * 自定义校验函数参数类型
+ * @author  韦胜健
+ * @date    2022/8/22 15:18
+ */
+export interface iValidatorParam {
+  value: any,
+  formData: undefined | null | PlainObject,
+  rule: iValidateRule,
+}
+
+/**
+ * 获取值的函数类型
+ * @author  韦胜健
+ * @date    2022/8/22 15:18
+ */
+export type iValidateValueGetter = (param: Omit<iValidatorParam, "value">) => any
+
+/**
+ * 单条校验规则
+ * @author  韦胜健
+ * @date    2022/8/22 14:26
+ */
+export interface iValidateRule {
+  label?: string | null,                    // 校验提示字段文本
+  field?: string,                           // 校验的字段名称（字段访问路径），label与field不能同时为空，并且一个label对应一个field
+  required?: boolean | ((formData: undefined | null | PlainObject) => boolean), // 是否必填(type为any的情况下，不能为null，undefined，空数组以及空字符串)
+
+  trigger?: typeof eFormValidateTrigger.TYPE,// 校验的触发方式
+  type?: string,                            // 校验的数据类型（默认为any）
+  valueGetter?: iValidateValueGetter,       // 获取校验的值，有这个函数可以不需要formData以及field
+  pattern?: any,                            // 校验的正则表达式,RegExp|string
+  min?: number | string,                    // 依据不同的type，校验最小值
+  max?: number | string,                    // 依据不同的type，校验最大值
+  len?: number,                             // 依据不同的type，校验长度
+  enum?: any[],                             // 依据不同的type，值的范围
+  transform?: (val: any, formData: undefined | null | PlainObject) => any, // 在校验之前对原始值进行转换
+  validator?: (param: iValidatorParam) => void | string | Promise<void | string>,// 自定义校验逻辑
+  message?: string | ((value: any, formData: PlainObject | null | undefined) => string), // 校验失败的时候的提示信息
+}
+
+/**
+ * 注册校验类型的函数类型
+ * @author  韦胜健
+ * @date    2022.11.5 23:03
+ */
+export type iRegistrationValidator = ((param: iValidatorParam & { required: boolean, getMessage: (msg: string) => string }) => Promise<void | string>)
+
+/**
+ * 校验结果类型
+ * @author  韦胜健
+ * @date    2022/8/22 21:55
+ */
+export interface iValidateResult {
+  rule: iValidateRule,
+  label?: string,
+  field?: string,
+  message: string,
+  value: any,
+}
+
+/**
+ * 校验保留的结果信息
+ * @author  韦胜健
+ * @date    2022.11.5 23:27
+ */
+export interface iValidateState {validateResultData: null | iValidateResult[];}
+
+/**
+ * 获取校验提示信息，如果message是函数则完全使用message提示信息，否则提示信息为label+message
+ * @author  韦胜健
+ * @date    2022.9.2 19:14
+ */
+export function getValidateResultMessage(
+  result: iValidateResult,
+  formData: PlainObject | undefined
+): string {
+  const {
+    label,
+    message,
+    rule: { message: ruleMessage },
+    value
+  } = result;
+  if (typeof ruleMessage === 'function') {
+    return ruleMessage(value, formData);
+  } else {
+    return [label, message].filter(Boolean).join('');
+  }
+}
+
+/*禁用字段对象配置类型*/
+export type iValidationDisabledFields = Record<string, boolean | undefined>;
+
+/*只读字段对象配置类型*/
+export type iValidationReadonlyFields = Record<string, boolean | undefined>;
+
+/**
+ * 校验规则是否为必填
+ * @author  韦胜健
+ * @date    2022.11.5 22:31
+ */
+export function isRuleRequired(rule: iValidateRule, formData: PlainObject | null | undefined): boolean {
+  /*没有设置必填*/
+  if (rule.required == null || rule.required == false) {return false;}
+  /*设置为true*/
+  if (rule.required === true) {return true;}
+  /*动态必填*/
+  if (typeof rule.required === 'function' && rule.required(formData) === true) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * 计算formItem的校验规则
+ * @author  韦胜健
+ * @date    2022.11.5 22:34
+ */
+export function createFormItemRules({ getFormPropsRules, formItemProps: props }: { getFormPropsRules: () => iFormValidatePropsType["rules"], formItemProps: iFormItemValidatePropsType }) {
+
+  /**
+   * 暴露在props中的校验规则属性，合并成一个校验规则
+   * @author  韦胜健
+   * @date    2022.11.5 22:35
+   */
+  const outerRule = computed((): iValidateRule | null => {
+    const {
+      required,
+      validator,
+      validateType,
+      validateValueGetter,
+      validatePattern,
+      validateMax,
+      validateMin,
+      validateLen,
+      validateEnum,
+      validateTransform,
+      validateMessage,
+    } = props;
+    if (
+      [
+        required,
+        validator,
+        validateType,
+        validateValueGetter,
+        validatePattern,
+        validateMax,
+        validateMin,
+        validateLen,
+        validateEnum,
+        validateTransform,
+        validateMessage
+      ].some((i) => i != null && i !== false)
+    ) {
+      return {
+        label: props.label,
+        field: props.field,
+        trigger: props.validateTrigger,
+        required,
+        validator,
+        type: validateType,
+        valueGetter: validateValueGetter,
+        pattern: validatePattern,
+        max: validateMax,
+        min: validateMin,
+        len: validateLen,
+        enum: validateEnum,
+        transform: validateTransform,
+        message: validateMessage
+      };
+    } else {
+      return null;
+    }
+  });
+
+  /**
+   * 从props.rules中取出来的校验规则
+   * @author  韦胜健
+   * @date    2022.11.5 22:35
+   */
+  const propsRules = computed((): iValidateRule[] | null => {
+    return !props.rules ? null : toArray(props.rules).map(rule => {
+      const field = rule.field || props.field;
+      return {
+        field,
+        label: props.label,
+        /*有field就用field取值，否则试试props.validateValueGetter*/
+        valueGetter: !field ? props.validateValueGetter : undefined,
+        ...rule
+      };
+    });
+  });
+
+  /**
+   * 从form组件props.rules并且根据当前formItem.props.field取出来的校验规则
+   * @author  韦胜健
+   * @date    2022.11.5 22:35
+   */
+  const formRules = computed((): iValidateRule[] | null => {
+    if (!props.field) {return null;}
+    const formPropsRules = getFormPropsRules();
+    if (!formPropsRules) {return null;}
+    const rule = formPropsRules[props.field];
+    return !rule ? null : toArray(rule).map(rule => ({
+      field: props.field,
+      label: props.label,
+      valueGetter: props.validateValueGetter,
+      ...rule,
+    }));
+  });
+
+  return { outerRule, propsRules, formRules };
+}
+
+/**
+ * 判断是否匹配触发规则
+ * @author  韦胜健
+ * @date    2022.11.5 22:50
+ */
+export function isMatchTrigger(trigger: typeof eFormValidateTrigger.TYPE, rule: iValidateRule) {
+  /*校验的触发动作是change的话，只要不是blur的校验规则都拿出来校验*/
+  return (trigger === eFormValidateTrigger.change && rule.trigger !== eFormValidateTrigger.blur) ||
+    /*校验的触发动作是blur的话，只有blur的校验规则才拿出来校验*/
+    (trigger === eFormValidateTrigger.blur && rule.trigger === eFormValidateTrigger.blur);
+}
+
+/**
+ * 根据路径深度获取对象值
+ * @author  韦胜健
+ * @date    2022/8/22 22:04
+ */
+export function getValueByPath(formData: PlainObject | undefined, path: string) {
+  if (path.indexOf('.') === -1) {
+    return formData?.[path];
+  }
+  const keys = path.split('.');
+  const len = keys.length;
+  let obj = formData;
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    if (i === len - 1 && !!obj) {
+      return obj[key];
+    }
+    if (!obj) {
+      return undefined;
+    }
+    obj = obj[key];
+  }
+  return undefined;
+}
+
+/**
+ * 计算校验规则对应的值
+ * @author  韦胜健
+ * @date    2022.11.5 22:57
+ */
+export function getRuleValue(
+  {
+    formData,
+    field,
+    validateValueGetter,
+    formItemProps
+  }: {
+    formData: any;
+    field: string | undefined | null;
+    validateValueGetter: undefined | ((formData: any) => any);
+    formItemProps: { label?: string | null; field?: string };
+  }) {
+  if (!!validateValueGetter) {
+    return validateValueGetter(formData);
+  }
+  if (!field || !formData) {
+    console.log('属性不正确：', formItemProps);
+    console.error(
+      `FormItem没有设置validateValueGetter的情况下，FormItem.props.field以及Form.props.modelValue都不能为空！`
+    );
+    return null;
+  }
+  return getValueByPath(formData, field);
+}
+
+/**
+ * 执行校验规则
+ * @author  韦胜健
+ * @date    2022/8/22 22:44
+ */
+export async function checkRules(
+  {
+    rules,
+    formData,
+    types,
+    getLabelByField,
+  }: {
+    rules: iValidateRule[],
+    formData: PlainObject | null | undefined,
+    types: Record<string, iRegistrationValidator | undefined>,
+    getLabelByField: (field: string) => string | null | undefined,
+  }): Promise<iValidateResult[] | null> {
+  const ret = (
+    await Promise.all(
+      rules.map(async (rule) => {
+        const { label, field } = rule;
+        let value = rule.valueGetter
+          ? rule.valueGetter({ formData, rule })
+          : getRuleValue({
+            field,
+            formData,
+            validateValueGetter: undefined,
+            formItemProps: { label, field }
+          });
+        if (!!rule.transform) {
+          value = rule.transform(value, formData);
+        }
+        const validateType = rule.type || 'any';
+        const registryValidateType = types[validateType];
+        if (!registryValidateType) {
+          return Promise.reject(`无法识别校验类型rule.type=${validateType}`);
+        }
+        const required: boolean =
+          typeof rule.required === 'function' ? rule.required(formData) : !!rule.required;
+        const getMessage = (msg: string) => {
+          if (!!rule.message) {
+            return typeof rule.message === 'function'
+              ? rule.message(value, formData)
+              : rule.message;
+          }
+          return msg;
+        };
+        const validatorParam = { value, formData, rule, required, getMessage };
+        let message = await registryValidateType(validatorParam);
+        if (!message && !!rule.validator) {
+          message = await rule.validator(validatorParam);
+        }
+        /*没有返回错误信息，视为校验通过*/
+        return !message
+          ? null
+          : {
+            rule,
+            label: rule.label || (!rule.field ? null : getLabelByField(rule.field)),
+            field: rule.field,
+            message: message,
+            value
+          };
+      })
+    )
+  ).filter(Boolean) as iValidateResult[];
+  return ret.length == 0 ? null : ret;
+}

package/src/packages/components/FormCascade/index.tsx

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Cascade from "../Cascade";
+
+export const FormCascade = createFormEditor(Cascade);
+
+export default FormCascade;

package/src/packages/components/FormCheckbox/index.tsx

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Checkbox from "../Checkbox";
+
+export const FormCheckbox = createFormEditor(Checkbox);
+
+export default FormCheckbox;

package/src/packages/components/FormCheckboxGroup/index.tsx

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import CheckboxGroup from "../CheckboxGroup";
+
+export const FormCheckboxGroup = createFormEditor(CheckboxGroup);
+
+export default FormCheckboxGroup;

package/src/packages/components/FormColorPicker/index.tsx

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import {ColorPicker} from "../ColorPicker";
+
+export const FormColorPicker = createFormEditor(ColorPicker);
+
+export default FormColorPicker;

package/src/packages/components/FormDatePicker/index.tsx

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import DatePicker from "../DatePicker";
+
+export const FormDatePicker = createFormEditor(DatePicker);
+
+export default FormDatePicker;

package/src/packages/components/FormInput/index.tsx

@@ -0,0 +1,6 @@
+import Input from "../Input";
+import {createFormEditor} from "../FormItem/createFormEditor";
+
+export const FormInput = createFormEditor(Input);
+
+export default FormInput;

package/src/packages/components/FormInputNumber/index.tsx

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import InputNumber from "../InputNumber";
+
+export const FormInputNumber = createFormEditor(InputNumber);
+
+export default FormInputNumber;

package/src/packages/components/FormItem/createFormEditor.tsx

@@ -0,0 +1,87 @@
+import {ComponentPropsType, designComponent, ExtractPropTypes, PropType, useModel} from "plain-design-composition";
+import {FormItemValidateExposePropsOption} from "../Form/validate/validate.utils";
+import {PlainObject} from "plain-utils/utils/event";
+import {FormItem} from "./index";
+import React from "react";
+
+/**
+ * 创建一个简写的表单编辑组件
+ * @author  韦胜健
+ * @date    2022/8/24 11:55
+ */
+export function createFormEditor<iComponent extends React.FC<any>,
+  iComponentProps = tFcProps<iComponent>,
+  >(Editor: iComponent) {
+
+  const formItemSlots = (FormItem.use.options.slots as string[] || []).filter(i => i !== 'default');
+  const editorSlots = (Editor as any).use.options.slots as string[] || [];
+
+  const conflictSlot = formItemSlots.find(i => editorSlots.indexOf(i) > -1);
+  if (conflictSlot) {
+    throw new Error(`创建FormEditor失败，存在冲突的插槽名称：${conflictSlot}`);
+  }
+
+  const fc: React.FC<iComponentProps &
+    ExtractPropTypes<typeof FormItemValidateExposePropsOption> &
+    {
+      modelValue?: any,
+      onUpdateModelValue?: (val: any) => void
+      formAttrs?: ComponentPropsType<typeof FormItem>,
+      editorRef?: (refer: any) => void,
+    }> = designComponent({
+    name: (() => {
+      let editorName: string = (Editor as any).use.options.name;
+      return 'form-' + (editorName.charAt(0) === '-' ? editorName.slice(1) : editorName);
+    })(),
+    inheritPropsType: Editor,
+    inheritAttrs: false,
+    props: {
+      modelValue: {},
+      formAttrs: {},
+      editorRef: { type: Function as PropType<(refer: any) => void> },
+      ...FormItemValidateExposePropsOption,
+    },
+    emits: {
+      onUpdateModelValue: (val?: any) => true,
+    },
+    slots: [
+      ...formItemSlots,
+      ...editorSlots,
+    ],
+    setup({ props, event: { emit }, attrs, slots }) {
+
+      const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+      const validateValueGetter = () => model.value;
+
+      return () => {
+
+        const formAttrs = { ...(props.formAttrs as PlainObject | undefined), validateValueGetter };
+        Object.keys(FormItemValidateExposePropsOption).forEach(key => {(formAttrs as any)[key] = (props as any)[key];});
+
+        return (
+          <FormItem{...formAttrs}>
+            {(() => {
+              const ret: any = {};
+              formItemSlots.forEach((slotName) => {if (slots[slotName].isExist()) {ret[slotName] = () => slots[slotName]();}});
+              ret.default = () => (
+                // @ts-ignore
+                <Editor v-model={model.value} {...attrs} ref={props.editorRef}>
+                  {(() => {
+                    const ret: any = {};
+                    editorSlots.forEach(slotName => {if (slots[slotName].isExist()) {ret[slotName] = slots[slotName];}});
+                    return ret;
+                  })()}
+                </Editor>
+              );
+              return ret;
+            })()}
+          </FormItem>
+        );
+      };
+    },
+  });
+
+  return fc;
+}
+
+type tFcProps<T> = T extends (props: infer Props) => any ? Props : never;

package/src/packages/components/FormItem/index.tsx

@@ -0,0 +1,114 @@
+import {designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
+import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
+import {useTooltip} from "../useTooltip";
+
+export const FormItem = designComponent({
+  name: '-form-item',
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    /*---------------------------------------validate-------------------------------------------*/
+    ...FormItemValidatePropsOption,
+    /*---------------------------------------layout-------------------------------------------*/
+    ...FormItemLayoutPropsOption,
+  },
+  slots: ['default', 'labelSlot', 'labelPrepend', 'labelAppend', 'prepend', 'append'],
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    /*校验*/
+    const formItemValidation = useFormItemValidation({ props });
+
+    /*布局*/
+    const formItemLayout = useFormLayout.useFormItem(props);
+
+    const handler = {
+      onEditChange: () => formItemValidation.formValidation.handler.onEditChange({ label: props.label, field: props.field }),
+      onEditBlur: () => formItemValidation.formValidation.handler.onBlurChange({ label: props.label, field: props.field }),
+    };
+
+    useEdit({
+      adjust: (ret) => {
+        ret.onBlur = handler.onEditBlur;
+        ret.onChange = handler.onEditChange;
+        if (!!props.field) {
+          if (!!formItemValidation.formValidation.props.disabledFields && formItemValidation.formValidation.props.disabledFields[props.field]) {
+            ret.disabled = true;
+          }
+          if (!!formItemValidation.formValidation.props.readonlyFields && formItemValidation.formValidation.props.readonlyFields[props.field]) {
+            ret.readonly = true;
+          }
+        }
+      }
+    });
+
+    const { styleComputed } = useStyle({
+      adjust: (data) => {
+        if (!props.status) {
+          if (formItemValidation.validateMessage.value) {
+            data.status = ThemeStatus.error;
+          } else if (formItemValidation.isRequired.value) {
+            data.status = ThemeStatus.warn;
+          }
+        }
+      },
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('form-item'),
+      `form-item-label-align-${formItemLayout.labelAlign.value}`,
+      `form-item-content-align-${formItemLayout.contentAlign.value}`,
+      {
+        'form-item-required': formItemValidation.isRequired.value,
+        'form-item-has-label': !!props.label,
+        'form-item-has-prepend': slots.prepend.isExist(),
+        'form-item-has-append': slots.append.isExist(),
+        'form-item-no-label': props.label === null,
+      },
+    ]);
+
+    useTooltip({
+      ignoreEmptyMessage: true,
+      tooltip: () => ({
+        popperSize: styleComputed.value.size,
+        reference: refs.el,
+        message: formItemValidation.validateMessage.value,
+        status: 'error',
+        placement: formItemLayout.form.props.singleColumnCenter ? 'right-start' : 'bottom-end'
+      })
+    });
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={formItemLayout.styles.value} ref={onRef.el}>
+          {props.label !== null && (
+            <div className="form-item-label" style={formItemLayout.labelStyles.value}>
+              {formItemValidation.isRequired.value && <i className="form-item-required-tag">*</i>}
+              {slots.labelPrepend()}
+              {slots.labelSlot(props.label)}
+              {slots.labelAppend()}
+              {formItemLayout.colon.value && <i> :</i>}
+            </div>
+          )}
+          <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
+            {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
+            <div className="form-item-content-inner">
+              {slots.default()}
+            </div>
+            {slots.append.isExist() && <div className="form-item-append-content">{slots.append()}</div>}
+          </div>
+        </div>
+      )
+    };
+  },
+});
+
+export default FormItem;