@flatbiz/antd 4.5.38 → 4.5.39
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 +1 -1
- package/esm/easy-form/index.js.map +1 -1
- package/esm/form-item-span/index.js +1 -1
- package/esm/form-item-span/index.js.map +1 -1
- package/esm/form-item-wrapper/index.js.map +1 -1
- package/esm/form-item-wrapper-dependencies/index.css +0 -0
- package/esm/form-item-wrapper-dependencies/index.js +5 -0
- package/esm/form-item-wrapper-dependencies/index.js.map +1 -0
- package/esm/index.js +2 -1
- package/esm/split-wrapper/index.js +1 -1
- package/esm/split-wrapper/index.js.map +1 -1
- package/esm/tag-list-render/index.js +1 -1
- package/esm/tag-list-render/index.js.map +1 -1
- package/index.d.ts +67 -2
- package/package.json +1 -1
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-a0769acd.js";import{isUndefinedOrNull as l,dom as
|
|
8
|
+
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{a as e,_ as t}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isUndefinedOrNull as l,dom as n}from"@flatbiz/utils";import{useMemo as a,useRef as o,Fragment as i,Children as s,cloneElement as m}from"react";import{BoxGrid as u}from"../box-grid/index.js";import{fbaHooks as f}from"../fba-hooks/index.js";import{FormWrapper as d}from"../form-wrapper/index.js";import{preDefinedClassName as p}from"../pre-defined-class-name/index.js";import{jsxs as c,jsx as x}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 v=["column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure","nonuseFormWrapper"];var h=function h(y){var g=f.useResponsivePoint()||"";var b=y.column,j=y.forceColumn,I=y.children,F=y.width,N=y.gridGutter,G=y.labelWidth,W=y.labelItemVertical,w=y.labelAlign,C=y.formItemGap,A=C===void 0?"15":C,P=y.isPure,k=y.nonuseFormWrapper,B=e(y,v);var V=a((function(){if(j){var r=24/j;return{xs:r,sm:r,md:r,lg:r,xl:r,xxl:r}}if(!b){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[b]}),[b,j]);var E=function r(){var e=s.toArray(I).filter((function(r){return!!r}));return e.map((function(r,e){var l=r.type["domTypeName"];var n=undefined;if(l==="FormItemText"||l==="FormItemSpan"||l==="FormItemWrapper"||l==="BoxGridCol"||l==="EasyForm"){n=r.props["span"];if(n){if(g==="xs"){n=24}else if(g==="sm"){n=n>12?n:12}}}if(l==="BoxGridCol"||l==="FormItemSpan"){if(l==="FormItemSpan"&&r.props.hidden){return null}return m(r,t({},r.props,V,{span:n,key:e}))}return x(u.Col,t({},V,{span:n,removeWrapper:true,children:r}),e)})).filter(Boolean)};var R=a((function(){if(["xs","sm"].includes(g)||!F){return{}}return{width:F}}),[g,F]);var S=l(N)?[15,0]:N;var T=o(null);var L=function r(){try{if(k){return true}if(T.current){var e=n.findParentsElement(T.current,(function(r){var e;return(e=r.classList)==null||e.contains==null?void 0:e.contains("easy-form")}));return e?true:false}return undefined}catch(r){console.log("error",r);return false}};var _=L();var z=a((function(){if(["xs"].includes(g)){return"left"}return w}),[w,g]);var H=a((function(){return p.getFormLayoutClassName({labelWidth:G,labelItemVertical:W,labelAlign:z,formItemGap:A,className:B.className})}),[G,W,z,A,B.className]);return c(i,{children:[x("div",{className:"easy-form-anchor",ref:T}),_===true?x("div",{style:t({},R,B.style),className:r("easy-form",{"easy-form-pure":P},"easy-form-nested",H),children:P?I:x(u.Row,{gutter:S,children:E()})}):undefined,_===false?x(d,t({},B,{labelWidth:G,labelAlign:z,labelItemVertical:W,formItemGap:A,style:t({},R,B.style),className:r("easy-form",{"easy-form-pure":P},H),autoComplete:"off",children:P?I:x(u.Row,{gutter:S,children:E()})})):undefined]})};h["domTypeName"]="EasyForm";export{h as EasyForm};
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dom, isUndefinedOrNull, TAny } from '@flatbiz/utils';\nimport { Children, cloneElement, Fragment, ReactNode, useMemo, useRef } 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 * true: 当前EasyForm组件不使用Antd Form包裹，可在Form、EasyForm、FormWrapper内部使用\n */\n nonuseFormWrapper?: 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 */\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 = '15',\n isPure,\n nonuseFormWrapper,\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 return cloneElement(item, {\n ...item.props,\n ...gridSize,\n span,\n key: index,\n });\n }\n return (\n <BoxGrid.Col key={index} {...gridSize} span={span} 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 const anchorRef = useRef<HTMLDivElement>(null);\n\n // 是否嵌套内部EasyForm节点\n const getIsNestedEasyForm = () => {\n try {\n if (nonuseFormWrapper) {\n return true;\n }\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 console.log('error', error);\n return false;\n }\n };\n\n const isNestedEasyForm = getIsNestedEasyForm();\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 <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 )}\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={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 ) : undefined}\n </Fragment>\n );\n};\n\nEasyForm['domTypeName'] = 'EasyForm';\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","_props$formItemGap","formItemGap","isPure","nonuseFormWrapper","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","childrenList","Children","toArray","filter","item","map","index","domTypeName","type","span","undefined","cloneElement","_extends","key","_jsx","BoxGrid","Col","removeWrapper","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","getIsNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","console","log","isNestedEasyForm","labelAlignNew","fromLayoutClassName","preDefinedClassName","getFormLayoutClassName","className","_jsxs","Fragment","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":";22BAkHaA,EAAW,SAAXA,EAAYC,GACvB,IAAMC,EAAaC,EAASC,sBAAwB,GAEpD,IACEC,EAYEJ,EAZFI,OACAC,EAWEL,EAXFK,YACAC,EAUEN,EAVFM,SACAC,EASEP,EATFO,MACAC,EAQER,EARFQ,WACAC,EAOET,EAPFS,WACAC,EAMEV,EANFU,kBACAC,EAKEX,EALFW,WAAUC,EAKRZ,EAJFa,YAAAA,EAAWD,SAAG,EAAA,KAAIA,EAClBE,EAGEd,EAHFc,OACAC,EAEEf,EAFFe,kBACGC,EAAUC,EACXjB,EAAKkB,GACT,IAAMC,EAAWC,GAAQ,WACvB,GAAIf,EAAa,CACf,IAAMgB,EAAM,GAAKhB,EACjB,MAAO,CAAEiB,GAAID,EAAKE,GAAIF,EAAKG,GAAIH,EAAKI,GAAIJ,EAAKK,GAAIL,EAAKM,IAAKN,EAC7D,CACA,IAAKjB,EAAQ,CACX,MAAO,CAAEkB,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,EAAUxB,EACnB,GAAG,CAACA,EAAQC,IAEZ,IAAMwB,EAAqB,SAArBA,IACJ,IAAMC,EAAeC,EAASC,QAAQ1B,GAAU2B,QAAO,SAACC,GACtD,QAASA,CACX,IACA,OAAOJ,EACJK,KAAI,SAACD,EAAYE,GAChB,IAAMC,EAAcH,EAAKI,KAAK,eAE9B,IAAIC,EAA2BC,UAC/B,GACEH,IAAgB,gBAChBA,IAAgB,gBAChBA,IAAgB,mBAChBA,IAAgB,cAChBA,IAAgB,WAChB,CACAE,EAAOL,EAAKlC,MAAM,QAClB,GAAIuC,EAAM,CACR,GAAItC,IAAe,KAAM,CACvBsC,EAAO,EACT,MAAO,GAAItC,IAAe,KAAM,CAC9BsC,EAAOA,EAAO,GAAKA,EAAO,EAC5B,CACF,CACF,CAEA,GAAIF,IAAgB,cAAgBA,IAAgB,eAAgB,CAClE,OAAOI,EAAaP,EAAIQ,KACnBR,EAAKlC,MACLmB,EAAQ,CACXoB,KAAAA,EACAI,IAAKP,IAET,CACA,OACEQ,EAACC,EAAQC,IAAGJ,KAAiBvB,EAAQ,CAAEoB,KAAMA,EAAMQ,cAAa,KAAAzC,SAC7D4B,IADeE,EAItB,IACCH,OAAOe,UAGZ,IAAMC,EAAa7B,GAAQ,WAEzB,GAAI,CAAC,KAAM,MAAM8B,SAASjD,KAAgBM,EAAO,CAC/C,MAAO,EACT,CACA,MAAO,CAAEA,MAAAA,EACX,GAAG,CAACN,EAAYM,IAEhB,IAAM4C,EAASC,EAAkB5C,GAAe,CAAC,GAAI,GAAsBA,EAC3E,IAAM6C,EAAYC,EAAuB,MAGzC,IAAMC,EAAsB,SAAtBA,IACJ,IACE,GAAIxC,EAAmB,CACrB,OAAO,IACT,CACA,GAAIsC,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,OAAOjB,SACR,CAAC,MAAOwB,GACPC,QAAQC,IAAI,QAASF,GACrB,OAAO,KACT,GAGF,IAAMG,EAAmBZ,IAEzB,IAAMa,EAAgBhD,GAAQ,WAC5B,GAAI,CAAC,MAAM8B,SAASjD,GAAa,CAC/B,MAAO,MACT,CACA,OAAOU,CACT,GAAG,CAACA,EAAYV,IAEhB,IAAMoE,EAAsBjD,GAAQ,WAClC,OAAOkD,EAAoBC,uBAAuB,CAChD9D,WAAAA,EACAC,kBAAAA,EACAC,WAAYyD,EACZvD,YAAAA,EACA2D,UAAWxD,EAAWwD,WAE1B,GAAG,CAAC/D,EAAYC,EAAmB0D,EAAevD,EAAaG,EAAWwD,YAE1E,OACEC,EAACC,EAAQ,CAAApE,UACPsC,EAAA,MAAA,CAAK4B,UAAU,mBAAmBG,IAAKtB,IACtCc,IAAqB,KACpBvB,EAAA,MAAA,CACEgC,MAAKlC,EAAOO,CAAAA,EAAAA,EAAejC,EAAW4D,OACtCJ,UAAWK,EACT,YACA,CAAE,iBAAkB/D,GACpB,mBACAuD,GACA/D,SAEDQ,EAASR,EAAWsC,EAACC,EAAQiC,IAAG,CAAC3B,OAAQA,EAAO7C,SAAEuB,QAEnDW,UACH2B,IAAqB,MACpBvB,EAACmC,EAAWrC,KACN1B,EAAU,CACdP,WAAYA,EACZE,WAAYyD,EACZ1D,kBAAmBA,EACnBG,YAAaA,EACb+D,MAAKlC,EAAOO,CAAAA,EAAAA,EAAejC,EAAW4D,OACtCJ,UAAWK,EAAW,YAAa,CAAE,iBAAkB/D,GAAUuD,GACjEW,aAAa,MAAK1E,SAEjBQ,EAASR,EAAWsC,EAACC,EAAQiC,IAAG,CAAC3B,OAAQA,EAAO7C,SAAEuB,SAEnDW,YAGV,EAEAzC,EAAS,eAAiB"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dom, isUndefinedOrNull, TAny } from '@flatbiz/utils';\nimport { Children, cloneElement, Fragment, ReactNode, useMemo, useRef } 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 * true: 当前EasyForm组件不使用Antd Form包裹，可在Form、EasyForm、FormWrapper内部使用\n */\n nonuseFormWrapper?: 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 * 13. 内部直接子节点为 <Form.Item dependencies={['xxx']} noStyle /> 时，样式会有问题，可使用 <FormItemWrapperDependencies /> 代替，具体参考FormItemWrapperDependencies组件使用\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 */\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 = '15',\n isPure,\n nonuseFormWrapper,\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 return (\n <BoxGrid.Col key={index} {...gridSize} span={span} 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 const anchorRef = useRef<HTMLDivElement>(null);\n\n // 是否嵌套内部EasyForm节点\n const getIsNestedEasyForm = () => {\n try {\n if (nonuseFormWrapper) {\n return true;\n }\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 console.log('error', error);\n return false;\n }\n };\n\n const isNestedEasyForm = getIsNestedEasyForm();\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 <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 )}\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={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 ) : undefined}\n </Fragment>\n );\n};\n\nEasyForm['domTypeName'] = 'EasyForm';\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","_props$formItemGap","formItemGap","isPure","nonuseFormWrapper","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","childrenList","Children","toArray","filter","item","map","index","domTypeName","type","span","undefined","hidden","cloneElement","_extends","key","_jsx","BoxGrid","Col","removeWrapper","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","getIsNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","console","log","isNestedEasyForm","labelAlignNew","fromLayoutClassName","preDefinedClassName","getFormLayoutClassName","className","_jsxs","Fragment","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
import './../box-grid/index.css';
|
|
3
3
|
import './index.css';
|
|
4
4
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
5
|
-
import{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{BoxGrid as m}from"../box-grid/index.js";import{jsx as o}from"react/jsx-runtime";import"@dimjs/utils/cjs/class-names";import"react";import"@dimjs/lang/cjs/is-number";import"ahooks";var
|
|
5
|
+
import{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{BoxGrid as m}from"../box-grid/index.js";import{jsx as o}from"react/jsx-runtime";import"@dimjs/utils/cjs/class-names";import"react";import"@dimjs/lang/cjs/is-number";import"ahooks";var s=function s(t){return o(m.Col,r({},t,{style:r({},t.style)}))};s["domTypeName"]="FormItemSpan";export{s as FormItemSpan};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-span/span.tsx"],"sourcesContent":["import { BoxGrid } from '../box-grid
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-span/span.tsx"],"sourcesContent":["import { BoxGrid } from '../box-grid';\nexport type FormItemSpanProps = {\n span?: number;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n /** 是否移除 */\n hidden?: boolean;\n};\n\n/**\n * 包裹EasyForm children item元素, 设置自定义栅格占位格数（使用在EasyForm一级子节点下生效）\n * ```\n * EasyForm中自定义栅格占位格数方式\n * 1. 设置 FormItemWrapper、FormItemText 的 span 属性（支持移动端小屏幕span强制转为24逻辑）\n * 2. 使用 <BoxGrid.Col span={24} ></BoxGrid.Col> 包裹，设置 span 属性（不支持移动端小屏幕span强制转为24逻辑）\n * 3. 使用 <FormItemSpan span={24} ></FormItemSpan> 包裹，设置 span 属性（支持移动端小屏幕span强制转为24逻辑）\n * <EasyForm>\n * <FormItemSpan span={24}>\n * <CardLayout title={'基本信息'}>\n * <EasyForm nonuseFormWrapper>\n * <FormItemWrapper></FormItemWrapper>\n * </EasyForm>\n * </CardLayout>\n * </FormItemSpan>\n * <FormItemSpan span={24}>\n * <CardLayout title={'紧急联系人信息'}>\n * <EasyForm nonuseFormWrapper>\n * <FormItemWrapper></FormItemWrapper>\n * </EasyForm>\n * </CardLayout>\n * </FormItemSpan>\n * </EasyForm>\n * 4. 处在EasyFrom直接子节点时hidden、span属性生效\n * ```\n */\nexport const FormItemSpan = (props: FormItemSpanProps) => {\n return <BoxGrid.Col {...props} style={{ ...props.style }} />;\n};\n\nFormItemSpan['domTypeName'] = 'FormItemSpan';\n"],"names":["FormItemSpan","props","_jsx","BoxGrid","Col","_extends","style"],"mappings":";4PAoCaA,EAAe,SAAfA,EAAgBC,GAC3B,OAAOC,EAACC,EAAQC,IAAGC,KAAKJ,EAAK,CAAEK,MAAKD,EAAOJ,GAAAA,EAAMK,SACnD,EAEAN,EAAa,eAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-wrapper/form-item-wrapper.tsx"],"sourcesContent":["import { composeProps, isUndefinedOrNull, TAny, TPlainObject } from '@flatbiz/utils';\nimport { Form, FormItemProps } from 'antd';\nimport { cloneElement, isValidElement, ReactElement, ReactNode, useMemo } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport { preDefinedClassName } from '../pre-defined-class-name';\nimport { TFormItemLayoutPreClassNameProps } from '../pre-defined-class-name/form';\n\nexport type FormItemWrapperProps = Omit<FormItemProps, 'hidden'> &\n TFormItemLayoutPreClassNameProps & {\n wrapper?: (children: ReactNode) => ReactElement;\n /** 设置wrapper后，before、after失效 */\n before?: ReactNode;\n /** 设置wrapper后，before、after失效 */\n after?: ReactNode;\n /** value 序列化处理 */\n inputNormalize?: (value?: TAny) => TAny;\n /**\n * onChange 参数序列化处理\n * 如果设置 normalize 属性，outputNormalize将失效\n */\n outputNormalize?: (value?: TAny) => TAny;\n /**\n * 隐藏 Form.Item，同时清除 Form.Item 值\n * ```\n * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏\n * ```\n */\n isClear?: boolean | ((formValues: TPlainObject) => boolean);\n /**\n * 隐藏 Form.Item
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-wrapper/form-item-wrapper.tsx"],"sourcesContent":["import { composeProps, isUndefinedOrNull, TAny, TPlainObject } from '@flatbiz/utils';\nimport { Form, FormItemProps } from 'antd';\nimport { cloneElement, isValidElement, ReactElement, ReactNode, useMemo } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport { preDefinedClassName } from '../pre-defined-class-name';\nimport { TFormItemLayoutPreClassNameProps } from '../pre-defined-class-name/form';\n\nexport type FormItemWrapperProps = Omit<FormItemProps, 'hidden' | 'children' | 'noStyle'> &\n TFormItemLayoutPreClassNameProps & {\n wrapper?: (children: ReactNode) => ReactElement;\n /** 设置wrapper后，before、after失效 */\n before?: ReactNode;\n /** 设置wrapper后，before、after失效 */\n after?: ReactNode;\n /** value 序列化处理 */\n inputNormalize?: (value?: TAny) => TAny;\n /**\n * onChange 参数序列化处理\n * 如果设置 normalize 属性，outputNormalize将失效\n */\n outputNormalize?: (value?: TAny) => TAny;\n /**\n * 隐藏 Form.Item，同时清除 Form.Item 值\n * ```\n * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏\n * ```\n */\n isClear?: boolean | ((formValues: TPlainObject) => boolean);\n /**\n * 隐藏 Form.Item，不会清除 Form.Item 值\n * ```\n * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏\n * ```\n */\n hidden?: boolean | ((formValues: TPlainObject) => boolean);\n /**\n * 栅格占位格数，最大值：24\n * ```\n * 1. 当前FormItemWrapper处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数；\n * 2. 父节点使用属性值，当前节点不使用属性值\n * ```\n */\n span?: number;\n\n /** 不支持函数式写法，如果需要使用dependencies获取表单值，可使用FormItemWrapperDependencies 组件 */\n children?: ReactNode;\n\n /**\n * ```\n * 1. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常\n * 2. 在FormItemWrapper中使用 dependencies 逻辑不需要设置 noStyle\n * ```\n */\n noStyle?: boolean;\n };\n\ntype FormItemWrapperChildrenProps = Pick<\n FormItemWrapperProps,\n 'wrapper' | 'after' | 'before' | 'inputNormalize' | 'isClear'\n> & {\n children: ReactElement;\n value?: any;\n onChange?: (value?: any) => any;\n};\n\nconst FormItemWrapperChildren = (props: FormItemWrapperChildrenProps) => {\n const { wrapper, children, inputNormalize, isClear, ...rest } = props;\n // composeProps 合并执行 Form.Item 传的 onChange 以及组件本身的方法\n const hasValue = Object.prototype.hasOwnProperty.call(rest, 'value');\n if (hasValue && inputNormalize) {\n rest['value'] = inputNormalize(rest['value']);\n }\n const _children = cloneElement(children, composeProps(children.props, rest, true));\n\n fbaHooks.useEffectCustom(() => {\n if (isClear && !isUndefinedOrNull(props.value)) {\n props.onChange?.(undefined);\n }\n }, [isClear, props.value]);\n\n if (wrapper) {\n return wrapper(_children);\n }\n if (props.before || props.after) {\n return (\n <div style={{ display: 'flex', alignItems: 'center' }}>\n {props.before ? <span style={{ marginRight: 10 }}>{props.before}</span> : null}\n <div style={{ flex: 1 }}>{_children}</div>\n {props.after ? <span style={{ marginLeft: 10 }}>{props.after}</span> : null}\n </div>\n );\n }\n return _children;\n};\n\n/**\n * 对 Form.Item 包装处理\n * ```\n * 1. 为 children 增加 before、after\n * 2. 对输入、输出数据进行序列化处理\n * 3. 内置布局样式使用 preDefinedClassName.formItem\n * 4. 设置隐藏域（不清除字段值） 使用hidden，存在依赖逻辑，可与dependencies属性配合使用\n * 5. 设置隐藏域（清除字段值）使用isClear，存在依赖逻辑，可与dependencies属性配合使用\n * 6. 不支持noStyle属性、children不支持函数写法、如果需要获取依赖字段值，可使用 FormItemWrapperDependencies 组件\n * 7. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常\n *\n *\n * ** 依赖其他字段 自身切换显示隐藏 **\n * <FormItemWrapper\n * label=\"label\"\n * name=\"xx1\"\n * dependencies={['type']}\n * isClear={(values) => {\n * return values.type == 1\n * }}>\n * <Input placeholder=\"请输入\" />\n * </FormItemWrapper>\n *\n * 如果只是想获取依赖字段值，可使用 FormItemWrapperDependencies 组件\n * ```\n */\nexport const FormItemWrapper = (props: FormItemWrapperProps) => {\n const {\n wrapper,\n isClear,\n labelWidth,\n labelItemVertical,\n labelAlign,\n children,\n before,\n after,\n inputNormalize,\n outputNormalize,\n className,\n dependencies,\n hidden,\n ...rest\n } = props;\n const form = Form.useFormInstance();\n\n const innerClassName = useMemo(() => {\n return preDefinedClassName.getFormItemLayoutClassName({\n labelWidth,\n labelItemVertical,\n labelAlign,\n className,\n });\n }, [labelWidth, labelItemVertical, labelAlign, className]);\n\n if (dependencies && dependencies?.length > 0) {\n return (\n <Form.Item dependencies={dependencies} noStyle>\n {(innerForm) => {\n const innerHidden = typeof hidden === 'function' ? hidden?.(innerForm.getFieldsValue()) : hidden;\n const innerIsClear =\n typeof isClear === 'function' ? isClear?.(innerForm.getFieldsValue()) : isClear;\n let rules = rest.rules;\n if (innerIsClear || innerHidden) {\n rules = [];\n }\n\n return (\n <Form.Item\n normalize={outputNormalize}\n {...rest}\n className={innerClassName}\n hidden={innerIsClear || innerHidden}\n rules={rules}\n >\n {isValidElement(children) ? (\n <FormItemWrapperChildren\n wrapper={wrapper}\n before={before}\n after={after}\n inputNormalize={inputNormalize}\n isClear={innerIsClear}\n >\n {children}\n </FormItemWrapperChildren>\n ) : (\n children\n )}\n </Form.Item>\n );\n }}\n </Form.Item>\n );\n }\n\n const innerHidden = typeof hidden === 'function' ? hidden(form.getFieldsValue()) : hidden;\n const innerIsClear = typeof isClear === 'function' ? isClear(form.getFieldsValue()) : isClear;\n\n return (\n <Form.Item\n normalize={outputNormalize}\n {...rest}\n className={innerClassName}\n hidden={innerHidden || innerIsClear}\n >\n {isValidElement(children) ? (\n <FormItemWrapperChildren\n wrapper={wrapper}\n before={before}\n after={after}\n inputNormalize={inputNormalize}\n isClear={innerIsClear}\n >\n {children}\n </FormItemWrapperChildren>\n ) : (\n children\n )}\n </Form.Item>\n );\n};\n\nFormItemWrapper['domTypeName'] = 'FormItemWrapper';\n"],"names":["FormItemWrapperChildren","props","wrapper","children","inputNormalize","isClear","rest","_objectWithoutPropertiesLoose","_excluded","hasValue","Object","prototype","hasOwnProperty","call","_children","cloneElement","composeProps","fbaHooks","useEffectCustom","isUndefinedOrNull","value","onChange","undefined","before","after","_jsxs","style","display","alignItems","_jsx","marginRight","flex","marginLeft","FormItemWrapper","labelWidth","labelItemVertical","labelAlign","outputNormalize","className","dependencies","hidden","_excluded2","form","Form","useFormInstance","innerClassName","useMemo","preDefinedClassName","getFormItemLayoutClassName","length","Item","noStyle","_children2","_x","apply","this","arguments","toString","innerForm","innerHidden","getFieldsValue","innerIsClear","rules","_extends","normalize","isValidElement"],"mappings":"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"}
|
|
File without changes
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import './index.css';
|
|
3
|
+
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
+
import{a as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{Form as r}from"antd";import{jsx as n}from"react/jsx-runtime";var l=["dependencies"];var t=function t(i){var o=i.dependencies,s=e(i,l);return n(r.Item,{dependencies:o,noStyle:true,children:function e(r){return i.children==null?void 0:i.children(r,{style:s==null?void 0:s.style,className:s.className})}})};export{t as FormItemWrapperDependencies};
|
|
5
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-wrapper-dependencies/dependencies.tsx"],"sourcesContent":["import { Form, type FormInstance } from 'antd';\nimport type { CSSProperties, ReactElement } from 'react';\nexport type FormItemWrapperDependenciesProps = {\n children?: (form: FormInstance, otherProps: { style?: CSSProperties; className?: string }) => ReactElement;\n dependencies: any[];\n className?: string;\n style?: CSSProperties;\n};\n/**\n * FormItem依赖写法包装，当处在EasyForm内部时，不支持 <Form.Item dependencies={['xxx']} noStyle /> 此写法，使用 <FormItemWrapperDependencies dependencies={['xxx']} /> 代替\n *\n * ```\n * 例如：（其中 otherProps 中 style、className透传是必要的）\n * <FormItemWrapperDependencies dependencies={['xx2']}>\n * {(_form, otherProps) => {\n * return (\n * <FormItemWrapper\n * name=\"xxxxx\"\n * label=\"xx1\"\n * style={otherProps.style}\n * className={otherProps.className}\n * >\n * <Input />\n * </FormItemWrapper>\n * );\n * }}\n * </FormItemWrapperDependencies>\n *\n *\n * 说明：\n * 透传style、className 是因为在EasyForm内部的BoxGrid组件下发的style、className在配置了noStyle后Form.Item不接收导致的\n *\n * ```\n */\nexport const FormItemWrapperDependencies = (props: FormItemWrapperDependenciesProps) => {\n const { dependencies, ...otherProps } = props;\n return (\n <Form.Item dependencies={dependencies} noStyle>\n {(form) => {\n return props.children?.(form, {\n style: otherProps?.style,\n className: otherProps.className,\n });\n }}\n </Form.Item>\n );\n};\n"],"names":["FormItemWrapperDependencies","props","dependencies","otherProps","_objectWithoutPropertiesLoose","_excluded","_jsx","Form","Item","noStyle","children","form","style","className"],"mappings":";4JAkCaA,EAA8B,SAA9BA,EAA+BC,GAC1C,IAAQC,EAAgCD,EAAhCC,aAAiBC,EAAUC,EAAKH,EAAKI,GAC7C,OACEC,EAACC,EAAKC,KAAI,CAACN,aAAcA,EAAcO,QAAO,KAAAC,SAC3C,SAAAA,EAACC,GACA,OAAOV,EAAMS,UAAQ,UAAA,EAAdT,EAAMS,SAAWC,EAAM,CAC5BC,MAAOT,GAAAA,UAAAA,EAAAA,EAAYS,MACnBC,UAAWV,EAAWU,WAE1B,GAGN"}
|
package/esm/index.js
CHANGED
|
@@ -88,6 +88,7 @@ import './file-select/index.css';
|
|
|
88
88
|
import './form-item-span/index.css';
|
|
89
89
|
import './form-item-text/index.css';
|
|
90
90
|
import './text-overflow/index.css';
|
|
91
|
+
import './form-item-wrapper-dependencies/index.css';
|
|
91
92
|
import './form-list-wrapper/index.css';
|
|
92
93
|
import './input-search-wrapper/index.css';
|
|
93
94
|
import './json-editor/index.css';
|
|
@@ -138,5 +139,5 @@ import './tree-selector-wrapper/index.css';
|
|
|
138
139
|
import './x-mind-preview/index.css';
|
|
139
140
|
import './index.css';
|
|
140
141
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
141
|
-
export{AceEditorGroovy}from"./ace-editor-groovy/index.js";export{AceEditorJava}from"./ace-editor-java/index.js";export{AceEditorJson}from"./ace-editor-json/index.js";export{AceEditorMysql}from"./ace-editor-mysql/index.js";export{AceEditorXml}from"./ace-editor-xml/index.js";export{AlertWrapper}from"./alert-wrapper/index.js";export{AmountFenInput}from"./amount-fen-input/index.js";export{AmountFenInputFormItem}from"./amount-fen-input-form-item/index.js";export{AnchorSteps}from"./anchor-steps/index.js";export{BlockLayout}from"./block-layout/index.js";export{Bootstrap}from"./bootstrap/index.js";export{BoxGrid,useBoxBreakpoint}from"./box-grid/index.js";export{ButtonOperate,ButtonOperateItemContent}from"./button-operate/index.js";export{ButtonWrapper}from"./button-wrapper/index.js";export{CardLayout}from"./card-layout/index.js";export{CardWrapper}from"./card-wrapper/index.js";export{CascaderWrapper}from"./cascader-wrapper/index.js";export{CheckList}from"./check-list/index.js";export{CheckboxWrapper}from"./checkbox-wrapper/index.js";export{ColorPickerWrapper}from"./color-picker-wrapper/index.js";export{C as ConfigProviderWrapper}from"./index-7f4ad045.js";export{createDrawerWrapperModel}from"./create-drawer-wrapper-model/index.js";export{createModalWrapperModel}from"./create-modal-wrapper-model/index.js";export{CssNodeHover}from"./css-node-hover/index.js";export{DataRender}from"./data-render/index.js";export{DatePickerWrapper}from"./date-picker-wrapper/index.js";export{DateRangePickerWrapper}from"./date-range-picker-wrapper/index.js";export{DateRangePickerWrapperFormItem}from"./date-range-picker-wrapper-form-item/index.js";export{DeleteNode}from"./delete-node/index.js";export{dialogAlert}from"./dialog-alert/index.js";export{dialogConfirm}from"./dialog-confirm/index.js";export{dialogDrawer}from"./dialog-drawer/index.js";export{DialogDrawerContent}from"./dialog-drawer-content/index.js";export{dialogLoading}from"./dialog-loading/index.js";export{dialogModal}from"./dialog-modal/index.js";export{dialogPreviewImage}from"./dialog-preview-image/index.js";export{DragCollapse}from"./drag-collapse/index.js";export{DragCollapseFormList}from"./drag-collapse-form-list/index.js";export{DragEditableCard}from"./drag-editable-card/index.js";export{DragEditableTable}from"./drag-editable-table/index.js";export{DragEditableTablePro}from"./drag-editable-table-pro/index.js";export{DragFormList}from"./drag-form-list/index.js";export{DragTable}from"./drag-table/index.js";export{DrawerWrapper}from"./drawer-wrapper/index.js";export{DropdownMenuWrapper}from"./dropdown-menu-wrapper/index.js";export{dynamicNode}from"./dynamic-node/index.js";export{EasyForm}from"./easy-form/index.js";export{EasyTable}from"./easy-table/index.js";export{EditableCard}from"./editable-card/index.js";export{EditableField}from"./editable-field/index.js";export{EditableFieldProvider}from"./editable-field-provider/index.js";export{EditableTable}from"./editable-table/index.js";export{EditableTablePro}from"./editable-table-pro/index.js";export{EditorWrapper}from"./editor-wrapper/index.js";export{ErrorBoundaryWrapper}from"./error-boundary-wrapper/index.js";export{FbaApp}from"./fba-app/index.js";export{fbaHooks}from"./fba-hooks/index.js";export{fbaUtils}from"./fba-utils/index.js";export{FileExport}from"./file-export/index.js";export{FileImport}from"./file-import/index.js";export{FileSelect}from"./file-select/index.js";export{FlexLayout}from"./flex-layout/index.js";export{FormGrid}from"./form-grid/index.js";export{FormItemGroup}from"./form-item-group/index.js";export{FormItemHidden}from"./form-item-hidden/index.js";export{FormItemSpan}from"./form-item-span/index.js";export{FormItemText}from"./form-item-text/index.js";export{FormItemWrapper}from"./form-item-wrapper/index.js";export{FormListWrapper}from"./form-list-wrapper/index.js";export{FormWrapper}from"./form-wrapper/index.js";export{Gap}from"./gap/index.js";export{IconWrapper}from"./icon-wrapper/index.js";export{InputSearchWrapper}from"./input-search-wrapper/index.js";export{InputTextAreaWrapper}from"./input-text-area-wrapper/index.js";export{InputWrapper}from"./input-wrapper/index.js";export{JsonEditor}from"./json-editor/index.js";export{LabelValueLayout}from"./label-value-layout/index.js";export{LabelValueRender}from"./label-value-render/index.js";export{LocalLoading}from"./local-loading/index.js";export{MentionEditor}from"./mention-editor/index.js";export{MentionsWrapper}from"./mentions-wrapper/index.js";export{ModalAction}from"./modal-action/index.js";export{ModalWrapper}from"./modal-wrapper/index.js";export{NumberRangeFormItem}from"./number-range-form-item/index.js";export{PageFixedFooter}from"./page-fixed-footer/index.js";export{Page404}from"./page404/index.js";export{PaginationWrapper}from"./pagination-wrapper/index.js";export{Pdf}from"./pdf/index.js";export{PdfPreview}from"./pdf-preview/index.js";export{PdfPreview2}from"./pdf-preview2/index.js";export{Permission}from"./permission/index.js";export{preDefinedClassName}from"./pre-defined-class-name/index.js";export{RadioGroupWrapper}from"./radio-group-wrapper/index.js";export{RelationTree}from"./relation-tree/index.js";export{RequestStatus}from"./request-status/index.js";export{RichTextEditor}from"./rich-text-editor/index.js";export{RichTextViewer}from"./rich-text-viewer/index.js";export{RollLocationCenter}from"./roll-location-center/index.js";export{RollLocationInView}from"./roll-location-in-view/index.js";export{RuleDescribe}from"./rule-describe/index.js";export{SearchForm}from"./search-form/index.js";export{SearchMenu}from"./search-menu/index.js";export{SelectorWrapper}from"./selector-wrapper/index.js";export{SelectorWrapperSearch}from"./selector-wrapper-search/index.js";export{SelectorWrapperSimple}from"./selector-wrapper-simple/index.js";export{SimpleLayout}from"./simple-layout/index.js";export{SmsCountDown}from"./sms-count-down/index.js";export{SplitWrapper}from"./split-wrapper/index.js";export{styles}from"./styles/index.js";export{SvgHttpView}from"./svg-http-view/index.js";export{SwitchConfirmWrapper}from"./switch-confirm-wrapper/index.js";export{SwitchWrapper}from"./switch-wrapper/index.js";export{tableCellRender}from"./table-cell-render/index.js";export{TableScrollbar}from"./table-scrollbar/index.js";export{TableTitleTooltip}from"./table-title-tooltip/index.js";export{TabsSticky}from"./tabs-sticky/index.js";export{TabsWrapper}from"./tabs-wrapper/index.js";export{TagGroup}from"./tag-group/index.js";export{TagListRender}from"./tag-list-render/index.js";export{TagListSelect}from"./tag-list-select/index.js";export{TagWrapper}from"./tag-wrapper/index.js";export{TextCssEllipsis}from"./text-css-ellipsis/index.js";export{TextOverflow}from"./text-overflow/index.js";export{TextOverflowRender}from"./text-overflow-render/index.js";export{TextSymbolWrapper}from"./text-symbol-wrapper/index.js";export{TimePickerWrapper}from"./time-picker-wrapper/index.js";export{TimeRangePickerWrapper}from"./time-range-picker-wrapper/index.js";export{TimeRangePickerWrapperFormItem}from"./time-range-picker-wrapper-form-item/index.js";export{TipsTitle}from"./tips-title/index.js";export{TipsWrapper}from"./tips-wrapper/index.js";export{TreeModal}from"./tree-modal/index.js";export{TreeModalSelector}from"./tree-modal-selector/index.js";export{TreeSelectorWrapper}from"./tree-selector-wrapper/index.js";export{TreeWrapper}from"./tree-wrapper/index.js";export{UploadWrapper}from"./upload-wrapper/index.js";export{XMindPreview}from"./x-mind-preview/index.js";import"./_rollupPluginBabelHelpers-a0769acd.js";import"@dimjs/utils/cjs/class-names";import"@wove/react/cjs/hooks";import"@dimjs/lang/cjs/is-object";import"@flatbiz/utils";import"react";import"react-ace";import"ace-builds/src-noconflict/ext-language_tools";import"ace-builds/src-noconflict/mode-groovy";import"ace-builds/src-noconflict/snippets/groovy";import"react/jsx-runtime";import"ace-builds/src-noconflict/mode-java";import"ace-builds/src-noconflict/snippets/java";import"ace-builds/src-noconflict/mode-json";import"ace-builds/src-noconflict/snippets/json";import"sql-formatter";import"ace-builds/src-noconflict/mode-mysql";import"ace-builds/src-noconflict/snippets/mysql";import"antd";import"xml-formatter";import"ace-builds/src-noconflict/mode-xml";import"ace-builds/src-noconflict/snippets/xml";import"@dimjs/utils/cjs/get";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@ant-design/icons/es/icons/MoreOutlined";import"@dimjs/lang/cjs/is-undefined";import"@dimjs/lang/cjs/is-plain-object";import"@dimjs/lang/cjs/is-string";import"@dimjs/lang/cjs/is-promise";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/lang/cjs/is-array";import"@dimjs/utils/cjs/extend";import"@ant-design/icons/es/icons/RedoOutlined";import"@dimjs/model";import"@dimjs/model-react";import"@wove/react/cjs/create-ctx";import"@ant-design/icons/es/icons/CloseCircleOutlined";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"./time-53b3f55f.js";import"@ant-design/icons/es/icons/CloseCircleFilled";import"@ant-design/icons/es/icons/DeleteOutlined";import"react-dom/client";import"./context-1f2093c6.js";import"./dom-4d04aa64.js";import"@dimjs/utils/cjs/array";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@ant-design/icons/es/icons/DragOutlined";import"@dnd-kit/utilities";import"@dnd-kit/modifiers";import"@ant-design/icons/es/icons/SaveOutlined";import"@ant-design/icons/es/icons/ExclamationCircleFilled";import"@ant-design/icons/es/icons/DownOutlined";import"@ant-design/icons/es/icons/UpOutlined";import"react-is";import"@ant-design/icons/es/icons/PlusOutlined";import"@ant-design/icons/es/icons/CloseOutlined";import"@ant-design/icons/es/icons/CheckOutlined";import"@ant-design/icons/es/icons/EditOutlined";import"./context-62955871.js";import"@dimjs/lang/cjs/is-boolean";import"@wove/react/cjs/editor";import"./use-responsive-point-21b8c601.js";import"@ant-design/icons/es/icons/QuestionCircleFilled";import"@dimjs/lang/cjs/is-deep-equal";import"@tinymce/tinymce-react";import"@ant-design/icons/es/icons/PlusCircleOutlined";import"@ant-design/icons/es/icons/FullscreenOutlined";import"@dimjs/utils/cjs/json";import"pubsub-js";import"react-split";import"@dimjs/lang/cjs/is-empty";import"@ant-design/icons/es/icons/QuestionCircleOutlined";import"dayjs/plugin/isSameOrAfter";import"dayjs/plugin/isSameOrBefore";import"@ant-design/icons/es/icons/CaretDownFilled";import"dequal";import"@dimjs/utils/cjs/tree";import"react-dom";import"simple-mind-map";
|
|
142
|
+
export{AceEditorGroovy}from"./ace-editor-groovy/index.js";export{AceEditorJava}from"./ace-editor-java/index.js";export{AceEditorJson}from"./ace-editor-json/index.js";export{AceEditorMysql}from"./ace-editor-mysql/index.js";export{AceEditorXml}from"./ace-editor-xml/index.js";export{AlertWrapper}from"./alert-wrapper/index.js";export{AmountFenInput}from"./amount-fen-input/index.js";export{AmountFenInputFormItem}from"./amount-fen-input-form-item/index.js";export{AnchorSteps}from"./anchor-steps/index.js";export{BlockLayout}from"./block-layout/index.js";export{Bootstrap}from"./bootstrap/index.js";export{BoxGrid,useBoxBreakpoint}from"./box-grid/index.js";export{ButtonOperate,ButtonOperateItemContent}from"./button-operate/index.js";export{ButtonWrapper}from"./button-wrapper/index.js";export{CardLayout}from"./card-layout/index.js";export{CardWrapper}from"./card-wrapper/index.js";export{CascaderWrapper}from"./cascader-wrapper/index.js";export{CheckList}from"./check-list/index.js";export{CheckboxWrapper}from"./checkbox-wrapper/index.js";export{ColorPickerWrapper}from"./color-picker-wrapper/index.js";export{C as ConfigProviderWrapper}from"./index-7f4ad045.js";export{createDrawerWrapperModel}from"./create-drawer-wrapper-model/index.js";export{createModalWrapperModel}from"./create-modal-wrapper-model/index.js";export{CssNodeHover}from"./css-node-hover/index.js";export{DataRender}from"./data-render/index.js";export{DatePickerWrapper}from"./date-picker-wrapper/index.js";export{DateRangePickerWrapper}from"./date-range-picker-wrapper/index.js";export{DateRangePickerWrapperFormItem}from"./date-range-picker-wrapper-form-item/index.js";export{DeleteNode}from"./delete-node/index.js";export{dialogAlert}from"./dialog-alert/index.js";export{dialogConfirm}from"./dialog-confirm/index.js";export{dialogDrawer}from"./dialog-drawer/index.js";export{DialogDrawerContent}from"./dialog-drawer-content/index.js";export{dialogLoading}from"./dialog-loading/index.js";export{dialogModal}from"./dialog-modal/index.js";export{dialogPreviewImage}from"./dialog-preview-image/index.js";export{DragCollapse}from"./drag-collapse/index.js";export{DragCollapseFormList}from"./drag-collapse-form-list/index.js";export{DragEditableCard}from"./drag-editable-card/index.js";export{DragEditableTable}from"./drag-editable-table/index.js";export{DragEditableTablePro}from"./drag-editable-table-pro/index.js";export{DragFormList}from"./drag-form-list/index.js";export{DragTable}from"./drag-table/index.js";export{DrawerWrapper}from"./drawer-wrapper/index.js";export{DropdownMenuWrapper}from"./dropdown-menu-wrapper/index.js";export{dynamicNode}from"./dynamic-node/index.js";export{EasyForm}from"./easy-form/index.js";export{EasyTable}from"./easy-table/index.js";export{EditableCard}from"./editable-card/index.js";export{EditableField}from"./editable-field/index.js";export{EditableFieldProvider}from"./editable-field-provider/index.js";export{EditableTable}from"./editable-table/index.js";export{EditableTablePro}from"./editable-table-pro/index.js";export{EditorWrapper}from"./editor-wrapper/index.js";export{ErrorBoundaryWrapper}from"./error-boundary-wrapper/index.js";export{FbaApp}from"./fba-app/index.js";export{fbaHooks}from"./fba-hooks/index.js";export{fbaUtils}from"./fba-utils/index.js";export{FileExport}from"./file-export/index.js";export{FileImport}from"./file-import/index.js";export{FileSelect}from"./file-select/index.js";export{FlexLayout}from"./flex-layout/index.js";export{FormGrid}from"./form-grid/index.js";export{FormItemGroup}from"./form-item-group/index.js";export{FormItemHidden}from"./form-item-hidden/index.js";export{FormItemSpan}from"./form-item-span/index.js";export{FormItemText}from"./form-item-text/index.js";export{FormItemWrapper}from"./form-item-wrapper/index.js";export{FormItemWrapperDependencies}from"./form-item-wrapper-dependencies/index.js";export{FormListWrapper}from"./form-list-wrapper/index.js";export{FormWrapper}from"./form-wrapper/index.js";export{Gap}from"./gap/index.js";export{IconWrapper}from"./icon-wrapper/index.js";export{InputSearchWrapper}from"./input-search-wrapper/index.js";export{InputTextAreaWrapper}from"./input-text-area-wrapper/index.js";export{InputWrapper}from"./input-wrapper/index.js";export{JsonEditor}from"./json-editor/index.js";export{LabelValueLayout}from"./label-value-layout/index.js";export{LabelValueRender}from"./label-value-render/index.js";export{LocalLoading}from"./local-loading/index.js";export{MentionEditor}from"./mention-editor/index.js";export{MentionsWrapper}from"./mentions-wrapper/index.js";export{ModalAction}from"./modal-action/index.js";export{ModalWrapper}from"./modal-wrapper/index.js";export{NumberRangeFormItem}from"./number-range-form-item/index.js";export{PageFixedFooter}from"./page-fixed-footer/index.js";export{Page404}from"./page404/index.js";export{PaginationWrapper}from"./pagination-wrapper/index.js";export{Pdf}from"./pdf/index.js";export{PdfPreview}from"./pdf-preview/index.js";export{PdfPreview2}from"./pdf-preview2/index.js";export{Permission}from"./permission/index.js";export{preDefinedClassName}from"./pre-defined-class-name/index.js";export{RadioGroupWrapper}from"./radio-group-wrapper/index.js";export{RelationTree}from"./relation-tree/index.js";export{RequestStatus}from"./request-status/index.js";export{RichTextEditor}from"./rich-text-editor/index.js";export{RichTextViewer}from"./rich-text-viewer/index.js";export{RollLocationCenter}from"./roll-location-center/index.js";export{RollLocationInView}from"./roll-location-in-view/index.js";export{RuleDescribe}from"./rule-describe/index.js";export{SearchForm}from"./search-form/index.js";export{SearchMenu}from"./search-menu/index.js";export{SelectorWrapper}from"./selector-wrapper/index.js";export{SelectorWrapperSearch}from"./selector-wrapper-search/index.js";export{SelectorWrapperSimple}from"./selector-wrapper-simple/index.js";export{SimpleLayout}from"./simple-layout/index.js";export{SmsCountDown}from"./sms-count-down/index.js";export{SplitWrapper}from"./split-wrapper/index.js";export{styles}from"./styles/index.js";export{SvgHttpView}from"./svg-http-view/index.js";export{SwitchConfirmWrapper}from"./switch-confirm-wrapper/index.js";export{SwitchWrapper}from"./switch-wrapper/index.js";export{tableCellRender}from"./table-cell-render/index.js";export{TableScrollbar}from"./table-scrollbar/index.js";export{TableTitleTooltip}from"./table-title-tooltip/index.js";export{TabsSticky}from"./tabs-sticky/index.js";export{TabsWrapper}from"./tabs-wrapper/index.js";export{TagGroup}from"./tag-group/index.js";export{TagListRender}from"./tag-list-render/index.js";export{TagListSelect}from"./tag-list-select/index.js";export{TagWrapper}from"./tag-wrapper/index.js";export{TextCssEllipsis}from"./text-css-ellipsis/index.js";export{TextOverflow}from"./text-overflow/index.js";export{TextOverflowRender}from"./text-overflow-render/index.js";export{TextSymbolWrapper}from"./text-symbol-wrapper/index.js";export{TimePickerWrapper}from"./time-picker-wrapper/index.js";export{TimeRangePickerWrapper}from"./time-range-picker-wrapper/index.js";export{TimeRangePickerWrapperFormItem}from"./time-range-picker-wrapper-form-item/index.js";export{TipsTitle}from"./tips-title/index.js";export{TipsWrapper}from"./tips-wrapper/index.js";export{TreeModal}from"./tree-modal/index.js";export{TreeModalSelector}from"./tree-modal-selector/index.js";export{TreeSelectorWrapper}from"./tree-selector-wrapper/index.js";export{TreeWrapper}from"./tree-wrapper/index.js";export{UploadWrapper}from"./upload-wrapper/index.js";export{XMindPreview}from"./x-mind-preview/index.js";import"./_rollupPluginBabelHelpers-a0769acd.js";import"@dimjs/utils/cjs/class-names";import"@wove/react/cjs/hooks";import"@dimjs/lang/cjs/is-object";import"@flatbiz/utils";import"react";import"react-ace";import"ace-builds/src-noconflict/ext-language_tools";import"ace-builds/src-noconflict/mode-groovy";import"ace-builds/src-noconflict/snippets/groovy";import"react/jsx-runtime";import"ace-builds/src-noconflict/mode-java";import"ace-builds/src-noconflict/snippets/java";import"ace-builds/src-noconflict/mode-json";import"ace-builds/src-noconflict/snippets/json";import"sql-formatter";import"ace-builds/src-noconflict/mode-mysql";import"ace-builds/src-noconflict/snippets/mysql";import"antd";import"xml-formatter";import"ace-builds/src-noconflict/mode-xml";import"ace-builds/src-noconflict/snippets/xml";import"@dimjs/utils/cjs/get";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@ant-design/icons/es/icons/MoreOutlined";import"@dimjs/lang/cjs/is-undefined";import"@dimjs/lang/cjs/is-plain-object";import"@dimjs/lang/cjs/is-string";import"@dimjs/lang/cjs/is-promise";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/lang/cjs/is-array";import"@dimjs/utils/cjs/extend";import"@ant-design/icons/es/icons/RedoOutlined";import"@dimjs/model";import"@dimjs/model-react";import"@wove/react/cjs/create-ctx";import"@ant-design/icons/es/icons/CloseCircleOutlined";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"./time-53b3f55f.js";import"@ant-design/icons/es/icons/CloseCircleFilled";import"@ant-design/icons/es/icons/DeleteOutlined";import"react-dom/client";import"./context-1f2093c6.js";import"./dom-4d04aa64.js";import"@dimjs/utils/cjs/array";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@ant-design/icons/es/icons/DragOutlined";import"@dnd-kit/utilities";import"@dnd-kit/modifiers";import"@ant-design/icons/es/icons/SaveOutlined";import"@ant-design/icons/es/icons/ExclamationCircleFilled";import"@ant-design/icons/es/icons/DownOutlined";import"@ant-design/icons/es/icons/UpOutlined";import"react-is";import"@ant-design/icons/es/icons/PlusOutlined";import"@ant-design/icons/es/icons/CloseOutlined";import"@ant-design/icons/es/icons/CheckOutlined";import"@ant-design/icons/es/icons/EditOutlined";import"./context-62955871.js";import"@dimjs/lang/cjs/is-boolean";import"@wove/react/cjs/editor";import"./use-responsive-point-21b8c601.js";import"@ant-design/icons/es/icons/QuestionCircleFilled";import"@dimjs/lang/cjs/is-deep-equal";import"@tinymce/tinymce-react";import"@ant-design/icons/es/icons/PlusCircleOutlined";import"@ant-design/icons/es/icons/FullscreenOutlined";import"@dimjs/utils/cjs/json";import"pubsub-js";import"react-split";import"@dimjs/lang/cjs/is-empty";import"@ant-design/icons/es/icons/QuestionCircleOutlined";import"dayjs/plugin/isSameOrAfter";import"dayjs/plugin/isSameOrBefore";import"@ant-design/icons/es/icons/CaretDownFilled";import"dequal";import"@dimjs/utils/cjs/tree";import"react-dom";import"simple-mind-map";
|
|
142
143
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import './index.css';
|
|
3
3
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
-
import{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as e}from"@dimjs/utils/cjs/class-names";import{hooks as t}from"@wove/react/cjs/hooks";import{Children as a,useState as i}from"react";import o from"react-split";import{jsx as s}from"react/jsx-runtime";var p=function p(l){var n=a.toArray(l.children);var c=i(Date.now()),m=c[0],f=c[1];t.useUpdateEffect((function(){f(Date.now())}),[l.direction]);return s(o,r({gutterSize:
|
|
4
|
+
import{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as e}from"@dimjs/utils/cjs/class-names";import{hooks as t}from"@wove/react/cjs/hooks";import{Children as a,useState as i}from"react";import o from"react-split";import{jsx as s}from"react/jsx-runtime";var p=function p(l){var n=a.toArray(l.children);var c=i(Date.now()),m=c[0],f=c[1];t.useUpdateEffect((function(){f(Date.now())}),[l.direction]);return s(o,r({gutterSize:7},l,{className:e("split-warpper","split-warpper-"+l.direction,l.className),children:n.map((function(r,e){return s("div",{className:"split-warpper-panel",style:l.panelStyle,children:r},e)}))}),m)};export{p as SplitWrapper};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/split-wrapper/split.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { hooks } from '@wove/react';\nimport { Children, useState, type CSSProperties } from 'react';\nimport Split, { type SplitProps } from 'react-split';\nimport './style.less';\ntype SplitWrapperProps = SplitProps & {\n panelStyle?: CSSProperties;\n};\n/**\n * 分屏可拖动组件\n * ```\n * <SplitWrapper\n sizes={[25, 75]}\n minSize={[300, 300]}\n direction={'vertical'}\n >{...}</SplitWrapper>\n 1. 通过 sizes 来初始化设置面板分屏尺寸\n 2. 通过 minSize 来设置面板最小尺寸\n 3. 通过 direction 设置方向\n * ```\n */\nexport const SplitWrapper = (props: SplitWrapperProps) => {\n const childrenList = Children.toArray(props.children);\n const [key, setKey] = useState(Date.now());\n\n hooks.useUpdateEffect(() => {\n setKey(Date.now());\n }, [props.direction]);\n\n return (\n <Split\n key={key}\n gutterSize={
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/split-wrapper/split.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { hooks } from '@wove/react';\nimport { Children, useState, type CSSProperties } from 'react';\nimport Split, { type SplitProps } from 'react-split';\nimport './style.less';\ntype SplitWrapperProps = SplitProps & {\n panelStyle?: CSSProperties;\n};\n/**\n * 分屏可拖动组件\n * ```\n * <SplitWrapper\n sizes={[25, 75]}\n minSize={[300, 300]}\n direction={'vertical'}\n >{...}</SplitWrapper>\n 1. 通过 sizes 来初始化设置面板分屏尺寸\n 2. 通过 minSize 来设置面板最小尺寸\n 3. 通过 direction 设置方向\n * ```\n */\nexport const SplitWrapper = (props: SplitWrapperProps) => {\n const childrenList = Children.toArray(props.children);\n const [key, setKey] = useState(Date.now());\n\n hooks.useUpdateEffect(() => {\n setKey(Date.now());\n }, [props.direction]);\n\n return (\n <Split\n key={key}\n gutterSize={7}\n {...props}\n className={classNames('split-warpper', `split-warpper-${props.direction}`, props.className)}\n >\n {childrenList.map((item, index) => {\n return (\n <div className=\"split-warpper-panel\" key={index} style={props.panelStyle}>\n {item}\n </div>\n );\n })}\n </Split>\n );\n};\n"],"names":["SplitWrapper","props","childrenList","Children","toArray","children","_useState","useState","Date","now","key","setKey","_hooks","useUpdateEffect","direction","_jsx","Split","_extends","gutterSize","className","_classNames","map","item","index","style","panelStyle"],"mappings":";2RAqBaA,EAAe,SAAfA,EAAgBC,GAC3B,IAAMC,EAAeC,EAASC,QAAQH,EAAMI,UAC5C,IAAAC,EAAsBC,EAASC,KAAKC,OAA7BC,EAAGJ,EAAA,GAAEK,EAAML,EAAA,GAElBM,EAAMC,iBAAgB,WACpBF,EAAOH,KAAKC,MACd,GAAG,CAACR,EAAMa,YAEV,OACEC,EAACC,EAAKC,EAAA,CAEJC,WAAY,GACRjB,EAAK,CACTkB,UAAWC,EAAW,gBAAkCnB,iBAAAA,EAAMa,UAAab,EAAMkB,WAAWd,SAE3FH,EAAamB,KAAI,SAACC,EAAMC,GACvB,OACER,EAAA,MAAA,CAAKI,UAAU,sBAAkCK,MAAOvB,EAAMwB,WAAWpB,SACtEiB,GADuCC,QAPzCb,EAcX"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import './index.css';
|
|
3
3
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
-
import{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{toArray as
|
|
4
|
+
import{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{toArray as e,isUndefinedOrNull as l,valueIsEqual as n}from"@flatbiz/utils";import{Tag as t,Popover as a}from"antd";import{useMemo as o,Fragment as i}from"react";import{jsx as u,jsxs as c}from"react/jsx-runtime";var f=function f(v){var d=e(v.value);var h=v.maxShowCount||0;var m=o((function(){if(l(v.value)){return[]}return d.map((function(r){var e;var l=(e=v.dataList)==null?void 0:e.find((function(e){return n(e.value,r)||e.label===r}));if(l){var t;return{label:l.label||l.value,color:((t=v.colorMap)==null?void 0:t[String(l.value)])||l.color,value:r}}if(v.forceMatch){return undefined}return{label:""+r,color:undefined,value:r}})).filter(Boolean)}),[v.colorMap,v.dataList,v.forceMatch,v.value,d]);if(m.length===0){return u(i,{children:v.value})}var p=m.slice(0,h||m.length);var s=p.length<m.length?v.foldShowAllTag?m:m.slice(h,m.length):[];return c(i,{children:[p.map((function(r,e){return u(t,{color:r.color,style:e===p.length-1?{margin:"0"}:{marginRight:5},children:r.label},e)})),s.length>0?u(a,{content:u(f,r({},v,{value:s.map((function(r){return r.value})),dataList:s,maxShowCount:undefined})),children:u(t,{color:"blue",style:{marginLeft:5,cursor:"pointer"},children:"..."})}):null]})};f.defaultProps={forceMatch:false};export{f as TagListRender};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/tag-list-render/tag-list.tsx"],"sourcesContent":["import { isUndefinedOrNull, toArray, valueIsEqual } from '@flatbiz/utils';\nimport { Popover, Tag } from 'antd';\nimport { FC, Fragment, useMemo } from 'react';\n\nexport type TagListRenderValue = string | number | boolean;\nexport type TagListRenderDataItem = { label: string; value: TagListRenderValue; color?: string };\n\nexport type TagListRenderProps = {\n dataList: TagListRenderDataItem[];\n /** 颜色配置数据，例如：{ 1:'red', 2: 'blue'} key值与 dataList中value相同 */\n colorMap?: Record<string | number, string>;\n value?: TagListRenderValue | TagListRenderValue[];\n /** 是否强制匹配，默认值false */\n forceMatch?: boolean;\n /** 最大显示Tag数量，超出折叠隐藏 */\n maxShowCount?: number;\n /** 触发maxShowCount后，被折叠的内容是否显示完整tag，默认值：false */\n foldShowAllTag?: boolean;\n /** 所有tag背景匹配此颜色，在colorMap为空、dataList中未配置color的情况下有效果 */\n tagColor?: string;\n};\n\n/**\n * 在列表数据dataList中通过value匹配数据，以Tag形式展示\n * ```\n * 1. forceMatch: 是否强制匹配（默认值false）\n * - false: 匹配不到显示value值，\n * - true：匹配不到不显示\n * 2. value 与 dataList中label、value任一相等，都可匹配\n *\n * 用法1：\n * <TagListRender\n * dataList=[{ label: '启用', value: 1 }]\n * colorMap={{ 1:'red', 2: 'blue'}}\n * value={1} />\n * =>\n * <Tag color={'red'}>启用</Tag>\n *\n * 用法2\n * <TagListRender\n * dataList=[{ label: '启用', value: 1. color: 'red' }]\n * value=\"启用\" />\n * =>\n * <Tag color={'red'}>启用</Tag>\n * ```\n */\nexport const TagListRender: FC<TagListRenderProps> = (props) => {\n const valueList = toArray<TagListRenderValue>(props.value);\n const maxShowCount = props.maxShowCount || 0;\n const tagList = useMemo(() => {\n if (isUndefinedOrNull(props.value)) {\n return [];\n }\n return valueList\n .map((value) => {\n const target = props.dataList?.find(\n (item) => valueIsEqual(item.value, value) || item.label === value,\n );\n if (target) {\n return {\n label: target.label || target.value,\n color: props.colorMap?.[String(target.value)] || target.color,\n value: value,\n };\n }\n if (props.forceMatch) {\n return undefined;\n }\n return { label: `${value}`, color: undefined, value: value };\n })\n .filter(Boolean) as TagListRenderDataItem[];\n }, [props.colorMap, props.dataList, props.forceMatch, props.value, valueList]);\n\n if (tagList.length === 0) {\n return <Fragment>{props.value}</Fragment>;\n }\n\n const
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/tag-list-render/tag-list.tsx"],"sourcesContent":["import { isUndefinedOrNull, toArray, valueIsEqual } from '@flatbiz/utils';\nimport { Popover, Tag } from 'antd';\nimport { FC, Fragment, useMemo } from 'react';\n\nexport type TagListRenderValue = string | number | boolean;\nexport type TagListRenderDataItem = { label: string; value: TagListRenderValue; color?: string };\n\nexport type TagListRenderProps = {\n dataList: TagListRenderDataItem[];\n /** 颜色配置数据，例如：{ 1:'red', 2: 'blue'} key值与 dataList中value相同 */\n colorMap?: Record<string | number, string>;\n value?: TagListRenderValue | TagListRenderValue[];\n /** 是否强制匹配，默认值false */\n forceMatch?: boolean;\n /** 最大显示Tag数量，超出折叠隐藏 */\n maxShowCount?: number;\n /** 触发maxShowCount后，被折叠的内容是否显示完整tag，默认值：false */\n foldShowAllTag?: boolean;\n /** 所有tag背景匹配此颜色，在colorMap为空、dataList中未配置color的情况下有效果 */\n tagColor?: string;\n};\n\n/**\n * 在列表数据dataList中通过value匹配数据，以Tag形式展示\n * ```\n * 1. forceMatch: 是否强制匹配（默认值false）\n * - false: 匹配不到显示value值，\n * - true：匹配不到不显示\n * 2. value 与 dataList中label、value任一相等，都可匹配\n *\n * 用法1：\n * <TagListRender\n * dataList=[{ label: '启用', value: 1 }]\n * colorMap={{ 1:'red', 2: 'blue'}}\n * value={1} />\n * =>\n * <Tag color={'red'}>启用</Tag>\n *\n * 用法2\n * <TagListRender\n * dataList=[{ label: '启用', value: 1. color: 'red' }]\n * value=\"启用\" />\n * =>\n * <Tag color={'red'}>启用</Tag>\n * ```\n */\nexport const TagListRender: FC<TagListRenderProps> = (props) => {\n const valueList = toArray<TagListRenderValue>(props.value);\n const maxShowCount = props.maxShowCount || 0;\n const tagList = useMemo(() => {\n if (isUndefinedOrNull(props.value)) {\n return [];\n }\n return valueList\n .map((value) => {\n const target = props.dataList?.find(\n (item) => valueIsEqual(item.value, value) || item.label === value,\n );\n if (target) {\n return {\n label: target.label || target.value,\n color: props.colorMap?.[String(target.value)] || target.color,\n value: value,\n };\n }\n if (props.forceMatch) {\n return undefined;\n }\n return { label: `${value}`, color: undefined, value: value };\n })\n .filter(Boolean) as TagListRenderDataItem[];\n }, [props.colorMap, props.dataList, props.forceMatch, props.value, valueList]);\n\n if (tagList.length === 0) {\n return <Fragment>{props.value}</Fragment>;\n }\n\n const newTagList = tagList.slice(0, maxShowCount || tagList.length);\n\n const popoverTagList =\n newTagList.length < tagList.length\n ? props.foldShowAllTag\n ? tagList\n : tagList.slice(maxShowCount, tagList.length)\n : [];\n\n return (\n <Fragment>\n {newTagList.map((item, index) => {\n return (\n <Tag\n color={item.color}\n style={index === newTagList.length - 1 ? { margin: '0' } : { marginRight: 5 }}\n key={index}\n >\n {item.label}\n </Tag>\n );\n })}\n {popoverTagList.length > 0 ? (\n <Popover\n content={\n <TagListRender\n {...props}\n value={popoverTagList.map((item) => item.value)}\n dataList={popoverTagList}\n maxShowCount={undefined}\n />\n }\n >\n <Tag color=\"blue\" style={{ marginLeft: 5, cursor: 'pointer' }}>\n ...\n </Tag>\n </Popover>\n ) : null}\n </Fragment>\n );\n};\n\nTagListRender.defaultProps = {\n forceMatch: false,\n};\n"],"names":["TagListRender","props","valueList","toArray","value","maxShowCount","tagList","useMemo","isUndefinedOrNull","map","_props$dataList","target","dataList","find","item","valueIsEqual","label","_props$colorMap","color","colorMap","String","forceMatch","undefined","filter","Boolean","length","_jsx","Fragment","children","newTagList","slice","popoverTagList","foldShowAllTag","_jsxs","index","Tag","style","margin","marginRight","Popover","content","_extends","marginLeft","cursor","defaultProps"],"mappings":";2RA8CaA,EAAwC,SAAxCA,EAAyCC,GACpD,IAAMC,EAAYC,EAA4BF,EAAMG,OACpD,IAAMC,EAAeJ,EAAMI,cAAgB,EAC3C,IAAMC,EAAUC,GAAQ,WACtB,GAAIC,EAAkBP,EAAMG,OAAQ,CAClC,MAAO,EACT,CACA,OAAOF,EACJO,KAAI,SAACL,GAAU,IAAAM,EACd,IAAMC,GAAMD,EAAGT,EAAMW,WAAQ,UAAA,EAAdF,EAAgBG,MAC7B,SAACC,GAAI,OAAKC,EAAaD,EAAKV,MAAOA,IAAUU,EAAKE,QAAUZ,CAAK,IAEnE,GAAIO,EAAQ,CAAA,IAAAM,EACV,MAAO,CACLD,MAAOL,EAAOK,OAASL,EAAOP,MAC9Bc,QAAOD,EAAAhB,EAAMkB,uBAANF,EAAiBG,OAAOT,EAAOP,UAAWO,EAAOO,MACxDd,MAAOA,EAEX,CACA,GAAIH,EAAMoB,WAAY,CACpB,OAAOC,SACT,CACA,MAAO,CAAEN,SAAUZ,EAASc,MAAOI,UAAWlB,MAAOA,EACvD,IACCmB,OAAOC,QACX,GAAE,CAACvB,EAAMkB,SAAUlB,EAAMW,SAAUX,EAAMoB,WAAYpB,EAAMG,MAAOF,IAEnE,GAAII,EAAQmB,SAAW,EAAG,CACxB,OAAOC,EAACC,EAAQ,CAAAC,SAAE3B,EAAMG,OAC1B,CAEA,IAAMyB,EAAavB,EAAQwB,MAAM,EAAGzB,GAAgBC,EAAQmB,QAE5D,IAAMM,EACJF,EAAWJ,OAASnB,EAAQmB,OACxBxB,EAAM+B,eACJ1B,EACAA,EAAQwB,MAAMzB,EAAcC,EAAQmB,QACtC,GAEN,OACEQ,EAACN,EAAQ,CAAAC,SAAA,CACNC,EAAWpB,KAAI,SAACK,EAAMoB,GACrB,OACER,EAACS,EAAG,CACFjB,MAAOJ,EAAKI,MACZkB,MAAOF,IAAUL,EAAWJ,OAAS,EAAI,CAAEY,OAAQ,KAAQ,CAAEC,YAAa,GAAIV,SAG7Ed,EAAKE,OAFDkB,EAKV,IACAH,EAAeN,OAAS,EACvBC,EAACa,EAAO,CACNC,QACEd,EAAC1B,EAAayC,KACRxC,EAAK,CACTG,MAAO2B,EAAetB,KAAI,SAACK,GAAI,OAAKA,EAAKV,SACzCQ,SAAUmB,EACV1B,aAAciB,aAEjBM,SAEDF,EAACS,EAAG,CAACjB,MAAM,OAAOkB,MAAO,CAAEM,WAAY,EAAGC,OAAQ,WAAYf,SAAC,UAI/D,OAGV,EAEA5B,EAAc4C,aAAe,CAC3BvB,WAAY"}
|
package/index.d.ts
CHANGED
|
@@ -1057,7 +1057,7 @@ export type TFormItemLayoutPreClassNameProps = {
|
|
|
1057
1057
|
*/
|
|
1058
1058
|
className?: string;
|
|
1059
1059
|
};
|
|
1060
|
-
export type FormItemWrapperProps = Omit<FormItemProps, "hidden"> & TFormItemLayoutPreClassNameProps & {
|
|
1060
|
+
export type FormItemWrapperProps = Omit<FormItemProps, "hidden" | "children" | "noStyle"> & TFormItemLayoutPreClassNameProps & {
|
|
1061
1061
|
wrapper?: (children: ReactNode) => ReactElement;
|
|
1062
1062
|
/** 设置wrapper后，before、after失效 */
|
|
1063
1063
|
before?: ReactNode;
|
|
@@ -1078,7 +1078,7 @@ export type FormItemWrapperProps = Omit<FormItemProps, "hidden"> & TFormItemLayo
|
|
|
1078
1078
|
*/
|
|
1079
1079
|
isClear?: boolean | ((formValues: TPlainObject) => boolean);
|
|
1080
1080
|
/**
|
|
1081
|
-
* 隐藏 Form.Item
|
|
1081
|
+
* 隐藏 Form.Item，不会清除 Form.Item 值
|
|
1082
1082
|
* ```
|
|
1083
1083
|
* 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏
|
|
1084
1084
|
* ```
|
|
@@ -1092,6 +1092,15 @@ export type FormItemWrapperProps = Omit<FormItemProps, "hidden"> & TFormItemLayo
|
|
|
1092
1092
|
* ```
|
|
1093
1093
|
*/
|
|
1094
1094
|
span?: number;
|
|
1095
|
+
/** 不支持函数式写法，如果需要使用dependencies获取表单值，可使用FormItemWrapperDependencies 组件 */
|
|
1096
|
+
children?: ReactNode;
|
|
1097
|
+
/**
|
|
1098
|
+
* ```
|
|
1099
|
+
* 1. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常
|
|
1100
|
+
* 2. 在FormItemWrapper中使用 dependencies 逻辑不需要设置 noStyle
|
|
1101
|
+
* ```
|
|
1102
|
+
*/
|
|
1103
|
+
noStyle?: boolean;
|
|
1095
1104
|
};
|
|
1096
1105
|
/**
|
|
1097
1106
|
* 对 Form.Item 包装处理
|
|
@@ -1101,6 +1110,22 @@ export type FormItemWrapperProps = Omit<FormItemProps, "hidden"> & TFormItemLayo
|
|
|
1101
1110
|
* 3. 内置布局样式使用 preDefinedClassName.formItem
|
|
1102
1111
|
* 4. 设置隐藏域（不清除字段值） 使用hidden，存在依赖逻辑，可与dependencies属性配合使用
|
|
1103
1112
|
* 5. 设置隐藏域（清除字段值）使用isClear，存在依赖逻辑，可与dependencies属性配合使用
|
|
1113
|
+
* 6. 不支持noStyle属性、children不支持函数写法、如果需要获取依赖字段值，可使用 FormItemWrapperDependencies 组件
|
|
1114
|
+
* 7. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常
|
|
1115
|
+
*
|
|
1116
|
+
*
|
|
1117
|
+
* ** 依赖其他字段 自身切换显示隐藏 **
|
|
1118
|
+
* <FormItemWrapper
|
|
1119
|
+
* label="label"
|
|
1120
|
+
* name="xx1"
|
|
1121
|
+
* dependencies={['type']}
|
|
1122
|
+
* isClear={(values) => {
|
|
1123
|
+
* return values.type == 1
|
|
1124
|
+
* }}>
|
|
1125
|
+
* <Input placeholder="请输入" />
|
|
1126
|
+
* </FormItemWrapper>
|
|
1127
|
+
*
|
|
1128
|
+
* 如果只是想获取依赖字段值，可使用 FormItemWrapperDependencies 组件
|
|
1104
1129
|
* ```
|
|
1105
1130
|
*/
|
|
1106
1131
|
export declare const FormItemWrapper: {
|
|
@@ -1517,6 +1542,7 @@ export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
|
|
|
1517
1542
|
* 10. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
|
|
1518
1543
|
* 11. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
|
|
1519
1544
|
* 12. 自定义栅格占位格数，见下方`例如`
|
|
1545
|
+
* 13. 内部直接子节点为 <Form.Item dependencies={['xxx']} noStyle /> 时，样式会有问题，可使用 <FormItemWrapperDependencies /> 代替，具体参考FormItemWrapperDependencies组件使用
|
|
1520
1546
|
|
|
1521
1547
|
* 例如
|
|
1522
1548
|
* <EasyForm column={3}>
|
|
@@ -3761,6 +3787,8 @@ export type FormItemSpanProps = {
|
|
|
3761
3787
|
children?: React.ReactNode;
|
|
3762
3788
|
className?: string;
|
|
3763
3789
|
style?: React.CSSProperties;
|
|
3790
|
+
/** 是否移除 */
|
|
3791
|
+
hidden?: boolean;
|
|
3764
3792
|
};
|
|
3765
3793
|
/**
|
|
3766
3794
|
* 包裹EasyForm children item元素, 设置自定义栅格占位格数（使用在EasyForm一级子节点下生效）
|
|
@@ -3785,6 +3813,7 @@ export type FormItemSpanProps = {
|
|
|
3785
3813
|
* </CardLayout>
|
|
3786
3814
|
* </FormItemSpan>
|
|
3787
3815
|
* </EasyForm>
|
|
3816
|
+
* 4. 处在EasyFrom直接子节点时hidden、span属性生效
|
|
3788
3817
|
* ```
|
|
3789
3818
|
*/
|
|
3790
3819
|
export declare const FormItemSpan: {
|
|
@@ -3864,6 +3893,42 @@ export declare const FormItemText: {
|
|
|
3864
3893
|
(props: FormItemTextProps): import("react/jsx-runtime").JSX.Element;
|
|
3865
3894
|
domTypeName: string;
|
|
3866
3895
|
};
|
|
3896
|
+
export type FormItemWrapperDependenciesProps = {
|
|
3897
|
+
children?: (form: FormInstance, otherProps: {
|
|
3898
|
+
style?: CSSProperties;
|
|
3899
|
+
className?: string;
|
|
3900
|
+
}) => ReactElement;
|
|
3901
|
+
dependencies: any[];
|
|
3902
|
+
className?: string;
|
|
3903
|
+
style?: CSSProperties;
|
|
3904
|
+
};
|
|
3905
|
+
/**
|
|
3906
|
+
* FormItem依赖写法包装，当处在EasyForm内部时，不支持 <Form.Item dependencies={['xxx']} noStyle /> 此写法，使用 <FormItemWrapperDependencies dependencies={['xxx']} /> 代替
|
|
3907
|
+
*
|
|
3908
|
+
* ```
|
|
3909
|
+
* 例如：（其中 otherProps 中 style、className透传是必要的）
|
|
3910
|
+
* <FormItemWrapperDependencies dependencies={['xx2']}>
|
|
3911
|
+
* {(_form, otherProps) => {
|
|
3912
|
+
* return (
|
|
3913
|
+
* <FormItemWrapper
|
|
3914
|
+
* name="xxxxx"
|
|
3915
|
+
* label="xx1"
|
|
3916
|
+
* style={otherProps.style}
|
|
3917
|
+
* className={otherProps.className}
|
|
3918
|
+
* >
|
|
3919
|
+
* <Input />
|
|
3920
|
+
* </FormItemWrapper>
|
|
3921
|
+
* );
|
|
3922
|
+
* }}
|
|
3923
|
+
* </FormItemWrapperDependencies>
|
|
3924
|
+
*
|
|
3925
|
+
*
|
|
3926
|
+
* 说明：
|
|
3927
|
+
* 透传style、className 是因为在EasyForm内部的BoxGrid组件下发的style、className在配置了noStyle后Form.Item不接收导致的
|
|
3928
|
+
*
|
|
3929
|
+
* ```
|
|
3930
|
+
*/
|
|
3931
|
+
export declare const FormItemWrapperDependencies: (props: FormItemWrapperDependenciesProps) => import("react/jsx-runtime").JSX.Element;
|
|
3867
3932
|
export type FormListWrapperContentProps = {
|
|
3868
3933
|
/** Form.List item fieldData */
|
|
3869
3934
|
formListFieldData: FormListFieldData;
|