@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.29 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,eAAe;CAClC,MAAM,SAAS,gBAAgB;CAE/B,MAAM,eAAe,WAAW,SAAS,aAAa,OAAO;CAC7D,MAAM,gBAAgB,WAAW,OAAO;CACxC,MAAM,iBAAiB,YAAY,OAAO;CAE1C,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,eAAe,SAAS,CAAE,QAAO;EACtC,MAAM,QAAQ,SAAS;EACvB,MAAM,WAAoC,EAAE;AAC5C,MAAI,YAAY,MAAM,aAAa,KAAA,EAAW,UAAS,WAAW;AAClE,MAAI,MAAM;GACR,MAAM,eAAe,OAAO,gBAAgB;AAC5C,OACE,iBAAiB,KAAA,KACjB,MAAM,UAAU,KAAA,KAChB,MAAM,iBAAiB,KAAA,EAEvB,UAAS,eAAe;;AAE5B,MAAI,OAAO,KAAK,SAAS,CAAC,WAAW,EAAG,QAAO;AAC/C,SAAO,aAAa,UAAU,SAAkB;IAC/C;EAAC;EAAU;EAAM;EAAU,OAAO;EAAc,CAAC;AAEpD,KAAI,OAAQ,QAAO;AAEnB,QACE,qBAAA,YAAA,EAAA,UAAA,CACG,WAAW,oBAAC,aAAD,EAAa,SAAS,kBAAkB,cAAgB,CAAA,EACpE,qBAAC,MAAM,MAAP;EACE,WAAW,GAAG,cAAc,EAAE,QAAQ,cAAc,CAAC,EAAE,UAAU;EAC3D;EACC;EACP,GAAI;YAJN,CAME,oBAAC,MAAM,OAAP;GAAa,WAAW,YAAY;aAClC,oBAAC,WAAD;IAAmB;IAAc;IAAW;IAAK,OAAO;IAAS,CAAA;GACrD,CAAA,EACd,qBAAC,OAAD;GACE,WAAW,GACT,YAAY,SACZ,iBAAiB,cAAc,YAAY,gBAC5C;GACD,OACE,mBAAmB,KAAA,KAAa,mBAAmB,QAAQ,mBAAmB,KAC1E,KAAA,IACA,EACE,UACE,OAAO,mBAAmB,WAAW,GAAG,eAAe,MAAM,gBAChE;aAXT,CAcG,SACD,oBAAC,MAAM,OAAP,EAAa,WAAW,YAAY,OAAS,CAAA,CACzC;KACK;IACZ,EAAA,CAAA;EAGR;AAED,UAAU,cAAc"}