UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 6.17 kB
1
{"version":3,"file":"Form.mjs","names":[],"sources":["../../../src/base-ui/FormKit/Form.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { type FormEvent, useCallback, useMemo, useRef } from 'react';\n\nimport FormFlatGroup from '../Form/components/FormFlatGroup';\nimport FormGroup from '../Form/components/FormGroup';\nimport { rootVariants } from '../Form/style';\nimport { FormKitContext, type FormKitContextValue } from './context';\nimport FormField from './Field';\nimport type { FormFieldProps, FormGroupItem, FormProps, FormValues } from './type';\n\nconst focusFirstInvalid = (root: HTMLFormElement | null) => {\n const target = root?.querySelector<HTMLElement>('[aria-invalid=\"true\"]');\n if (!target) return;\n target.scrollIntoView?.({ block: 'center' });\n target.focus();\n};\n\nconst Form = <T extends FormValues>({\n activeKey,\n children,\n className,\n classNames,\n collapsible,\n defaultActiveKey,\n footer,\n form,\n gap,\n itemMinWidth,\n items,\n itemsType = 'group',\n layout,\n onCollapse,\n ref,\n style,\n styles: customStyles,\n variant = 'borderless',\n ...rest\n}: FormProps<T>) => {\n const { mobile } = useResponsive();\n const formRef = useRef<HTMLFormElement | null>(null);\n\n const context = useMemo<FormKitContextValue>(\n () => ({\n form,\n layout: layout || (mobile ? 'vertical' : 'horizontal'),\n variant,\n }),\n [form, layout, mobile, variant],\n );\n\n const mergedRef = useCallback(\n (node: HTMLFormElement | null) => {\n formRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n\n const handleSubmit = useCallback(\n async (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n const result = await form.submit();\n if (!result.valid) setTimeout(() => focusFirstInvalid(formRef.current), 0);\n },\n [form],\n );\n\n const renderField = (item: FormFieldProps<T>, index: number) => (\n <FormField\n className={classNames?.item}\n divider={index !== 0}\n key={item.name ?? index}\n style={customStyles?.item}\n {...(item as FormFieldProps)}\n minWidth={'minWidth' in item ? item.minWidth : itemMinWidth}\n />\n );\n\n const renderGroup = (group: FormGroupItem<T>, index: number) => {\n const key = group.key ?? index;\n return (\n <FormGroup\n active={activeKey && group.key ? activeKey.includes(key) : undefined}\n className={classNames?.group}\n collapsible={group.collapsible ?? collapsible}\n desc={group.desc}\n extra={group.extra}\n icon={group.icon}\n key={key}\n style={customStyles?.group}\n title={group.title}\n variant={group.variant || variant}\n defaultActive={\n defaultActiveKey && group.key ? defaultActiveKey.includes(key) : group.defaultActive\n }\n onCollapse={(active) => {\n const keys = (activeKey || defaultActiveKey || []).filter((k) => k !== key);\n onCollapse?.(active ? [...keys, key] : keys);\n }}\n >\n {Array.isArray(group.children)\n ? group.children.filter((item) => !item.hidden).map(renderField)\n : group.children}\n </FormGroup>\n );\n };\n\n const renderedItems =\n items && items.length > 0 ? (\n itemsType === 'group' ? (\n (items as FormGroupItem<T>[]).map(renderGroup)\n ) : (\n <FormFlatGroup className={classNames?.group} style={customStyles?.group} variant={variant}>\n {(items as FormFieldProps<T>[]).filter((item) => !item.hidden).map(renderField)}\n </FormFlatGroup>\n )\n ) : null;\n\n return (\n <FormKitContext value={context}>\n <form\n {...rest}\n noValidate\n className={cx(rootVariants({ variant }), className)}\n ref={mergedRef}\n style={{ gap: gap ?? (layout === 'vertical' ? 0 : undefined), ...style }}\n onSubmit={handleSubmit}\n >\n {renderedItems}\n {children}\n {footer}\n </form>\n </FormKitContext>\n );\n};\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,qBAAqB,SAAiC;CAC1D,MAAM,SAAS,MAAM,cAA2B,yBAAuB;CACvE,IAAI,CAAC,QAAQ;CACb,OAAO,iBAAiB,EAAE,OAAO,SAAS,CAAC;CAC3C,OAAO,MAAM;AACf;AAEA,MAAM,QAA8B,EAClC,WACA,UACA,WACA,YACA,aACA,kBACA,QACA,MACA,KACA,cACA,OACA,YAAY,SACZ,QACA,YACA,KACA,OACA,QAAQ,cACR,UAAU,cACV,GAAG,WACe;CAClB,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,UAAU,OAA+B,IAAI;CAEnD,MAAM,UAAU,eACP;EACL;EACA,QAAQ,WAAW,SAAS,aAAa;EACzC;CACF,IACA;EAAC;EAAM;EAAQ;EAAQ;CAAO,CAChC;CAEA,MAAM,YAAY,aACf,SAAiC;EAChC,QAAQ,UAAU;EAClB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B,GACA,CAAC,GAAG,CACN;CAEA,MAAM,eAAe,YACnB,OAAO,UAAsC;EAC3C,MAAM,eAAe;EAErB,IAAI,EAAC,MADgB,KAAK,OAAO,EAAA,CACrB,OAAO,iBAAiB,kBAAkB,QAAQ,OAAO,GAAG,CAAC;CAC3E,GACA,CAAC,IAAI,CACP;CAEA,MAAM,eAAe,MAAyB,UAC5C,oBAAC,WAAD;EACE,WAAW,YAAY;EACvB,SAAS,UAAU;EAEnB,OAAO,cAAc;EACrB,GAAK;EACL,UAAU,cAAc,OAAO,KAAK,WAAW;CAChD,GAJM,KAAK,QAAQ,KAInB;CAGH,MAAM,eAAe,OAAyB,UAAkB;EAC9D,MAAM,MAAM,MAAM,OAAO;EACzB,OACE,oBAAC,WAAD;GACE,QAAQ,aAAa,MAAM,MAAM,UAAU,SAAS,GAAG,IAAI,KAAA;GAC3D,WAAW,YAAY;GACvB,aAAa,MAAM,eAAe;GAClC,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,MAAM,MAAM;GAEZ,OAAO,cAAc;GACrB,OAAO,MAAM;GACb,SAAS,MAAM,WAAW;GAC1B,eACE,oBAAoB,MAAM,MAAM,iBAAiB,SAAS,GAAG,IAAI,MAAM;GAEzE,aAAa,WAAW;IACtB,MAAM,QAAQ,aAAa,oBAAoB,CAAC,EAAA,CAAG,QAAQ,MAAM,MAAM,GAAG;IAC1E,aAAa,SAAS,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI;GAC7C;GAEC,UAAA,MAAM,QAAQ,MAAM,QAAQ,IACzB,MAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC,IAAI,WAAW,IAC7D,MAAM;EACD,GAfJ,GAeI;CAEf;CAEA,MAAM,gBACJ,SAAS,MAAM,SAAS,IACtB,cAAc,UACX,MAA6B,IAAI,WAAW,IAE7C,oBAAC,eAAD;EAAe,WAAW,YAAY;EAAO,OAAO,cAAc;EAAgB;EAC9E,UAAA,MAA8B,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC,IAAI,WAAW;CACjE,CAAA,IAEf;CAEN,OACE,oBAAC,gBAAD;EAAgB,OAAO;EACrB,UAAA,qBAAC,QAAD;GACE,GAAI;GACJ,YAAA;GACA,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;GAClD,KAAK;GACL,OAAO;IAAE,KAAK,QAAQ,WAAW,aAAa,IAAI,KAAA;IAAY,GAAG;GAAM;GACvE,UAAU;GANZ,UAAA;IAQG;IACA;IACA;GACG;;CACQ,CAAA;AAEpB;AAEA,KAAK,cAAc"}