@flatbiz/antd 4.4.20 → 4.4.21

package/esm/easy-form/index.css

@@ -1 +1 @@
-.easy-form{background-color:var(--block-bg-color)}.easy-form-anchor{height:0;width:0}
+.easy-form:not(".easy-form-pure"){background-color:var(--block-bg-color)}.easy-form-anchor{height:0;width:0}

package/esm/easy-form/index.js

@@ -5,5 +5,5 @@ import './../form-wrapper/index.css';
 import './../pre-defined-class-name/index.css';
 import './index.css';
 /*! @flatjs/forge MIT @flatbiz/antd */
-import{classNames as e}from"@dimjs/utils/cjs/class-names";import{a as r,_ as l}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isUndefinedOrNull as t,dom as a}from"@flatbiz/utils";import{useMemo as i,useRef as n,Fragment as s,Children as m}from"react";import{BoxGrid as o}from"../box-grid/index.js";import{fbaHooks as u}from"../fba-hooks/index.js";import{FormWrapper as d}from"../form-wrapper/index.js";import{preDefinedClassName as f}from"../pre-defined-class-name/index.js";import{jsxs as c,jsx as p}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"antd";var x=["column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure"];var h=function h(v){var g=u.useResponsivePoint()||"";var y=v.column,b=v.forceColumn,j=v.children,N=v.width,I=v.gridGutter,w=v.labelWidth,G=v.labelItemVertical,C=v.labelAlign,A=v.formItemGap,P=v.isPure,W=r(v,x);var T=i((function(){if(b){var e=24/b;return{xs:e,sm:e,md:e,lg:e,xl:e,xxl:e}}if(!y){return{xs:24,sm:12,md:12,lg:8,xl:8,xxl:6}}var r={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 r[y]}),[y,b]);var V=function e(){return m.toArray(j).map((function(e,r){if(e.props["hidden"])return null;if(e.type["domTypeName"]==="BoxGridCol")return p(s,{children:e},r);var t=undefined;if(e.type["domTypeName"]==="FormItemWrapper"||e.type["domTypeName"]==="FormItemText"){t=e.props["span"];if(t){if(g==="xs"){t=24}else if(g==="sm"){t=t>12?t:12}}}return p(o.Col,l({},T,{span:t,children:e}),r)})).filter(Boolean)};var k=i((function(){if(["xs","sm"].includes(g)||!N){return{}}return{width:N}}),[g]);var B=t(I)?[15,0]:I;var F=n(null);var R=i((function(){try{if(F.current){var e=a.findParentsElement(F.current,(function(e){var r;return(r=e.classList)==null||r.contains==null?void 0:r.contains("easy-form")}));return e?true:false}return undefined}catch(e){return false}}),[F.current]);var L=i((function(){return f.getFormLayoutClassName({labelWidth:w,labelItemVertical:G,labelAlign:C,formItemGap:A,className:W.className})}),[w,G,C,A]);return c(s,{children:[p("div",{className:"easy-form-anchor",ref:F}),R===true?p("div",{style:l({},k,W.style),className:e("easy-form","easy-form-nested",L,W.className),children:P?j:p(o.Row,{gutter:B,children:V()})}):undefined,R===false?p(d,l({},W,{labelWidth:w,labelAlign:C,labelItemVertical:G,formItemGap:A,style:l({},k,W.style),className:e("easy-form",W.className),autoComplete:"off",children:P?j:p(o.Row,{gutter:B,children:V()})})):undefined]})};export{h as EasyForm};
+import{classNames as e}from"@dimjs/utils/cjs/class-names";import{a as r,_ as l}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isUndefinedOrNull as t,dom as a}from"@flatbiz/utils";import{useMemo as i,useRef as s,Fragment as n,Children as m}from"react";import{BoxGrid as o}from"../box-grid/index.js";import{fbaHooks as u}from"../fba-hooks/index.js";import{FormWrapper as f}from"../form-wrapper/index.js";import{preDefinedClassName as d}from"../pre-defined-class-name/index.js";import{jsxs as c,jsx as p}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"antd";var x=["column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure"];var h=function h(v){var y=u.useResponsivePoint()||"";var g=v.column,b=v.forceColumn,j=v.children,N=v.width,I=v.gridGutter,w=v.labelWidth,G=v.labelItemVertical,C=v.labelAlign,A=v.formItemGap,P=v.isPure,W=r(v,x);var T=i((function(){if(b){var e=24/b;return{xs:e,sm:e,md:e,lg:e,xl:e,xxl:e}}if(!g){return{xs:24,sm:12,md:12,lg:8,xl:8,xxl:6}}var r={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 r[g]}),[g,b]);var V=function e(){return m.toArray(j).map((function(e,r){if(e.props["hidden"])return null;if(e.type["domTypeName"]==="BoxGridCol")return p(n,{children:e},r);var t=undefined;if(e.type["domTypeName"]==="FormItemWrapper"||e.type["domTypeName"]==="FormItemText"){t=e.props["span"];if(t){if(y==="xs"){t=24}else if(y==="sm"){t=t>12?t:12}}}return p(o.Col,l({},T,{span:t,children:e}),r)})).filter(Boolean)};var k=i((function(){if(["xs","sm"].includes(y)||!N){return{}}return{width:N}}),[y]);var B=t(I)?[15,0]:I;var F=s(null);var R=i((function(){try{if(F.current){var e=a.findParentsElement(F.current,(function(e){var r;return(r=e.classList)==null||r.contains==null?void 0:r.contains("easy-form")}));return e?true:false}return undefined}catch(e){return false}}),[F.current]);var L=i((function(){return d.getFormLayoutClassName({labelWidth:w,labelItemVertical:G,labelAlign:C,formItemGap:A,className:W.className})}),[w,G,C,A]);return c(n,{children:[p("div",{className:"easy-form-anchor",ref:F}),R===true?p("div",{style:l({},k,W.style),className:e("easy-form",{"easy-form-pure":P},"easy-form-nested",L,W.className),children:P?j:p(o.Row,{gutter:B,children:V()})}):undefined,R===false?p(f,l({},W,{labelWidth:w,labelAlign:C,labelItemVertical:G,formItemGap:A,style:l({},k,W.style),className:e("easy-form",{"easy-form-pure":P},W.className),autoComplete:"off",children:P?j:p(o.Row,{gutter:B,children:V()})})):undefined]})};export{h as EasyForm};
 //# sourceMappingURL=index.js.map

package/esm/easy-form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dom, isUndefinedOrNull } from '@flatbiz/utils';\nimport { Children, Fragment, ReactNode, useMemo, useRef } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\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  /** 是否为纯净模式，对EasyForm的子节点不做任何包装处理 */\n  isPure?: boolean;\n};\n\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效\n * 3. 布局网格以当前节点的宽度来计算的，不是屏幕宽度\n * 4. EasyForm 子节点包含 hidden = true 会被忽略\n * 5. 通过 column 可定义一行显示几列FormItem\n * 6. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 7. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 8. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式\n * 9. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）\n * 10. 自定义栅格占位格数，见下方`例如`\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 * </EasyForm>\n * ```\n */\nexport const EasyForm = (props: EasyFormProps) => {\n  const screenType = fbaHooks.useResponsivePoint() || '';\n\n  const {\n    column,\n    forceColumn,\n    children,\n    width,\n    gridGutter,\n    labelWidth,\n    labelItemVertical,\n    labelAlign,\n    formItemGap,\n    isPure,\n    ...otherProps\n  } = props;\n\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    return Children.toArray(children)\n      .map((item: any, index) => {\n        if (item.props['hidden']) return null;\n        if (item.type['domTypeName'] === 'BoxGridCol') return <Fragment key={index}>{item}</Fragment>;\n        let span: number | undefined = undefined;\n        if (item.type['domTypeName'] === 'FormItemWrapper' || item.type['domTypeName'] === 'FormItemText') {\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        return (\n          <BoxGrid.Col key={index} {...gridSize} span={span}>\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]);\n\n  const gutter = (isUndefinedOrNull(gridGutter) ? [15, 0] : gridGutter) as BoxRowProps['gutter'];\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  // 是否嵌套EasyForm节点\n  const isNestedEasyForm = useMemo(() => {\n    try {\n      if (anchorRef.current) {\n        const target = dom.findParentsElement(anchorRef.current, (node) => {\n          return node.classList?.contains?.('easy-form');\n        });\n        return target ? true : false;\n      }\n      return undefined;\n    } catch (error) {\n      return false;\n    }\n  }, [anchorRef.current]);\n\n  const fromLayoutClassName = useMemo(() => {\n    return preDefinedClassName.getFormLayoutClassName({\n      labelWidth,\n      labelItemVertical,\n      labelAlign,\n      formItemGap,\n      className: otherProps.className,\n    });\n  }, [labelWidth, labelItemVertical, labelAlign, formItemGap]);\n\n  return (\n    <Fragment>\n      <div className=\"easy-form-anchor\" ref={anchorRef}></div>\n      {isNestedEasyForm === true ? (\n        <div\n          style={{ ...innerStyle, ...otherProps.style }}\n          className={classNames('easy-form', 'easy-form-nested', fromLayoutClassName, otherProps.className)}\n        >\n          {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n        </div>\n      ) : undefined}\n      {isNestedEasyForm === false ? (\n        <FormWrapper\n          {...otherProps}\n          labelWidth={labelWidth}\n          labelAlign={labelAlign}\n          labelItemVertical={labelItemVertical}\n          formItemGap={formItemGap}\n          style={{ ...innerStyle, ...otherProps.style }}\n          className={classNames('easy-form', otherProps.className)}\n          autoComplete=\"off\"\n        >\n          {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n        </FormWrapper>\n      ) : undefined}\n    </Fragment>\n  );\n};\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","Children","toArray","map","item","index","type","_jsx","Fragment","span","undefined","BoxGrid","Col","_extends","filter","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","isNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","fromLayoutClassName","preDefinedClassName","getFormLayoutClassName","className","_jsxs","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dom, isUndefinedOrNull } from '@flatbiz/utils';\nimport { Children, Fragment, ReactNode, useMemo, useRef } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\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\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm的children列表会进行网格化布局，可通过设置 isPure = true设置纯净模式（对EasyForm的子节点不做任何包装处理）\n * 3. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效\n *  <EasyForm form={form}>\n *    ....\n *    <EasyForm>...</EasyForm>\n *    ....\n *    <EasyForm>...</EasyForm>\n *    ....\n *  </EasyForm>\n * 4. 布局网格以当前组件的宽度来计算的，不是屏幕宽度\n * 5. EasyForm 子节点包含 hidden = true 会被忽略\n * 6. 通过 column 可定义一行显示几列FormItem\n * 7. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 8. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 9. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式\n * 10. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）\n * 11. 自定义栅格占位格数，见下方`例如`\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 * </EasyForm>\n * ```\n */\nexport const EasyForm = (props: EasyFormProps) => {\n  const screenType = fbaHooks.useResponsivePoint() || '';\n\n  const {\n    column,\n    forceColumn,\n    children,\n    width,\n    gridGutter,\n    labelWidth,\n    labelItemVertical,\n    labelAlign,\n    formItemGap,\n    isPure,\n    ...otherProps\n  } = props;\n\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    return Children.toArray(children)\n      .map((item: any, index) => {\n        if (item.props['hidden']) return null;\n        if (item.type['domTypeName'] === 'BoxGridCol') return <Fragment key={index}>{item}</Fragment>;\n        let span: number | undefined = undefined;\n        if (item.type['domTypeName'] === 'FormItemWrapper' || item.type['domTypeName'] === 'FormItemText') {\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        return (\n          <BoxGrid.Col key={index} {...gridSize} span={span}>\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]);\n\n  const gutter = (isUndefinedOrNull(gridGutter) ? [15, 0] : gridGutter) as BoxRowProps['gutter'];\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  // 是否嵌套内部EasyForm节点\n  const isNestedEasyForm = useMemo(() => {\n    try {\n      if (anchorRef.current) {\n        const target = dom.findParentsElement(anchorRef.current, (node) => {\n          return node.classList?.contains?.('easy-form');\n        });\n        return target ? true : false;\n      }\n      return undefined;\n    } catch (error) {\n      return false;\n    }\n  }, [anchorRef.current]);\n\n  const fromLayoutClassName = useMemo(() => {\n    return preDefinedClassName.getFormLayoutClassName({\n      labelWidth,\n      labelItemVertical,\n      labelAlign,\n      formItemGap,\n      className: otherProps.className,\n    });\n  }, [labelWidth, labelItemVertical, labelAlign, formItemGap]);\n\n  return (\n    <Fragment>\n      <div className=\"easy-form-anchor\" ref={anchorRef}></div>\n      {isNestedEasyForm === true ? (\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            otherProps.className,\n          )}\n        >\n          {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n        </div>\n      ) : undefined}\n      {isNestedEasyForm === false ? (\n        <FormWrapper\n          {...otherProps}\n          labelWidth={labelWidth}\n          labelAlign={labelAlign}\n          labelItemVertical={labelItemVertical}\n          formItemGap={formItemGap}\n          style={{ ...innerStyle, ...otherProps.style }}\n          className={classNames('easy-form', { 'easy-form-pure': isPure }, otherProps.className)}\n          autoComplete=\"off\"\n        >\n          {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n        </FormWrapper>\n      ) : undefined}\n    </Fragment>\n  );\n};\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","Children","toArray","map","item","index","type","_jsx","Fragment","span","undefined","BoxGrid","Col","_extends","filter","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","isNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","fromLayoutClassName","preDefinedClassName","getFormLayoutClassName","className","_jsxs","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":";q0BA6FaA,EAAW,SAAXA,EAAYC,GACvB,IAAMC,EAAaC,EAASC,sBAAwB,GAEpD,IACEC,EAWEJ,EAXFI,OACAC,EAUEL,EAVFK,YACAC,EASEN,EATFM,SACAC,EAQEP,EARFO,MACAC,EAOER,EAPFQ,WACAC,EAMET,EANFS,WACAC,EAKEV,EALFU,kBACAC,EAIEX,EAJFW,WACAC,EAGEZ,EAHFY,YACAC,EAEEb,EAFFa,OACGC,EAAUC,EACXf,EAAKgB,GAET,IAAMC,EAAWC,GAAQ,WACvB,GAAIb,EAAa,CACf,IAAMc,EAAM,GAAKd,EACjB,MAAO,CAAEe,GAAID,EAAKE,GAAIF,EAAKG,GAAIH,EAAKI,GAAIJ,EAAKK,GAAIL,EAAKM,IAAKN,EAC7D,CACA,IAAKf,EAAQ,CACX,MAAO,CAAEgB,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,IAAK,EACtD,CACA,IAAMC,EAAY,CAChB,EAAG,CAAEN,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,IAAK,IAClD,EAAG,CAAEL,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,IAAK,IAClD,EAAG,CAAEL,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,IAAK,GAChD,EAAG,CAAEL,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,IAAK,IAElD,OAAOC,EAAUtB,EACnB,GAAG,CAACA,EAAQC,IAEZ,IAAMsB,EAAqB,SAArBA,IACJ,OAAOC,EAASC,QAAQvB,GACrBwB,KAAI,SAACC,EAAWC,GACf,GAAID,EAAK/B,MAAM,UAAW,OAAO,KACjC,GAAI+B,EAAKE,KAAK,iBAAmB,aAAc,OAAOC,EAACC,EAAQ,CAAA7B,SAAcyB,GAARC,GACrE,IAAII,EAA2BC,UAC/B,GAAIN,EAAKE,KAAK,iBAAmB,mBAAqBF,EAAKE,KAAK,iBAAmB,eAAgB,CACjGG,EAAOL,EAAK/B,MAAM,QAClB,GAAIoC,EAAM,CACR,GAAInC,IAAe,KAAM,CACvBmC,EAAO,EACT,MAAO,GAAInC,IAAe,KAAM,CAC9BmC,EAAOA,EAAO,GAAKA,EAAO,EAC5B,CACF,CACF,CACA,OACEF,EAACI,EAAQC,IAAGC,KAAiBvB,EAAQ,CAAEmB,KAAMA,EAAK9B,SAC/CyB,IADeC,EAItB,IACCS,OAAOC,UAGZ,IAAMC,EAAazB,GAAQ,WAEzB,GAAI,CAAC,KAAM,MAAM0B,SAAS3C,KAAgBM,EAAO,CAC/C,MAAO,EACT,CACA,MAAO,CAAEA,MAAAA,EACX,GAAG,CAACN,IAEJ,IAAM4C,EAAUC,EAAkBtC,GAAc,CAAC,GAAI,GAAKA,EAC1D,IAAMuC,EAAYC,EAAuB,MAGzC,IAAMC,EAAmB/B,GAAQ,WAC/B,IACE,GAAI6B,EAAUG,QAAS,CACrB,IAAMC,EAASC,EAAIC,mBAAmBN,EAAUG,SAAS,SAACI,GAAS,IAAAC,EACjE,OAAAA,EAAOD,EAAKE,YAALD,MAAAA,EAAgBE,sBAAhBF,EAAgBE,SAAW,YACpC,IACA,OAAON,EAAS,KAAO,KACzB,CACA,OAAOd,SACR,CAAC,MAAOqB,GACP,OAAO,KACT,CACF,GAAG,CAACX,EAAUG,UAEd,IAAMS,EAAsBzC,GAAQ,WAClC,OAAO0C,EAAoBC,uBAAuB,CAChDpD,WAAAA,EACAC,kBAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAkD,UAAWhD,EAAWgD,WAEzB,GAAE,CAACrD,EAAYC,EAAmBC,EAAYC,IAE/C,OACEmD,EAAC5B,EAAQ,CAAA7B,UACP4B,EAAA,MAAA,CAAK4B,UAAU,mBAAmBE,IAAKjB,IACtCE,IAAqB,KACpBf,EAAA,MAAA,CACE+B,MAAKzB,EAAOG,CAAAA,EAAAA,EAAe7B,EAAWmD,OACtCH,UAAWI,EACT,YACA,CAAE,iBAAkBrD,GACpB,mBACA8C,EACA7C,EAAWgD,WACXxD,SAEDO,EAASP,EAAW4B,EAACI,EAAQ6B,IAAG,CAACtB,OAAQA,EAAOvC,SAAEqB,QAEnDU,UACHY,IAAqB,MACpBf,EAACkC,EAAW5B,KACN1B,EAAU,CACdL,WAAYA,EACZE,WAAYA,EACZD,kBAAmBA,EACnBE,YAAaA,EACbqD,MAAKzB,EAAOG,CAAAA,EAAAA,EAAe7B,EAAWmD,OACtCH,UAAWI,EAAW,YAAa,CAAE,iBAAkBrD,GAAUC,EAAWgD,WAC5EO,aAAa,MAAK/D,SAEjBO,EAASP,EAAW4B,EAACI,EAAQ6B,IAAG,CAACtB,OAAQA,EAAOvC,SAAEqB,SAEnDU,YAGV"}

package/index.d.ts

@@ -2063,22 +2063,32 @@ export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
 	/** 网格间距 */
 	gridGutter?: BoxRowProps["gutter"];
 	children: ReactNode;
-	/** 是否为纯净模式，对EasyForm的子节点不做任何包装处理 */
+	/**
+	 * 是否为纯净模式，对EasyForm的子节点不做任何包装处理
+	 */
 	isPure?: boolean;
 };
 /**
  * 简单Form布局，可自定义网格布局
  * ```
  * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid
- * 2. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
- * 3. 布局网格以当前节点的宽度来计算的，不是屏幕宽度
- * 4. EasyForm 子节点包含 hidden = true 会被忽略
- * 5. 通过 column 可定义一行显示几列FormItem
- * 6. 通过 labelItemVertical 可定义 formitem 竖直布局
- * 7. 通过 formItemGap 可定义 formItem竖直方向间隙
- * 8. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
- * 9. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
- * 10. 自定义栅格占位格数，见下方`例如`
+ * 2. EasyForm的children列表会进行网格化布局，可通过设置 isPure = true设置纯净模式（对EasyForm的子节点不做任何包装处理）
+ * 3. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
+ *  <EasyForm form={form}>
+ *    ....
+ *    <EasyForm>...</EasyForm>
+ *    ....
+ *    <EasyForm>...</EasyForm>
+ *    ....
+ *  </EasyForm>
+ * 4. 布局网格以当前组件的宽度来计算的，不是屏幕宽度
+ * 5. EasyForm 子节点包含 hidden = true 会被忽略
+ * 6. 通过 column 可定义一行显示几列FormItem
+ * 7. 通过 labelItemVertical 可定义 formitem 竖直布局
+ * 8. 通过 formItemGap 可定义 formItem竖直方向间隙
+ * 9. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
+ * 10. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
+ * 11. 自定义栅格占位格数，见下方`例如`
 
  * 例如
  * <EasyForm column={3}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatbiz/antd",
-  "version": "4.4.20",
+  "version": "4.4.21",
   "description": "flat-biz ui components",
   "main": "index.js",
   "typings": "index.d.ts",
@@ -31,7 +31,7 @@
     "@dimjs/model": ">=1.2.1",
     "@dimjs/model-react": ">=1.2.1",
     "@dimjs/utils": ">=1.4.4",
-    "@flatbiz/utils": ">=4.0.19",
+    "@flatbiz/utils": ">=4.0.21",
     "@wove/react": ">=1.2.23",
     "antd": ">=5.11.0",
     "dayjs": ">=1.11.9",
@@ -45,7 +45,7 @@
     "@dimjs/model": "^1.2.1",
     "@dimjs/model-react": "^1.2.1",
     "@dimjs/utils": "^1.4.4",
-    "@flatbiz/utils": "^4.0.16",
+    "@flatbiz/utils": "^4.0.21",
     "@wove/react": "^1.2.23",
     "antd": "5.11.0",
     "dayjs": "1.11.9",