react-hook-form-antd
Version:
Master your And Design form with React Hook Form!
1 lines • 3.52 kB
Source Map (JSON)
{"version":3,"sources":["../src/index.ts","../src/FormItem.tsx"],"sourcesContent":["export * from './FormItem';\n","import { Form as AntdForm } from 'antd';\nimport { Children, cloneElement, isValidElement, useEffect } from 'react';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport { useController } from 'react-hook-form';\n\ntype AntdFormItemProps = React.ComponentProps<typeof AntdForm.Item>;\n\nexport type FormItemProps<TFieldValues extends FieldValues = FieldValues> = {\n\tchildren: React.ReactNode;\n\tcontrol: Control<TFieldValues>;\n\tname: FieldPath<TFieldValues>;\n\tdisabled?: boolean;\n\toverrideFieldOnChange?: (...values: any[]) => void;\n} & Omit<AntdFormItemProps, 'name' | 'rules' | 'validateStatus'>;\n\n// TODO: Support `onBlur` `ref` `reset`\nexport const FormItem = <TFieldValues extends FieldValues = FieldValues>({\n\tchildren,\n\tcontrol,\n\tname,\n\tdisabled,\n\thelp,\n\tvaluePropName,\n\toverrideFieldOnChange,\n\t...props\n}: FormItemProps<TFieldValues>) => {\n\tconst { field, fieldState } = useController({ name, control, disabled });\n\tconst form = AntdForm.useFormInstance();\n\n\tuseEffect(() => {\n\t\tform.setFieldValue(name, field.value);\n\t}, [field.value, form, name]);\n\n\treturn (\n\t\t<AntdForm.Item\n\t\t\t{...props}\n\t\t\t//@ts-expect-error Ant Design form item name type safe is not necessary here\n\t\t\tname={name}\n\t\t\tinitialValue={field.value}\n\t\t\tvalidateStatus={fieldState.invalid ? 'error' : undefined}\n\t\t\thelp={fieldState.error?.message ?? help}\n\t\t>\n\t\t\t{Children.map(\n\t\t\t\tchildren,\n\t\t\t\t(child) =>\n\t\t\t\t\tisValidElement(child) &&\n\t\t\t\t\tcloneElement(child, {\n\t\t\t\t\t\t...field,\n\t\t\t\t\t\t//@ts-expect-error onChange type safe is not necessary here\n\t\t\t\t\t\tonChange: (...params) => {\n\t\t\t\t\t\t\tchild.props.onChange && child.props.onChange(...params);\n\t\t\t\t\t\t\toverrideFieldOnChange\n\t\t\t\t\t\t\t\t? overrideFieldOnChange(...params)\n\t\t\t\t\t\t\t\t: field.onChange(...params);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonBlur: () => {\n\t\t\t\t\t\t\tchild.props.onBlur && child.props.onBlur();\n\t\t\t\t\t\t\tfield.onBlur();\n\t\t\t\t\t\t},\n\t\t\t\t\t\t...(valuePropName && {\n\t\t\t\t\t\t\t[valuePropName]: field.value,\n\t\t\t\t\t\t}),\n\t\t\t\t\t}),\n\t\t\t)}\n\t\t</AntdForm.Item>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAiC;AACjC,mBAAkE;AAElE,6BAA8B;AA+B5B;AAlBK,IAAM,WAAW,CAAiD,OAStC;AATsC,eACxE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAvBD,IAgByE,IAQrE,kBARqE,IAQrE;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAvBD,MAAAA,KAAAC;AA0BC,QAAM,EAAE,OAAO,WAAW,QAAI,sCAAc,EAAE,MAAM,SAAS,SAAS,CAAC;AACvE,QAAM,OAAO,YAAAC,KAAS,gBAAgB;AAEtC,8BAAU,MAAM;AACf,SAAK,cAAc,MAAM,MAAM,KAAK;AAAA,EACrC,GAAG,CAAC,MAAM,OAAO,MAAM,IAAI,CAAC;AAE5B,SACC;AAAA,IAAC,YAAAA,KAAS;AAAA,IAAT,iCACI,QADJ;AAAA,MAGA;AAAA,MACA,cAAc,MAAM;AAAA,MACpB,gBAAgB,WAAW,UAAU,UAAU;AAAA,MAC/C,OAAMD,OAAAD,MAAA,WAAW,UAAX,gBAAAA,IAAkB,YAAlB,OAAAC,MAA6B;AAAA,MAElC,gCAAS;AAAA,QACT;AAAA,QACA,CAAC,cACA,6BAAe,KAAK,SACpB,2BAAa,OAAO,gDAChB,QADgB;AAAA;AAAA,UAGnB,UAAU,IAAI,WAAW;AACxB,kBAAM,MAAM,YAAY,MAAM,MAAM,SAAS,GAAG,MAAM;AACtD,oCACG,sBAAsB,GAAG,MAAM,IAC/B,MAAM,SAAS,GAAG,MAAM;AAAA,UAC5B;AAAA,UACA,QAAQ,MAAM;AACb,kBAAM,MAAM,UAAU,MAAM,MAAM,OAAO;AACzC,kBAAM,OAAO;AAAA,UACd;AAAA,YACI,iBAAiB;AAAA,UACpB,CAAC,aAAa,GAAG,MAAM;AAAA,QACxB,EACA;AAAA,MACH;AAAA;AAAA,EACD;AAEF;","names":["_a","_b","AntdForm"]}