@flatbiz/antd 4.5.37 → 4.5.38
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/box-grid/index.js +1 -1
- package/esm/box-grid/index.js.map +1 -1
- package/esm/easy-form/index.js +1 -1
- package/esm/easy-form/index.js.map +1 -1
- package/esm/form-item-hidden/index.js +1 -1
- package/esm/form-item-hidden/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.css +1 -1
- package/esm/form-item-wrapper/index.js +2 -1
- package/esm/form-item-wrapper/index.js.map +1 -1
- package/esm/form-wrapper/index.css +1 -1
- package/esm/number-range-form-item/index.js +2 -1
- package/esm/number-range-form-item/index.js.map +1 -1
- package/esm/pre-defined-class-name/index.css +1 -1
- package/esm/styles/index.css +1 -1
- package/index.d.ts +60 -17
- package/package.json +16 -16
package/esm/box-grid/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import './index.css';
|
|
3
3
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
-
import{
|
|
4
|
+
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{createContext as a,useContext as t,useMemo as n,Children as l,cloneElement as i,useRef as o,useEffect as s}from"react";import{jsx as u}from"react/jsx-runtime";import{isNumber as v}from"@dimjs/lang/cjs/is-number";import{useSize as c}from"ahooks";var d={xs:24,sm:12,md:12,lg:8,xl:8,xxl:6};var p={xs:8,sm:16,md:16,lg:24,xl:24,xxl:32};var f={top:"flex-start",middle:"center",bottom:"flex-end",stretch:"stretch"};var m={start:"flex-start",end:"flex-end",center:"center","space-around":"space-around","space-between":"space-between","space-evenly":"space-evenly"};var x={boxBreakpoint:"lg",defaultGrid:d,horizontalGap:10,verticalGap:10};var h=a(x);var g=function a(o){var s=o.children,v=o.className,c=o.style,d=o.removeWrapper;var p=t(h),f=p.defaultGrid,m=p.horizontalGap,x=p.boxBreakpoint;var g=n((function(){return o.span||o[x||"lg"]||(f==null?void 0:f[x||"lg"])||8}),[o,x,f]);var G=e({},c,{flex:"0 0 "+g/24*100+"%",maxWidth:g/24*100+"%",padding:"0 "+m/2+"px"});if(d&&l.count(s)===1){var y,b;var B=(s==null||(y=s["props"])==null?void 0:y.style)||{};var j=(s==null||(b=s["props"])==null?void 0:b.className)||{};return i(s,e({},s==null?void 0:s["props"],{style:e({},G,B),className:r("box-grad-col",j,v)}))}return u("div",{className:r(v,"box-grad-col"),style:G,children:s})};g["domTypeName"]="BoxGridCol";var G=function r(e){var a=c(e)||{},t=a.width;var l=n((function(){var r=t||(e==null?void 0:e.clientWidth);if(!r){return"lg"}if(r>=1600){return"xxl"}else if(r>=1200){return"xl"}else if(r>=992){return"lg"}else if(r>=768){return"md"}else if(r>=576){return"sm"}else{return"xs"}}),[t]);return{boxBreakpoint:l,isInit:!!t,haveWidth:!!t}};var y=function r(a,t){if(a===void 0){a=p}return n((function(){var r;var n;var l=function r(a){if(typeof a==="number"){return a}if(typeof a==="object"){return e({},p,a)[t]}};if(Array.isArray(a)){var i=a,o=i[0],s=i[1];r=l(o);n=l(s)}else{r=l(a);n=x.verticalGap}return{horizontalGap:v(r)?r:x.horizontalGap,verticalGap:v(n)?n:x.verticalGap}}),[a,t])};var b=function a(t){var n=t.defaultGrid,l=n===void 0?d:n,i=t.children,v=t.className,c=t.style,p=t.gutter,g=t.align,b=t.justify,B=t.onBoxBreakpointChange;var j=o(null);var N=G(j),k=N.boxBreakpoint,w=N.haveWidth;var z=y(p,k),W=z.horizontalGap,C=z.verticalGap;s((function(){B==null?void 0:B(k)}),[k]);return u(h.Provider,{value:e({},x,{defaultGrid:e({},d,l),boxBreakpoint:k,horizontalGap:W,verticalGap:C}),children:u("div",{className:r("box-grad-root",v),ref:j,style:c,children:u("div",{className:"box-grad-row",style:{alignItems:g?f[g]:"normal",justifyContent:b?m[b]:"normal",marginLeft:"-"+W/2+"px",marginRight:"-"+W/2+"px",rowGap:C+"px",opacity:w?1:0},children:i})})})};var B=function r(e){var a=function r(a){var t=Math.ceil(e*24/a);return[1,2,3,4,6,8,12,24].find((function(r){return r>=t}))||24};return{xxl:a(1600),xl:a(1200),lg:a(992),md:a(768),sm:a(576),xs:a(200)}};var j={Row:b,Col:g,getGridMapByRange:B};export{j as BoxGrid,G as useBoxBreakpoint};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/box-grid/constant.tsx","@flatbiz/antd/src/box-grid/ctx.ts","@flatbiz/antd/src/box-grid/col.tsx","@flatbiz/antd/src/box-grid/hooks.ts","@flatbiz/antd/src/box-grid/row.tsx","@flatbiz/antd/src/box-grid/utils.ts","@flatbiz/antd/src/box-grid/index.ts"],"sourcesContent":["export const PresetDefaultGrid = {\n xs: 24,\n sm: 12,\n md: 12,\n lg: 8,\n xl: 8,\n xxl: 6,\n};\n\nexport const DefaultGutter = { xs: 8, sm: 16, md: 16, lg: 24, xl: 24, xxl: 32 };\n\nexport const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const;\nexport const RowJustify = [\n 'start',\n 'end',\n 'center',\n 'space-around',\n 'space-between',\n 'space-evenly',\n] as const;\n\nexport const alignPropsMap: Record<(typeof RowAligns)[number], string> = {\n top: 'flex-start',\n middle: 'center',\n bottom: 'flex-end',\n stretch: 'stretch',\n};\n\nexport const justifyPropsMap: Record<(typeof RowJustify)[number], string> = {\n start: 'flex-start',\n end: 'flex-end',\n center: 'center',\n 'space-around': 'space-around',\n 'space-between': 'space-between',\n 'space-evenly': 'space-evenly',\n};\n","import { createContext } from 'react';\nimport { PresetDefaultGrid } from './constant';\nimport { type TBoxBreakpoint } from './type';\n\nexport type BoxGridProviderContextType = {\n horizontalGap: number;\n verticalGap: number;\n boxBreakpoint: TBoxBreakpoint;\n defaultGrid: {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n xxl: number;\n };\n};\n\nexport const defaultCtx: BoxGridProviderContextType = {\n boxBreakpoint: 'lg',\n defaultGrid: PresetDefaultGrid,\n horizontalGap: 10,\n verticalGap: 10,\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const BoxGridProviderCtx = createContext<BoxGridProviderContextType>(defaultCtx);\n","import { classNames } from '@dimjs/utils';\nimport { useContext, useMemo, type FC } from 'react';\nimport { BoxGridProviderCtx } from './ctx';\nimport { type ICommonReact } from './type';\n\nexport type BoxColProps = {\n /**\n * 栅格占位格数\n * span 优先级最高：配置了span后，其他的响应式配置将失效；\n * 范围 0 ～ 24\n * 为 0 相当于隐藏\n * 为 24 相当于独占一行\n */\n span?: number;\n /** 屏幕 < 576px */\n xs?: number;\n /** 屏幕 ≥ 576px */\n sm?: number;\n /** 屏幕 ≥ 768px */\n md?: number;\n /** 屏幕 ≥ 992px */\n lg?: number;\n /** 屏幕 ≥ 1200px */\n xl?: number;\n /** 屏幕 ≥ 1600px */\n xxl?: number;\n};\n\nexport const Col: FC<BoxColProps & ICommonReact> = (props) => {\n const { children, className, style } = props;\n const { defaultGrid, horizontalGap, boxBreakpoint } = useContext(BoxGridProviderCtx);\n\n const span = useMemo(() => {\n return props.span || props[boxBreakpoint || 'lg'] || defaultGrid?.[boxBreakpoint || 'lg'] || 8;\n }, [props, boxBreakpoint, defaultGrid]);\n\n return (\n <div\n className={classNames(className, 'box-grad-col')}\n style={{\n ...style,\n flex: `0 0 ${(span / 24) * 100}%`,\n maxWidth: `${(span / 24) * 100}%`,\n padding: `0 ${horizontalGap / 2}px`,\n }}\n >\n {children}\n </div>\n );\n};\n\nCol['domTypeName'] = 'BoxGridCol';\n","import { isNumber } from '@dimjs/lang';\nimport { useSize } from 'ahooks';\nimport { useMemo } from 'react';\nimport { DefaultGutter } from './constant';\nimport { defaultCtx } from './ctx';\nimport { type GutterParams, type TBoxBreakpoint } from './type';\n\n/**\n * 监听盒子大小变化，返回当前的断点\n * @param dom\n * @returns\n */\nexport const useBoxBreakpoint = (dom) => {\n const { width } = useSize(dom) || {};\n\n const boxBreakpoint = useMemo<TBoxBreakpoint>(() => {\n const w = width || dom?.clientWidth;\n if (!w) {\n return 'lg';\n }\n\n if (w >= 1600) {\n return 'xxl';\n } else if (w >= 1200) {\n return 'xl';\n } else if (w >= 992) {\n return 'lg';\n } else if (w >= 768) {\n return 'md';\n } else if (w >= 576) {\n return 'sm';\n } else {\n return 'xs';\n }\n }, [width]);\n\n return {\n boxBreakpoint,\n /**\n * @deprecated\n * 使用 haveWidth 替代\n */\n isInit: !!width,\n /** width为0，或者不存在 */\n haveWidth: !!width,\n };\n};\n\n/**\n * 处理间距\n * @param gutter\n * @param boxBreakpoint\n * @returns\n */\nexport const useGutter = (gutter: GutterParams = DefaultGutter, boxBreakpoint: TBoxBreakpoint) => {\n return useMemo(() => {\n let horizontalGap: number;\n let verticalGap: number;\n\n const getCommonGutter = (gutter) => {\n if (typeof gutter === 'number') {\n return gutter;\n }\n if (typeof gutter === 'object') {\n return { ...DefaultGutter, ...gutter }[boxBreakpoint];\n }\n };\n\n if (Array.isArray(gutter)) {\n const [h, v] = gutter;\n horizontalGap = getCommonGutter(h);\n verticalGap = getCommonGutter(v);\n } else {\n horizontalGap = getCommonGutter(gutter);\n verticalGap = defaultCtx.verticalGap;\n }\n\n return {\n horizontalGap: isNumber(horizontalGap) ? horizontalGap : defaultCtx.horizontalGap,\n verticalGap: isNumber(verticalGap) ? verticalGap : defaultCtx.verticalGap,\n };\n }, [gutter, boxBreakpoint]);\n};\n","import { classNames } from '@dimjs/utils';\nimport { FC, useEffect, useRef } from 'react';\nimport { alignPropsMap, justifyPropsMap, PresetDefaultGrid } from './constant';\nimport { BoxGridProviderCtx, defaultCtx } from './ctx';\nimport { useBoxBreakpoint, useGutter } from './hooks';\nimport { TBoxBreakpoint, type GutterParams, type ICommonReact } from './type';\n\nexport interface BoxRowProps {\n /**\n * 在不同响应尺寸下的元素占位格数\n * 应用到所有Col子元素上\n */\n defaultGrid?: Partial<typeof PresetDefaultGrid>;\n /** 间距 */\n gutter?: GutterParams;\n /** flex 布局的垂直对齐方式 */\n align?: 'top' | 'middle' | 'bottom' | 'stretch';\n /** flex 布局的水平排列方式 */\n justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';\n /** 尺寸变化回调 */\n onBoxBreakpointChange?: (breakpoint: TBoxBreakpoint) => void;\n}\n\nexport const Row: FC<BoxRowProps & ICommonReact> = (props) => {\n const {\n defaultGrid = PresetDefaultGrid,\n children,\n className,\n style,\n gutter,\n align,\n justify,\n onBoxBreakpointChange,\n } = props;\n const comRef = useRef<HTMLDivElement>(null);\n const { boxBreakpoint, haveWidth } = useBoxBreakpoint(comRef);\n const { horizontalGap, verticalGap } = useGutter(gutter, boxBreakpoint);\n\n useEffect(() => {\n onBoxBreakpointChange?.(boxBreakpoint);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [boxBreakpoint]);\n\n return (\n <BoxGridProviderCtx.Provider\n value={{\n ...defaultCtx,\n defaultGrid: {\n ...PresetDefaultGrid,\n ...defaultGrid,\n },\n boxBreakpoint,\n horizontalGap,\n verticalGap,\n }}\n >\n <div className={classNames('box-grad-root', className)} ref={comRef} style={style}>\n <div\n className=\"box-grad-row\"\n style={{\n alignItems: align ? alignPropsMap[align] : 'normal',\n justifyContent: justify ? justifyPropsMap[justify] : 'normal',\n marginLeft: `-${horizontalGap / 2}px`,\n marginRight: `-${horizontalGap / 2}px`,\n rowGap: `${verticalGap}px`,\n /**\n * fix: boxBreakpoint多次变化，闪一下的问题\n * 子元素拿不到宽度，boxBreakpoint 会快速变化，导致元素闪烁\n * 场景：\n * 1. 使用 Tabs 组件时，任意父级元素disabled，子元素拿不到宽度\n * 2. 初始渲染，拿不到宽度\n */\n opacity: haveWidth ? 1 : 0,\n }}\n >\n {children}\n </div>\n </div>\n </BoxGridProviderCtx.Provider>\n );\n};\n","import { type TBoxBreakpoint } from './type';\n\n/**\n * 获取栅格响应式布局的配置\n * @param minSize 元素的最小可接受宽度\n * @returns\n */\nexport const getGridMapByRange = (minSize: number): Record<TBoxBreakpoint, number> => {\n const getSpan = (threshold: number) => {\n const result = Math.ceil((minSize * 24) / threshold);\n return [1, 2, 3, 4, 6, 8, 12, 24].find((item) => item >= result) || 24;\n };\n\n return {\n xxl: getSpan(1600),\n xl: getSpan(1200),\n lg: getSpan(992),\n md: getSpan(768),\n sm: getSpan(576),\n xs: getSpan(200),\n };\n};\n","import { Col } from './col';\nimport './index.less';\nimport { Row } from './row';\nimport { getGridMapByRange } from './utils';\n\nexport { useBoxBreakpoint } from './hooks';\n\nexport const BoxGrid = {\n /**\n * 网格响应式布局\n *```\n * 1. 应用场景：根据盒子大小决定内部元素的布局\n * 2. 子元素只能是 BoxGrid.Col\n */\n Row,\n /**\n * 网格响应式布局，\n * 默认值：\n * { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }\n * xs={24} sm={12} md={12} lg={8} xl={8} xxl={6}\n *```\n * 1. 设置 span 栅格占位格数，0 ～ 24\n * 2. grid 自定义响应式网格布局\n * xs: 容器尺寸 < 576px\n * sm: 容器尺寸 ≥ 576px\n * md: 容器尺寸 ≥ 768px\n * lg: 容器尺寸 ≥ 992px\n * xl: 容器尺寸 ≥ 1200px\n * xxl: 容器尺寸 ≥ 1600px\n * ```\n */\n Col,\n /**\n * 获取栅格响应式布局的配置\n * @param minSize 元素的最小可接受宽度\n * @returns { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num }\n */\n getGridMapByRange,\n};\n"],"names":["PresetDefaultGrid","xs","sm","md","lg","xl","xxl","DefaultGutter","alignPropsMap","top","middle","bottom","stretch","justifyPropsMap","start","end","center","defaultCtx","boxBreakpoint","defaultGrid","horizontalGap","verticalGap","BoxGridProviderCtx","createContext","Col","props","children","className","style","_useContext","useContext","span","useMemo","_jsx","_classNames","_extends","flex","maxWidth","padding","useBoxBreakpoint","dom","_ref","useSize","width","w","clientWidth","isInit","haveWidth","useGutter","gutter","getCommonGutter","Array","isArray","_gutter","h","v","_isNumber","Row","_props$defaultGrid","align","justify","onBoxBreakpointChange","comRef","useRef","_useBoxBreakpoint","_useGutter","useEffect","Provider","value","ref","alignItems","justifyContent","marginLeft","marginRight","rowGap","opacity","getGridMapByRange","minSize","getSpan","threshold","result","Math","ceil","find","item","BoxGrid"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/box-grid/constant.tsx","@flatbiz/antd/src/box-grid/ctx.ts","@flatbiz/antd/src/box-grid/col.tsx","@flatbiz/antd/src/box-grid/hooks.ts","@flatbiz/antd/src/box-grid/row.tsx","@flatbiz/antd/src/box-grid/utils.ts","@flatbiz/antd/src/box-grid/index.ts"],"sourcesContent":["export const PresetDefaultGrid = {\n xs: 24,\n sm: 12,\n md: 12,\n lg: 8,\n xl: 8,\n xxl: 6,\n};\n\nexport const DefaultGutter = { xs: 8, sm: 16, md: 16, lg: 24, xl: 24, xxl: 32 };\n\nexport const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const;\nexport const RowJustify = [\n 'start',\n 'end',\n 'center',\n 'space-around',\n 'space-between',\n 'space-evenly',\n] as const;\n\nexport const alignPropsMap: Record<(typeof RowAligns)[number], string> = {\n top: 'flex-start',\n middle: 'center',\n bottom: 'flex-end',\n stretch: 'stretch',\n};\n\nexport const justifyPropsMap: Record<(typeof RowJustify)[number], string> = {\n start: 'flex-start',\n end: 'flex-end',\n center: 'center',\n 'space-around': 'space-around',\n 'space-between': 'space-between',\n 'space-evenly': 'space-evenly',\n};\n","import { createContext } from 'react';\nimport { PresetDefaultGrid } from './constant';\nimport { type TBoxBreakpoint } from './type';\n\nexport type BoxGridProviderContextType = {\n horizontalGap: number;\n verticalGap: number;\n boxBreakpoint: TBoxBreakpoint;\n defaultGrid: {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n xxl: number;\n };\n};\n\nexport const defaultCtx: BoxGridProviderContextType = {\n boxBreakpoint: 'lg',\n defaultGrid: PresetDefaultGrid,\n horizontalGap: 10,\n verticalGap: 10,\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const BoxGridProviderCtx = createContext<BoxGridProviderContextType>(defaultCtx);\n","import { classNames } from '@dimjs/utils';\nimport { Children, cloneElement, useContext, useMemo, type FC, type ReactElement } from 'react';\nimport { BoxGridProviderCtx } from './ctx';\nimport { type ICommonReact } from './type';\n\nexport type BoxColProps = {\n /**\n * 栅格占位格数\n * span 优先级最高：配置了span后，其他的响应式配置将失效；\n * 范围 0 ～ 24\n * 为 0 相当于隐藏\n * 为 24 相当于独占一行\n */\n span?: number;\n /** 屏幕 < 576px */\n xs?: number;\n /** 屏幕 ≥ 576px */\n sm?: number;\n /** 屏幕 ≥ 768px */\n md?: number;\n /** 屏幕 ≥ 992px */\n lg?: number;\n /** 屏幕 ≥ 1200px */\n xl?: number;\n /** 屏幕 ≥ 1600px */\n xxl?: number;\n /**\n * 是否移除 外部包装div\n * ```\n * 1. 如果children 为数组，则此配置不生效\n * 2. 如果移除，会在children中添加style和className（所以children组件必须要有style、className属性）\n * ```\n */\n removeWrapper?: boolean;\n};\n\nexport const Col: FC<BoxColProps & ICommonReact> = (props) => {\n const { children, className, style, removeWrapper } = props;\n const { defaultGrid, horizontalGap, boxBreakpoint } = useContext(BoxGridProviderCtx);\n\n const span = useMemo(() => {\n return props.span || props[boxBreakpoint || 'lg'] || defaultGrid?.[boxBreakpoint || 'lg'] || 8;\n }, [props, boxBreakpoint, defaultGrid]);\n\n const styles = {\n ...style,\n flex: `0 0 ${(span / 24) * 100}%`,\n maxWidth: `${(span / 24) * 100}%`,\n padding: `0 ${horizontalGap / 2}px`,\n };\n\n if (removeWrapper && Children.count(children) === 1) {\n const innerStyle = children?.['props']?.style || {};\n const innerClassName = children?.['props']?.className || {};\n return cloneElement(children as ReactElement, {\n ...children?.['props'],\n style: { ...styles, ...innerStyle },\n className: classNames('box-grad-col', innerClassName, className),\n });\n }\n\n return (\n <div className={classNames(className, 'box-grad-col')} style={styles}>\n {children}\n </div>\n );\n};\n\nCol['domTypeName'] = 'BoxGridCol';\n","import { isNumber } from '@dimjs/lang';\nimport { useSize } from 'ahooks';\nimport { useMemo } from 'react';\nimport { DefaultGutter } from './constant';\nimport { defaultCtx } from './ctx';\nimport { type GutterParams, type TBoxBreakpoint } from './type';\n\n/**\n * 监听盒子大小变化，返回当前的断点\n * @param dom\n * @returns\n */\nexport const useBoxBreakpoint = (dom) => {\n const { width } = useSize(dom) || {};\n\n const boxBreakpoint = useMemo<TBoxBreakpoint>(() => {\n const w = width || dom?.clientWidth;\n if (!w) {\n return 'lg';\n }\n\n if (w >= 1600) {\n return 'xxl';\n } else if (w >= 1200) {\n return 'xl';\n } else if (w >= 992) {\n return 'lg';\n } else if (w >= 768) {\n return 'md';\n } else if (w >= 576) {\n return 'sm';\n } else {\n return 'xs';\n }\n }, [width]);\n\n return {\n boxBreakpoint,\n /**\n * @deprecated\n * 使用 haveWidth 替代\n */\n isInit: !!width,\n /** width为0，或者不存在 */\n haveWidth: !!width,\n };\n};\n\n/**\n * 处理间距\n * @param gutter\n * @param boxBreakpoint\n * @returns\n */\nexport const useGutter = (gutter: GutterParams = DefaultGutter, boxBreakpoint: TBoxBreakpoint) => {\n return useMemo(() => {\n let horizontalGap: number;\n let verticalGap: number;\n\n const getCommonGutter = (gutter) => {\n if (typeof gutter === 'number') {\n return gutter;\n }\n if (typeof gutter === 'object') {\n return { ...DefaultGutter, ...gutter }[boxBreakpoint];\n }\n };\n\n if (Array.isArray(gutter)) {\n const [h, v] = gutter;\n horizontalGap = getCommonGutter(h);\n verticalGap = getCommonGutter(v);\n } else {\n horizontalGap = getCommonGutter(gutter);\n verticalGap = defaultCtx.verticalGap;\n }\n\n return {\n horizontalGap: isNumber(horizontalGap) ? horizontalGap : defaultCtx.horizontalGap,\n verticalGap: isNumber(verticalGap) ? verticalGap : defaultCtx.verticalGap,\n };\n }, [gutter, boxBreakpoint]);\n};\n","import { classNames } from '@dimjs/utils';\nimport { FC, useEffect, useRef } from 'react';\nimport { alignPropsMap, justifyPropsMap, PresetDefaultGrid } from './constant';\nimport { BoxGridProviderCtx, defaultCtx } from './ctx';\nimport { useBoxBreakpoint, useGutter } from './hooks';\nimport { TBoxBreakpoint, type GutterParams, type ICommonReact } from './type';\n\nexport interface BoxRowProps {\n /**\n * 在不同响应尺寸下的元素占位格数\n * 应用到所有Col子元素上\n */\n defaultGrid?: Partial<typeof PresetDefaultGrid>;\n /** 间距 */\n gutter?: GutterParams;\n /** flex 布局的垂直对齐方式 */\n align?: 'top' | 'middle' | 'bottom' | 'stretch';\n /** flex 布局的水平排列方式 */\n justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';\n /** 尺寸变化回调 */\n onBoxBreakpointChange?: (breakpoint: TBoxBreakpoint) => void;\n}\n\nexport const Row: FC<BoxRowProps & ICommonReact> = (props) => {\n const {\n defaultGrid = PresetDefaultGrid,\n children,\n className,\n style,\n gutter,\n align,\n justify,\n onBoxBreakpointChange,\n } = props;\n const comRef = useRef<HTMLDivElement>(null);\n const { boxBreakpoint, haveWidth } = useBoxBreakpoint(comRef);\n const { horizontalGap, verticalGap } = useGutter(gutter, boxBreakpoint);\n\n useEffect(() => {\n onBoxBreakpointChange?.(boxBreakpoint);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [boxBreakpoint]);\n\n return (\n <BoxGridProviderCtx.Provider\n value={{\n ...defaultCtx,\n defaultGrid: {\n ...PresetDefaultGrid,\n ...defaultGrid,\n },\n boxBreakpoint,\n horizontalGap,\n verticalGap,\n }}\n >\n <div className={classNames('box-grad-root', className)} ref={comRef} style={style}>\n <div\n className=\"box-grad-row\"\n style={{\n alignItems: align ? alignPropsMap[align] : 'normal',\n justifyContent: justify ? justifyPropsMap[justify] : 'normal',\n marginLeft: `-${horizontalGap / 2}px`,\n marginRight: `-${horizontalGap / 2}px`,\n rowGap: `${verticalGap}px`,\n /**\n * fix: boxBreakpoint多次变化，闪一下的问题\n * 子元素拿不到宽度，boxBreakpoint 会快速变化，导致元素闪烁\n * 场景：\n * 1. 使用 Tabs 组件时，任意父级元素disabled，子元素拿不到宽度\n * 2. 初始渲染，拿不到宽度\n */\n opacity: haveWidth ? 1 : 0,\n }}\n >\n {children}\n </div>\n </div>\n </BoxGridProviderCtx.Provider>\n );\n};\n","import { type TBoxBreakpoint } from './type';\n\n/**\n * 获取栅格响应式布局的配置\n * @param minSize 元素的最小可接受宽度\n * @returns\n */\nexport const getGridMapByRange = (minSize: number): Record<TBoxBreakpoint, number> => {\n const getSpan = (threshold: number) => {\n const result = Math.ceil((minSize * 24) / threshold);\n return [1, 2, 3, 4, 6, 8, 12, 24].find((item) => item >= result) || 24;\n };\n\n return {\n xxl: getSpan(1600),\n xl: getSpan(1200),\n lg: getSpan(992),\n md: getSpan(768),\n sm: getSpan(576),\n xs: getSpan(200),\n };\n};\n","import { Col } from './col';\nimport './index.less';\nimport { Row } from './row';\nimport { getGridMapByRange } from './utils';\n\nexport { useBoxBreakpoint } from './hooks';\n\nexport const BoxGrid = {\n /**\n * 网格响应式布局\n *```\n * 1. 应用场景：根据盒子大小决定内部元素的布局\n * 2. 子元素只能是 BoxGrid.Col\n */\n Row,\n /**\n * 网格响应式布局，\n * 默认值：\n * { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }\n * xs={24} sm={12} md={12} lg={8} xl={8} xxl={6}\n *```\n * 1. 设置 span 栅格占位格数，0 ～ 24\n * 2. grid 自定义响应式网格布局\n * xs: 容器尺寸 < 576px\n * sm: 容器尺寸 ≥ 576px\n * md: 容器尺寸 ≥ 768px\n * lg: 容器尺寸 ≥ 992px\n * xl: 容器尺寸 ≥ 1200px\n * xxl: 容器尺寸 ≥ 1600px\n * ```\n */\n Col,\n /**\n * 获取栅格响应式布局的配置\n * @param minSize 元素的最小可接受宽度\n * @returns { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num }\n */\n getGridMapByRange,\n};\n"],"names":["PresetDefaultGrid","xs","sm","md","lg","xl","xxl","DefaultGutter","alignPropsMap","top","middle","bottom","stretch","justifyPropsMap","start","end","center","defaultCtx","boxBreakpoint","defaultGrid","horizontalGap","verticalGap","BoxGridProviderCtx","createContext","Col","props","children","className","style","removeWrapper","_useContext","useContext","span","useMemo","styles","_extends","flex","maxWidth","padding","Children","count","_children$props","_children$props2","innerStyle","innerClassName","cloneElement","_classNames","_jsx","useBoxBreakpoint","dom","_ref","useSize","width","w","clientWidth","isInit","haveWidth","useGutter","gutter","getCommonGutter","Array","isArray","_gutter","h","v","_isNumber","Row","_props$defaultGrid","align","justify","onBoxBreakpointChange","comRef","useRef","_useBoxBreakpoint","_useGutter","useEffect","Provider","value","ref","alignItems","justifyContent","marginLeft","marginRight","rowGap","opacity","getGridMapByRange","minSize","getSpan","threshold","result","Math","ceil","find","item","BoxGrid"],"mappings":";mXAAO,IAAMA,EAAoB,CAC/BC,GAAI,GACJC,GAAI,GACJC,GAAI,GACJC,GAAI,EACJC,GAAI,EACJC,IAAK,GAGA,IAAMC,EAAgB,CAAEN,GAAI,EAAGC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,IAAK,IAYpE,IAAME,EAA4D,CACvEC,IAAK,aACLC,OAAQ,SACRC,OAAQ,WACRC,QAAS,WAGJ,IAAMC,EAA+D,CAC1EC,MAAO,aACPC,IAAK,WACLC,OAAQ,SACR,eAAgB,eAChB,gBAAiB,gBACjB,eAAgB,gBChBX,IAAMC,EAAyC,CACpDC,cAAe,KACfC,YAAanB,EACboB,cAAe,GACfC,YAAa,IAIR,IAAMC,EAAqBC,EAA0CN,GCUrE,IAAMO,EAAsC,SAAtCA,EAAuCC,GAClD,IAAQC,EAA8CD,EAA9CC,SAAUC,EAAoCF,EAApCE,UAAWC,EAAyBH,EAAzBG,MAAOC,EAAkBJ,EAAlBI,cACpC,IAAAC,EAAsDC,EAAWT,GAAzDH,EAAWW,EAAXX,YAAaC,EAAaU,EAAbV,cAAeF,EAAaY,EAAbZ,cAEpC,IAAMc,EAAOC,GAAQ,WACnB,OAAOR,EAAMO,MAAQP,EAAMP,GAAiB,QAASC,GAAW,UAAA,EAAXA,EAAcD,GAAiB,QAAS,CAC9F,GAAE,CAACO,EAAOP,EAAeC,IAE1B,IAAMe,EAAMC,EAAA,CAAA,EACPP,EAAK,CACRQ,YAAcJ,EAAO,GAAM,IAAM,IACjCK,SAAcL,EAAO,GAAM,IAAM,IACjCM,QAAO,KAAOlB,EAAgB,EAAC,OAGjC,GAAIS,GAAiBU,EAASC,MAAMd,KAAc,EAAG,CAAA,IAAAe,EAAAC,EACnD,IAAMC,GAAajB,GAAQ,OAAAe,EAARf,EAAW,WAAXe,UAAAA,EAAAA,EAAqBb,QAAS,CAAA,EACjD,IAAMgB,GAAiBlB,GAAQ,OAAAgB,EAARhB,EAAW,WAAXgB,UAAAA,EAAAA,EAAqBf,YAAa,CAAA,EACzD,OAAOkB,EAAanB,EAAQS,EACvBT,GAAAA,GAAAA,UAAAA,EAAAA,EAAW,SAAQ,CACtBE,MAAKO,EAAA,GAAOD,EAAWS,GACvBhB,UAAWmB,EAAW,eAAgBF,EAAgBjB,KAE1D,CAEA,OACEoB,EAAA,MAAA,CAAKpB,UAAWmB,EAAWnB,EAAW,gBAAiBC,MAAOM,EAAOR,SAClEA,GAGP,EAEAF,EAAI,eAAiB,iBCxDRwB,EAAmB,SAAnBA,EAAoBC,GAC/B,IAAAC,EAAkBC,EAAQF,IAAQ,CAAE,EAA5BG,EAAKF,EAALE,MAER,IAAMlC,EAAgBe,GAAwB,WAC5C,IAAMoB,EAAID,IAASH,GAAAA,UAAAA,EAAAA,EAAKK,aACxB,IAAKD,EAAG,CACN,MAAO,IACT,CAEA,GAAIA,GAAK,KAAM,CACb,MAAO,KACT,MAAO,GAAIA,GAAK,KAAM,CACpB,MAAO,IACT,MAAO,GAAIA,GAAK,IAAK,CACnB,MAAO,IACT,MAAO,GAAIA,GAAK,IAAK,CACnB,MAAO,IACT,MAAO,GAAIA,GAAK,IAAK,CACnB,MAAO,IACT,KAAO,CACL,MAAO,IACT,CACF,GAAG,CAACD,IAEJ,MAAO,CACLlC,cAAAA,EAKAqC,SAAUH,EAEVI,YAAaJ,EAEjB,EAQO,IAAMK,EAAY,SAAZA,EAAaC,EAAsCxC,GAAkC,GAAxEwC,SAAoB,EAAA,CAApBA,EAAuBnD,CAAa,CAC5D,OAAO0B,GAAQ,WACb,IAAIb,EACJ,IAAIC,EAEJ,IAAMsC,EAAkB,SAAlBA,EAAmBD,GACvB,UAAWA,IAAW,SAAU,CAC9B,OAAOA,CACT,CACA,UAAWA,IAAW,SAAU,CAC9B,OAAOvB,EAAK5B,CAAAA,EAAAA,EAAkBmD,GAASxC,EACzC,GAGF,GAAI0C,MAAMC,QAAQH,GAAS,CACzB,IAAAI,EAAeJ,EAARK,EAACD,EAAA,GAAEE,EAACF,EAAA,GACX1C,EAAgBuC,EAAgBI,GAChC1C,EAAcsC,EAAgBK,EAChC,KAAO,CACL5C,EAAgBuC,EAAgBD,GAChCrC,EAAcJ,EAAWI,WAC3B,CAEA,MAAO,CACLD,cAAe6C,EAAS7C,GAAiBA,EAAgBH,EAAWG,cACpEC,YAAa4C,EAAS5C,GAAeA,EAAcJ,EAAWI,YAElE,GAAG,CAACqC,EAAQxC,GACd,EC3DO,IAAMgD,EAAsC,SAAtCA,EAAuCzC,GAClD,IAAA0C,EASI1C,EARFN,YAAAA,EAAWgD,SAAGnE,EAAAA,EAAiBmE,EAC/BzC,EAOED,EAPFC,SACAC,EAMEF,EANFE,UACAC,EAKEH,EALFG,MACA8B,EAIEjC,EAJFiC,OACAU,EAGE3C,EAHF2C,MACAC,EAEE5C,EAFF4C,QACAC,EACE7C,EADF6C,sBAEF,IAAMC,EAASC,EAAuB,MACtC,IAAAC,EAAqCzB,EAAiBuB,GAA9CrD,EAAauD,EAAbvD,cAAesC,EAASiB,EAATjB,UACvB,IAAAkB,EAAuCjB,EAAUC,EAAQxC,GAAjDE,EAAasD,EAAbtD,cAAeC,EAAWqD,EAAXrD,YAEvBsD,GAAU,WACRL,GAAAA,UAAAA,EAAAA,EAAwBpD,EAE1B,GAAG,CAACA,IAEJ,OACE6B,EAACzB,EAAmBsD,SAAQ,CAC1BC,MAAK1C,EAAA,CAAA,EACAlB,EAAU,CACbE,YAAWgB,EAAA,GACNnC,EACAmB,GAELD,cAAAA,EACAE,cAAAA,EACAC,YAAAA,IACAK,SAEFqB,EAAA,MAAA,CAAKpB,UAAWmB,EAAW,gBAAiBnB,GAAYmD,IAAKP,EAAQ3C,MAAOA,EAAMF,SAChFqB,EAAA,MAAA,CACEpB,UAAU,eACVC,MAAO,CACLmD,WAAYX,EAAQ5D,EAAc4D,GAAS,SAC3CY,eAAgBX,EAAUxD,EAAgBwD,GAAW,SACrDY,WAAgB7D,IAAAA,EAAgB,EAAK,KACrC8D,YAAiB9D,IAAAA,EAAgB,EAAK,KACtC+D,OAAW9D,EAAe,KAQ1B+D,QAAS5B,EAAY,EAAI,GACzB9B,SAEDA,OAKX,ECzEO,IAAM2D,EAAoB,SAApBA,EAAqBC,GAChC,IAAMC,EAAU,SAAVA,EAAWC,GACf,IAAMC,EAASC,KAAKC,KAAML,EAAU,GAAME,GAC1C,MAAO,CAAC,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAAI,IAAII,MAAK,SAACC,GAAI,OAAKA,GAAQJ,CAAM,KAAK,IAGtE,MAAO,CACLnF,IAAKiF,EAAQ,MACblF,GAAIkF,EAAQ,MACZnF,GAAImF,EAAQ,KACZpF,GAAIoF,EAAQ,KACZrF,GAAIqF,EAAQ,KACZtF,GAAIsF,EAAQ,KAEhB,ECdO,IAAMO,EAAU,CAOrB5B,IAAAA,EAiBA1C,IAAAA,EAMA6D,kBAAAA"}
|
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
|
|
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 a}from"@flatbiz/utils";import{useMemo as n,useRef as o,Fragment as s,Children as i,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 c}from"../pre-defined-class-name/index.js";import{jsxs as p,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 y=function y(g){var h=f.useResponsivePoint()||"";var b=g.column,j=g.forceColumn,I=g.children,F=g.width,N=g.gridGutter,G=g.labelWidth,W=g.labelItemVertical,w=g.labelAlign,C=g.formItemGap,A=C===void 0?"15":C,P=g.isPure,k=g.nonuseFormWrapper,B=e(g,v);var V=n((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=i.toArray(I).filter((function(r){return!!r}));return e.map((function(r,e){var l=r.type["domTypeName"];var a=undefined;if(l==="FormItemText"||l==="FormItemSpan"||l==="FormItemWrapper"||l==="BoxGridCol"||l==="EasyForm"){a=r.props["span"];if(a){if(h==="xs"){a=24}else if(h==="sm"){a=a>12?a:12}}}if(l==="BoxGridCol"||l==="FormItemSpan"){return m(r,t({},r.props,V,{span:a,key:e}))}return x(u.Col,t({},V,{span:a,removeWrapper:true,children:r}),e)})).filter(Boolean)};var R=n((function(){if(["xs","sm"].includes(h)||!F){return{}}return{width:F}}),[h,F]);var T=l(N)?[15,0]:N;var L=o(null);var S=function r(){try{if(k){return true}if(L.current){var e=a.findParentsElement(L.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 _=S();var z=n((function(){if(["xs"].includes(h)){return"left"}return w}),[w,h]);var H=n((function(){return c.getFormLayoutClassName({labelWidth:G,labelItemVertical:W,labelAlign:z,formItemGap:A,className:B.className})}),[G,W,z,A,B.className]);return p(s,{children:[x("div",{className:"easy-form-anchor",ref:L}),_===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:T,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:T,children:E()})})):undefined]})};y["domTypeName"]="EasyForm";export{y as EasyForm};
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/utils.ts","@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["export const isHidden = (item: any) => {\n const domTypeName = item.type['domTypeName'];\n const isHidden = item.props['hidden'];\n return isHidden || domTypeName == 'FormItemHidden';\n};\n\nexport const isHiddenAndClear = (item: any) => {\n const domTypeName = item.type['domTypeName'];\n const isHidden = item.props['hidden'];\n if (domTypeName === 'FormItemWrapper') {\n return isHidden || item.props['isClear'];\n }\n return isHidden || domTypeName == 'FormItemHidden';\n};\n","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';\nimport { isHidden, isHiddenAndClear } from './utils';\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: 不使用Antd Form包裹，可在Form、EasyForm、FormWrapper内部使用\n */\n nonuseFormWrapper?: 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 *\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\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 getHiddenRowChildren = () => {\n return Children.toArray(children).filter(isHidden);\n };\n\n const getFormRowChildren = () => {\n return Children.toArray(children)\n .filter((item: TAny) => {\n return !isHiddenAndClear(item);\n })\n .map((item: TAny, index) => {\n const domTypeName = item.type['domTypeName'];\n if (domTypeName === 'BoxGridCol') return <Fragment key={index}>{item}</Fragment>;\n let span: number | undefined = undefined;\n if (\n domTypeName === 'FormItemWrapper' ||\n domTypeName === 'FormItemText' ||\n domTypeName === 'FormItemSpan'\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 if (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}>\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 ? (\n children\n ) : (\n <Fragment>\n {getHiddenRowChildren()}\n <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>\n </Fragment>\n )}\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 ? (\n children\n ) : (\n <Fragment>\n {getHiddenRowChildren()}\n <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>\n </Fragment>\n )}\n </FormWrapper>\n ) : undefined}\n </Fragment>\n );\n};\n"],"names":["isHidden","item","domTypeName","type","props","isHiddenAndClear","EasyForm","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","getHiddenRowChildren","Children","toArray","filter","getFormRowChildren","map","index","_jsx","Fragment","span","undefined","cloneElement","_extends","key","BoxGrid","Col","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","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { 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":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import './index.css';
|
|
3
3
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
-
import{Form as e}from"antd";import{jsx as
|
|
4
|
+
import{Form as e}from"antd";import{jsx as m}from"react/jsx-runtime";var r=function r(t){return m(e.Item,{name:t.name,hidden:true,className:t.className,style:t.style,children:m("span",{})})};r["domTypeName"]="FormItemHidden";export{r as FormItemHidden};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-hidden/form-item-hidden.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-hidden/form-item-hidden.tsx"],"sourcesContent":["import type { FormItemProps } from 'antd';\nimport { Form } from 'antd';\nimport type { CSSProperties } from 'react';\n\nexport type FormItemHiddenProps = {\n name: FormItemProps['name'];\n className?: string;\n style?: CSSProperties;\n};\n\nexport const FormItemHidden = (props: FormItemHiddenProps) => {\n return (\n <Form.Item name={props.name} hidden className={props.className} style={props.style}>\n <span></span>\n </Form.Item>\n );\n};\n\nFormItemHidden['domTypeName'] = 'FormItemHidden';\n"],"names":["FormItemHidden","props","_jsx","Form","Item","name","hidden","className","style","children"],"mappings":";wEAUaA,EAAiB,SAAjBA,EAAkBC,GAC7B,OACEC,EAACC,EAAKC,KAAI,CAACC,KAAMJ,EAAMI,KAAMC,OAAM,KAACC,UAAWN,EAAMM,UAAWC,MAAOP,EAAMO,MAAMC,SACjFP,EAAY,OAAA,KAGlB,EAEAF,EAAe,eAAiB"}
|
|
@@ -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{
|
|
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 i=function i(s){return o(m.Col,r({},s))};i["domTypeName"]="FormItemSpan";export{i 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';\nexport type FormItemSpanProps = {\n span?: number;\n children?: React.ReactNode;\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 * ```\n */\nexport const FormItemSpan = (props: FormItemSpanProps) => {\n return <BoxGrid.Col
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-span/span.tsx"],"sourcesContent":["import { BoxGrid } from '../box-grid/index.js';\nexport type FormItemSpanProps = {\n span?: number;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\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 * ```\n */\nexport const FormItemSpan = (props: FormItemSpanProps) => {\n return <BoxGrid.Col {...props} />;\n};\n\nFormItemSpan['domTypeName'] = 'FormItemSpan';\n"],"names":["FormItemSpan","props","_jsx","BoxGrid","Col","_extends"],"mappings":";4PAiCaA,EAAe,SAAfA,EAAgBC,GAC3B,OAAOC,EAACC,EAAQC,IAAGC,EAAA,CAAA,EAAKJ,GAC1B,EAEAD,EAAa,eAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.form-item-label-70.ant-form-item .ant-form-item-label{width:70px}.form-item-label-80.ant-form-item .ant-form-item-label{width:80px}.form-item-label-90.ant-form-item .ant-form-item-label{width:90px}.form-item-label-100.ant-form-item .ant-form-item-label{width:100px}.form-item-label-110.ant-form-item .ant-form-item-label{width:110px}.form-item-label-120.ant-form-item .ant-form-item-label{width:120px}.form-item-label-130.ant-form-item .ant-form-item-label{width:130px}.form-item-label-140.ant-form-item .ant-form-item-label{width:140px}.form-item-label-150.ant-form-item .ant-form-item-label{width:150px}.form-item-label-160.ant-form-item .ant-form-item-label{width:160px}.form-item-label-170.ant-form-item .ant-form-item-label{width:170px}.form-item-label-180.ant-form-item .ant-form-item-label{width:180px}.form-item-label-190.ant-form-item .ant-form-item-label{width:190px}.form-item-label-200.ant-form-item .ant-form-item-label{width:200px}.form-item-label-auto.ant-form-item .ant-form-item-row{flex-direction:row!important}.form-item-label-auto.ant-form-item .ant-form-item-label{width:auto!important}.form-item-label-auto.ant-form-item .ant-form-item-control{flex:1}.form-item-label-align-left.ant-form-item .ant-form-item-label{text-align:left}.form-item-label-align-right.ant-form-item .ant-form-item-label{text-align:right}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row{flex-direction:column}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-label{text-align:left;width:100%}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-control{flex:initial}.form-label-70 .ant-form-item-label{width:70px}.form-label-80 .ant-form-item-label{width:80px}.form-label-90 .ant-form-item-label{width:90px}.form-label-100 .ant-form-item-label{width:100px}.form-label-110 .ant-form-item-label{width:110px}.form-label-120 .ant-form-item-label{width:120px}.form-label-130 .ant-form-item-label{width:130px}.form-label-140 .ant-form-item-label{width:140px}.form-label-150 .ant-form-item-label{width:150px}.form-label-160 .ant-form-item-label{width:160px}.form-label-170 .ant-form-item-label{width:170px}.form-label-180 .ant-form-item-label{width:180px}.form-label-190 .ant-form-item-label{width:190px}.form-label-200 .ant-form-item-label{width:200px}.form-label-auto .ant-form-item-label{width:auto}.form-label-align-left .ant-form-item-label{text-align:left}.form-label-align-right .ant-form-item-label{text-align:right}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-row{flex-direction:column}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-label{text-align:left;width:100%}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-control{flex:initial}.form-formitem-gap-24
|
|
1
|
+
.form-item-label-70.ant-form-item .ant-form-item-label{width:70px}.form-item-label-80.ant-form-item .ant-form-item-label{width:80px}.form-item-label-90.ant-form-item .ant-form-item-label{width:90px}.form-item-label-100.ant-form-item .ant-form-item-label{width:100px}.form-item-label-110.ant-form-item .ant-form-item-label{width:110px}.form-item-label-120.ant-form-item .ant-form-item-label{width:120px}.form-item-label-130.ant-form-item .ant-form-item-label{width:130px}.form-item-label-140.ant-form-item .ant-form-item-label{width:140px}.form-item-label-150.ant-form-item .ant-form-item-label{width:150px}.form-item-label-160.ant-form-item .ant-form-item-label{width:160px}.form-item-label-170.ant-form-item .ant-form-item-label{width:170px}.form-item-label-180.ant-form-item .ant-form-item-label{width:180px}.form-item-label-190.ant-form-item .ant-form-item-label{width:190px}.form-item-label-200.ant-form-item .ant-form-item-label{width:200px}.form-item-label-auto.ant-form-item .ant-form-item-row{flex-direction:row!important}.form-item-label-auto.ant-form-item .ant-form-item-label{width:auto!important}.form-item-label-auto.ant-form-item .ant-form-item-control{flex:1}.form-item-label-align-left.ant-form-item .ant-form-item-label{text-align:left}.form-item-label-align-right.ant-form-item .ant-form-item-label{text-align:right}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row{flex-direction:column}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-label{text-align:left;width:100%}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-control{flex:initial}.form-label-70 .ant-form-item-label{width:70px}.form-label-80 .ant-form-item-label{width:80px}.form-label-90 .ant-form-item-label{width:90px}.form-label-100 .ant-form-item-label{width:100px}.form-label-110 .ant-form-item-label{width:110px}.form-label-120 .ant-form-item-label{width:120px}.form-label-130 .ant-form-item-label{width:130px}.form-label-140 .ant-form-item-label{width:140px}.form-label-150 .ant-form-item-label{width:150px}.form-label-160 .ant-form-item-label{width:160px}.form-label-170 .ant-form-item-label{width:170px}.form-label-180 .ant-form-item-label{width:180px}.form-label-190 .ant-form-item-label{width:190px}.form-label-200 .ant-form-item-label{width:200px}.form-label-auto .ant-form-item-label{width:auto}.form-label-align-left .ant-form-item-label{text-align:left}.form-label-align-right .ant-form-item-label{text-align:right}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-row{flex-direction:column}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-label{text-align:left;width:100%}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-control{flex:initial}.form-formitem-gap-24 .ant-form-item{margin-bottom:24px}.form-formitem-gap-15 .ant-form-item{margin-bottom:15px}.form-formitem-gap-8 .ant-form-item{margin-bottom:8px}.form-formitem-gap-5 .ant-form-item{margin-bottom:5px}.form-formitem-gap-0 .ant-form-item{margin-bottom:0}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
|
+
import './../fba-hooks/index.css';
|
|
2
3
|
import './../pre-defined-class-name/index.css';
|
|
3
4
|
import './index.css';
|
|
4
5
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
5
|
-
import{a as e,_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{composeProps as l}from"@flatbiz/utils";import{Form as a}from"antd";import{useMemo as t,isValidElement as
|
|
6
|
+
import{a as e,_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{composeProps as i,isUndefinedOrNull as l}from"@flatbiz/utils";import{Form as a}from"antd";import{useMemo as t,isValidElement as n,cloneElement as o}from"react";import{fbaHooks as s}from"../fba-hooks/index.js";import{preDefinedClassName as u}from"../pre-defined-class-name/index.js";import{jsx as p,jsxs as m}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"../use-responsive-point-21b8c601.js";import"@dimjs/utils/cjs/class-names";var f=["wrapper","children","inputNormalize","isClear"],d=["wrapper","isClear","labelWidth","labelItemVertical","labelAlign","children","before","after","inputNormalize","outputNormalize","className","dependencies","hidden"];var c=function r(a){var t=a.wrapper,n=a.children,u=a.inputNormalize,d=a.isClear,c=e(a,f);var h=Object.prototype.hasOwnProperty.call(c,"value");if(h&&u){c["value"]=u(c["value"])}var v=o(n,i(n.props,c,true));s.useEffectCustom((function(){if(d&&!l(a.value)){a.onChange==null?void 0:a.onChange(undefined)}}),[d,a.value]);if(t){return t(v)}if(a.before||a.after){return m("div",{style:{display:"flex",alignItems:"center"},children:[a.before?p("span",{style:{marginRight:10},children:a.before}):null,p("div",{style:{flex:1},children:v}),a.after?p("span",{style:{marginLeft:10},children:a.after}):null]})}return v};var h=function i(l){var o=l.wrapper,s=l.isClear,m=l.labelWidth,f=l.labelItemVertical,h=l.labelAlign,v=l.children,b=l.before,g=l.after,y=l.inputNormalize,N=l.outputNormalize,j=l.className,z=l.dependencies,C=l.hidden,I=e(l,d);var w=a.useFormInstance();var F=t((function(){return u.getFormItemLayoutClassName({labelWidth:m,labelItemVertical:f,labelAlign:h,className:j})}),[m,f,h,j]);if(z&&(z==null?void 0:z.length)>0){return p(a.Item,{dependencies:z,noStyle:true,children:function(e){function r(r){return e.apply(this,arguments)}r.toString=function(){return e.toString()};return r}((function(e){var i=typeof C==="function"?C==null?void 0:C(e.getFieldsValue()):C;var l=typeof s==="function"?s==null?void 0:s(e.getFieldsValue()):s;var t=I.rules;if(l||i){t=[]}return p(a.Item,r({normalize:N},I,{className:F,hidden:l||i,rules:t,children:n(v)?p(c,{wrapper:o,before:b,after:g,inputNormalize:y,isClear:l,children:v}):v}))}))})}var V=typeof C==="function"?C(w.getFieldsValue()):C;var x=typeof s==="function"?s(w.getFieldsValue()):s;return p(a.Item,r({normalize:N},I,{className:F,hidden:V||x,children:n(v)?p(c,{wrapper:o,before:b,after:g,inputNormalize:y,isClear:x,children:v}):v}))};h["domTypeName"]="FormItemWrapper";export{h as FormItemWrapper};
|
|
6
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-wrapper/form-item-wrapper.tsx"],"sourcesContent":["import { composeProps, TAny } from '@flatbiz/utils';\nimport { Form, FormItemProps } from 'antd';\nimport { cloneElement, isValidElement, ReactElement, ReactNode, useMemo } from 'react';\nimport { preDefinedClassName } from '../pre-defined-class-name';\nimport { TFormItemLayoutPreClassNameProps } from '../pre-defined-class-name/form';\n\nexport type FormItemWrapperProps = FormItemProps &\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
|
|
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，不会清除值\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\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 * ```\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 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 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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.form-item-label-70.ant-form-item .ant-form-item-label{width:70px}.form-item-label-80.ant-form-item .ant-form-item-label{width:80px}.form-item-label-90.ant-form-item .ant-form-item-label{width:90px}.form-item-label-100.ant-form-item .ant-form-item-label{width:100px}.form-item-label-110.ant-form-item .ant-form-item-label{width:110px}.form-item-label-120.ant-form-item .ant-form-item-label{width:120px}.form-item-label-130.ant-form-item .ant-form-item-label{width:130px}.form-item-label-140.ant-form-item .ant-form-item-label{width:140px}.form-item-label-150.ant-form-item .ant-form-item-label{width:150px}.form-item-label-160.ant-form-item .ant-form-item-label{width:160px}.form-item-label-170.ant-form-item .ant-form-item-label{width:170px}.form-item-label-180.ant-form-item .ant-form-item-label{width:180px}.form-item-label-190.ant-form-item .ant-form-item-label{width:190px}.form-item-label-200.ant-form-item .ant-form-item-label{width:200px}.form-item-label-auto.ant-form-item .ant-form-item-row{flex-direction:row!important}.form-item-label-auto.ant-form-item .ant-form-item-label{width:auto!important}.form-item-label-auto.ant-form-item .ant-form-item-control{flex:1}.form-item-label-align-left.ant-form-item .ant-form-item-label{text-align:left}.form-item-label-align-right.ant-form-item .ant-form-item-label{text-align:right}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row{flex-direction:column}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-label{text-align:left;width:100%}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-control{flex:initial}.form-label-70 .ant-form-item-label{width:70px}.form-label-80 .ant-form-item-label{width:80px}.form-label-90 .ant-form-item-label{width:90px}.form-label-100 .ant-form-item-label{width:100px}.form-label-110 .ant-form-item-label{width:110px}.form-label-120 .ant-form-item-label{width:120px}.form-label-130 .ant-form-item-label{width:130px}.form-label-140 .ant-form-item-label{width:140px}.form-label-150 .ant-form-item-label{width:150px}.form-label-160 .ant-form-item-label{width:160px}.form-label-170 .ant-form-item-label{width:170px}.form-label-180 .ant-form-item-label{width:180px}.form-label-190 .ant-form-item-label{width:190px}.form-label-200 .ant-form-item-label{width:200px}.form-label-auto .ant-form-item-label{width:auto}.form-label-align-left .ant-form-item-label{text-align:left}.form-label-align-right .ant-form-item-label{text-align:right}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-row{flex-direction:column}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-label{text-align:left;width:100%}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-control{flex:initial}.form-formitem-gap-24
|
|
1
|
+
.form-item-label-70.ant-form-item .ant-form-item-label{width:70px}.form-item-label-80.ant-form-item .ant-form-item-label{width:80px}.form-item-label-90.ant-form-item .ant-form-item-label{width:90px}.form-item-label-100.ant-form-item .ant-form-item-label{width:100px}.form-item-label-110.ant-form-item .ant-form-item-label{width:110px}.form-item-label-120.ant-form-item .ant-form-item-label{width:120px}.form-item-label-130.ant-form-item .ant-form-item-label{width:130px}.form-item-label-140.ant-form-item .ant-form-item-label{width:140px}.form-item-label-150.ant-form-item .ant-form-item-label{width:150px}.form-item-label-160.ant-form-item .ant-form-item-label{width:160px}.form-item-label-170.ant-form-item .ant-form-item-label{width:170px}.form-item-label-180.ant-form-item .ant-form-item-label{width:180px}.form-item-label-190.ant-form-item .ant-form-item-label{width:190px}.form-item-label-200.ant-form-item .ant-form-item-label{width:200px}.form-item-label-auto.ant-form-item .ant-form-item-row{flex-direction:row!important}.form-item-label-auto.ant-form-item .ant-form-item-label{width:auto!important}.form-item-label-auto.ant-form-item .ant-form-item-control{flex:1}.form-item-label-align-left.ant-form-item .ant-form-item-label{text-align:left}.form-item-label-align-right.ant-form-item .ant-form-item-label{text-align:right}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row{flex-direction:column}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-label{text-align:left;width:100%}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-control{flex:initial}.form-label-70 .ant-form-item-label{width:70px}.form-label-80 .ant-form-item-label{width:80px}.form-label-90 .ant-form-item-label{width:90px}.form-label-100 .ant-form-item-label{width:100px}.form-label-110 .ant-form-item-label{width:110px}.form-label-120 .ant-form-item-label{width:120px}.form-label-130 .ant-form-item-label{width:130px}.form-label-140 .ant-form-item-label{width:140px}.form-label-150 .ant-form-item-label{width:150px}.form-label-160 .ant-form-item-label{width:160px}.form-label-170 .ant-form-item-label{width:170px}.form-label-180 .ant-form-item-label{width:180px}.form-label-190 .ant-form-item-label{width:190px}.form-label-200 .ant-form-item-label{width:200px}.form-label-auto .ant-form-item-label{width:auto}.form-label-align-left .ant-form-item-label{text-align:left}.form-label-align-right .ant-form-item-label{text-align:right}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-row{flex-direction:column}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-label{text-align:left;width:100%}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-control{flex:initial}.form-formitem-gap-24 .ant-form-item{margin-bottom:24px}.form-formitem-gap-15 .ant-form-item{margin-bottom:15px}.form-formitem-gap-8 .ant-form-item{margin-bottom:8px}.form-formitem-gap-5 .ant-form-item{margin-bottom:5px}.form-formitem-gap-0 .ant-form-item{margin-bottom:0}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import './../form-item-wrapper/index.css';
|
|
3
|
+
import './../fba-hooks/index.css';
|
|
3
4
|
import './../pre-defined-class-name/index.css';
|
|
4
5
|
import './../types/index.css';
|
|
5
6
|
import './index.css';
|
|
6
7
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
7
|
-
import{a as e,_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isNotEmptyArray as i,isEmptyArray as n,isUndefinedOrNull as t}from"@flatbiz/utils";import{InputNumber as s}from"antd";import{useMemo as o}from"react";import{FlexLayout as m}from"../flex-layout/index.js";import{FormItemWrapper as u}from"../form-item-wrapper/index.js";import{jsx as a,jsxs as l}from"react/jsx-runtime";import"@dimjs/utils/cjs/class-names";import"../pre-defined-class-name/index.js";var d=["minFormItemName","maxFormItemName","required","requiredRuleMessage","rangeRuleMessage","minInputNumberProps","maxInputNumberProps","isInputEqual"];var
|
|
8
|
+
import{a as e,_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isNotEmptyArray as i,isEmptyArray as n,isUndefinedOrNull as t}from"@flatbiz/utils";import{InputNumber as s}from"antd";import{useMemo as o}from"react";import{FlexLayout as m}from"../flex-layout/index.js";import{FormItemWrapper as u}from"../form-item-wrapper/index.js";import{jsx as a,jsxs as l}from"react/jsx-runtime";import"@dimjs/utils/cjs/class-names";import"../fba-hooks/index.js";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"../use-responsive-point-21b8c601.js";import"../pre-defined-class-name/index.js";var d=["minFormItemName","maxFormItemName","required","requiredRuleMessage","rangeRuleMessage","minInputNumberProps","maxInputNumberProps","isInputEqual"];var p=function p(f){var c=f.minFormItemName,v=f.maxFormItemName,g=f.required,P=f.requiredRuleMessage,j=f.rangeRuleMessage,x=f.minInputNumberProps,h=f.maxInputNumberProps,I=f.isInputEqual,q=e(f,d);var y=o((function(){if(!j)return["最小值输入不能超过最大值","最大值输入不能低于最小值"];if(i(j)){return[j[0],j[1]||j[0]]}return[j,j]}),[j]);var N=o((function(){if(!P||n(P))return[];if(i(P)){return[P[0],P[1]||P[0]]}return[P,P]}),[P]);var b=[{required:g,message:N[0]||""},function(e){var r=e.getFieldValue;return{validator:function e(i,n){if(t(n)){return Promise.resolve()}var s=r(v);if(t(s)){return Promise.resolve()}if(I){if(n<=s){return Promise.resolve()}}else{if(n<s){return Promise.resolve()}}return Promise.reject(new Error(y[0]))}}}];var w=[{required:g,message:N[1]||""},function(e){var r=e.getFieldValue;return{validator:function e(i,n){if(t(n)){return Promise.resolve()}var s=r(c);if(t(s)){return Promise.resolve()}if(I){if(n>=s){return Promise.resolve()}}else{if(n>s){return Promise.resolve()}}return Promise.reject(new Error(y[1]))}}}];return a(u,r({},q,{required:g,children:l(m,{fullIndex:[0,1],direction:"horizontal",gap:10,children:[a(u,{name:c,dependencies:[v],rules:b,style:{margin:0},children:a(s,r({placeholder:"请输入"},x,{style:r({width:"100%"},x==null?void 0:x.style)}))}),a(u,{name:v,dependencies:[c],rules:w,style:{margin:0},children:a(s,r({placeholder:"请输入"},h,{style:r({width:"100%"},h==null?void 0:h.style)}))})]})}))};export{p as NumberRangeFormItem};
|
|
8
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/number-range-form-item/number-range.tsx"],"sourcesContent":["import { isEmptyArray, isNotEmptyArray, isUndefinedOrNull } from '@flatbiz/utils';\nimport { InputNumber, InputNumberProps } from 'antd';\nimport { useMemo } from 'react';\nimport { FlexLayout } from '../flex-layout/flex-layout';\nimport { FormItemWrapper, type FormItemWrapperProps } from '../form-item-wrapper';\nimport type { FormItemNamePath } from '../types';\n\n// type InputNumberProps = GetProps<typeof InputNumber>;\n\nexport type NumberRangeFormItemProps = Omit<FormItemWrapperProps, 'name' | 'rules'> & {\n minFormItemName: FormItemNamePath;\n maxFormItemName: FormItemNamePath;\n /** 是否必填 */\n required?: boolean;\n /** 必填验证异常文案 */\n requiredRuleMessage?: string | [string, string];\n /** 范围验证异常文案 */\n rangeRuleMessage?: string | [string, string];\n minInputNumberProps?: Omit<InputNumberProps, 'value'>;\n maxInputNumberProps?: Omit<InputNumberProps, 'value'>;\n /** 最小值与最大值输入是否可以相同 */\n isInputEqual?: boolean;\n};\n/**\n * 数字输入范围组件\n */\nexport const NumberRangeFormItem = (props: NumberRangeFormItemProps) => {\n const {\n minFormItemName,\n maxFormItemName,\n required,\n requiredRuleMessage,\n rangeRuleMessage,\n minInputNumberProps,\n maxInputNumberProps,\n isInputEqual,\n ...otherProps\n } = props;\n\n const rangeRuleMessageList = useMemo(() => {\n if (!rangeRuleMessage) return ['最小值输入不能超过最大值', '最大值输入不能低于最小值'];\n if (isNotEmptyArray(rangeRuleMessage)) {\n return [rangeRuleMessage[0], rangeRuleMessage[1] || rangeRuleMessage[0]];\n }\n return [rangeRuleMessage, rangeRuleMessage] as string[];\n }, [rangeRuleMessage]);\n\n const requiredRuleMessageList = useMemo(() => {\n if (!requiredRuleMessage || isEmptyArray(requiredRuleMessage)) return [];\n if (isNotEmptyArray(requiredRuleMessage)) {\n return [requiredRuleMessage[0], requiredRuleMessage[1] || requiredRuleMessage[0]];\n }\n return [requiredRuleMessage, requiredRuleMessage] as string[];\n }, [requiredRuleMessage]);\n\n const minRules = [\n { required: required, message: requiredRuleMessageList[0] || '' },\n ({ getFieldValue }) => ({\n validator(_, value) {\n if (isUndefinedOrNull(value)) {\n return Promise.resolve();\n }\n const maxValue = getFieldValue(maxFormItemName);\n if (isUndefinedOrNull(maxValue)) {\n return Promise.resolve();\n }\n if (isInputEqual) {\n if (value <= maxValue) {\n return Promise.resolve();\n }\n } else {\n if (value < maxValue) {\n return Promise.resolve();\n }\n }\n return Promise.reject(new Error(rangeRuleMessageList[0]));\n },\n }),\n ];\n\n const maxRules = [\n { required: required, message: requiredRuleMessageList[1] || '' },\n ({ getFieldValue }) => ({\n validator(_, value) {\n if (isUndefinedOrNull(value)) {\n return Promise.resolve();\n }\n const minValue = getFieldValue(minFormItemName);\n if (isUndefinedOrNull(minValue)) {\n return Promise.resolve();\n }\n\n if (isInputEqual) {\n if (value >= minValue) {\n return Promise.resolve();\n }\n } else {\n if (value > minValue) {\n return Promise.resolve();\n }\n }\n return Promise.reject(new Error(rangeRuleMessageList[1]));\n },\n }),\n ];\n\n return (\n <FormItemWrapper {...otherProps} required={required}>\n <FlexLayout fullIndex={[0, 1]} direction=\"horizontal\" gap={10}>\n <FormItemWrapper\n name={minFormItemName}\n dependencies={[maxFormItemName]}\n rules={minRules}\n style={{ margin: 0 }}\n >\n <InputNumber\n placeholder=\"请输入\"\n {...minInputNumberProps}\n style={{ width: '100%', ...minInputNumberProps?.style }}\n />\n </FormItemWrapper>\n <FormItemWrapper\n name={maxFormItemName}\n dependencies={[minFormItemName]}\n rules={maxRules}\n style={{ margin: 0 }}\n >\n <InputNumber\n placeholder=\"请输入\"\n {...maxInputNumberProps}\n style={{ width: '100%', ...maxInputNumberProps?.style }}\n />\n </FormItemWrapper>\n </FlexLayout>\n </FormItemWrapper>\n );\n};\n"],"names":["NumberRangeFormItem","props","minFormItemName","maxFormItemName","required","requiredRuleMessage","rangeRuleMessage","minInputNumberProps","maxInputNumberProps","isInputEqual","otherProps","_objectWithoutPropertiesLoose","_excluded","rangeRuleMessageList","useMemo","isNotEmptyArray","requiredRuleMessageList","isEmptyArray","minRules","message","_ref","getFieldValue","validator","_","value","isUndefinedOrNull","Promise","resolve","maxValue","reject","Error","maxRules","_ref2","minValue","_jsx","FormItemWrapper","_extends","children","_jsxs","FlexLayout","fullIndex","direction","gap","name","dependencies","rules","style","margin","InputNumber","placeholder","width"],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/number-range-form-item/number-range.tsx"],"sourcesContent":["import { isEmptyArray, isNotEmptyArray, isUndefinedOrNull } from '@flatbiz/utils';\nimport { InputNumber, InputNumberProps } from 'antd';\nimport { useMemo } from 'react';\nimport { FlexLayout } from '../flex-layout/flex-layout';\nimport { FormItemWrapper, type FormItemWrapperProps } from '../form-item-wrapper';\nimport type { FormItemNamePath } from '../types';\n\n// type InputNumberProps = GetProps<typeof InputNumber>;\n\nexport type NumberRangeFormItemProps = Omit<FormItemWrapperProps, 'name' | 'rules'> & {\n minFormItemName: FormItemNamePath;\n maxFormItemName: FormItemNamePath;\n /** 是否必填 */\n required?: boolean;\n /** 必填验证异常文案 */\n requiredRuleMessage?: string | [string, string];\n /** 范围验证异常文案 */\n rangeRuleMessage?: string | [string, string];\n minInputNumberProps?: Omit<InputNumberProps, 'value'>;\n maxInputNumberProps?: Omit<InputNumberProps, 'value'>;\n /** 最小值与最大值输入是否可以相同 */\n isInputEqual?: boolean;\n};\n/**\n * 数字输入范围组件\n */\nexport const NumberRangeFormItem = (props: NumberRangeFormItemProps) => {\n const {\n minFormItemName,\n maxFormItemName,\n required,\n requiredRuleMessage,\n rangeRuleMessage,\n minInputNumberProps,\n maxInputNumberProps,\n isInputEqual,\n ...otherProps\n } = props;\n\n const rangeRuleMessageList = useMemo(() => {\n if (!rangeRuleMessage) return ['最小值输入不能超过最大值', '最大值输入不能低于最小值'];\n if (isNotEmptyArray(rangeRuleMessage)) {\n return [rangeRuleMessage[0], rangeRuleMessage[1] || rangeRuleMessage[0]];\n }\n return [rangeRuleMessage, rangeRuleMessage] as string[];\n }, [rangeRuleMessage]);\n\n const requiredRuleMessageList = useMemo(() => {\n if (!requiredRuleMessage || isEmptyArray(requiredRuleMessage)) return [];\n if (isNotEmptyArray(requiredRuleMessage)) {\n return [requiredRuleMessage[0], requiredRuleMessage[1] || requiredRuleMessage[0]];\n }\n return [requiredRuleMessage, requiredRuleMessage] as string[];\n }, [requiredRuleMessage]);\n\n const minRules = [\n { required: required, message: requiredRuleMessageList[0] || '' },\n ({ getFieldValue }) => ({\n validator(_, value) {\n if (isUndefinedOrNull(value)) {\n return Promise.resolve();\n }\n const maxValue = getFieldValue(maxFormItemName);\n if (isUndefinedOrNull(maxValue)) {\n return Promise.resolve();\n }\n if (isInputEqual) {\n if (value <= maxValue) {\n return Promise.resolve();\n }\n } else {\n if (value < maxValue) {\n return Promise.resolve();\n }\n }\n return Promise.reject(new Error(rangeRuleMessageList[0]));\n },\n }),\n ];\n\n const maxRules = [\n { required: required, message: requiredRuleMessageList[1] || '' },\n ({ getFieldValue }) => ({\n validator(_, value) {\n if (isUndefinedOrNull(value)) {\n return Promise.resolve();\n }\n const minValue = getFieldValue(minFormItemName);\n if (isUndefinedOrNull(minValue)) {\n return Promise.resolve();\n }\n\n if (isInputEqual) {\n if (value >= minValue) {\n return Promise.resolve();\n }\n } else {\n if (value > minValue) {\n return Promise.resolve();\n }\n }\n return Promise.reject(new Error(rangeRuleMessageList[1]));\n },\n }),\n ];\n\n return (\n <FormItemWrapper {...otherProps} required={required}>\n <FlexLayout fullIndex={[0, 1]} direction=\"horizontal\" gap={10}>\n <FormItemWrapper\n name={minFormItemName}\n dependencies={[maxFormItemName]}\n rules={minRules}\n style={{ margin: 0 }}\n >\n <InputNumber\n placeholder=\"请输入\"\n {...minInputNumberProps}\n style={{ width: '100%', ...minInputNumberProps?.style }}\n />\n </FormItemWrapper>\n <FormItemWrapper\n name={maxFormItemName}\n dependencies={[minFormItemName]}\n rules={maxRules}\n style={{ margin: 0 }}\n >\n <InputNumber\n placeholder=\"请输入\"\n {...maxInputNumberProps}\n style={{ width: '100%', ...maxInputNumberProps?.style }}\n />\n </FormItemWrapper>\n </FlexLayout>\n </FormItemWrapper>\n );\n};\n"],"names":["NumberRangeFormItem","props","minFormItemName","maxFormItemName","required","requiredRuleMessage","rangeRuleMessage","minInputNumberProps","maxInputNumberProps","isInputEqual","otherProps","_objectWithoutPropertiesLoose","_excluded","rangeRuleMessageList","useMemo","isNotEmptyArray","requiredRuleMessageList","isEmptyArray","minRules","message","_ref","getFieldValue","validator","_","value","isUndefinedOrNull","Promise","resolve","maxValue","reject","Error","maxRules","_ref2","minValue","_jsx","FormItemWrapper","_extends","children","_jsxs","FlexLayout","fullIndex","direction","gap","name","dependencies","rules","style","margin","InputNumber","placeholder","width"],"mappings":";gwBA0BaA,EAAsB,SAAtBA,EAAuBC,GAClC,IACEC,EASED,EATFC,gBACAC,EAQEF,EARFE,gBACAC,EAOEH,EAPFG,SACAC,EAMEJ,EANFI,oBACAC,EAKEL,EALFK,iBACAC,EAIEN,EAJFM,oBACAC,EAGEP,EAHFO,oBACAC,EAEER,EAFFQ,aACGC,EAAUC,EACXV,EAAKW,GAET,IAAMC,EAAuBC,GAAQ,WACnC,IAAKR,EAAkB,MAAO,CAAC,eAAgB,gBAC/C,GAAIS,EAAgBT,GAAmB,CACrC,MAAO,CAACA,EAAiB,GAAIA,EAAiB,IAAMA,EAAiB,GACvE,CACA,MAAO,CAACA,EAAkBA,EAC5B,GAAG,CAACA,IAEJ,IAAMU,EAA0BF,GAAQ,WACtC,IAAKT,GAAuBY,EAAaZ,GAAsB,MAAO,GACtE,GAAIU,EAAgBV,GAAsB,CACxC,MAAO,CAACA,EAAoB,GAAIA,EAAoB,IAAMA,EAAoB,GAChF,CACA,MAAO,CAACA,EAAqBA,EAC/B,GAAG,CAACA,IAEJ,IAAMa,EAAW,CACf,CAAEd,SAAUA,EAAUe,QAASH,EAAwB,IAAM,IAC7D,SAAAI,GAAA,IAAGC,EAAaD,EAAbC,cAAa,MAAQ,CACtBC,UAASA,SAAAA,EAACC,EAAGC,GACX,GAAIC,EAAkBD,GAAQ,CAC5B,OAAOE,QAAQC,SACjB,CACA,IAAMC,EAAWP,EAAclB,GAC/B,GAAIsB,EAAkBG,GAAW,CAC/B,OAAOF,QAAQC,SACjB,CACA,GAAIlB,EAAc,CAChB,GAAIe,GAASI,EAAU,CACrB,OAAOF,QAAQC,SACjB,CACF,KAAO,CACL,GAAIH,EAAQI,EAAU,CACpB,OAAOF,QAAQC,SACjB,CACF,CACA,OAAOD,QAAQG,OAAO,IAAIC,MAAMjB,EAAqB,IACvD,EACD,GAGH,IAAMkB,EAAW,CACf,CAAE3B,SAAUA,EAAUe,QAASH,EAAwB,IAAM,IAC7D,SAAAgB,GAAA,IAAGX,EAAaW,EAAbX,cAAa,MAAQ,CACtBC,UAASA,SAAAA,EAACC,EAAGC,GACX,GAAIC,EAAkBD,GAAQ,CAC5B,OAAOE,QAAQC,SACjB,CACA,IAAMM,EAAWZ,EAAcnB,GAC/B,GAAIuB,EAAkBQ,GAAW,CAC/B,OAAOP,QAAQC,SACjB,CAEA,GAAIlB,EAAc,CAChB,GAAIe,GAASS,EAAU,CACrB,OAAOP,QAAQC,SACjB,CACF,KAAO,CACL,GAAIH,EAAQS,EAAU,CACpB,OAAOP,QAAQC,SACjB,CACF,CACA,OAAOD,QAAQG,OAAO,IAAIC,MAAMjB,EAAqB,IACvD,EACD,GAGH,OACEqB,EAACC,EAAeC,KAAK1B,EAAU,CAAEN,SAAUA,EAASiC,SAClDC,EAACC,EAAU,CAACC,UAAW,CAAC,EAAG,GAAIC,UAAU,aAAaC,IAAK,GAAGL,SAAA,CAC5DH,EAACC,EAAe,CACdQ,KAAMzC,EACN0C,aAAc,CAACzC,GACf0C,MAAO3B,EACP4B,MAAO,CAAEC,OAAQ,GAAIV,SAErBH,EAACc,EAAWZ,EAAA,CACVa,YAAY,OACR1C,EAAmB,CACvBuC,MAAKV,EAAA,CAAIc,MAAO,QAAW3C,GAAmB,UAAA,EAAnBA,EAAqBuC,YAGpDZ,EAACC,EAAe,CACdQ,KAAMxC,EACNyC,aAAc,CAAC1C,GACf2C,MAAOd,EACPe,MAAO,CAAEC,OAAQ,GAAIV,SAErBH,EAACc,EAAWZ,EAAA,CACVa,YAAY,OACRzC,EAAmB,CACvBsC,MAAKV,EAAA,CAAIc,MAAO,QAAW1C,GAAmB,UAAA,EAAnBA,EAAqBsC,iBAM5D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.form-item-label-70.ant-form-item .ant-form-item-label{width:70px}.form-item-label-80.ant-form-item .ant-form-item-label{width:80px}.form-item-label-90.ant-form-item .ant-form-item-label{width:90px}.form-item-label-100.ant-form-item .ant-form-item-label{width:100px}.form-item-label-110.ant-form-item .ant-form-item-label{width:110px}.form-item-label-120.ant-form-item .ant-form-item-label{width:120px}.form-item-label-130.ant-form-item .ant-form-item-label{width:130px}.form-item-label-140.ant-form-item .ant-form-item-label{width:140px}.form-item-label-150.ant-form-item .ant-form-item-label{width:150px}.form-item-label-160.ant-form-item .ant-form-item-label{width:160px}.form-item-label-170.ant-form-item .ant-form-item-label{width:170px}.form-item-label-180.ant-form-item .ant-form-item-label{width:180px}.form-item-label-190.ant-form-item .ant-form-item-label{width:190px}.form-item-label-200.ant-form-item .ant-form-item-label{width:200px}.form-item-label-auto.ant-form-item .ant-form-item-row{flex-direction:row!important}.form-item-label-auto.ant-form-item .ant-form-item-label{width:auto!important}.form-item-label-auto.ant-form-item .ant-form-item-control{flex:1}.form-item-label-align-left.ant-form-item .ant-form-item-label{text-align:left}.form-item-label-align-right.ant-form-item .ant-form-item-label{text-align:right}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row{flex-direction:column}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-label{text-align:left;width:100%}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-control{flex:initial}.form-label-70 .ant-form-item-label{width:70px}.form-label-80 .ant-form-item-label{width:80px}.form-label-90 .ant-form-item-label{width:90px}.form-label-100 .ant-form-item-label{width:100px}.form-label-110 .ant-form-item-label{width:110px}.form-label-120 .ant-form-item-label{width:120px}.form-label-130 .ant-form-item-label{width:130px}.form-label-140 .ant-form-item-label{width:140px}.form-label-150 .ant-form-item-label{width:150px}.form-label-160 .ant-form-item-label{width:160px}.form-label-170 .ant-form-item-label{width:170px}.form-label-180 .ant-form-item-label{width:180px}.form-label-190 .ant-form-item-label{width:190px}.form-label-200 .ant-form-item-label{width:200px}.form-label-auto .ant-form-item-label{width:auto}.form-label-align-left .ant-form-item-label{text-align:left}.form-label-align-right .ant-form-item-label{text-align:right}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-row{flex-direction:column}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-label{text-align:left;width:100%}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-control{flex:initial}.form-formitem-gap-24
|
|
1
|
+
.form-item-label-70.ant-form-item .ant-form-item-label{width:70px}.form-item-label-80.ant-form-item .ant-form-item-label{width:80px}.form-item-label-90.ant-form-item .ant-form-item-label{width:90px}.form-item-label-100.ant-form-item .ant-form-item-label{width:100px}.form-item-label-110.ant-form-item .ant-form-item-label{width:110px}.form-item-label-120.ant-form-item .ant-form-item-label{width:120px}.form-item-label-130.ant-form-item .ant-form-item-label{width:130px}.form-item-label-140.ant-form-item .ant-form-item-label{width:140px}.form-item-label-150.ant-form-item .ant-form-item-label{width:150px}.form-item-label-160.ant-form-item .ant-form-item-label{width:160px}.form-item-label-170.ant-form-item .ant-form-item-label{width:170px}.form-item-label-180.ant-form-item .ant-form-item-label{width:180px}.form-item-label-190.ant-form-item .ant-form-item-label{width:190px}.form-item-label-200.ant-form-item .ant-form-item-label{width:200px}.form-item-label-auto.ant-form-item .ant-form-item-row{flex-direction:row!important}.form-item-label-auto.ant-form-item .ant-form-item-label{width:auto!important}.form-item-label-auto.ant-form-item .ant-form-item-control{flex:1}.form-item-label-align-left.ant-form-item .ant-form-item-label{text-align:left}.form-item-label-align-right.ant-form-item .ant-form-item-label{text-align:right}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row{flex-direction:column}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-label{text-align:left;width:100%}.ant-form-item.form-item-label-value-vertical>.ant-form-item-row>.ant-form-item-control{flex:initial}.form-label-70 .ant-form-item-label{width:70px}.form-label-80 .ant-form-item-label{width:80px}.form-label-90 .ant-form-item-label{width:90px}.form-label-100 .ant-form-item-label{width:100px}.form-label-110 .ant-form-item-label{width:110px}.form-label-120 .ant-form-item-label{width:120px}.form-label-130 .ant-form-item-label{width:130px}.form-label-140 .ant-form-item-label{width:140px}.form-label-150 .ant-form-item-label{width:150px}.form-label-160 .ant-form-item-label{width:160px}.form-label-170 .ant-form-item-label{width:170px}.form-label-180 .ant-form-item-label{width:180px}.form-label-190 .ant-form-item-label{width:190px}.form-label-200 .ant-form-item-label{width:200px}.form-label-auto .ant-form-item-label{width:auto}.form-label-align-left .ant-form-item-label{text-align:left}.form-label-align-right .ant-form-item-label{text-align:right}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-row{flex-direction:column}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-label{text-align:left;width:100%}.form-label-value-vertical .ant-form-item:not(.form-item-label-auto) .ant-form-item-control{flex:initial}.form-formitem-gap-24 .ant-form-item{margin-bottom:24px}.form-formitem-gap-15 .ant-form-item{margin-bottom:15px}.form-formitem-gap-8 .ant-form-item{margin-bottom:8px}.form-formitem-gap-5 .ant-form-item{margin-bottom:5px}.form-formitem-gap-0 .ant-form-item{margin-bottom:0}
|
package/esm/styles/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.num-ff{font-family:var(--v-font-family-number)}p,ul{margin:0;padding:0}.hide{display:none}.clear-fix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}.ant-btn-variant-dashed:disabled,.ant-btn-variant-link:disabled,.ant-btn-variant-solid:disabled,.ant-checkbox-disabled+span,.ant-input-number-outlined.ant-input-number-disabled,.ant-input[disabled],.ant-picker-disabled input[disabled],.ant-radio-wrapper-disabled,.ant-select-disabled .ant-select-selector,.ant-select-multiple.ant-select-disabled .ant-select-selection-item,.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector{color:rgba(0,0,0,.6)!important}.ant-radio-disabled .ant-radio-inner:after{background-color:rgba(0,0,0,.5)!important}.ant-checkbox-disabled .ant-checkbox-inner:after{border-color:rgba(0,0,0,.6)!important}
|
|
1
|
+
.num-ff{font-family:var(--v-font-family-number)}p,ul{margin:0;padding:0}.hide{display:none}.clear-fix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}.ant-btn-variant-dashed:disabled,.ant-btn-variant-link:disabled,.ant-btn-variant-solid:disabled,.ant-btn:disabled,.ant-checkbox-disabled+span,.ant-input-number-outlined.ant-input-number-disabled,.ant-input[disabled],.ant-picker-disabled input[disabled],.ant-radio-wrapper-disabled,.ant-select-disabled .ant-select-selector,.ant-select-multiple.ant-select-disabled .ant-select-selection-item,.ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input) .ant-select-selector{color:rgba(0,0,0,.6)!important}.ant-radio-disabled .ant-radio-inner:after{background-color:rgba(0,0,0,.5)!important}.ant-checkbox-disabled .ant-checkbox-inner:after{border-color:rgba(0,0,0,.6)!important}
|
package/index.d.ts
CHANGED
|
@@ -378,6 +378,14 @@ export type BoxColProps = {
|
|
|
378
378
|
xl?: number;
|
|
379
379
|
/** 屏幕 ≥ 1600px */
|
|
380
380
|
xxl?: number;
|
|
381
|
+
/**
|
|
382
|
+
* 是否移除 外部包装div
|
|
383
|
+
* ```
|
|
384
|
+
* 1. 如果children 为数组，则此配置不生效
|
|
385
|
+
* 2. 如果移除，会在children中添加style和className（所以children组件必须要有style、className属性）
|
|
386
|
+
* ```
|
|
387
|
+
*/
|
|
388
|
+
removeWrapper?: boolean;
|
|
381
389
|
};
|
|
382
390
|
export declare const BoxGrid: {
|
|
383
391
|
/**
|
|
@@ -1049,7 +1057,7 @@ export type TFormItemLayoutPreClassNameProps = {
|
|
|
1049
1057
|
*/
|
|
1050
1058
|
className?: string;
|
|
1051
1059
|
};
|
|
1052
|
-
export type FormItemWrapperProps = FormItemProps & TFormItemLayoutPreClassNameProps & {
|
|
1060
|
+
export type FormItemWrapperProps = Omit<FormItemProps, "hidden"> & TFormItemLayoutPreClassNameProps & {
|
|
1053
1061
|
wrapper?: (children: ReactNode) => ReactElement;
|
|
1054
1062
|
/** 设置wrapper后，before、after失效 */
|
|
1055
1063
|
before?: ReactNode;
|
|
@@ -1062,12 +1070,25 @@ export type FormItemWrapperProps = FormItemProps & TFormItemLayoutPreClassNamePr
|
|
|
1062
1070
|
* 如果设置 normalize 属性，outputNormalize将失效
|
|
1063
1071
|
*/
|
|
1064
1072
|
outputNormalize?: (value?: TAny) => TAny;
|
|
1065
|
-
/**
|
|
1066
|
-
|
|
1073
|
+
/**
|
|
1074
|
+
* 隐藏 Form.Item，同时清除 Form.Item 值
|
|
1075
|
+
* ```
|
|
1076
|
+
* 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏
|
|
1077
|
+
* ```
|
|
1078
|
+
*/
|
|
1079
|
+
isClear?: boolean | ((formValues: TPlainObject) => boolean);
|
|
1080
|
+
/**
|
|
1081
|
+
* 隐藏 Form.Item，不会清除值
|
|
1082
|
+
* ```
|
|
1083
|
+
* 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏
|
|
1084
|
+
* ```
|
|
1085
|
+
*/
|
|
1086
|
+
hidden?: boolean | ((formValues: TPlainObject) => boolean);
|
|
1067
1087
|
/**
|
|
1068
1088
|
* 栅格占位格数，最大值：24
|
|
1069
1089
|
* ```
|
|
1070
|
-
* 1.
|
|
1090
|
+
* 1. 当前FormItemWrapper处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数；
|
|
1091
|
+
* 2. 父节点使用属性值，当前节点不使用属性值
|
|
1071
1092
|
* ```
|
|
1072
1093
|
*/
|
|
1073
1094
|
span?: number;
|
|
@@ -1078,10 +1099,12 @@ export type FormItemWrapperProps = FormItemProps & TFormItemLayoutPreClassNamePr
|
|
|
1078
1099
|
* 1. 为 children 增加 before、after
|
|
1079
1100
|
* 2. 对输入、输出数据进行序列化处理
|
|
1080
1101
|
* 3. 内置布局样式使用 preDefinedClassName.formItem
|
|
1102
|
+
* 4. 设置隐藏域（不清除字段值） 使用hidden，存在依赖逻辑，可与dependencies属性配合使用
|
|
1103
|
+
* 5. 设置隐藏域（清除字段值）使用isClear，存在依赖逻辑，可与dependencies属性配合使用
|
|
1081
1104
|
* ```
|
|
1082
1105
|
*/
|
|
1083
1106
|
export declare const FormItemWrapper: {
|
|
1084
|
-
(props: FormItemWrapperProps): import("react/jsx-runtime").JSX.Element
|
|
1107
|
+
(props: FormItemWrapperProps): import("react/jsx-runtime").JSX.Element;
|
|
1085
1108
|
domTypeName: string;
|
|
1086
1109
|
};
|
|
1087
1110
|
export type DateRangePickerWrapperFormItemProps = Omit<FormItemWrapperProps, "name"> & {
|
|
@@ -1456,16 +1479,29 @@ export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
|
|
|
1456
1479
|
*/
|
|
1457
1480
|
isPure?: boolean;
|
|
1458
1481
|
/**
|
|
1459
|
-
* true:
|
|
1482
|
+
* true: 当前EasyForm组件不使用Antd Form包裹，可在Form、EasyForm、FormWrapper内部使用
|
|
1460
1483
|
*/
|
|
1461
1484
|
nonuseFormWrapper?: boolean;
|
|
1485
|
+
/**
|
|
1486
|
+
* 栅格占位格数，最大值：24
|
|
1487
|
+
* ```
|
|
1488
|
+
* 1. 当前EasyForm处在 EasyForm 直接子节点中有效，即当前EasyForm在EasyForm栅格中的占位格数；
|
|
1489
|
+
* 2. 父节点使用属性值，当前节点不使用属性值
|
|
1490
|
+
* ```
|
|
1491
|
+
*/
|
|
1492
|
+
span?: number;
|
|
1462
1493
|
};
|
|
1463
1494
|
/**
|
|
1464
1495
|
* 简单Form布局，可自定义网格布局
|
|
1465
1496
|
* ```
|
|
1466
1497
|
* 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/grid
|
|
1467
|
-
* 2. EasyForm的children
|
|
1468
|
-
* 3.
|
|
1498
|
+
* 2. EasyForm的children列表会进行网格化布局
|
|
1499
|
+
* 3. 自定义栅格占位格数的4中方式
|
|
1500
|
+
* 3.1 设置FormItemWrapper、FormItemText组件span属性；
|
|
1501
|
+
* 3.2 使用 EasyFormItemSpan 包裹children item，设置span属性
|
|
1502
|
+
* 3.3 使用 <BoxGrid.Col span={24} ></BoxGrid.Col> 包裹，设置响应式属性
|
|
1503
|
+
* 3.4 设置 EasyForm isPure = true设置纯净模式，对EasyForm的子节点不做任何包装处理
|
|
1504
|
+
* 4. EasyForm可嵌套使用，嵌套内部的<EasyForm />节点Form相关属性失效，例如属性form、initialValues等都失效
|
|
1469
1505
|
* <EasyForm form={form}>
|
|
1470
1506
|
* ....
|
|
1471
1507
|
* <EasyForm>...</EasyForm>
|
|
@@ -1473,14 +1509,14 @@ export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
|
|
|
1473
1509
|
* <EasyForm>...</EasyForm>
|
|
1474
1510
|
* ....
|
|
1475
1511
|
* </EasyForm>
|
|
1476
|
-
*
|
|
1477
|
-
*
|
|
1478
|
-
*
|
|
1479
|
-
*
|
|
1480
|
-
*
|
|
1481
|
-
*
|
|
1482
|
-
*
|
|
1483
|
-
*
|
|
1512
|
+
* 5. 布局网格以当前组件的宽度来计算的，不是屏幕宽度
|
|
1513
|
+
* 6. EasyForm 子节点包含 hidden = true 会被忽略
|
|
1514
|
+
* 7. 通过 column 可定义一行显示几列FormItem
|
|
1515
|
+
* 8. 通过 labelItemVertical 可定义 formitem 竖直布局
|
|
1516
|
+
* 9. 通过 formItemGap 可定义 formItem竖直方向间隙
|
|
1517
|
+
* 10. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
|
|
1518
|
+
* 11. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
|
|
1519
|
+
* 12. 自定义栅格占位格数，见下方`例如`
|
|
1484
1520
|
|
|
1485
1521
|
* 例如
|
|
1486
1522
|
* <EasyForm column={3}>
|
|
@@ -1503,7 +1539,10 @@ export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
|
|
|
1503
1539
|
* </EasyForm>
|
|
1504
1540
|
* ```
|
|
1505
1541
|
*/
|
|
1506
|
-
export declare const EasyForm:
|
|
1542
|
+
export declare const EasyForm: {
|
|
1543
|
+
(props: EasyFormProps): import("react/jsx-runtime").JSX.Element;
|
|
1544
|
+
domTypeName: string;
|
|
1545
|
+
};
|
|
1507
1546
|
export type EditableCardDataIndex = string | string[];
|
|
1508
1547
|
export interface EditableCardOperation {
|
|
1509
1548
|
index: number;
|
|
@@ -3710,6 +3749,8 @@ export declare const FormItemGroup: {
|
|
|
3710
3749
|
};
|
|
3711
3750
|
export type FormItemHiddenProps = {
|
|
3712
3751
|
name: FormItemProps["name"];
|
|
3752
|
+
className?: string;
|
|
3753
|
+
style?: CSSProperties;
|
|
3713
3754
|
};
|
|
3714
3755
|
export declare const FormItemHidden: {
|
|
3715
3756
|
(props: FormItemHiddenProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -3718,6 +3759,8 @@ export declare const FormItemHidden: {
|
|
|
3718
3759
|
export type FormItemSpanProps = {
|
|
3719
3760
|
span?: number;
|
|
3720
3761
|
children?: React.ReactNode;
|
|
3762
|
+
className?: string;
|
|
3763
|
+
style?: React.CSSProperties;
|
|
3721
3764
|
};
|
|
3722
3765
|
/**
|
|
3723
3766
|
* 包裹EasyForm children item元素, 设置自定义栅格占位格数（使用在EasyForm一级子节点下生效）
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flatbiz/antd",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.38",
|
|
4
4
|
"description": "flat-biz ui components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"typings": "index.d.ts",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
"@dimjs/utils": ">=1.5.1",
|
|
34
34
|
"@flatbiz/utils": ">=4.0.32",
|
|
35
35
|
"@wove/react": ">=1.2.23",
|
|
36
|
+
"ahooks": ">=3.7.11",
|
|
36
37
|
"antd": ">=5.11.0",
|
|
37
38
|
"dayjs": ">=1.11.9",
|
|
38
39
|
"react": ">=18.2.0",
|
|
39
|
-
"react-dom": ">=18.2.0"
|
|
40
|
-
"ahooks": ">=3.7.11"
|
|
40
|
+
"react-dom": ">=18.2.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@ant-design/icons": "^4.8.0",
|
|
@@ -47,34 +47,34 @@
|
|
|
47
47
|
"@dimjs/utils": "^1.5.1",
|
|
48
48
|
"@flatbiz/utils": "^4.0.32",
|
|
49
49
|
"@wove/react": "^1.2.23",
|
|
50
|
+
"ace-builds": "^1.32.2",
|
|
51
|
+
"ahooks": "^3.7.11",
|
|
50
52
|
"antd": "5.11.0",
|
|
51
53
|
"dayjs": "1.11.9",
|
|
52
54
|
"dequal": "2.0.3",
|
|
53
55
|
"react": "18.2.0",
|
|
56
|
+
"react-ace": "^10.1.0",
|
|
54
57
|
"react-dom": "18.2.0",
|
|
55
|
-
"ahooks": "^3.7.11",
|
|
56
58
|
"react-is": "^18.2.0",
|
|
57
|
-
"react-ace": "^10.1.0",
|
|
58
|
-
"ace-builds": "^1.32.2",
|
|
59
59
|
"sql-formatter": "^15.0.2",
|
|
60
60
|
"xml-formatter": "^3.6.2"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"dequal": "2.0.3",
|
|
64
|
-
"pubsub-js": "1.9.4",
|
|
65
|
-
"@tinymce/tinymce-react": "4.3.0",
|
|
66
63
|
"@dnd-kit/core": "^6.0.8",
|
|
67
64
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
68
65
|
"@dnd-kit/sortable": "^7.0.2",
|
|
69
66
|
"@dnd-kit/utilities": "^3.2.1",
|
|
70
|
-
"
|
|
71
|
-
"react-split": "2.0.14",
|
|
72
|
-
"react-is": "^18.2.0",
|
|
73
|
-
"react-ace": "^10.1.0",
|
|
67
|
+
"@tinymce/tinymce-react": "4.3.0",
|
|
74
68
|
"ace-builds": "^1.32.2",
|
|
69
|
+
"dequal": "2.0.3",
|
|
70
|
+
"pubsub-js": "1.9.4",
|
|
71
|
+
"react-ace": "^10.1.0",
|
|
72
|
+
"react-is": "^18.2.0",
|
|
73
|
+
"react-split": "2.0.14",
|
|
74
|
+
"simple-mind-map": "^0.10.6",
|
|
75
75
|
"sql-formatter": "^15.0.2",
|
|
76
|
-
"
|
|
77
|
-
"
|
|
76
|
+
"use-intl": "3.0.0-rc.6",
|
|
77
|
+
"xml-formatter": "^3.6.2"
|
|
78
78
|
},
|
|
79
79
|
"gitHead": "4378d433b73ee28fd7cb4c64bed8571f993eb5a9"
|
|
80
|
-
}
|
|
80
|
+
}
|