@flatbiz/antd 4.5.50 → 4.5.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/esm/easy-form/index.js
CHANGED
|
@@ -5,5 +5,5 @@ import './../form-wrapper/index.css';
|
|
|
5
5
|
import './../pre-defined-class-name/index.css';
|
|
6
6
|
import './index.css';
|
|
7
7
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
8
|
-
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{a as e,_ as t}from"../_rollupPluginBabelHelpers-c0dbec57.js";import{isUndefinedOrNull as
|
|
8
|
+
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{a as e,_ as t}from"../_rollupPluginBabelHelpers-c0dbec57.js";import{isUndefinedOrNull as m}from"@flatbiz/utils";import{Form as l}from"antd";import{useMemo as o,Children as a,cloneElement as i}from"react";import{BoxGrid as s}from"../box-grid/index.js";import{fbaHooks as n}from"../fba-hooks/index.js";import{FormWrapper as p}from"../form-wrapper/index.js";import{preDefinedClassName as u}from"../pre-defined-class-name/index.js";import{jsx as f}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"../use-responsive-point-21b8c601.js";import"@dimjs/utils/cjs/uuid";var d=["column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure"];var c=function c(x){var v=n.useResponsivePoint()||"";var y=l.useFormInstance();var I=x.column,g=x.forceColumn,h=x.children,b=x.width,j=x.gridGutter,F=x.labelWidth,W=x.labelItemVertical,G=x.labelAlign,N=x.formItemGap,w=N===void 0?"15":N,C=x.isPure,A=e(x,d);var k=o((function(){if(g){var r=24/g;return{xs:r,sm:r,md:r,lg:r,xl:r,xxl:r}}if(!I){return{xs:24,sm:12,md:12,lg:8,xl:8,xxl:6}}var e={1:{xs:24,sm:24,md:24,lg:24,xl:24,xxl:24},2:{xs:24,sm:12,md:12,lg:12,xl:12,xxl:12},3:{xs:24,sm:12,md:12,lg:8,xl:8,xxl:8},4:{xs:24,sm:12,md:12,lg:6,xl:6,xxl:6}};return e[I]}),[I,g]);var B=function r(){var e=a.toArray(h).filter((function(r){return!!r}));return e.map((function(r,e){var m;var o=r.type["domTypeName"];var a=undefined;if(o==="FormItemText"||o==="FormItemSpan"||o==="FormItemWrapper"||o==="BoxGridCol"||o==="EasyForm"){a=r.props["span"];if(a){if(v==="xs"){a=24}else if(v==="sm"){a=a>12?a:12}}}if(o==="BoxGridCol"||o==="FormItemSpan"){if(o==="FormItemSpan"&&r.props.hidden){return null}return i(r,t({},r.props,k,{span:a,key:e}))}var n=(m=r.props)==null||(m=m.style)==null?void 0:m.display;var p=false;if(o==="FormItemText"||o==="FormItemHidden"||o==="FormItemWrapper"||o==="FormItemWrapperDependencies"||r.type===l.Item||n==="none"){p=true}if(o==="FormItemWrapper"||r.props.noStyle){p=false}return f(s.Col,t({},k,{span:a,removeWrapper:p,children:r}),e)})).filter(Boolean)};var P=o((function(){if(["xs","sm"].includes(v)||!b){return{}}return{width:b}}),[v,b]);var S=m(j)?[15,0]:j;var T=o((function(){if(["xs"].includes(v)){return"left"}return G}),[G,v]);var V=o((function(){return u.getFormLayoutClassName({labelWidth:F,labelItemVertical:W,labelAlign:T,formItemGap:w,className:A.className})}),[F,W,T,w,A.className]);if(y){return f("div",{style:t({},P,A.style),className:r("easy-form",{"easy-form-pure":C},"easy-form-nested",V),children:C?h:f(s.Row,{gutter:S,children:B()})})}return f(p,t({},A,{labelWidth:F,labelAlign:T,labelItemVertical:W,formItemGap:w,style:t({},P,A.style),className:r("easy-form",{"easy-form-pure":C},V),autoComplete:"off",children:C?h:f(s.Row,{gutter:S,children:B()})}))};c["domTypeName"]="EasyForm";export{c as EasyForm};
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/context/create-ctx.ts","@flatbiz/antd/src/easy-form/context/layout-ctx.ts","@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * A helper to create a Context and Provider with no upfront default value, and\n * without having to check for undefined all the time.\n */\nexport function createCtx<A>() {\n const ctx = createContext<A | undefined>(undefined);\n function useCtx() {\n const c = useContext(ctx);\n // if (c === undefined)\n // throw new Error('useCtx must be inside a Provider with a value');\n return c;\n }\n return [useCtx, ctx.Provider] as const; // 'as const' makes TypeScript infer a tuple\n}\n","import { createCtx } from './create-ctx.js';\n\nexport type AiPilotProviderProviderProps = {\n isNested: boolean;\n};\n\nexport const [useEasyForm, EasyFormProvider] = createCtx<AiPilotProviderProviderProps>();\n","import { classNames } from '@dimjs/utils';\nimport { isUndefinedOrNull, TAny } from '@flatbiz/utils';\nimport { Form } from 'antd';\nimport { Children, cloneElement, ReactNode, useMemo } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\nimport { GutterParams } from '../box-grid/type';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormWrapper, FormWrapperProps } from '../form-wrapper';\nimport { preDefinedClassName } from '../pre-defined-class-name';\nimport { EasyFormProvider, useEasyForm } from './context/layout-ctx';\nimport './style.less';\n\nexport type EasyFormProps = Omit<FormWrapperProps, 'children'> & {\n /**\n * 定义一行显示几列（当外层宽度尺寸大于 992px（lg） 时，一行显示几列）, 默认值：3\n * ```\n * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外）\n * 2. 宽度尺寸定义\n * xs: 宽度 < 576px\n * sm: 宽度 ≥ 576px\n * md: 宽度 ≥ 768px\n * lg: 宽度 ≥ 992px\n * xl: 宽度 ≥ 1200px\n * xxl: 宽度 ≥ 1600px\n * 3. 列数尺寸定义\n * {\n * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n * };\n * ```\n */\n column?: 1 | 2 | 3 | 4;\n /**\n * 强制定义一行显示几列，不考虑响应式\n * ```\n * 1. 优先级大于column\n * 2. 建议优先使用column配置\n * ```\n */\n forceColumn?: 1 | 2 | 3 | 4;\n /**\n * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效\n */\n width?: number | string;\n /** 网格间距 */\n gridGutter?: BoxRowProps['gutter'];\n children: ReactNode;\n /**\n * 是否为纯净模式，对EasyForm的子节点不做任何包装处理\n */\n isPure?: boolean;\n /**\n * 栅格占位格数，最大值：24\n * ```\n * 1. 当前EasyForm处在 EasyForm 直接子节点中有效，即当前EasyForm在EasyForm栅格中的占位格数；\n * 2. 父节点使用属性值，当前节点不使用属性值\n * ```\n */\n span?: number;\n};\n\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm的children列表会进行网格化布局\n * 3. 自定义栅格占位格数的4中方式\n * 3.1 设置FormItemWrapper、FormItemText组件span属性；\n * 3.2 使用 EasyFormItemSpan 包裹children item，设置span属性\n * 3.3 使用 <BoxGrid.Col span={24} ></BoxGrid.Col> 包裹，设置响应式属性\n * 3.4 设置 EasyForm isPure = true设置纯净模式，对EasyForm的子节点不做任何包装处理\n * 4. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效\n * <EasyForm form={form}>\n * ....\n * <EasyForm>...</EasyForm>\n * ....\n * <EasyForm>...</EasyForm>\n * ....\n * </EasyForm>\n * 5. 布局网格以当前组件的宽度来计算的，不是屏幕宽度\n * 6. EasyForm 子节点包含 hidden = true 会被忽略\n * 7. 通过 column 可定义一行显示几列FormItem\n * 8. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 9. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 10. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式\n * 11. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）\n * 12. 自定义栅格占位格数，见下方`例如`\n\n * 例如\n * <EasyForm column={3}>\n *\t <FormItemWrapper name=\"field1\" label=\"条件1\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->\n *\t <BoxGrid.Col span={24}>\n *\t <FormItemWrapper name=\"field5\" label=\"条件5\">\n *\t \t<Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t </BoxGrid.Col>\n *\t <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->\n *\t <FormItemWrapper name=\"field6\" label=\"条件6\" span={24}>\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t <FormItemWrapper noStyle span={24}>\n *\t <Button>按钮</Buttone>\n *\t </FormItemWrapper>\n * </EasyForm>\n * ```\n */\n\nexport const EasyForm = (props: EasyFormProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n const easyFormApi = useEasyForm();\n\n const {\n column,\n forceColumn,\n children,\n width,\n gridGutter,\n labelWidth,\n labelItemVertical,\n labelAlign,\n formItemGap = '15',\n isPure,\n ...otherProps\n } = props;\n const gridSize = useMemo(() => {\n if (forceColumn) {\n const num = 24 / forceColumn;\n return { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num };\n }\n if (!column) {\n return { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };\n }\n const columnMap = {\n 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n };\n return columnMap[column];\n }, [column, forceColumn]);\n\n const getFormRowChildren = () => {\n const childrenList = Children.toArray(children).filter((item: TAny) => {\n return !!item;\n });\n return childrenList\n .map((item: TAny, index) => {\n const domTypeName = item.type['domTypeName'];\n\n let span: number | undefined = undefined;\n if (\n domTypeName === 'FormItemText' ||\n domTypeName === 'FormItemSpan' ||\n domTypeName === 'FormItemWrapper' ||\n domTypeName === 'BoxGridCol' ||\n domTypeName === 'EasyForm'\n ) {\n span = item.props['span'] as number;\n if (span) {\n if (screenType === 'xs') {\n span = 24;\n } else if (screenType === 'sm') {\n span = span > 12 ? span : 12;\n }\n }\n }\n\n if (domTypeName === 'BoxGridCol' || domTypeName === 'FormItemSpan') {\n if (domTypeName === 'FormItemSpan' && item.props.hidden) {\n return null;\n }\n return cloneElement(item, {\n ...item.props,\n ...gridSize,\n span,\n key: index,\n });\n }\n const display = item.props?.style?.display;\n let removeWrapper = false;\n if (\n domTypeName === 'FormItemText' ||\n domTypeName === 'FormItemHidden' ||\n domTypeName === 'FormItemWrapper' ||\n domTypeName === 'FormItemWrapperDependencies' ||\n item.type === Form.Item ||\n display === 'none'\n ) {\n removeWrapper = true;\n }\n\n if (domTypeName === 'FormItemWrapper' || item.props.noStyle) {\n removeWrapper = false;\n }\n return (\n <BoxGrid.Col key={index} {...gridSize} span={span} removeWrapper={removeWrapper}>\n {item}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType, width]);\n\n const gutter = isUndefinedOrNull(gridGutter) ? ([15, 0] as GutterParams) : gridGutter;\n\n const labelAlignNew = useMemo(() => {\n if (['xs'].includes(screenType)) {\n return 'left';\n }\n return labelAlign;\n }, [labelAlign, screenType]);\n\n const fromLayoutClassName = useMemo(() => {\n return preDefinedClassName.getFormLayoutClassName({\n labelWidth,\n labelItemVertical,\n labelAlign: labelAlignNew,\n formItemGap,\n className: otherProps.className,\n });\n }, [labelWidth, labelItemVertical, labelAlignNew, formItemGap, otherProps.className]);\n\n return (\n <EasyFormProvider value={{ isNested: true }}>\n {easyFormApi?.isNested ? (\n <div\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames(\n 'easy-form',\n { 'easy-form-pure': isPure },\n 'easy-form-nested',\n fromLayoutClassName,\n )}\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </div>\n ) : (\n <FormWrapper\n {...otherProps}\n labelWidth={labelWidth}\n labelAlign={labelAlignNew}\n labelItemVertical={labelItemVertical}\n formItemGap={formItemGap}\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames('easy-form', { 'easy-form-pure': isPure }, fromLayoutClassName)}\n autoComplete=\"off\"\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </FormWrapper>\n )}\n </EasyFormProvider>\n );\n};\n\nEasyForm['domTypeName'] = 'EasyForm';\n"],"names":["createCtx","ctx","createContext","undefined","useCtx","c","useContext","Provider","_createCtx","useEasyForm","EasyFormProvider","EasyForm","props","screenType","fbaHooks","useResponsivePoint","easyFormApi","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","_props$formItemGap","formItemGap","isPure","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","childrenList","Children","toArray","filter","item","map","index","_item$props","domTypeName","type","span","hidden","cloneElement","_extends","key","display","style","removeWrapper","Form","Item","noStyle","_jsx","BoxGrid","Col","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","labelAlignNew","fromLayoutClassName","preDefinedClassName","getFormLayoutClassName","className","value","isNested","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { isUndefinedOrNull, TAny } from '@flatbiz/utils';\nimport { Form } from 'antd';\nimport { Children, cloneElement, ReactNode, useMemo } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\nimport { GutterParams } from '../box-grid/type';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormWrapper, FormWrapperProps } from '../form-wrapper';\nimport { preDefinedClassName } from '../pre-defined-class-name';\nimport './style.less';\n\nexport type EasyFormProps = Omit<FormWrapperProps, 'children'> & {\n /**\n * 定义一行显示几列（当外层宽度尺寸大于 992px（lg） 时，一行显示几列）, 默认值：3\n * ```\n * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外）\n * 2. 宽度尺寸定义\n * xs: 宽度 < 576px\n * sm: 宽度 ≥ 576px\n * md: 宽度 ≥ 768px\n * lg: 宽度 ≥ 992px\n * xl: 宽度 ≥ 1200px\n * xxl: 宽度 ≥ 1600px\n * 3. 列数尺寸定义\n * {\n * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n * };\n * ```\n */\n column?: 1 | 2 | 3 | 4;\n /**\n * 强制定义一行显示几列，不考虑响应式\n * ```\n * 1. 优先级大于column\n * 2. 建议优先使用column配置\n * ```\n */\n forceColumn?: 1 | 2 | 3 | 4;\n /**\n * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效\n */\n width?: number | string;\n /** 网格间距 */\n gridGutter?: BoxRowProps['gutter'];\n children: ReactNode;\n /**\n * 是否为纯净模式，对EasyForm的子节点不做任何包装处理\n */\n isPure?: boolean;\n /**\n * 栅格占位格数，最大值：24\n * ```\n * 1. 当前EasyForm处在 EasyForm 直接子节点中有效，即当前EasyForm在EasyForm栅格中的占位格数；\n * 2. 父节点使用属性值，当前节点不使用属性值\n * ```\n */\n span?: number;\n};\n\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm的children列表会进行网格化布局\n * 3. 自定义栅格占位格数的4中方式\n * 3.1 设置FormItemWrapper、FormItemText组件span属性；\n * 3.2 使用 EasyFormItemSpan 包裹children item，设置span属性\n * 3.3 使用 <BoxGrid.Col span={24} ></BoxGrid.Col> 包裹，设置响应式属性\n * 3.4 设置 EasyForm isPure = true设置纯净模式，对EasyForm的子节点不做任何包装处理\n * 4. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效\n * <EasyForm form={form}>\n * ....\n * <EasyForm>...</EasyForm>\n * ....\n * <EasyForm>...</EasyForm>\n * ....\n * </EasyForm>\n * 5. 布局网格以当前组件的宽度来计算的，不是屏幕宽度\n * 6. EasyForm 子节点包含 hidden = true 会被忽略\n * 7. 通过 column 可定义一行显示几列FormItem\n * 8. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 9. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 10. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式\n * 11. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）\n * 12. 自定义栅格占位格数，见下方`例如`\n\n * 例如\n * <EasyForm column={3}>\n *\t <FormItemWrapper name=\"field1\" label=\"条件1\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->\n *\t <BoxGrid.Col span={24}>\n *\t <FormItemWrapper name=\"field5\" label=\"条件5\">\n *\t \t<Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t </BoxGrid.Col>\n *\t <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->\n *\t <FormItemWrapper name=\"field6\" label=\"条件6\" span={24}>\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t <FormItemWrapper noStyle span={24}>\n *\t <Button>按钮</Buttone>\n *\t </FormItemWrapper>\n * </EasyForm>\n * ```\n */\n\nexport const EasyForm = (props: EasyFormProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const form = Form.useFormInstance();\n\n const {\n column,\n forceColumn,\n children,\n width,\n gridGutter,\n labelWidth,\n labelItemVertical,\n labelAlign,\n formItemGap = '15',\n isPure,\n ...otherProps\n } = props;\n const gridSize = useMemo(() => {\n if (forceColumn) {\n const num = 24 / forceColumn;\n return { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num };\n }\n if (!column) {\n return { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };\n }\n const columnMap = {\n 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n };\n return columnMap[column];\n }, [column, forceColumn]);\n\n const getFormRowChildren = () => {\n const childrenList = Children.toArray(children).filter((item: TAny) => {\n return !!item;\n });\n return childrenList\n .map((item: TAny, index) => {\n const domTypeName = item.type['domTypeName'];\n\n let span: number | undefined = undefined;\n if (\n domTypeName === 'FormItemText' ||\n domTypeName === 'FormItemSpan' ||\n domTypeName === 'FormItemWrapper' ||\n domTypeName === 'BoxGridCol' ||\n domTypeName === 'EasyForm'\n ) {\n span = item.props['span'] as number;\n if (span) {\n if (screenType === 'xs') {\n span = 24;\n } else if (screenType === 'sm') {\n span = span > 12 ? span : 12;\n }\n }\n }\n\n if (domTypeName === 'BoxGridCol' || domTypeName === 'FormItemSpan') {\n if (domTypeName === 'FormItemSpan' && item.props.hidden) {\n return null;\n }\n return cloneElement(item, {\n ...item.props,\n ...gridSize,\n span,\n key: index,\n });\n }\n const display = item.props?.style?.display;\n let removeWrapper = false;\n if (\n domTypeName === 'FormItemText' ||\n domTypeName === 'FormItemHidden' ||\n domTypeName === 'FormItemWrapper' ||\n domTypeName === 'FormItemWrapperDependencies' ||\n item.type === Form.Item ||\n display === 'none'\n ) {\n removeWrapper = true;\n }\n\n if (domTypeName === 'FormItemWrapper' || item.props.noStyle) {\n removeWrapper = false;\n }\n return (\n <BoxGrid.Col key={index} {...gridSize} span={span} removeWrapper={removeWrapper}>\n {item}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType, width]);\n\n const gutter = isUndefinedOrNull(gridGutter) ? ([15, 0] as GutterParams) : gridGutter;\n\n const labelAlignNew = useMemo(() => {\n if (['xs'].includes(screenType)) {\n return 'left';\n }\n return labelAlign;\n }, [labelAlign, screenType]);\n\n const fromLayoutClassName = useMemo(() => {\n return preDefinedClassName.getFormLayoutClassName({\n labelWidth,\n labelItemVertical,\n labelAlign: labelAlignNew,\n formItemGap,\n className: otherProps.className,\n });\n }, [labelWidth, labelItemVertical, labelAlignNew, formItemGap, otherProps.className]);\n\n if (form) {\n return (\n <div\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames(\n 'easy-form',\n { 'easy-form-pure': isPure },\n 'easy-form-nested',\n fromLayoutClassName,\n )}\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </div>\n );\n }\n\n return (\n <FormWrapper\n {...otherProps}\n labelWidth={labelWidth}\n labelAlign={labelAlignNew}\n labelItemVertical={labelItemVertical}\n formItemGap={formItemGap}\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames('easy-form', { 'easy-form-pure': isPure }, fromLayoutClassName)}\n autoComplete=\"off\"\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </FormWrapper>\n );\n};\n\nEasyForm['domTypeName'] = 'EasyForm';\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","form","Form","useFormInstance","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","_props$formItemGap","formItemGap","isPure","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","childrenList","Children","toArray","filter","item","map","index","_item$props","domTypeName","type","span","undefined","hidden","cloneElement","_extends","key","display","style","removeWrapper","Item","noStyle","_jsx","BoxGrid","Col","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","labelAlignNew","fromLayoutClassName","preDefinedClassName","getFormLayoutClassName","className","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
|