@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.3 kB
Source Map (JSON)
{"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/base-ui/Form/components/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport { cx, useResponsive } from 'antd-style';\nimport { cloneElement, isValidElement, memo, useMemo } from 'react';\n\nimport { useFormContext } from '../context';\nimport { fieldStyles, fieldVariants } from '../style';\nimport type { FormFieldProps } from '../type';\nimport FormDivider from './FormDivider';\nimport FormTitle from './FormTitle';\n\nconst FormField = memo<FormFieldProps>(\n ({\n avatar,\n children,\n className,\n desc,\n divider,\n hidden,\n label,\n layout,\n minWidth,\n name,\n required,\n style,\n tag,\n variant,\n ...rest\n }) => {\n const { mobile } = useResponsive();\n const config = useFormContext();\n\n const mergedLayout = layout || (mobile ? 'vertical' : config.layout);\n const mergedVariant = variant || config.variant;\n const mergedMinWidth = minWidth ?? config.itemMinWidth;\n\n const control = useMemo(() => {\n if (!isValidElement(children)) return children;\n const props = children.props as Record<string, unknown>;\n const injected: Record<string, unknown> = {};\n if (required && props.required === undefined) injected.required = true;\n if (name) {\n const initialValue = config.initialValues?.[name];\n if (\n initialValue !== undefined &&\n props.value === undefined &&\n props.defaultValue === undefined\n )\n injected.defaultValue = initialValue;\n }\n if (Object.keys(injected).length === 0) return children;\n return cloneElement(children, injected as never);\n }, [children, name, required, config.initialValues]);\n\n if (hidden) return null;\n\n return (\n <>\n {divider && <FormDivider visible={mergedVariant !== 'borderless'} />}\n <Field.Root\n className={cx(fieldVariants({ layout: mergedLayout }), className)}\n name={name}\n style={style}\n {...rest}\n >\n <Field.Label className={fieldStyles.label}>\n <FormTitle avatar={avatar} desc={desc} tag={tag} title={label} />\n </Field.Label>\n <div\n className={cx(\n fieldStyles.control,\n mergedLayout === 'vertical' && fieldStyles.controlVertical,\n )}\n style={\n mergedMinWidth === undefined || mergedMinWidth === null || mergedMinWidth === ''\n ? undefined\n : {\n minWidth:\n typeof mergedMinWidth === 'number' ? `${mergedMinWidth}px` : mergedMinWidth,\n }\n }\n >\n {control}\n <Field.Error className={fieldStyles.error} />\n </div>\n </Field.Root>\n </>\n );\n },\n);\n\nFormField.displayName = 'FormField';\n\nexport default FormField;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,YAAY,MACf,EACC,QACA,UACA,WACA,MACA,SACA,QACA,OACA,QACA,UACA,MACA,UACA,OACA,KACA,SACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,SAAS,eAAe;CAE9B,MAAM,eAAe,WAAW,SAAS,aAAa,OAAO;CAC7D,MAAM,gBAAgB,WAAW,OAAO;CACxC,MAAM,iBAAiB,YAAY,OAAO;CAE1C,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,QAAQ,GAAG,OAAO;EACtC,MAAM,QAAQ,SAAS;EACvB,MAAM,WAAoC,CAAC;EAC3C,IAAI,YAAY,MAAM,aAAa,KAAA,GAAW,SAAS,WAAW;EAClE,IAAI,MAAM;GACR,MAAM,eAAe,OAAO,gBAAgB;GAC5C,IACE,iBAAiB,KAAA,KACjB,MAAM,UAAU,KAAA,KAChB,MAAM,iBAAiB,KAAA,GAEvB,SAAS,eAAe;EAC5B;EACA,IAAI,OAAO,KAAK,QAAQ,CAAC,CAAC,WAAW,GAAG,OAAO;EAC/C,OAAO,aAAa,UAAU,QAAiB;CACjD,GAAG;EAAC;EAAU;EAAM;EAAU,OAAO;CAAa,CAAC;CAEnD,IAAI,QAAQ,OAAO;CAEnB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,WAAW,oBAAC,aAAD,EAAa,SAAS,kBAAkB,aAAe,CAAA,GACnE,qBAAC,MAAM,MAAP;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,aAAa,CAAC,GAAG,SAAS;EAC1D;EACC;EACP,GAAI;YAJN,CAME,oBAAC,MAAM,OAAP;GAAa,WAAW,YAAY;aAClC,oBAAC,WAAD;IAAmB;IAAc;IAAW;IAAK,OAAO;GAAQ,CAAA;EACrD,CAAA,GACb,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,SACZ,iBAAiB,cAAc,YAAY,eAC7C;GACA,OACE,mBAAmB,KAAA,KAAa,mBAAmB,QAAQ,mBAAmB,KAC1E,KAAA,IACA,EACE,UACE,OAAO,mBAAmB,WAAW,GAAG,eAAe,MAAM,eACjE;aAXR,CAcG,SACD,oBAAC,MAAM,OAAP,EAAa,WAAW,YAAY,MAAQ,CAAA,CACzC;IACK;GACZ,EAAA,CAAA;AAEN,CACF;AAEA,UAAU,cAAc"}