@flatbiz/antd 4.4.24 → 4.4.26
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/dialog-drawer/index.js +1 -1
- package/esm/dialog-drawer/index.js.map +1 -1
- package/esm/label-value-render/index.js +1 -1
- package/esm/label-value-render/index.js.map +1 -1
- package/esm/text-overflow/index.js +1 -1
- package/esm/text-overflow/index.js.map +1 -1
- package/index.d.ts +6 -0
- package/package.json +11 -11
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{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as e}from"@dimjs/utils/cjs/class-names";import{createContext as a,useContext as t,useMemo as n,useRef as i,
|
|
4
|
+
import{_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as e}from"@dimjs/utils/cjs/class-names";import{createContext as a,useContext as t,useMemo as n,useRef as i,useEffect as l}from"react";import{jsx as o}from"react/jsx-runtime";import{isNumber as s}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 u={xs:8,sm:16,md:16,lg:24,xl:24,xxl:32};var v={top:"flex-start",middle:"center",bottom:"flex-end",stretch:"stretch"};var p={start:"flex-start",end:"flex-end",center:"center","space-around":"space-around","space-between":"space-between","space-evenly":"space-evenly"};var f={boxBreakpoint:"lg",defaultGrid:d,horizontalGap:10,verticalGap:10};var m=a(f);var x=function a(i){var l=i.children,s=i.className,c=i.style;var d=t(m),u=d.defaultGrid,v=d.horizontalGap,p=d.boxBreakpoint;var f=n((function(){return i.span||i[p||"lg"]||(u==null?void 0:u[p||"lg"])||8}),[i,p,u]);return o("div",{className:e(s,"box-grad-col"),style:r({},c,{flex:"0 0 "+f/24*100+"%",maxWidth:f/24*100+"%",padding:"0 "+v/2+"px"}),children:l})};x["domTypeName"]="BoxGridCol";var h=function r(e){var a=c(e)||{},t=a.width;var i=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:i,isInit:!!t,haveWidth:!!t}};var g=function e(a,t){if(a===void 0){a=u}return n((function(){var e;var n;var i=function e(a){if(typeof a==="number"){return a}if(typeof a==="object"){return r({},u,a)[t]}};if(Array.isArray(a)){var l=a,o=l[0],c=l[1];e=i(o);n=i(c)}else{e=i(a);n=f.verticalGap}return{horizontalGap:s(e)?e:f.horizontalGap,verticalGap:s(n)?n:f.verticalGap}}),[a,t])};var G=function a(t){var n=t.defaultGrid,s=n===void 0?d:n,c=t.children,u=t.className,x=t.style,G=t.gutter,y=t.align,b=t.justify,B=t.onBoxBreakpointChange;var j=i(null);var k=h(j),w=k.boxBreakpoint,z=k.haveWidth;var N=g(G,w),C=N.horizontalGap,W=N.verticalGap;l((function(){B==null?void 0:B(w)}),[w]);return o(m.Provider,{value:r({},f,{defaultGrid:r({},d,s),boxBreakpoint:w,horizontalGap:C,verticalGap:W}),children:o("div",{className:e("box-grad-root",u),ref:j,style:x,children:o("div",{className:"box-grad-row",style:{alignItems:y?v[y]:"normal",justifyContent:b?p[b]:"normal",marginLeft:"-"+C/2+"px",marginRight:"-"+C/2+"px",rowGap:W+"px",opacity:z?1:0},children:c})})})};var y=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 b={Row:G,Col:x,getGridMapByRange:y};export{b as BoxGrid,h 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 isInit: !!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, useState } 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 } = useBoxBreakpoint(comRef);\n const { horizontalGap, verticalGap } = useGutter(gutter, boxBreakpoint);\n const [isInit, setisInit] = useState(true);\n\n useEffect(() => {\n setisInit(false);\n }, [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 >\n {/* 是否初始化,计算尺寸初始会闪一下,这里初始时不渲染 */}\n {!isInit && 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 * 网格响应式布局,默认值:{ 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","useGutter","gutter","getCommonGutter","Array","isArray","_gutter","h","v","_isNumber","Row","_props$defaultGrid","align","justify","onBoxBreakpointChange","comRef","useRef","_useBoxBreakpoint","_useGutter","_useState","useState","setisInit","useEffect","Provider","value","ref","alignItems","justifyContent","marginLeft","marginRight","rowGap","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 { 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 * 网格响应式布局,默认值:{ 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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"}
|
|
@@ -6,5 +6,5 @@ import './../types/index.css';
|
|
|
6
6
|
import './../fba-utils/index.css';
|
|
7
7
|
import './index.css';
|
|
8
8
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
9
|
-
import{isString as e}from"@dimjs/lang/cjs/is-string";import{_ as t,a as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as o}from"@dimjs/lang/cjs/is-promise";import{hooks as n}from"@wove/react/cjs/hooks";import{dom as i}from"@flatbiz/utils";import{Form as a,Space as l,Drawer as d}from"antd";import{useState as s,useMemo as c}from"react";import{createRoot as m}from"react-dom/client";import{ButtonWrapper as u}from"../button-wrapper/index.js";import{C as p}from"../index-7f4ad045.js";import{fbaHooks as f}from"../fba-hooks/index.js";import{C as v}from"../context-1f2093c6.js";import{jsx as j,jsxs as
|
|
9
|
+
import{isString as e}from"@dimjs/lang/cjs/is-string";import{_ as t,a as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isPromise as o}from"@dimjs/lang/cjs/is-promise";import{hooks as n}from"@wove/react/cjs/hooks";import{dom as i}from"@flatbiz/utils";import{Form as a,Space as l,Drawer as d}from"antd";import{useState as s,useMemo as c}from"react";import{createRoot as m}from"react-dom/client";import{ButtonWrapper as u}from"../button-wrapper/index.js";import{C as p}from"../index-7f4ad045.js";import{fbaHooks as f}from"../fba-hooks/index.js";import{C as v}from"../context-1f2093c6.js";import{jsx as j,jsxs as h}from"react/jsx-runtime";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/utils/cjs/class-names";import"../fba-utils/index.js";import"@dimjs/lang/cjs/is-array";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"@dimjs/utils/cjs/extend";import"../use-responsive-point-21b8c601.js";import"@wove/react/cjs/create-ctx";var x=["divElement","elementId","onOk","onCancel","content","configProviderProps","okText","cancelText","okButtonExtraProps","cancelButtonExtraProps","operatePosition","operateRender","width","okHidden","cancelHidden","extra"];var y=function e(i){var m;var y=i.divElement,w=i.elementId,g=i.onOk,k=i.onCancel,C=i.content,b=i.configProviderProps,P=i.okText,_=i.cancelText,E=i.okButtonExtraProps,B=i.cancelButtonExtraProps,I=i.operatePosition,R=I===void 0?"footer":I,W=i.operateRender,H=i.width,O=i.okHidden,T=i.cancelHidden,z=i.extra,F=r(i,x);var S=s(true),D=S[0],Y=S[1];var A=s(),L=A[0],N=A[1];var U=a.useForm(),q=U[0];var G=f.useResponsivePoint()||"";var J=n.useCallbackRef((function(){try{delete window[w]}catch(e){}Y(false)}));f.useEffectCustom((function(){window[w]=J}),[J]);var K=n.useCallbackRef((function(e){if(k){var t=k(q,e);if(t&&o(t)){return t.then(J)}}return J()}));var M=n.useCallbackRef((function(e){if(g){var t=g(q,e);if(t&&o(t)){return t.then(J)}}return J()}));var Q=h(l,{children:[T||B!=null&&B.hidden?null:j(u,t({},B,{onClick:K,children:_||"取消"})),O||E!=null&&E.hidden?null:j(u,t({type:"primary"},E,{onClick:M,children:P||"提交"}))]});var V=function e(){if(W){return W(q)}if(!O||!T){return Q}return null};var X=typeof z==="function"?z(q):z;var Z=function e(t){N(t)};var $=c((function(){if(!G)return undefined;if(["xs","sm"].includes(G)){return{width:"90%",maxWidth:"90%"}}if(H){return{width:H,maxWidth:"calc(100% - 200px)"}}return{width:"40%",maxWidth:"calc(100% - 200px)"}}),[G,H]);return j(v,{value:{onClose:J,updateBodyStyle:Z},children:j(p,t({},b,{children:j(d,t({maskClosable:true,destroyOnClose:true,onClose:J,width:$==null?void 0:$.width,contentWrapperStyle:{maxWidth:$==null?void 0:$.maxWidth},footer:R==="footer"?V():null},F,{styles:t({},F.styles,{body:t({},L,(m=F.styles)==null?void 0:m.body)}),extra:R==="header"?V():X,open:D,getContainer:y,children:typeof C==="function"?C(q,{onClose:J}):C}))}))})};var w={open:function e(r){var o=i.bodyAppendDivElement(),n=o.divElement,a=o.elementId;window["__dialog_drawer_elementId"]=a;var l=m(n);l.render(j(y,t({},r,{divElement:n,elementId:a})));return{close:function e(){var t,r;(t=(r=window)[a])==null?void 0:t.call(r)}}},close:function t(){try{var r,o;var n=window["__dialog_drawer_elementId"];if(e(n))(r=(o=window)[n])==null?void 0:r.call(o)}catch(e){}}};export{w as dialogDrawer};
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-drawer/dialog-drawer.tsx"],"sourcesContent":["import { isPromise, isString } from '@dimjs/lang';\nimport { dom, TNoopDefine } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Drawer, DrawerProps, Form, FormInstance, Space } from 'antd';\nimport { CSSProperties, ReactElement, ReactNode, useMemo, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { ConfigProviderWrapper, ConfigProviderWrapperProps } from '../config-provider-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { BodyAppendDivElementProps } from '../_utils/dom';\nimport { CtxProvider } from './context';\n\nexport type DialogDrawerProps = Omit<\n DrawerProps,\n 'onOk' | 'onCancel' | 'getContainer' | 'open' | 'open' | 'footer' | 'extra'\n> & {\n okText?: string | ReactElement;\n cancelText?: string | ReactElement;\n onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n content: string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement);\n configProviderProps?: ConfigProviderWrapperProps;\n okButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n cancelButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children'>;\n operatePosition?: 'header' | 'footer';\n operateRender?: (form: FormInstance) => ReactElement;\n okHidden?: boolean;\n cancelHidden?: boolean;\n extra?: ReactNode | ((form: FormInstance) => ReactElement);\n};\n\nconst ModalRender = (props: BodyAppendDivElementProps & DialogDrawerProps) => {\n const {\n divElement,\n elementId,\n onOk,\n onCancel,\n content,\n configProviderProps,\n okText,\n cancelText,\n okButtonExtraProps,\n cancelButtonExtraProps,\n operatePosition = 'footer',\n operateRender,\n width,\n okHidden,\n cancelHidden,\n extra,\n ...otherProps\n } = props;\n const [open, setOpen] = useState(true);\n const [innerBodyStyle, setInnerBodyStyle] = useState<CSSProperties>();\n const [form] = Form.useForm();\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const onClose = hooks.useCallbackRef(() => {\n try {\n delete window[elementId];\n } catch (error) {\n //\n }\n setOpen(false);\n });\n\n fbaHooks.useEffectCustom(() => {\n window[elementId] = onClose;\n }, [onClose]);\n\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const operateGroup = (\n <Space>\n {cancelHidden || cancelButtonExtraProps?.hidden ? null : (\n <ButtonWrapper {...cancelButtonExtraProps} onClick={onCancelHandle}>\n {cancelText || '取消'}\n </ButtonWrapper>\n )}\n {okHidden || okButtonExtraProps?.hidden ? null : (\n <ButtonWrapper type=\"primary\" {...okButtonExtraProps} onClick={onOkHandle}>\n {okText || '提交'}\n </ButtonWrapper>\n )}\n </Space>\n );\n\n const operateRenderHandle = () => {\n if (operateRender) {\n return operateRender(form);\n }\n if (!okHidden || !cancelHidden) {\n return operateGroup;\n }\n return null;\n };\n\n const extraRender = typeof extra === 'function' ? extra(form) : extra;\n\n const updateBodyStyle = (bodyStyle?: CSSProperties) => {\n setInnerBodyStyle(bodyStyle);\n };\n\n const customSize = useMemo(() => {\n if (!screenType) return undefined;\n if (['xs', 'sm'].includes(screenType)) {\n return {\n width: '90%',\n maxWidth: '90%',\n };\n }\n return { width: '40%', maxWidth: 'calc(100% - 200px)' };\n }, [screenType]);\n\n return (\n <CtxProvider value={{ onClose, updateBodyStyle }}>\n <ConfigProviderWrapper {...configProviderProps}>\n <Drawer\n maskClosable={true}\n destroyOnClose\n onClose={onClose}\n width={customSize?.width}\n // 5.13.0 新增 styles.wrapper,并废弃 contentWrapperStyle drawerStyle maskStyle 属性\n contentWrapperStyle={{ maxWidth: customSize?.maxWidth }}\n footer={operatePosition === 'footer' ? operateRenderHandle() : null}\n {...otherProps}\n styles={{\n ...otherProps.styles,\n body: { ...innerBodyStyle, ...otherProps.styles?.body },\n // wrapper: {\n // maxWidth: customSize?.maxWidth,\n // ...otherProps.styles?.wrapper,\n // },\n }}\n extra={operatePosition === 'header' ? operateRenderHandle() : extraRender}\n open={open}\n getContainer={divElement}\n >\n {typeof content === 'function' ? content(form, { onClose }) : content}\n </Drawer>\n </ConfigProviderWrapper>\n </CtxProvider>\n );\n};\n\n/**\n * 抽屉弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogDrawer.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器(https://ant-design.antgroup.com/docs/react/compatible-style-cn)\n * 3. 需要修改默认主题风格的场景,请使用\n * const { appDialogDrawer } = FbaApp.useDialogDrawer();\n * appDialogDrawer.open({})\n * 4. 配置size属性可使用预设的弹窗尺寸,如果不使用内置尺寸可设置 size = null\n * ```\n */\nexport const dialogDrawer = {\n open: (props: DialogDrawerProps) => {\n const { divElement, elementId } = dom.bodyAppendDivElement();\n window['__dialog_drawer_elementId'] = elementId;\n const root = createRoot(divElement);\n root.render(<ModalRender {...props} divElement={divElement} elementId={elementId} />);\n return {\n close: () => {\n window[elementId]?.();\n },\n };\n },\n /**\n * ```\n * 1. 关闭最新弹框,如果有多个弹框只能关闭最后一个\n * 2. 多个弹框主动关闭,只能使用 dialogDrawer.open()返回值中的close\n * ```\n */\n close: () => {\n try {\n const elementId = window['__dialog_drawer_elementId'] as string;\n if (isString(elementId)) window[elementId]?.();\n } catch (error) {\n //\n }\n },\n};\n"],"names":["ModalRender","props","_otherProps$styles","divElement","elementId","onOk","onCancel","content","configProviderProps","okText","cancelText","okButtonExtraProps","cancelButtonExtraProps","_props$operatePositio","operatePosition","operateRender","width","okHidden","cancelHidden","extra","otherProps","_objectWithoutPropertiesLoose","_excluded","_useState","useState","open","setOpen","_useState2","innerBodyStyle","setInnerBodyStyle","_Form$useForm","Form","useForm","form","screenType","fbaHooks","useResponsivePoint","onClose","_hooks","useCallbackRef","window","error","useEffectCustom","onCancelHandle","e","response","_isPromise","then","onOkHandle","operateGroup","_jsxs","Space","children","hidden","_jsx","ButtonWrapper","_extends","onClick","type","operateRenderHandle","extraRender","updateBodyStyle","bodyStyle","customSize","useMemo","undefined","includes","maxWidth","CtxProvider","value","ConfigProviderWrapper","Drawer","maskClosable","destroyOnClose","contentWrapperStyle","footer","styles","body","getContainer","dialogDrawer","_dom$bodyAppendDivEle","dom","bodyAppendDivElement","root","createRoot","render","close","_window$elementId","_window","call","_window$elementId2","_window2","_isString"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/dialog-drawer/dialog-drawer.tsx"],"sourcesContent":["import { isPromise, isString } from '@dimjs/lang';\nimport { dom, TNoopDefine } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Drawer, DrawerProps, Form, FormInstance, Space } from 'antd';\nimport { CSSProperties, ReactElement, ReactNode, useMemo, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ButtonWrapper, ButtonWrapperProps } from '../button-wrapper';\nimport { ConfigProviderWrapper, ConfigProviderWrapperProps } from '../config-provider-wrapper';\nimport { fbaHooks } from '../fba-hooks';\nimport { BodyAppendDivElementProps } from '../_utils/dom';\nimport { CtxProvider } from './context';\n\nexport type DialogDrawerProps = Omit<\n DrawerProps,\n 'onOk' | 'onCancel' | 'getContainer' | 'open' | 'open' | 'footer' | 'extra'\n> & {\n okText?: string | ReactElement;\n cancelText?: string | ReactElement;\n onOk?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n onCancel?: (form: FormInstance, e: React.MouseEvent<HTMLElement>) => void | Promise<void>;\n content: string | ReactElement | ((form: FormInstance, operate: { onClose: TNoopDefine }) => ReactElement);\n configProviderProps?: ConfigProviderWrapperProps;\n okButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children' | 'loading'>;\n cancelButtonExtraProps?: Omit<ButtonWrapperProps, 'onClick' | 'children'>;\n operatePosition?: 'header' | 'footer';\n operateRender?: (form: FormInstance) => ReactElement;\n okHidden?: boolean;\n cancelHidden?: boolean;\n extra?: ReactNode | ((form: FormInstance) => ReactElement);\n};\n\nconst ModalRender = (props: BodyAppendDivElementProps & DialogDrawerProps) => {\n const {\n divElement,\n elementId,\n onOk,\n onCancel,\n content,\n configProviderProps,\n okText,\n cancelText,\n okButtonExtraProps,\n cancelButtonExtraProps,\n operatePosition = 'footer',\n operateRender,\n width,\n okHidden,\n cancelHidden,\n extra,\n ...otherProps\n } = props;\n const [open, setOpen] = useState(true);\n const [innerBodyStyle, setInnerBodyStyle] = useState<CSSProperties>();\n const [form] = Form.useForm();\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const onClose = hooks.useCallbackRef(() => {\n try {\n delete window[elementId];\n } catch (error) {\n //\n }\n setOpen(false);\n });\n\n fbaHooks.useEffectCustom(() => {\n window[elementId] = onClose;\n }, [onClose]);\n\n const onCancelHandle = hooks.useCallbackRef((e) => {\n if (onCancel) {\n const response = onCancel(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const onOkHandle = hooks.useCallbackRef((e) => {\n if (onOk) {\n const response = onOk(form, e);\n if (response && isPromise(response)) {\n return response.then(onClose);\n }\n }\n return onClose();\n });\n\n const operateGroup = (\n <Space>\n {cancelHidden || cancelButtonExtraProps?.hidden ? null : (\n <ButtonWrapper {...cancelButtonExtraProps} onClick={onCancelHandle}>\n {cancelText || '取消'}\n </ButtonWrapper>\n )}\n {okHidden || okButtonExtraProps?.hidden ? null : (\n <ButtonWrapper type=\"primary\" {...okButtonExtraProps} onClick={onOkHandle}>\n {okText || '提交'}\n </ButtonWrapper>\n )}\n </Space>\n );\n\n const operateRenderHandle = () => {\n if (operateRender) {\n return operateRender(form);\n }\n if (!okHidden || !cancelHidden) {\n return operateGroup;\n }\n return null;\n };\n\n const extraRender = typeof extra === 'function' ? extra(form) : extra;\n\n const updateBodyStyle = (bodyStyle?: CSSProperties) => {\n setInnerBodyStyle(bodyStyle);\n };\n\n const customSize = useMemo(() => {\n if (!screenType) return undefined;\n if (['xs', 'sm'].includes(screenType)) {\n return {\n width: '90%',\n maxWidth: '90%',\n };\n }\n if (width) {\n return { width: width, maxWidth: 'calc(100% - 200px)' };\n }\n return { width: '40%', maxWidth: 'calc(100% - 200px)' };\n }, [screenType, width]);\n\n return (\n <CtxProvider value={{ onClose, updateBodyStyle }}>\n <ConfigProviderWrapper {...configProviderProps}>\n <Drawer\n maskClosable={true}\n destroyOnClose\n onClose={onClose}\n width={customSize?.width}\n // 5.13.0 新增 styles.wrapper,并废弃 contentWrapperStyle drawerStyle maskStyle 属性\n contentWrapperStyle={{ maxWidth: customSize?.maxWidth }}\n footer={operatePosition === 'footer' ? operateRenderHandle() : null}\n {...otherProps}\n styles={{\n ...otherProps.styles,\n body: { ...innerBodyStyle, ...otherProps.styles?.body },\n // wrapper: {\n // maxWidth: customSize?.maxWidth,\n // ...otherProps.styles?.wrapper,\n // },\n }}\n extra={operatePosition === 'header' ? operateRenderHandle() : extraRender}\n open={open}\n getContainer={divElement}\n >\n {typeof content === 'function' ? content(form, { onClose }) : content}\n </Drawer>\n </ConfigProviderWrapper>\n </CtxProvider>\n );\n};\n\n/**\n * 抽屉弹框\n * ```\n * 1. 可嵌套使用\n * 2. 为什么不推荐使用\n * dialogDrawer.open 打开的内容无法适配兼容自定义主题、无法适配兼容旧版浏览器、无法兼容国际化\n * 适配兼容旧版浏览器(https://ant-design.antgroup.com/docs/react/compatible-style-cn)\n * 3. 需要修改默认主题风格的场景,请使用\n * const { appDialogDrawer } = FbaApp.useDialogDrawer();\n * appDialogDrawer.open({})\n * 4. 配置size属性可使用预设的弹窗尺寸,如果不使用内置尺寸可设置 size = null\n * ```\n */\nexport const dialogDrawer = {\n open: (props: DialogDrawerProps) => {\n const { divElement, elementId } = dom.bodyAppendDivElement();\n window['__dialog_drawer_elementId'] = elementId;\n const root = createRoot(divElement);\n root.render(<ModalRender {...props} divElement={divElement} elementId={elementId} />);\n return {\n close: () => {\n window[elementId]?.();\n },\n };\n },\n /**\n * ```\n * 1. 关闭最新弹框,如果有多个弹框只能关闭最后一个\n * 2. 多个弹框主动关闭,只能使用 dialogDrawer.open()返回值中的close\n * ```\n */\n close: () => {\n try {\n const elementId = window['__dialog_drawer_elementId'] as string;\n if (isString(elementId)) window[elementId]?.();\n } catch (error) {\n //\n }\n },\n};\n"],"names":["ModalRender","props","_otherProps$styles","divElement","elementId","onOk","onCancel","content","configProviderProps","okText","cancelText","okButtonExtraProps","cancelButtonExtraProps","_props$operatePositio","operatePosition","operateRender","width","okHidden","cancelHidden","extra","otherProps","_objectWithoutPropertiesLoose","_excluded","_useState","useState","open","setOpen","_useState2","innerBodyStyle","setInnerBodyStyle","_Form$useForm","Form","useForm","form","screenType","fbaHooks","useResponsivePoint","onClose","_hooks","useCallbackRef","window","error","useEffectCustom","onCancelHandle","e","response","_isPromise","then","onOkHandle","operateGroup","_jsxs","Space","children","hidden","_jsx","ButtonWrapper","_extends","onClick","type","operateRenderHandle","extraRender","updateBodyStyle","bodyStyle","customSize","useMemo","undefined","includes","maxWidth","CtxProvider","value","ConfigProviderWrapper","Drawer","maskClosable","destroyOnClose","contentWrapperStyle","footer","styles","body","getContainer","dialogDrawer","_dom$bodyAppendDivEle","dom","bodyAppendDivElement","root","createRoot","render","close","_window$elementId","_window","call","_window$elementId2","_window2","_isString"],"mappings":"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"}
|
|
@@ -6,5 +6,5 @@ import './../text-symbol-wrapper/index.css';
|
|
|
6
6
|
import './../tips-wrapper/index.css';
|
|
7
7
|
import './index.css';
|
|
8
8
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
9
|
-
import{hooks as e}from"@wove/react/cjs/hooks";import{classNames as r}from"@dimjs/utils/cjs/class-names";import{_ as l}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useState as i,useMemo as t,Fragment as s}from"react";import{arrayTotal as a,isUndefinedOrNull as n}from"@flatbiz/utils";import{BoxGrid as o}from"../box-grid/index.js";import{fbaHooks as u}from"../fba-hooks/index.js";import{TextOverflow as p}from"../text-overflow/index.js";import{TextSymbolWrapper as m}from"../text-symbol-wrapper/index.js";import{TipsWrapper as d}from"../tips-wrapper/index.js";import{jsx as f,jsxs as v}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";import"antd";import"@dimjs/lang/cjs/is-string";import"@ant-design/icons/es/icons/QuestionCircleOutlined";var c=function e(r){var i=[];var t=0;var s=[];for(var n=0;n<r.length;n++){var o=r[n];var u=o.grid;var p=l({},o,{grid:u});if(t+u<=24&&u>0){t+=u;s.push(p)}else{i.push(s);t=u;s=[p]}}if(s.length>0){i.push(s)}if(i.length>0){i=i.map((function(e,r){if(e.length===1){e[0].grid=24}else{var l=a(e,"grid");var t=e[e.length-1];if(l<24){t.grid=24-l+t.grid}}if(r===i.length-1){return e.map((function(e){e.isLast=true;return e}))}return e}))}var m=[];i.forEach((function(e){m=m.concat(e)}));console.log("resultsFt",m);return m};var x=function a(x){var g=u.useResponsivePoint()||"";var h=i(),b=h[0],j=h[1];var y=x.column,w=x.forceColumn,k=x.labelAlign,B=x.labelWidth,N=x.options,C=x.border,P=x.width;var R=n(x.ellipsis)?true:x.ellipsis;var S=!C?g==="xs"||b==="xs":false;var T=t((function(){if(w){var e=24/w;return{xs:e,sm:e,md:e,lg:e,xl:e,xxl:e}}var r={1:{xs:24,sm:24,md:24,lg:24,xl:24,xxl:24},2:{xs:24,sm:12,md:12,lg:12,xl:12,xxl:12},3:{xs:24,sm:12,md:12,lg:8,xl:8,xxl:8},4:{xs:24,sm:12,md:12,lg:6,xl:6,xxl:6}};return!y?r[4]:r[y]}),[y,w]);var q=t((function(){if(!b)return undefined;var e=[];N.forEach((function(r){if(!r.hidden){var i=undefined;if(r.span){i=r.span*6;if(b==="xs"){i=24}else if(b==="sm"){i=i>12?i:12}}e.push(l({},r,{grid:i?i:T[b]}))}}));return c(e.filter(Boolean))}),[b,T]);var E=C?"":":";var L=function e(){return q==null?void 0:q.map((function(e,i){var t=n(e.ellipsis)?R:e.ellipsis;var a=S?undefined:B||100;var u=""+e.label+E;if(e.tips&&t){u=f(d,{tipType:"tooltip",tooltipProps:{title:e.tips},children:f(p,{text:u})})}else if(e.tips){u=f(d,{tipType:"tooltip",tooltipProps:{title:e.tips},children:u})}else if(t){u=f(p,{text:u})}return f(o.Col,l({},T,{span:e.grid,className:r("label-value-tr",{"label-value-last-tr":e.isLast}),children:!e.replenish?v(s,{children:[f("span",{className:"label-value-label",style:l({width:a},x.labelStyle),children:e.required?f(m,{text:u,symbolType:"required"}):u}),t?f("span",{className:"label-value-value",style:x.valueStyle,children:f(p,{text:e.value})}):f("span",{className:"label-value-value",style:l({wordBreak:"break-all"},x.valueStyle),children:e.value})]}):f(s,{})}),i)})).filter(Boolean)};var _=e.useCallbackRef((function(e){j(e)}));var z=t((function(){if(["xs","sm"].includes(g)||!P){return{}}return{width:P}}),[g]);var A=k||(C?"left":"right");return f(o.Row,{style:l({},z,x.style),className:r("label-value-render","label-value-render-"+A,{"label-value-render-border":C,"label-value-render-vertical":S},x.className),gutter:C?[0,0]:[30,0],onBoxBreakpointChange:_,children:L()})};export{x as LabelValueRender};
|
|
9
|
+
import{hooks as e}from"@wove/react/cjs/hooks";import{classNames as r}from"@dimjs/utils/cjs/class-names";import{_ as l}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useState as i,useMemo as t,Fragment as s}from"react";import{arrayTotal as a,isUndefinedOrNull as n}from"@flatbiz/utils";import{BoxGrid as o}from"../box-grid/index.js";import{fbaHooks as u}from"../fba-hooks/index.js";import{TextOverflow as p}from"../text-overflow/index.js";import{TextSymbolWrapper as m}from"../text-symbol-wrapper/index.js";import{TipsWrapper as d}from"../tips-wrapper/index.js";import{jsx as f,jsxs as v}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";import"antd";import"@dimjs/lang/cjs/is-string";import"@ant-design/icons/es/icons/QuestionCircleOutlined";var c=function e(r){var i=[];var t=0;var s=[];for(var n=0;n<r.length;n++){var o=r[n];var u=o.grid;var p=l({},o,{grid:u});if(t+u<=24&&u>0){t+=u;s.push(p)}else{i.push(s);t=u;s=[p]}}if(s.length>0){i.push(s)}if(i.length>0){i=i.map((function(e,r){if(e.length===1){e[0].grid=24}else{var l=a(e,"grid");var t=e[e.length-1];if(l<24){t.grid=24-l+t.grid}}if(r===i.length-1){return e.map((function(e){e.isLast=true;return e}))}return e}))}var m=[];i.forEach((function(e){m=m.concat(e)}));console.log("resultsFt",m);return m};var x=function a(x){var g=u.useResponsivePoint()||"";var h=i(),b=h[0],j=h[1];var y=x.column,w=x.forceColumn,k=x.labelAlign,B=x.labelWidth,N=x.options,C=x.border,P=x.width;var R=n(x.ellipsis)?true:x.ellipsis;var S=!C?g==="xs"||b==="xs":false;var T=t((function(){if(w){var e=24/w;return{xs:e,sm:e,md:e,lg:e,xl:e,xxl:e}}var r={1:{xs:24,sm:24,md:24,lg:24,xl:24,xxl:24},2:{xs:24,sm:12,md:12,lg:12,xl:12,xxl:12},3:{xs:24,sm:12,md:12,lg:8,xl:8,xxl:8},4:{xs:24,sm:12,md:12,lg:6,xl:6,xxl:6}};return!y?r[4]:r[y]}),[y,w]);var q=t((function(){if(!b)return undefined;var e=[];N.forEach((function(r){if(!r.hidden){var i=undefined;if(r.span){i=r.span*6;if(b==="xs"){i=24}else if(b==="sm"){i=i>12?i:12}}e.push(l({},r,{grid:i?i:T[b]}))}}));return c(e.filter(Boolean))}),[b,T,N]);var E=C?"":":";var L=function e(){return q==null?void 0:q.map((function(e,i){var t=n(e.ellipsis)?R:e.ellipsis;var a=S?undefined:B||100;var u=""+e.label+E;if(e.tips&&t){u=f(d,{tipType:"tooltip",tooltipProps:{title:e.tips},children:f(p,{text:u})})}else if(e.tips){u=f(d,{tipType:"tooltip",tooltipProps:{title:e.tips},children:u})}else if(t){u=f(p,{text:u})}return f(o.Col,l({},T,{span:e.grid,className:r("label-value-tr",{"label-value-last-tr":e.isLast}),children:!e.replenish?v(s,{children:[f("span",{className:"label-value-label",style:l({width:a},x.labelStyle),children:e.required?f(m,{text:u,symbolType:"required"}):u}),t?f("span",{className:"label-value-value",style:x.valueStyle,children:f(p,{text:e.value})}):f("span",{className:"label-value-value",style:l({wordBreak:"break-all"},x.valueStyle),children:e.value})]}):f(s,{})}),i)})).filter(Boolean)};var _=e.useCallbackRef((function(e){j(e)}));var z=t((function(){if(["xs","sm"].includes(g)||!P){return{}}return{width:P}}),[g]);var A=k||(C?"left":"right");return f(o.Row,{style:l({},z,x.style),className:r("label-value-render","label-value-render-"+A,{"label-value-render-border":C,"label-value-render-vertical":S},x.className),gutter:C?[0,0]:[30,0],onBoxBreakpointChange:_,children:L()})};export{x as LabelValueRender};
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/label-value-render/utils.ts","@flatbiz/antd/src/label-value-render/label-value.tsx"],"sourcesContent":["import { arrayTotal } from '@flatbiz/utils';\nimport { TLabelValueRenderItem } from './types';\n\nexport const getRenderGrid = (dataList: TLabelValueRenderItem[]) => {\n let results: TLabelValueRenderItem[][] = [];\n\n let currentSum = 0;\n let currentArr: TLabelValueRenderItem[] = [];\n for (let i = 0; i < dataList.length; i++) {\n const item = dataList[i];\n const grid = item.grid as number;\n const temp = {\n ...item,\n grid: grid,\n } as TLabelValueRenderItem;\n if (currentSum + grid <= 24 && grid > 0) {\n currentSum += grid;\n currentArr.push(temp);\n } else {\n results.push(currentArr);\n currentSum = grid;\n currentArr = [temp];\n }\n }\n\n if (currentArr.length > 0) {\n results.push(currentArr);\n }\n if (results.length > 0) {\n results = results.map((item, index) => {\n if (item.length === 1) {\n item[0].grid = 24;\n } else {\n const total = arrayTotal(item, 'grid');\n const lastItem = item[item.length - 1];\n if (total < 24) {\n lastItem.grid = 24 - total + lastItem.grid;\n }\n }\n if (index === results.length - 1) {\n return item.map((temp) => {\n temp.isLast = true;\n return temp;\n });\n }\n return item;\n });\n }\n\n let resultsFt: TLabelValueRenderItem[] = [];\n results.forEach((item) => {\n resultsFt = resultsFt.concat(item);\n });\n console.log('resultsFt', resultsFt);\n return resultsFt;\n};\n","import { CSSProperties, Fragment, ReactElement, useMemo, useState } from 'react';\n\nimport { classNames } from '@dimjs/utils';\nimport { isUndefinedOrNull } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { BoxGrid } from '../box-grid';\nimport { TBoxBreakpoint } from '../box-grid/type';\nimport { fbaHooks } from '../fba-hooks';\nimport { TextOverflow } from '../text-overflow';\nimport { TextSymbolWrapper } from '../text-symbol-wrapper';\nimport { TipsWrapper } from '../tips-wrapper';\nimport './style.less';\nimport { TLabelValueItem, TLabelValueRenderItem } from './types';\nimport { getRenderGrid } from './utils';\n\nexport type LabelValueRenderProps = {\n className?: string;\n style?: CSSProperties;\n /**\n * 定义一行显示几列, 默认值:4\n * ```\n * 1. 当外层宽度尺寸大于 992px(lg) 时,一行显示几列\n * 1. 当外层宽度尺寸小于992px(lg),为xs、sm、md情况下不受column值影响,响应式布局\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 options: TLabelValueItem[];\n /**\n * 超过宽度将自动省略,默认值:true\n */\n ellipsis?: boolean;\n /** 是否添加边框 */\n border?: boolean;\n /** label对齐方式 */\n labelAlign?: 'left' | 'right' | 'center';\n /** label 宽度,默认值:100 */\n labelWidth?: number;\n width?: number;\n /** label 样式 */\n labelStyle?: CSSProperties;\n /** value 样式 */\n valueStyle?: CSSProperties;\n};\n\n/**\n * label+value 列表布局\n * ```\n * 1. 可设置超出隐藏、必填标识、设置隐藏、添加说明标签等功能\n * 2. 可自定义设置占用网格列数\n * 3. 内置响应式布局\n * ```\n */\nexport const LabelValueRender = (props: LabelValueRenderProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n const [breakpoint, setBreakpoint] = useState<TBoxBreakpoint>();\n\n const { column, forceColumn, labelAlign, labelWidth, options, border, width } = props;\n\n const ellipsis = isUndefinedOrNull(props.ellipsis) ? true : props.ellipsis;\n\n const isVertical = !border ? screenType === 'xs' || breakpoint === 'xs' : false;\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 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 !column ? columnMap[4] : columnMap[column];\n }, [column, forceColumn]);\n\n const renderList = useMemo(() => {\n if (!breakpoint) return undefined;\n const dataListNew: TLabelValueRenderItem[] = [];\n options.forEach((item) => {\n if (!item.hidden) {\n let grid: number | undefined = undefined;\n if (item.span) {\n grid = item.span * 6;\n if (breakpoint === 'xs') {\n grid = 24;\n } else if (breakpoint === 'sm') {\n grid = grid > 12 ? grid : 12;\n }\n }\n dataListNew.push({\n ...item,\n grid: grid ? grid : gridSize[breakpoint],\n });\n }\n });\n\n return getRenderGrid(dataListNew.filter(Boolean));\n }, [breakpoint, gridSize]);\n\n const colon = border ? '' : ':';\n\n const getFormRowChildren = () => {\n return renderList\n ?.map((item, index) => {\n const ellipsisFt = isUndefinedOrNull(item.ellipsis) ? ellipsis : item.ellipsis;\n\n const width = isVertical ? undefined : labelWidth || 100;\n\n let labelContent: ReactElement | string = `${item.label}${colon}`;\n\n if (item.tips && ellipsisFt) {\n labelContent = (\n <TipsWrapper tipType=\"tooltip\" tooltipProps={{ title: item.tips }}>\n <TextOverflow text={labelContent as unknown as string} />\n </TipsWrapper>\n );\n } else if (item.tips) {\n labelContent = (\n <TipsWrapper tipType=\"tooltip\" tooltipProps={{ title: item.tips }}>\n {labelContent}\n </TipsWrapper>\n );\n } else if (ellipsisFt) {\n labelContent = <TextOverflow text={labelContent as unknown as string} />;\n }\n\n return (\n <BoxGrid.Col\n key={index}\n {...gridSize}\n span={item.grid}\n className={classNames('label-value-tr', { 'label-value-last-tr': item.isLast })}\n >\n {!item.replenish ? (\n <Fragment>\n <span className=\"label-value-label\" style={{ width, ...props.labelStyle }}>\n {item.required ? (\n <TextSymbolWrapper text={labelContent} symbolType=\"required\" />\n ) : (\n labelContent\n )}\n </span>\n {ellipsisFt ? (\n <span className=\"label-value-value\" style={props.valueStyle}>\n <TextOverflow text={item.value as string} />\n </span>\n ) : (\n <span\n className=\"label-value-value\"\n style={{\n wordBreak: 'break-all',\n ...props.valueStyle,\n }}\n >\n {item.value}\n </span>\n )}\n </Fragment>\n ) : (\n <Fragment />\n )}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const onBoxBreakpointChange = hooks.useCallbackRef((breakpoint: TBoxBreakpoint) => {\n setBreakpoint(breakpoint);\n });\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType]);\n\n const align = labelAlign || (border ? 'left' : 'right');\n\n return (\n <BoxGrid.Row\n style={{ ...innerStyle, ...props.style }}\n className={classNames(\n 'label-value-render',\n `label-value-render-${align}`,\n {\n 'label-value-render-border': border,\n 'label-value-render-vertical': isVertical,\n },\n props.className,\n )}\n gutter={border ? [0, 0] : [30, 0]}\n onBoxBreakpointChange={onBoxBreakpointChange}\n >\n {getFormRowChildren()}\n </BoxGrid.Row>\n );\n};\n"],"names":["getRenderGrid","dataList","results","currentSum","currentArr","i","length","item","grid","temp","_extends","push","map","index","total","arrayTotal","lastItem","isLast","resultsFt","forEach","concat","console","log","LabelValueRender","props","screenType","fbaHooks","useResponsivePoint","_useState","useState","breakpoint","setBreakpoint","column","forceColumn","labelAlign","labelWidth","options","border","width","ellipsis","isUndefinedOrNull","isVertical","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","renderList","undefined","dataListNew","hidden","span","filter","Boolean","colon","getFormRowChildren","ellipsisFt","labelContent","label","tips","_jsx","TipsWrapper","tipType","tooltipProps","title","children","TextOverflow","text","BoxGrid","Col","className","_classNames","replenish","_jsxs","Fragment","style","labelStyle","required","TextSymbolWrapper","symbolType","valueStyle","value","wordBreak","onBoxBreakpointChange","_hooks","useCallbackRef","innerStyle","includes","align","Row","gutter"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/label-value-render/utils.ts","@flatbiz/antd/src/label-value-render/label-value.tsx"],"sourcesContent":["import { arrayTotal } from '@flatbiz/utils';\nimport { TLabelValueRenderItem } from './types';\n\nexport const getRenderGrid = (dataList: TLabelValueRenderItem[]) => {\n let results: TLabelValueRenderItem[][] = [];\n\n let currentSum = 0;\n let currentArr: TLabelValueRenderItem[] = [];\n for (let i = 0; i < dataList.length; i++) {\n const item = dataList[i];\n const grid = item.grid as number;\n const temp = {\n ...item,\n grid: grid,\n } as TLabelValueRenderItem;\n if (currentSum + grid <= 24 && grid > 0) {\n currentSum += grid;\n currentArr.push(temp);\n } else {\n results.push(currentArr);\n currentSum = grid;\n currentArr = [temp];\n }\n }\n\n if (currentArr.length > 0) {\n results.push(currentArr);\n }\n if (results.length > 0) {\n results = results.map((item, index) => {\n if (item.length === 1) {\n item[0].grid = 24;\n } else {\n const total = arrayTotal(item, 'grid');\n const lastItem = item[item.length - 1];\n if (total < 24) {\n lastItem.grid = 24 - total + lastItem.grid;\n }\n }\n if (index === results.length - 1) {\n return item.map((temp) => {\n temp.isLast = true;\n return temp;\n });\n }\n return item;\n });\n }\n\n let resultsFt: TLabelValueRenderItem[] = [];\n results.forEach((item) => {\n resultsFt = resultsFt.concat(item);\n });\n console.log('resultsFt', resultsFt);\n return resultsFt;\n};\n","import { CSSProperties, Fragment, ReactElement, useMemo, useState } from 'react';\n\nimport { classNames } from '@dimjs/utils';\nimport { isUndefinedOrNull } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { BoxGrid } from '../box-grid';\nimport { TBoxBreakpoint } from '../box-grid/type';\nimport { fbaHooks } from '../fba-hooks';\nimport { TextOverflow } from '../text-overflow';\nimport { TextSymbolWrapper } from '../text-symbol-wrapper';\nimport { TipsWrapper } from '../tips-wrapper';\nimport './style.less';\nimport { TLabelValueItem, TLabelValueRenderItem } from './types';\nimport { getRenderGrid } from './utils';\n\nexport type LabelValueRenderProps = {\n className?: string;\n style?: CSSProperties;\n /**\n * 定义一行显示几列, 默认值:4\n * ```\n * 1. 当外层宽度尺寸大于 992px(lg) 时,一行显示几列\n * 1. 当外层宽度尺寸小于992px(lg),为xs、sm、md情况下不受column值影响,响应式布局\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 options: TLabelValueItem[];\n /**\n * 超过宽度将自动省略,默认值:true\n */\n ellipsis?: boolean;\n /** 是否添加边框 */\n border?: boolean;\n /** label对齐方式 */\n labelAlign?: 'left' | 'right' | 'center';\n /** label 宽度,默认值:100 */\n labelWidth?: number;\n width?: number;\n /** label 样式 */\n labelStyle?: CSSProperties;\n /** value 样式 */\n valueStyle?: CSSProperties;\n};\n\n/**\n * label+value 列表布局\n * ```\n * 1. 可设置超出隐藏、必填标识、设置隐藏、添加说明标签等功能\n * 2. 可自定义设置占用网格列数\n * 3. 内置响应式布局\n * ```\n */\nexport const LabelValueRender = (props: LabelValueRenderProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n const [breakpoint, setBreakpoint] = useState<TBoxBreakpoint>();\n\n const { column, forceColumn, labelAlign, labelWidth, options, border, width } = props;\n\n const ellipsis = isUndefinedOrNull(props.ellipsis) ? true : props.ellipsis;\n\n const isVertical = !border ? screenType === 'xs' || breakpoint === 'xs' : false;\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 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 !column ? columnMap[4] : columnMap[column];\n }, [column, forceColumn]);\n\n const renderList = useMemo(() => {\n if (!breakpoint) return undefined;\n const dataListNew: TLabelValueRenderItem[] = [];\n options.forEach((item) => {\n if (!item.hidden) {\n let grid: number | undefined = undefined;\n if (item.span) {\n grid = item.span * 6;\n if (breakpoint === 'xs') {\n grid = 24;\n } else if (breakpoint === 'sm') {\n grid = grid > 12 ? grid : 12;\n }\n }\n dataListNew.push({\n ...item,\n grid: grid ? grid : gridSize[breakpoint],\n });\n }\n });\n return getRenderGrid(dataListNew.filter(Boolean));\n }, [breakpoint, gridSize, options]);\n\n const colon = border ? '' : ':';\n\n const getFormRowChildren = () => {\n return renderList\n ?.map((item, index) => {\n const ellipsisFt = isUndefinedOrNull(item.ellipsis) ? ellipsis : item.ellipsis;\n\n const width = isVertical ? undefined : labelWidth || 100;\n\n let labelContent: ReactElement | string = `${item.label}${colon}`;\n\n if (item.tips && ellipsisFt) {\n labelContent = (\n <TipsWrapper tipType=\"tooltip\" tooltipProps={{ title: item.tips }}>\n <TextOverflow text={labelContent as unknown as string} />\n </TipsWrapper>\n );\n } else if (item.tips) {\n labelContent = (\n <TipsWrapper tipType=\"tooltip\" tooltipProps={{ title: item.tips }}>\n {labelContent}\n </TipsWrapper>\n );\n } else if (ellipsisFt) {\n labelContent = <TextOverflow text={labelContent as unknown as string} />;\n }\n\n return (\n <BoxGrid.Col\n key={index}\n {...gridSize}\n span={item.grid}\n className={classNames('label-value-tr', { 'label-value-last-tr': item.isLast })}\n >\n {!item.replenish ? (\n <Fragment>\n <span className=\"label-value-label\" style={{ width, ...props.labelStyle }}>\n {item.required ? (\n <TextSymbolWrapper text={labelContent} symbolType=\"required\" />\n ) : (\n labelContent\n )}\n </span>\n {ellipsisFt ? (\n <span className=\"label-value-value\" style={props.valueStyle}>\n <TextOverflow text={item.value as string} />\n </span>\n ) : (\n <span\n className=\"label-value-value\"\n style={{\n wordBreak: 'break-all',\n ...props.valueStyle,\n }}\n >\n {item.value}\n </span>\n )}\n </Fragment>\n ) : (\n <Fragment />\n )}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const onBoxBreakpointChange = hooks.useCallbackRef((breakpoint: TBoxBreakpoint) => {\n setBreakpoint(breakpoint);\n });\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType]);\n\n const align = labelAlign || (border ? 'left' : 'right');\n\n return (\n <BoxGrid.Row\n style={{ ...innerStyle, ...props.style }}\n className={classNames(\n 'label-value-render',\n `label-value-render-${align}`,\n {\n 'label-value-render-border': border,\n 'label-value-render-vertical': isVertical,\n },\n props.className,\n )}\n gutter={border ? [0, 0] : [30, 0]}\n onBoxBreakpointChange={onBoxBreakpointChange}\n >\n {getFormRowChildren()}\n </BoxGrid.Row>\n );\n};\n"],"names":["getRenderGrid","dataList","results","currentSum","currentArr","i","length","item","grid","temp","_extends","push","map","index","total","arrayTotal","lastItem","isLast","resultsFt","forEach","concat","console","log","LabelValueRender","props","screenType","fbaHooks","useResponsivePoint","_useState","useState","breakpoint","setBreakpoint","column","forceColumn","labelAlign","labelWidth","options","border","width","ellipsis","isUndefinedOrNull","isVertical","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","renderList","undefined","dataListNew","hidden","span","filter","Boolean","colon","getFormRowChildren","ellipsisFt","labelContent","label","tips","_jsx","TipsWrapper","tipType","tooltipProps","title","children","TextOverflow","text","BoxGrid","Col","className","_classNames","replenish","_jsxs","Fragment","style","labelStyle","required","TextSymbolWrapper","symbolType","valueStyle","value","wordBreak","onBoxBreakpointChange","_hooks","useCallbackRef","innerStyle","includes","align","Row","gutter"],"mappings":"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"}
|
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
import './../fba-hooks/index.css';
|
|
3
3
|
import './index.css';
|
|
4
4
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
5
|
-
import{_ as t}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isString as
|
|
5
|
+
import{_ as t}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isString as r}from"@dimjs/lang/cjs/is-string";import{useRef as e,useMemo as n,memo as i}from"react";import{classNames as a}from"@dimjs/utils/cjs/class-names";import{useSize as o}from"ahooks";import{Tooltip as l}from"antd";import{fbaHooks as s}from"../fba-hooks/index.js";import{jsxs as c,jsx as u}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"@flatbiz/utils";import"../use-responsive-point-21b8c601.js";var d=function t(r){var n=e(null);var i=o(n);var d=(i==null?void 0:i.width)||0;var m=s.useMemoCustom((function(){if(n.current){var t;var r=((t=n.current.querySelector(".tow-inner-text"))==null?void 0:t.clientWidth)||0;return r}return 0}),[n.current]);var v=m>d;return c("div",{className:a("text-overflow",{"tow-trigger":r.onClick}),ref:n,children:[u("span",{className:"tow-hidden",children:u("span",{className:"tow-inner-text",children:r.text})}),u(l,{title:v?r.text:undefined,children:u("span",{className:"tow-content",children:u("span",{className:"tow-show-text",onClick:r.onClick,children:r.text})})})]})};var m=function t(r){var n=e(null);var i=o(n);var d=r.maxLength;var m=(i==null?void 0:i.width)||0;var v=r.text;var h=v.length>d;var f=s.useMemoCustom((function(){if(n.current){var t;var r=((t=n.current.querySelector(".tow-inner-text"))==null?void 0:t.clientWidth)||0;return r}return 0}),[n.current]);var x=h&&f<m;var w=m<f+1||h;var p=v.substring(0,r.maxLength);return c("div",{className:a("text-overflow",{"tow-trigger":r.onClick}),ref:n,children:[u("span",{className:"tow-hidden",children:u("span",{className:"tow-inner-text",children:p})}),u(l,{title:w?v:undefined,children:x?u("span",{className:"tow-cut-content",children:c("span",{className:"tow-show-text",onClick:r.onClick,children:[p,"..."]})}):u("span",{className:"tow-content",children:u("span",{className:"tow-show-text",onClick:r.onClick,children:v})})})]})};var v=function t(r){var i=e(null);var d=o(i);var m=(d==null?void 0:d.width)||0;var v=r.maxWidth||0;var h=s.useMemoCustom((function(){if(i.current){var t;var r=((t=i.current.querySelector(".tow-inner-text"))==null?void 0:t.clientWidth)||0;return r}return 0}),[i.current]);var f=n((function(){if(h<v)return undefined;var t=h>v?v:h;if(m>t){return t}return undefined}),[h,v,m]);var x=f||h>m;return c("div",{className:a("text-overflow",{"tow-trigger":r.onClick}),ref:i,children:[u("span",{className:"tow-hidden",children:u("span",{className:"tow-inner-text",children:r.text})}),u(l,{title:x?r.text:undefined,children:u("span",{className:"tow-content",style:{width:f},children:u("span",{className:"tow-show-text",onClick:r.onClick,children:r.text})})})]})};var h=function e(n){if(n.maxLength&&r(n.text)){return u(m,t({},n))}if(n.maxWidth){return u(v,t({},n))}return u(d,t({},n))};var f=i(h,(function(t,r){if(t.text!==r.text||t.maxLength!==r.maxLength||t.maxWidth!==t.maxWidth){return false}return true}));export{f as TextOverflow};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/text-overflow/overflow-auto.tsx","@flatbiz/antd/src/text-overflow/overflow-length.tsx","@flatbiz/antd/src/text-overflow/overflow-width.tsx","@flatbiz/antd/src/text-overflow/text-overflow.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\nimport { TextOverflowProps } from './types';\n\nexport const OverflowAuto = (props: TextOverflowProps) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const size = useSize(rootRef);\n const parentNodeWidth = size?.width || 0;\n\n // 文本宽度\n const textWidth = fbaHooks.useMemoCustom(() => {\n if (rootRef.current) {\n // 裁切后元素宽度\n const textWidth = rootRef.current.querySelector('.tow-inner-text')?.clientWidth || 0;\n return textWidth;\n }\n return 0;\n }, [rootRef.current]);\n\n const showTips = textWidth > parentNodeWidth;\n\n return (\n <div\n className={classNames('text-overflow', {\n 'tow-trigger': props.onClick,\n })}\n ref={rootRef}\n >\n <span className=\"tow-hidden\">\n <span className=\"tow-inner-text\">{props.text}</span>\n </span>\n <Tooltip title={showTips ? props.text : undefined}>\n <span className=\"tow-content\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {props.text}\n </span>\n </span>\n </Tooltip>\n </div>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { subStringByBytes } from '@flatbiz/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport { TextOverflowProps } from './types';\n\nexport const OverflowLength = (props: Omit<TextOverflowProps, 'maxWidth'>) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const size = useSize(rootRef);\n const maxLength = props.maxLength as number;\n const parentNodeWidth = size?.width || 0;\n const text = props.text as string;\n\n const needCut = text.length > maxLength;\n\n // 裁切后文本宽度\n const cutedTextWidth = fbaHooks.useMemoCustom(() => {\n if (rootRef.current) {\n // 裁切后元素宽度\n const cutContentWidth = rootRef.current.querySelector('.tow-inner-text')?.clientWidth || 0;\n\n return cutContentWidth;\n }\n return 0;\n }, [rootRef.current]);\n\n const showCustomEllipsis = needCut && cutedTextWidth < parentNodeWidth;\n\n const showTips = parentNodeWidth < cutedTextWidth + 1 || needCut;\n\n // const x =\n\n return (\n <div\n className={classNames('text-overflow', {\n 'tow-trigger': props.onClick,\n })}\n ref={rootRef}\n >\n <span className=\"tow-hidden\">\n <span className=\"tow-inner-text\">{subStringByBytes(text, (props.maxLength as number) * 2)}</span>\n </span>\n\n <Tooltip title={showTips ? text : undefined}>\n {showCustomEllipsis ? (\n <span className=\"tow-cut-content\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {subStringByBytes(text, (props.maxLength as number) * 2)}\n ...\n </span>\n </span>\n ) : (\n <span className=\"tow-content\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {text}\n </span>\n </span>\n )}\n </Tooltip>\n </div>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { useMemo, useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport { TextOverflowProps } from './types';\n\nexport const OverflowWidth = (props: Omit<TextOverflowProps, 'maxLength'>) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const size = useSize(rootRef);\n const parentNodeWidth = size?.width || 0;\n const maxWidth = props.maxWidth || 0;\n\n // 文本宽度\n const textWidth = fbaHooks.useMemoCustom(() => {\n if (rootRef.current) {\n // 裁切后元素宽度\n const textWidth = rootRef.current.querySelector('.tow-inner-text')?.clientWidth || 0;\n return textWidth;\n }\n return 0;\n }, [rootRef.current]);\n\n const showTextWidth = useMemo(() => {\n if (textWidth < maxWidth) return undefined;\n const textWidthBast = textWidth > maxWidth ? maxWidth : textWidth;\n if (parentNodeWidth > textWidthBast) {\n return textWidthBast;\n }\n return undefined;\n }, [textWidth, maxWidth, parentNodeWidth]);\n const showTips = showTextWidth || textWidth > parentNodeWidth;\n\n return (\n <div\n className={classNames('text-overflow', {\n 'tow-trigger': props.onClick,\n })}\n ref={rootRef}\n >\n <span className=\"tow-hidden\">\n <span className=\"tow-inner-text\">{props.text}</span>\n </span>\n\n <Tooltip title={showTips ? props.text : undefined}>\n <span className=\"tow-content\" style={{ width: showTextWidth }}>\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {props.text}\n </span>\n </span>\n </Tooltip>\n </div>\n );\n};\n","import { isString } from '@dimjs/lang';\nimport { memo } from 'react';\nimport { OverflowAuto } from './overflow-auto';\nimport { OverflowLength } from './overflow-length';\nimport { OverflowWidth } from './overflow-width';\nimport './style.less';\nimport { TextOverflowProps } from './types';\n\nconst InnerTextOverflow = (props: TextOverflowProps) => {\n if (props.maxLength && isString(props.text)) {\n return <OverflowLength {...props} />;\n }\n if (props.maxWidth) {\n return <OverflowWidth {...props} />;\n }\n return <OverflowAuto {...props} />;\n};\n\n/**\n * 内容溢出截取,并在尾部添加...,被截取的添加Tooltip显示完整数据\n * ```\n * 控制文本显示三种方式\n * 1. 通过 maxLength 控制超长\n * 2. 通过 maxWidth 控制超长\n * 3. 与父节点宽度比较,控制超长\n * 4. 优先级 maxLength > maxWidth\n *\n * 注意:\n * 1. 当前节点父节点需要添加 overflow-x: hidden;\n * 2. 如果父节点设置flex-shrink会有影响,可复写flex-shrink: initial;\n * 3. 与 Table columns render结合使用,需要配置ellipsis=true\n * 例如:<Table columns={[{\n ...\n render: (value) => {\n return <TextOverflow text={value} />;\n },\n ellipsis: true,\n }]} />\n 4. 与 Table columns render结合使用,如果Table配置了 scroll={{ x: 'max-content' }}后,不能与TextOverflow maxWidth结合使用\n * ```\n */\nexport const TextOverflow = memo(InnerTextOverflow, (pre, next) => {\n if (pre.text !== next.text || pre.maxLength !== next.maxLength || pre.maxWidth !== pre.maxWidth) {\n return false;\n }\n return true;\n});\n"],"names":["OverflowAuto","props","rootRef","useRef","size","useSize","parentNodeWidth","width","textWidth","fbaHooks","useMemoCustom","current","_rootRef$current$quer","querySelector","clientWidth","showTips","_jsxs","className","_classNames","onClick","ref","children","_jsx","text","Tooltip","title","undefined","OverflowLength","maxLength","needCut","length","cutedTextWidth","cutContentWidth","showCustomEllipsis","subStringByBytes","OverflowWidth","maxWidth","showTextWidth","useMemo","textWidthBast","style","InnerTextOverflow","_isString","_extends","TextOverflow","memo","pre","next"],"mappings":";kiBAQO,IAAMA,EAAe,SAAfA,EAAgBC,GAC3B,IAAMC,EAAUC,EAAuB,MACvC,IAAMC,EAAOC,EAAQH,GACrB,IAAMI,GAAkBF,eAAAA,EAAMG,QAAS,EAGvC,IAAMC,EAAYC,EAASC,eAAc,WACvC,GAAIR,EAAQS,QAAS,CAAA,IAAAC,EAEnB,IAAMJ,IAAYI,EAAAV,EAAQS,QAAQE,cAAc,qBAAkB,UAAA,EAAhDD,EAAkDE,cAAe,EACnF,OAAON,CACT,CACA,OAAO,CACT,GAAG,CAACN,EAAQS,UAEZ,IAAMI,EAAWP,EAAYF,EAE7B,OACEU,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAejB,EAAMkB,UAEvBC,IAAKlB,EAAQmB,UAEbC,EAAA,OAAA,CAAML,UAAU,aAAYI,SAC1BC,EAAA,OAAA,CAAML,UAAU,iBAAgBI,SAAEpB,EAAMsB,SAE1CD,EAACE,EAAO,CAACC,MAAOV,EAAWd,EAAMsB,KAAOG,UAAUL,SAChDC,EAAA,OAAA,CAAML,UAAU,cAAaI,SAC3BC,EAAA,OAAA,CAAML,UAAU,gBAAgBE,QAASlB,EAAMkB,QAAQE,SACpDpB,EAAMsB,aAMnB,ECpCO,IAAMI,EAAiB,SAAjBA,EAAkB1B,GAC7B,IAAMC,EAAUC,EAAuB,MACvC,IAAMC,EAAOC,EAAQH,GACrB,IAAM0B,EAAY3B,EAAM2B,UACxB,IAAMtB,GAAkBF,eAAAA,EAAMG,QAAS,EACvC,IAAMgB,EAAOtB,EAAMsB,KAEnB,IAAMM,EAAUN,EAAKO,OAASF,EAG9B,IAAMG,EAAiBtB,EAASC,eAAc,WAC5C,GAAIR,EAAQS,QAAS,CAAA,IAAAC,EAEnB,IAAMoB,IAAkBpB,EAAAV,EAAQS,QAAQE,cAAc,qBAAkB,UAAA,EAAhDD,EAAkDE,cAAe,EAEzF,OAAOkB,CACT,CACA,OAAO,CACT,GAAG,CAAC9B,EAAQS,UAEZ,IAAMsB,EAAqBJ,GAAWE,EAAiBzB,EAEvD,IAAMS,EAAWT,EAAkByB,EAAiB,GAAKF,EAIzD,OACEb,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAejB,EAAMkB,UAEvBC,IAAKlB,EAAQmB,UAEbC,EAAA,OAAA,CAAML,UAAU,aAAYI,SAC1BC,EAAA,OAAA,CAAML,UAAU,iBAAgBI,SAAEa,EAAiBX,EAAOtB,EAAM2B,UAAuB,OAGzFN,EAACE,EAAO,CAACC,MAAOV,EAAWQ,EAAOG,UAAUL,SACzCY,EACCX,EAAA,OAAA,CAAML,UAAU,kBAAiBI,SAC/BL,EAAA,OAAA,CAAMC,UAAU,gBAAgBE,QAASlB,EAAMkB,QAAQE,SACpDa,CAAAA,EAAiBX,EAAOtB,EAAM2B,UAAuB,GAAG,WAK7DN,EAAA,OAAA,CAAML,UAAU,cAAaI,SAC3BC,EAAA,OAAA,CAAML,UAAU,gBAAgBE,QAASlB,EAAMkB,QAAQE,SACpDE,UAOf,ECxDO,IAAMY,EAAgB,SAAhBA,EAAiBlC,GAC5B,IAAMC,EAAUC,EAAuB,MACvC,IAAMC,EAAOC,EAAQH,GACrB,IAAMI,GAAkBF,eAAAA,EAAMG,QAAS,EACvC,IAAM6B,EAAWnC,EAAMmC,UAAY,EAGnC,IAAM5B,EAAYC,EAASC,eAAc,WACvC,GAAIR,EAAQS,QAAS,CAAA,IAAAC,EAEnB,IAAMJ,IAAYI,EAAAV,EAAQS,QAAQE,cAAc,qBAAkB,UAAA,EAAhDD,EAAkDE,cAAe,EACnF,OAAON,CACT,CACA,OAAO,CACT,GAAG,CAACN,EAAQS,UAEZ,IAAM0B,EAAgBC,GAAQ,WAC5B,GAAI9B,EAAY4B,EAAU,OAAOV,UACjC,IAAMa,EAAgB/B,EAAY4B,EAAWA,EAAW5B,EACxD,GAAIF,EAAkBiC,EAAe,CACnC,OAAOA,CACT,CACA,OAAOb,SACR,GAAE,CAAClB,EAAW4B,EAAU9B,IACzB,IAAMS,EAAWsB,GAAiB7B,EAAYF,EAE9C,OACEU,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAejB,EAAMkB,UAEvBC,IAAKlB,EAAQmB,UAEbC,EAAA,OAAA,CAAML,UAAU,aAAYI,SAC1BC,EAAA,OAAA,CAAML,UAAU,iBAAgBI,SAAEpB,EAAMsB,SAG1CD,EAACE,EAAO,CAACC,MAAOV,EAAWd,EAAMsB,KAAOG,UAAUL,SAChDC,EAAA,OAAA,CAAML,UAAU,cAAcuB,MAAO,CAAEjC,MAAO8B,GAAgBhB,SAC5DC,EAAA,OAAA,CAAML,UAAU,gBAAgBE,QAASlB,EAAMkB,QAAQE,SACpDpB,EAAMsB,aAMnB,EC7CA,IAAMkB,EAAoB,SAApBA,EAAqBxC,GACzB,GAAIA,EAAM2B,WAAac,EAASzC,EAAMsB,MAAO,CAC3C,OAAOD,EAACK,EAAcgB,EAAK1C,CAAAA,EAAAA,GAC7B,CACA,GAAIA,EAAMmC,SAAU,CAClB,OAAOd,EAACa,EAAaQ,EAAK1C,CAAAA,EAAAA,GAC5B,CACA,OAAOqB,EAACtB,EAAY2C,EAAK1C,CAAAA,EAAAA,GAC3B,EAyBO,IAAM2C,EAAeC,EAAKJ,GAAmB,SAACK,EAAKC,GACxD,GAAID,EAAIvB,OAASwB,EAAKxB,MAAQuB,EAAIlB,YAAcmB,EAAKnB,WAAakB,EAAIV,WAAaU,EAAIV,SAAU,CAC/F,OAAO,KACT,CACA,OAAO,IACT"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/text-overflow/overflow-auto.tsx","@flatbiz/antd/src/text-overflow/overflow-length.tsx","@flatbiz/antd/src/text-overflow/overflow-width.tsx","@flatbiz/antd/src/text-overflow/text-overflow.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\nimport { TextOverflowProps } from './types';\n\nexport const OverflowAuto = (props: TextOverflowProps) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const size = useSize(rootRef);\n const parentNodeWidth = size?.width || 0;\n\n // 文本宽度\n const textWidth = fbaHooks.useMemoCustom(() => {\n if (rootRef.current) {\n // 裁切后元素宽度\n const textWidth = rootRef.current.querySelector('.tow-inner-text')?.clientWidth || 0;\n return textWidth;\n }\n return 0;\n }, [rootRef.current]);\n\n const showTips = textWidth > parentNodeWidth;\n\n return (\n <div\n className={classNames('text-overflow', {\n 'tow-trigger': props.onClick,\n })}\n ref={rootRef}\n >\n <span className=\"tow-hidden\">\n <span className=\"tow-inner-text\">{props.text}</span>\n </span>\n <Tooltip title={showTips ? props.text : undefined}>\n <span className=\"tow-content\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {props.text}\n </span>\n </span>\n </Tooltip>\n </div>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport { TextOverflowProps } from './types';\n\nexport const OverflowLength = (props: Omit<TextOverflowProps, 'maxWidth'>) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const size = useSize(rootRef);\n const maxLength = props.maxLength as number;\n const parentNodeWidth = size?.width || 0;\n const text = props.text as string;\n\n const needCut = text.length > maxLength;\n\n // 裁切后文本宽度\n const cutedTextWidth = fbaHooks.useMemoCustom(() => {\n if (rootRef.current) {\n // 裁切后元素宽度\n const cutContentWidth = rootRef.current.querySelector('.tow-inner-text')?.clientWidth || 0;\n\n return cutContentWidth;\n }\n return 0;\n }, [rootRef.current]);\n\n const showCustomEllipsis = needCut && cutedTextWidth < parentNodeWidth;\n\n const showTips = parentNodeWidth < cutedTextWidth + 1 || needCut;\n\n const cutValue = text.substring(0, props.maxLength);\n\n return (\n <div\n className={classNames('text-overflow', {\n 'tow-trigger': props.onClick,\n })}\n ref={rootRef}\n >\n <span className=\"tow-hidden\">\n <span className=\"tow-inner-text\">{cutValue}</span>\n </span>\n\n <Tooltip title={showTips ? text : undefined}>\n {showCustomEllipsis ? (\n <span className=\"tow-cut-content\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {cutValue}...\n </span>\n </span>\n ) : (\n <span className=\"tow-content\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {text}\n </span>\n </span>\n )}\n </Tooltip>\n </div>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { useMemo, useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport { TextOverflowProps } from './types';\n\nexport const OverflowWidth = (props: Omit<TextOverflowProps, 'maxLength'>) => {\n const rootRef = useRef<HTMLDivElement>(null);\n const size = useSize(rootRef);\n const parentNodeWidth = size?.width || 0;\n const maxWidth = props.maxWidth || 0;\n\n // 文本宽度\n const textWidth = fbaHooks.useMemoCustom(() => {\n if (rootRef.current) {\n // 裁切后元素宽度\n const textWidth = rootRef.current.querySelector('.tow-inner-text')?.clientWidth || 0;\n return textWidth;\n }\n return 0;\n }, [rootRef.current]);\n\n const showTextWidth = useMemo(() => {\n if (textWidth < maxWidth) return undefined;\n const textWidthBast = textWidth > maxWidth ? maxWidth : textWidth;\n if (parentNodeWidth > textWidthBast) {\n return textWidthBast;\n }\n return undefined;\n }, [textWidth, maxWidth, parentNodeWidth]);\n const showTips = showTextWidth || textWidth > parentNodeWidth;\n\n return (\n <div\n className={classNames('text-overflow', {\n 'tow-trigger': props.onClick,\n })}\n ref={rootRef}\n >\n <span className=\"tow-hidden\">\n <span className=\"tow-inner-text\">{props.text}</span>\n </span>\n\n <Tooltip title={showTips ? props.text : undefined}>\n <span className=\"tow-content\" style={{ width: showTextWidth }}>\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {props.text}\n </span>\n </span>\n </Tooltip>\n </div>\n );\n};\n","import { isString } from '@dimjs/lang';\nimport { memo } from 'react';\nimport { OverflowAuto } from './overflow-auto';\nimport { OverflowLength } from './overflow-length';\nimport { OverflowWidth } from './overflow-width';\nimport './style.less';\nimport { TextOverflowProps } from './types';\n\nconst InnerTextOverflow = (props: TextOverflowProps) => {\n if (props.maxLength && isString(props.text)) {\n return <OverflowLength {...props} />;\n }\n if (props.maxWidth) {\n return <OverflowWidth {...props} />;\n }\n return <OverflowAuto {...props} />;\n};\n\n/**\n * 内容溢出截取,并在尾部添加...,被截取的添加Tooltip显示完整数据\n * ```\n * 控制文本显示三种方式\n * 1. 通过 maxLength 控制超长\n * 2. 通过 maxWidth 控制超长\n * 3. 与父节点宽度比较,控制超长\n * 4. 优先级 maxLength > maxWidth\n *\n * 注意:\n * 1. 当前节点父节点需要添加 overflow-x: hidden;\n * 2. 如果父节点设置flex-shrink会有影响,可复写flex-shrink: initial;\n * 3. 与 Table columns render结合使用,需要配置ellipsis=true\n * 例如:<Table columns={[{\n ...\n render: (value) => {\n return <TextOverflow text={value} />;\n },\n ellipsis: true,\n }]} />\n 4. 与 Table columns render结合使用,如果Table配置了 scroll={{ x: 'max-content' }}后,不能与TextOverflow maxWidth结合使用\n * ```\n */\nexport const TextOverflow = memo(InnerTextOverflow, (pre, next) => {\n if (pre.text !== next.text || pre.maxLength !== next.maxLength || pre.maxWidth !== pre.maxWidth) {\n return false;\n }\n return true;\n});\n"],"names":["OverflowAuto","props","rootRef","useRef","size","useSize","parentNodeWidth","width","textWidth","fbaHooks","useMemoCustom","current","_rootRef$current$quer","querySelector","clientWidth","showTips","_jsxs","className","_classNames","onClick","ref","children","_jsx","text","Tooltip","title","undefined","OverflowLength","maxLength","needCut","length","cutedTextWidth","cutContentWidth","showCustomEllipsis","cutValue","substring","OverflowWidth","maxWidth","showTextWidth","useMemo","textWidthBast","style","InnerTextOverflow","_isString","_extends","TextOverflow","memo","pre","next"],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -319,7 +319,13 @@ export type GutterParams = Gutter | [
|
|
|
319
319
|
*/
|
|
320
320
|
export declare const useBoxBreakpoint: (dom: any) => {
|
|
321
321
|
boxBreakpoint: TBoxBreakpoint;
|
|
322
|
+
/**
|
|
323
|
+
* @deprecated
|
|
324
|
+
* 使用 haveWidth 替代
|
|
325
|
+
*/
|
|
322
326
|
isInit: boolean;
|
|
327
|
+
/** width为0,或者不存在 */
|
|
328
|
+
haveWidth: boolean;
|
|
323
329
|
};
|
|
324
330
|
declare const PresetDefaultGrid: {
|
|
325
331
|
xs: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flatbiz/antd",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.26",
|
|
4
4
|
"description": "flat-biz ui components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"typings": "index.d.ts",
|
|
@@ -27,24 +27,24 @@
|
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@ant-design/icons": ">=5.0.1",
|
|
30
|
-
"@dimjs/lang": ">=1.
|
|
31
|
-
"@dimjs/model": ">=1.2.
|
|
32
|
-
"@dimjs/model-react": ">=1.2.
|
|
33
|
-
"@dimjs/utils": ">=1.
|
|
30
|
+
"@dimjs/lang": ">=1.5.0",
|
|
31
|
+
"@dimjs/model": ">=1.2.3",
|
|
32
|
+
"@dimjs/model-react": ">=1.2.3",
|
|
33
|
+
"@dimjs/utils": ">=1.5.1",
|
|
34
34
|
"@flatbiz/utils": ">=4.0.21",
|
|
35
35
|
"@wove/react": ">=1.2.23",
|
|
36
36
|
"antd": ">=5.11.0",
|
|
37
37
|
"dayjs": ">=1.11.9",
|
|
38
38
|
"react": ">=18.2.0",
|
|
39
39
|
"react-dom": ">=18.2.0",
|
|
40
|
-
"ahooks": "
|
|
40
|
+
"ahooks": ">=3.7.11"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@ant-design/icons": "^4.8.0",
|
|
44
|
-
"@dimjs/lang": "^1.
|
|
45
|
-
"@dimjs/model": "^1.2.
|
|
46
|
-
"@dimjs/model-react": "^1.2.
|
|
47
|
-
"@dimjs/utils": "^1.
|
|
44
|
+
"@dimjs/lang": "^1.5.0",
|
|
45
|
+
"@dimjs/model": "^1.2.3",
|
|
46
|
+
"@dimjs/model-react": "^1.2.3",
|
|
47
|
+
"@dimjs/utils": "^1.5.1",
|
|
48
48
|
"@flatbiz/utils": "^4.0.21",
|
|
49
49
|
"@wove/react": "^1.2.23",
|
|
50
50
|
"antd": "5.11.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"dequal": "2.0.3",
|
|
53
53
|
"react": "18.2.0",
|
|
54
54
|
"react-dom": "18.2.0",
|
|
55
|
-
"ahooks": "^3.7.
|
|
55
|
+
"ahooks": "^3.7.11",
|
|
56
56
|
"react-is": "^18.2.0",
|
|
57
57
|
"react-ace": "^10.1.0",
|
|
58
58
|
"sql-formatter": "^15.0.2",
|