@flatbiz/antd 4.4.15 → 4.4.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/easy-form/index.js +1 -1
- package/esm/easy-form/index.js.map +1 -1
- package/esm/editable-table/index.css +1 -1
- package/esm/index.js +3 -2
- package/esm/label-value-render/index.css +1 -0
- package/esm/label-value-render/index.js +8 -0
- package/esm/label-value-render/index.js.map +1 -0
- package/esm/text-overflow/index.css +1 -1
- package/esm/text-overflow/index.js +1 -1
- package/esm/text-overflow/index.js.map +1 -1
- package/esm/text-symbol-wrapper/index.css +1 -1
- package/esm/tips-wrapper/index.css +1 -0
- package/esm/tips-wrapper/index.js +1 -1
- package/esm/tips-wrapper/index.js.map +1 -1
- package/index.d.ts +76 -1
- package/package.json +3 -3
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
|
|
8
|
+
import{classNames as e}from"@dimjs/utils/cjs/class-names";import{a as r,_ as l}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isUndefinedOrNull as t,dom as a}from"@flatbiz/utils";import{useMemo as i,useRef as n,Fragment as s,Children as m}from"react";import{BoxGrid as o}from"../box-grid/index.js";import{fbaHooks as u}from"../fba-hooks/index.js";import{FormWrapper as d}from"../form-wrapper/index.js";import{preDefinedClassName as f}from"../pre-defined-class-name/index.js";import{jsxs as c,jsx as p}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"../use-responsive-point-21b8c601.js";import"antd";var x=["column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure"];var h=function h(v){var g=u.useResponsivePoint()||"";var y=v.column,b=v.forceColumn,j=v.children,N=v.width,I=v.gridGutter,w=v.labelWidth,G=v.labelItemVertical,C=v.labelAlign,A=v.formItemGap,P=v.isPure,W=r(v,x);var T=i((function(){if(b){var e=24/b;return{xs:e,sm:e,md:e,lg:e,xl:e,xxl:e}}if(!y){return{xs:24,sm:12,md:12,lg:8,xl:8,xxl:6}}var r={1:{xs:24,sm:24,md:24,lg:24,xl:24,xxl:24},2:{xs:24,sm:12,md:12,lg:12,xl:12,xxl:12},3:{xs:24,sm:12,md:12,lg:8,xl:8,xxl:8},4:{xs:24,sm:12,md:12,lg:6,xl:6,xxl:6}};return r[y]}),[y,b]);var V=function e(){return m.toArray(j).map((function(e,r){if(e.props["hidden"])return null;if(e.type["domTypeName"]==="BoxGridCol")return p(s,{children:e},r);var t=undefined;if(e.type["domTypeName"]==="FormItemWrapper"||e.type["domTypeName"]==="FormItemText"){t=e.props["span"];if(t){if(g==="xs"){t=24}else if(g==="sm"){t=t>12?t:12}}}return p(o.Col,l({},T,{span:t,children:e}),r)})).filter(Boolean)};var k=i((function(){if(["xs","sm"].includes(g)||!N){return{}}return{width:N}}),[g]);var B=t(I)?[15,0]:I;var F=n(null);var R=i((function(){try{if(F.current){var e=a.findParentsElement(F.current,(function(e){var r;return(r=e.classList)==null||r.contains==null?void 0:r.contains("easy-form")}));return e?true:false}return undefined}catch(e){return false}}),[F.current]);var L=i((function(){return f.getFormLayoutClassName({labelWidth:w,labelItemVertical:G,labelAlign:C,formItemGap:A,className:W.className})}),[w,G,C,A]);return c(s,{children:[p("div",{className:"easy-form-anchor",ref:F}),R===true?p("div",{style:l({},k,W.style),className:e("easy-form","easy-form-nested",L,W.className),children:P?j:p(o.Row,{gutter:B,children:V()})}):undefined,R===false?p(d,l({},W,{labelWidth:w,labelAlign:C,labelItemVertical:G,formItemGap:A,style:l({},k,W.style),className:e("easy-form",W.className),autoComplete:"off",children:P?j:p(o.Row,{gutter:B,children:V()})})):undefined]})};export{h as EasyForm};
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { dom, isUndefinedOrNull } from '@flatbiz/utils';\nimport { Children, Fragment, ReactNode, useMemo, useRef } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormWrapper, FormWrapperProps } from '../form-wrapper';\nimport './style.less';\n\nexport type EasyFormProps = Omit<FormWrapperProps, 'children'> & {\n /**\n * 定义一行显示几列(当外层宽度尺寸大于 992px(lg) 时,一行显示几列), 默认值:3\n * ```\n * 1. 当外层宽度尺寸小于992px(lg),为xs、sm、md情况下不受column值影响(column=1除外)\n * 2. 宽度尺寸定义\n * xs: 宽度 < 576px\n * sm: 宽度 ≥ 576px\n * md: 宽度 ≥ 768px\n * lg: 宽度 ≥ 992px\n * xl: 宽度 ≥ 1200px\n * xxl: 宽度 ≥ 1600px\n * 3. 列数尺寸定义\n * {\n * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n * };\n * ```\n */\n column?: 1 | 2 | 3 | 4;\n /**\n * 强制定义一行显示几列,不考虑响应式\n * ```\n * 1. 优先级大于column\n * 2. 建议优先使用column配置\n * ```\n */\n forceColumn?: 1 | 2 | 3 | 4;\n /**\n * Form显示宽度,可数值、可百分比;在小屏幕尺寸(xs、sm)上无效\n */\n width?: number | string;\n /** 网格间距 */\n gridGutter?: BoxRowProps['gutter'];\n children: ReactNode;\n /** 是否为纯净模式,对EasyForm的子节点不做任何包装处理 */\n isPure?: boolean;\n};\n\n/**\n * 简单Form布局,可自定义网格布局\n * ```\n * 1. demo:https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm可嵌套使用,嵌套内部的<EasyForm />节点Form相关属性失效,例如属性form、initialValues等都失效\n * 3. 布局网格以当前节点的宽度来计算的,不是屏幕宽度\n * 4. EasyForm 子节点包含 hidden = true 会被忽略\n * 5. 通过 column 可定义一行显示几列FormItem\n * 6. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 7. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 8. 通过 forceColumn 可强制定义一行显示几列,不考虑响应式\n * 9. 通过 labelWidth 可控制Form内部所有label的宽度(可实现整齐效果)\n * 10. 自定义栅格占位格数,见下方`例如`\n\n * 例如\n * <EasyForm column={3}>\n *\t <FormItemWrapper name=\"field1\" label=\"条件1\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t <!-- !!自定义栅格占位格数第一种方式:可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->\n *\t <BoxGrid.Col span={24}>\n *\t <FormItemWrapper name=\"field5\" label=\"条件5\">\n *\t \t<Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t </BoxGrid.Col>\n *\t <!-- !!自定义栅格占位格数第二种方式:如果为FormItemWrapper组件,可设置span属性 -->\n *\t <FormItemWrapper name=\"field6\" label=\"条件6\" span={24}>\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n * </EasyForm>\n * ```\n */\nexport const EasyForm = (props: EasyFormProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const {\n column,\n forceColumn,\n children,\n width,\n gridGutter,\n labelWidth,\n labelItemVertical,\n labelAlign,\n formItemGap,\n isPure,\n ...otherProps\n } = props;\n\n const gridSize = useMemo(() => {\n if (forceColumn) {\n const num = 24 / forceColumn;\n return { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num };\n }\n if (!column) {\n return { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };\n }\n const columnMap = {\n 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n };\n return columnMap[column];\n }, [column, forceColumn]);\n\n const getFormRowChildren = () => {\n return Children.toArray(children)\n .map((item: any, index) => {\n if (item.props['hidden']) return null;\n if (item.type['domTypeName'] === 'BoxGridCol') return <Fragment key={index}>{item}</Fragment>;\n let span: number | undefined = undefined;\n if (item.type['domTypeName'] === 'FormItemWrapper' || item.type['domTypeName'] === 'FormItemText') {\n span = item.props['span'] as number;\n if (span) {\n if (screenType === 'xs') {\n span = 24;\n } else if (screenType === 'sm') {\n span = span > 12 ? span : 12;\n }\n }\n }\n return (\n <BoxGrid.Col key={index} {...gridSize} span={span}>\n {item}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType]);\n\n const gutter = (isUndefinedOrNull(gridGutter) ? [15, 0] : gridGutter) as BoxRowProps['gutter'];\n const anchorRef = useRef<HTMLDivElement>(null);\n\n // 是否嵌套EasyForm节点\n const isNestedEasyForm = useMemo(() => {\n try {\n if (anchorRef.current) {\n const target = dom.findParentsElement(anchorRef.current, (node) => {\n return node.classList?.contains?.('easy-form');\n });\n return target ? true : false;\n }\n return undefined;\n } catch (error) {\n return false;\n }\n }, [anchorRef.current]);\n\n const fromLayoutClassName = useMemo(() => {\n let cn = '';\n if (labelWidth) {\n cn += `form-label-${labelWidth}`;\n }\n if (labelItemVertical) {\n cn += ` form-label-value-vertical`;\n }\n if (labelAlign) {\n cn += ` form-label-align-${labelAlign}`;\n }\n if (formItemGap) {\n cn += ` form-formitem-gap-${formItemGap}`;\n }\n return cn;\n }, [labelWidth, labelItemVertical, labelAlign, formItemGap]);\n\n return (\n <Fragment>\n <div className=\"easy-form-anchor\" ref={anchorRef}></div>\n {isNestedEasyForm === true ? (\n <div\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames(fromLayoutClassName, 'easy-form', 'easy-form-nested', otherProps.className)}\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </div>\n ) : undefined}\n {isNestedEasyForm === false ? (\n <FormWrapper\n {...otherProps}\n labelWidth={labelWidth}\n labelAlign={labelAlign}\n labelItemVertical={labelItemVertical}\n formItemGap={formItemGap}\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames('easy-form', otherProps.className)}\n autoComplete=\"off\"\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </FormWrapper>\n ) : undefined}\n </Fragment>\n );\n};\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","Children","toArray","map","item","index","type","_jsx","Fragment","span","undefined","BoxGrid","Col","_extends","filter","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","isNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","fromLayoutClassName","cn","_jsxs","className","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 } from '@flatbiz/utils';\nimport { Children, Fragment, ReactNode, useMemo, useRef } from 'react';\nimport { BoxGrid } from '../box-grid';\nimport { BoxRowProps } from '../box-grid/row';\nimport { fbaHooks } from '../fba-hooks';\nimport { FormWrapper, FormWrapperProps } from '../form-wrapper';\nimport { preDefinedClassName } from '../pre-defined-class-name';\nimport './style.less';\n\nexport type EasyFormProps = Omit<FormWrapperProps, 'children'> & {\n /**\n * 定义一行显示几列(当外层宽度尺寸大于 992px(lg) 时,一行显示几列), 默认值:3\n * ```\n * 1. 当外层宽度尺寸小于992px(lg),为xs、sm、md情况下不受column值影响(column=1除外)\n * 2. 宽度尺寸定义\n * xs: 宽度 < 576px\n * sm: 宽度 ≥ 576px\n * md: 宽度 ≥ 768px\n * lg: 宽度 ≥ 992px\n * xl: 宽度 ≥ 1200px\n * xxl: 宽度 ≥ 1600px\n * 3. 列数尺寸定义\n * {\n * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n * };\n * ```\n */\n column?: 1 | 2 | 3 | 4;\n /**\n * 强制定义一行显示几列,不考虑响应式\n * ```\n * 1. 优先级大于column\n * 2. 建议优先使用column配置\n * ```\n */\n forceColumn?: 1 | 2 | 3 | 4;\n /**\n * Form显示宽度,可数值、可百分比;在小屏幕尺寸(xs、sm)上无效\n */\n width?: number | string;\n /** 网格间距 */\n gridGutter?: BoxRowProps['gutter'];\n children: ReactNode;\n /** 是否为纯净模式,对EasyForm的子节点不做任何包装处理 */\n isPure?: boolean;\n};\n\n/**\n * 简单Form布局,可自定义网格布局\n * ```\n * 1. demo:https://fex.qa.tcshuke.com/docs/admin/main/form/grid\n * 2. EasyForm可嵌套使用,嵌套内部的<EasyForm />节点Form相关属性失效,例如属性form、initialValues等都失效\n * 3. 布局网格以当前节点的宽度来计算的,不是屏幕宽度\n * 4. EasyForm 子节点包含 hidden = true 会被忽略\n * 5. 通过 column 可定义一行显示几列FormItem\n * 6. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 7. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 8. 通过 forceColumn 可强制定义一行显示几列,不考虑响应式\n * 9. 通过 labelWidth 可控制Form内部所有label的宽度(可实现整齐效果)\n * 10. 自定义栅格占位格数,见下方`例如`\n\n * 例如\n * <EasyForm column={3}>\n *\t <FormItemWrapper name=\"field1\" label=\"条件1\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t <!-- !!自定义栅格占位格数第一种方式:可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->\n *\t <BoxGrid.Col span={24}>\n *\t <FormItemWrapper name=\"field5\" label=\"条件5\">\n *\t \t<Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n *\t </BoxGrid.Col>\n *\t <!-- !!自定义栅格占位格数第二种方式:如果为FormItemWrapper组件,可设置span属性 -->\n *\t <FormItemWrapper name=\"field6\" label=\"条件6\" span={24}>\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </FormItemWrapper>\n * </EasyForm>\n * ```\n */\nexport const EasyForm = (props: EasyFormProps) => {\n const screenType = fbaHooks.useResponsivePoint() || '';\n\n const {\n column,\n forceColumn,\n children,\n width,\n gridGutter,\n labelWidth,\n labelItemVertical,\n labelAlign,\n formItemGap,\n isPure,\n ...otherProps\n } = props;\n\n const gridSize = useMemo(() => {\n if (forceColumn) {\n const num = 24 / forceColumn;\n return { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num };\n }\n if (!column) {\n return { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 };\n }\n const columnMap = {\n 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },\n 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },\n 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },\n 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },\n };\n return columnMap[column];\n }, [column, forceColumn]);\n\n const getFormRowChildren = () => {\n return Children.toArray(children)\n .map((item: any, index) => {\n if (item.props['hidden']) return null;\n if (item.type['domTypeName'] === 'BoxGridCol') return <Fragment key={index}>{item}</Fragment>;\n let span: number | undefined = undefined;\n if (item.type['domTypeName'] === 'FormItemWrapper' || item.type['domTypeName'] === 'FormItemText') {\n span = item.props['span'] as number;\n if (span) {\n if (screenType === 'xs') {\n span = 24;\n } else if (screenType === 'sm') {\n span = span > 12 ? span : 12;\n }\n }\n }\n return (\n <BoxGrid.Col key={index} {...gridSize} span={span}>\n {item}\n </BoxGrid.Col>\n );\n })\n .filter(Boolean);\n };\n\n const innerStyle = useMemo(() => {\n /** 小屏幕不控制宽度 */\n if (['xs', 'sm'].includes(screenType) || !width) {\n return {};\n }\n return { width };\n }, [screenType]);\n\n const gutter = (isUndefinedOrNull(gridGutter) ? [15, 0] : gridGutter) as BoxRowProps['gutter'];\n const anchorRef = useRef<HTMLDivElement>(null);\n\n // 是否嵌套EasyForm节点\n const isNestedEasyForm = useMemo(() => {\n try {\n if (anchorRef.current) {\n const target = dom.findParentsElement(anchorRef.current, (node) => {\n return node.classList?.contains?.('easy-form');\n });\n return target ? true : false;\n }\n return undefined;\n } catch (error) {\n return false;\n }\n }, [anchorRef.current]);\n\n const fromLayoutClassName = useMemo(() => {\n return preDefinedClassName.getFormLayoutClassName({\n labelWidth,\n labelItemVertical,\n labelAlign,\n formItemGap,\n className: otherProps.className,\n });\n }, [labelWidth, labelItemVertical, labelAlign, formItemGap]);\n\n return (\n <Fragment>\n <div className=\"easy-form-anchor\" ref={anchorRef}></div>\n {isNestedEasyForm === true ? (\n <div\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames('easy-form', 'easy-form-nested', fromLayoutClassName, otherProps.className)}\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </div>\n ) : undefined}\n {isNestedEasyForm === false ? (\n <FormWrapper\n {...otherProps}\n labelWidth={labelWidth}\n labelAlign={labelAlign}\n labelItemVertical={labelItemVertical}\n formItemGap={formItemGap}\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames('easy-form', otherProps.className)}\n autoComplete=\"off\"\n >\n {isPure ? children : <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>}\n </FormWrapper>\n ) : undefined}\n </Fragment>\n );\n};\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","labelWidth","labelItemVertical","labelAlign","formItemGap","isPure","otherProps","_objectWithoutPropertiesLoose","_excluded","gridSize","useMemo","num","xs","sm","md","lg","xl","xxl","columnMap","getFormRowChildren","Children","toArray","map","item","index","type","_jsx","Fragment","span","undefined","BoxGrid","Col","_extends","filter","Boolean","innerStyle","includes","gutter","isUndefinedOrNull","anchorRef","useRef","isNestedEasyForm","current","target","dom","findParentsElement","node","_node$classList","classList","contains","error","fromLayoutClassName","preDefinedClassName","getFormLayoutClassName","className","_jsxs","ref","style","_classNames","Row","FormWrapper","autoComplete"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.editable-table{padding-bottom:15px}.editable-table .ant-form-item{margin:0!important}.editable-table .editable-text-view.ant-typography{margin-bottom:0}.editable-table:not(.et-empty-show-large) .ant-table-placeholder .ant-empty{align-items:center;display:flex;justify-content:center;margin:0}.editable-table:not(.et-empty-show-large) .ant-table-placeholder .ant-empty-image{height:25px;margin:0;width:50px}.editable-input-number-form-item .ant-input-number{width:100%}
|
|
1
|
+
.tips-wrapper{align-items:center;display:inline-flex}.tips-wrapper-icon{flex-shrink:0;opacity:.8}.tips-wrapper-text{flex:1;overflow:hidden}.editable-table{padding-bottom:15px}.editable-table .ant-form-item{margin:0!important}.editable-table .editable-text-view.ant-typography{margin-bottom:0}.editable-table:not(.et-empty-show-large) .ant-table-placeholder .ant-empty{align-items:center;display:flex;justify-content:center;margin:0}.editable-table:not(.et-empty-show-large) .ant-table-placeholder .ant-empty-image{height:25px;margin:0;width:50px}.editable-input-number-form-item .ant-input-number{width:100%}
|
package/esm/index.js
CHANGED
|
@@ -82,6 +82,8 @@ import './form-list-wrapper/index.css';
|
|
|
82
82
|
import './input-search-wrapper/index.css';
|
|
83
83
|
import './json-editor/index.css';
|
|
84
84
|
import './label-value-layout/index.css';
|
|
85
|
+
import './label-value-render/index.css';
|
|
86
|
+
import './text-overflow/index.css';
|
|
85
87
|
import './local-loading/index.css';
|
|
86
88
|
import './mention-editor/index.css';
|
|
87
89
|
import './mentions-wrapper/index.css';
|
|
@@ -110,7 +112,6 @@ import './switch-confirm-wrapper/index.css';
|
|
|
110
112
|
import './tabs-wrapper/index.css';
|
|
111
113
|
import './tag-group/index.css';
|
|
112
114
|
import './tag-wrapper/index.css';
|
|
113
|
-
import './text-overflow/index.css';
|
|
114
115
|
import './text-overflow-render/index.css';
|
|
115
116
|
import './time-picker-wrapper/index.css';
|
|
116
117
|
import './time-range-picker-wrapper/index.css';
|
|
@@ -120,5 +121,5 @@ import './tree-selector-wrapper/index.css';
|
|
|
120
121
|
import './tree-wrapper/index.css';
|
|
121
122
|
import './index.css';
|
|
122
123
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
123
|
-
export{AceEditorGroovy}from"./ace-editor-groovy/index.js";export{AceEditorJava}from"./ace-editor-java/index.js";export{AceEditorJson}from"./ace-editor-json/index.js";export{AceEditorMysql}from"./ace-editor-mysql/index.js";export{AceEditorXml}from"./ace-editor-xml/index.js";export{AlertWrapper}from"./alert-wrapper/index.js";export{AmountFenInput}from"./amount-fen-input/index.js";export{AmountFenInputFormItem}from"./amount-fen-input-form-item/index.js";export{AnchorSteps}from"./anchor-steps/index.js";export{B as BlockLayout}from"./index-1f45bfd5.js";export{Bootstrap}from"./bootstrap/index.js";export{BoxGrid,useBoxBreakpoint}from"./box-grid/index.js";export{ButtonOperate,ButtonOperateItemContent}from"./button-operate/index.js";export{ButtonWrapper}from"./button-wrapper/index.js";export{CardLayout}from"./card-layout/index.js";export{CardWrapper}from"./card-wrapper/index.js";export{CascaderWrapper}from"./cascader-wrapper/index.js";export{CheckList}from"./check-list/index.js";export{CheckboxWrapper}from"./checkbox-wrapper/index.js";export{ColorPickerWrapper}from"./color-picker-wrapper/index.js";export{C as ConfigProviderWrapper}from"./index-7f4ad045.js";export{createDrawerWrapperModel}from"./create-drawer-wrapper-model/index.js";export{createModalWrapperModel}from"./create-modal-wrapper-model/index.js";export{CssNodeHover}from"./css-node-hover/index.js";export{DataRender}from"./data-render/index.js";export{DatePickerWrapper}from"./date-picker-wrapper/index.js";export{DateRangePickerWrapper}from"./date-range-picker-wrapper/index.js";export{DateRangePickerWrapperFormItem}from"./date-range-picker-wrapper-form-item/index.js";export{dialogAlert}from"./dialog-alert/index.js";export{dialogConfirm}from"./dialog-confirm/index.js";export{dialogDrawer}from"./dialog-drawer/index.js";export{DialogDrawerContent}from"./dialog-drawer-content/index.js";export{dialogLoading}from"./dialog-loading/index.js";export{dialogModal}from"./dialog-modal/index.js";export{DragCollapse}from"./drag-collapse/index.js";export{DragCollapseFormList}from"./drag-collapse-form-list/index.js";export{DragEditableTable}from"./drag-editable-table/index.js";export{DragFormList}from"./drag-form-list/index.js";export{DragTable}from"./drag-table/index.js";export{DrawerWrapper}from"./drawer-wrapper/index.js";export{DropdownMenuWrapper}from"./dropdown-menu-wrapper/index.js";export{dynamicNode}from"./dynamic-node/index.js";export{EasyForm}from"./easy-form/index.js";export{EasyTable}from"./easy-table/index.js";export{EditableField}from"./editable-field/index.js";export{EditableFieldProvider}from"./editable-field-provider/index.js";export{EditableTable}from"./editable-table/index.js";export{EditorWrapper}from"./editor-wrapper/index.js";export{ErrorBoundaryWrapper}from"./error-boundary-wrapper/index.js";export{FbaApp}from"./fba-app/index.js";export{fbaHooks}from"./fba-hooks/index.js";export{fbaUtils}from"./fba-utils/index.js";export{FileExport}from"./file-export/index.js";export{FileImport}from"./file-import/index.js";export{FileSelect}from"./file-select/index.js";export{FlexLayout}from"./flex-layout/index.js";export{FormGrid}from"./form-grid/index.js";export{FormItemGroup}from"./form-item-group/index.js";export{FormItemHidden}from"./form-item-hidden/index.js";export{FormItemText}from"./form-item-text/index.js";export{FormItemWrapper}from"./form-item-wrapper/index.js";export{FormListWrapper}from"./form-list-wrapper/index.js";export{FormWrapper}from"./form-wrapper/index.js";export{Gap}from"./gap/index.js";export{IconWrapper}from"./icon-wrapper/index.js";export{InputSearchWrapper}from"./input-search-wrapper/index.js";export{InputTextAreaWrapper}from"./input-text-area-wrapper/index.js";export{InputWrapper}from"./input-wrapper/index.js";export{JsonEditor}from"./json-editor/index.js";export{LabelValueLayout}from"./label-value-layout/index.js";export{LocalLoading}from"./local-loading/index.js";export{MetionEditor}from"./mention-editor/index.js";export{MentionsWrapper}from"./mentions-wrapper/index.js";export{ModalAction}from"./modal-action/index.js";export{ModalWrapper}from"./modal-wrapper/index.js";export{PageFixedFooter}from"./page-fixed-footer/index.js";export{Page404}from"./page404/index.js";export{P as PaginationWrapper}from"./index-6677fbfc.js";export{Permission}from"./permission/index.js";export{preDefinedClassName}from"./pre-defined-class-name/index.js";export{RadioGroupWrapper}from"./radio-group-wrapper/index.js";export{RelationTree}from"./relation-tree/index.js";export{RequestStatus}from"./request-status/index.js";export{RichTextEditor}from"./rich-text-editor/index.js";export{RichTextViewer}from"./rich-text-viewer/index.js";export{RollLocationCenter}from"./roll-location-center/index.js";export{RollLocationInView}from"./roll-location-in-view/index.js";export{RuleDescribe}from"./rule-describe/index.js";export{SearchForm}from"./search-form/index.js";export{SearchMenu}from"./search-menu/index.js";export{SelectorWrapper}from"./selector-wrapper/index.js";export{SelectorWrapperSearch}from"./selector-wrapper-search/index.js";export{SelectorWrapperSimple}from"./selector-wrapper-simple/index.js";export{SimpleLayout}from"./simple-layout/index.js";export{SmsCountDown}from"./sms-count-down/index.js";export{SplitWrapper}from"./split-wrapper/index.js";export{styles}from"./styles/index.js";export{SvgHttpView}from"./svg-http-view/index.js";export{SwitchConfirmWrapper}from"./switch-confirm-wrapper/index.js";export{SwitchWrapper}from"./switch-wrapper/index.js";export{tableCellRender}from"./table-cell-render/index.js";export{TableScrollbar}from"./table-scrollbar/index.js";export{TableTitleTooltip}from"./table-title-tooltip/index.js";export{TabsWrapper}from"./tabs-wrapper/index.js";export{TagGroup}from"./tag-group/index.js";export{TagListSelect}from"./tag-list-select/index.js";export{TagWrapper}from"./tag-wrapper/index.js";export{TextCssEllipsis}from"./text-css-ellipsis/index.js";export{TextOverflow}from"./text-overflow/index.js";export{TextOverflowRender}from"./text-overflow-render/index.js";export{TextSymbolWrapper}from"./text-symbol-wrapper/index.js";export{TimePickerWrapper}from"./time-picker-wrapper/index.js";export{TimeRangePickerWrapper}from"./time-range-picker-wrapper/index.js";export{TimeRangePickerWrapperFormItem}from"./time-range-picker-wrapper-form-item/index.js";export{TipsTitle}from"./tips-title/index.js";export{TipsWrapper}from"./tips-wrapper/index.js";export{TreeSelectorWrapper}from"./tree-selector-wrapper/index.js";export{TreeWrapper}from"./tree-wrapper/index.js";export{UploadWrapper}from"./upload-wrapper/index.js";import"./_rollupPluginBabelHelpers-a0769acd.js";import"@dimjs/utils/cjs/class-names";import"@wove/react/cjs/hooks";import"@dimjs/lang/cjs/is-object";import"@flatbiz/utils";import"react";import"react-ace";import"./ext-language_tools-0c27f877.js";import"react/jsx-runtime";import"./mode-json-062fdb24.js";import"sql-formatter";import"antd";import"xml-formatter";import"@dimjs/utils/cjs/get";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@ant-design/icons/es/icons/MoreOutlined";import"@dimjs/lang/cjs/is-undefined";import"@dimjs/lang/cjs/is-plain-object";import"@dimjs/lang/cjs/is-string";import"@dimjs/lang/cjs/is-promise";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/lang/cjs/is-array";import"@dimjs/utils/cjs/extend";import"@ant-design/icons/es/icons/RedoOutlined";import"@dimjs/model";import"@dimjs/model-react";import"@wove/react/cjs/create-ctx";import"@ant-design/icons/es/icons/CloseCircleOutlined";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"./time-53b3f55f.js";import"react-dom/client";import"./context-1f2093c6.js";import"./dom-4d04aa64.js";import"@dimjs/lang/cjs/is-null";import"@dimjs/utils/cjs/array";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@ant-design/icons/es/icons/DragOutlined";import"@dnd-kit/utilities";import"@dnd-kit/modifiers";import"@ant-design/icons/es/icons/SaveOutlined";import"@ant-design/icons/es/icons/ExclamationCircleFilled";import"@ant-design/icons/es/icons/DownOutlined";import"@ant-design/icons/es/icons/UpOutlined";import"react-is";import"@ant-design/icons/es/icons/CloseOutlined";import"@ant-design/icons/es/icons/CheckOutlined";import"@ant-design/icons/es/icons/EditOutlined";import"./context-25d0b686.js";import"@ant-design/icons/es/icons/PlusOutlined";import"@dimjs/lang/cjs/is-boolean";import"@ant-design/icons/es/icons/DeleteOutlined";import"@wove/react/cjs/editor";import"./use-responsive-point-21b8c601.js";import"@dimjs/lang/cjs/is-deep-equal";import"@tinymce/tinymce-react";import"@ant-design/icons/es/icons/PlusCircleOutlined";import"@ant-design/icons/es/icons/FullscreenOutlined";import"@dimjs/utils/cjs/json";import"pubsub-js";import"react-split";import"@dimjs/lang/cjs/is-empty";import"@ant-design/icons/es/icons/QuestionCircleOutlined";import"dayjs/plugin/isSameOrAfter";import"dayjs/plugin/isSameOrBefore";import"@ant-design/icons/es/icons/CaretDownFilled";import"dequal";import"@dimjs/utils/cjs/tree";import"react-dom";
|
|
124
|
+
export{AceEditorGroovy}from"./ace-editor-groovy/index.js";export{AceEditorJava}from"./ace-editor-java/index.js";export{AceEditorJson}from"./ace-editor-json/index.js";export{AceEditorMysql}from"./ace-editor-mysql/index.js";export{AceEditorXml}from"./ace-editor-xml/index.js";export{AlertWrapper}from"./alert-wrapper/index.js";export{AmountFenInput}from"./amount-fen-input/index.js";export{AmountFenInputFormItem}from"./amount-fen-input-form-item/index.js";export{AnchorSteps}from"./anchor-steps/index.js";export{B as BlockLayout}from"./index-1f45bfd5.js";export{Bootstrap}from"./bootstrap/index.js";export{BoxGrid,useBoxBreakpoint}from"./box-grid/index.js";export{ButtonOperate,ButtonOperateItemContent}from"./button-operate/index.js";export{ButtonWrapper}from"./button-wrapper/index.js";export{CardLayout}from"./card-layout/index.js";export{CardWrapper}from"./card-wrapper/index.js";export{CascaderWrapper}from"./cascader-wrapper/index.js";export{CheckList}from"./check-list/index.js";export{CheckboxWrapper}from"./checkbox-wrapper/index.js";export{ColorPickerWrapper}from"./color-picker-wrapper/index.js";export{C as ConfigProviderWrapper}from"./index-7f4ad045.js";export{createDrawerWrapperModel}from"./create-drawer-wrapper-model/index.js";export{createModalWrapperModel}from"./create-modal-wrapper-model/index.js";export{CssNodeHover}from"./css-node-hover/index.js";export{DataRender}from"./data-render/index.js";export{DatePickerWrapper}from"./date-picker-wrapper/index.js";export{DateRangePickerWrapper}from"./date-range-picker-wrapper/index.js";export{DateRangePickerWrapperFormItem}from"./date-range-picker-wrapper-form-item/index.js";export{dialogAlert}from"./dialog-alert/index.js";export{dialogConfirm}from"./dialog-confirm/index.js";export{dialogDrawer}from"./dialog-drawer/index.js";export{DialogDrawerContent}from"./dialog-drawer-content/index.js";export{dialogLoading}from"./dialog-loading/index.js";export{dialogModal}from"./dialog-modal/index.js";export{DragCollapse}from"./drag-collapse/index.js";export{DragCollapseFormList}from"./drag-collapse-form-list/index.js";export{DragEditableTable}from"./drag-editable-table/index.js";export{DragFormList}from"./drag-form-list/index.js";export{DragTable}from"./drag-table/index.js";export{DrawerWrapper}from"./drawer-wrapper/index.js";export{DropdownMenuWrapper}from"./dropdown-menu-wrapper/index.js";export{dynamicNode}from"./dynamic-node/index.js";export{EasyForm}from"./easy-form/index.js";export{EasyTable}from"./easy-table/index.js";export{EditableField}from"./editable-field/index.js";export{EditableFieldProvider}from"./editable-field-provider/index.js";export{EditableTable}from"./editable-table/index.js";export{EditorWrapper}from"./editor-wrapper/index.js";export{ErrorBoundaryWrapper}from"./error-boundary-wrapper/index.js";export{FbaApp}from"./fba-app/index.js";export{fbaHooks}from"./fba-hooks/index.js";export{fbaUtils}from"./fba-utils/index.js";export{FileExport}from"./file-export/index.js";export{FileImport}from"./file-import/index.js";export{FileSelect}from"./file-select/index.js";export{FlexLayout}from"./flex-layout/index.js";export{FormGrid}from"./form-grid/index.js";export{FormItemGroup}from"./form-item-group/index.js";export{FormItemHidden}from"./form-item-hidden/index.js";export{FormItemText}from"./form-item-text/index.js";export{FormItemWrapper}from"./form-item-wrapper/index.js";export{FormListWrapper}from"./form-list-wrapper/index.js";export{FormWrapper}from"./form-wrapper/index.js";export{Gap}from"./gap/index.js";export{IconWrapper}from"./icon-wrapper/index.js";export{InputSearchWrapper}from"./input-search-wrapper/index.js";export{InputTextAreaWrapper}from"./input-text-area-wrapper/index.js";export{InputWrapper}from"./input-wrapper/index.js";export{JsonEditor}from"./json-editor/index.js";export{LabelValueLayout}from"./label-value-layout/index.js";export{LabelValueRender}from"./label-value-render/index.js";export{LocalLoading}from"./local-loading/index.js";export{MetionEditor}from"./mention-editor/index.js";export{MentionsWrapper}from"./mentions-wrapper/index.js";export{ModalAction}from"./modal-action/index.js";export{ModalWrapper}from"./modal-wrapper/index.js";export{PageFixedFooter}from"./page-fixed-footer/index.js";export{Page404}from"./page404/index.js";export{P as PaginationWrapper}from"./index-6677fbfc.js";export{Permission}from"./permission/index.js";export{preDefinedClassName}from"./pre-defined-class-name/index.js";export{RadioGroupWrapper}from"./radio-group-wrapper/index.js";export{RelationTree}from"./relation-tree/index.js";export{RequestStatus}from"./request-status/index.js";export{RichTextEditor}from"./rich-text-editor/index.js";export{RichTextViewer}from"./rich-text-viewer/index.js";export{RollLocationCenter}from"./roll-location-center/index.js";export{RollLocationInView}from"./roll-location-in-view/index.js";export{RuleDescribe}from"./rule-describe/index.js";export{SearchForm}from"./search-form/index.js";export{SearchMenu}from"./search-menu/index.js";export{SelectorWrapper}from"./selector-wrapper/index.js";export{SelectorWrapperSearch}from"./selector-wrapper-search/index.js";export{SelectorWrapperSimple}from"./selector-wrapper-simple/index.js";export{SimpleLayout}from"./simple-layout/index.js";export{SmsCountDown}from"./sms-count-down/index.js";export{SplitWrapper}from"./split-wrapper/index.js";export{styles}from"./styles/index.js";export{SvgHttpView}from"./svg-http-view/index.js";export{SwitchConfirmWrapper}from"./switch-confirm-wrapper/index.js";export{SwitchWrapper}from"./switch-wrapper/index.js";export{tableCellRender}from"./table-cell-render/index.js";export{TableScrollbar}from"./table-scrollbar/index.js";export{TableTitleTooltip}from"./table-title-tooltip/index.js";export{TabsWrapper}from"./tabs-wrapper/index.js";export{TagGroup}from"./tag-group/index.js";export{TagListSelect}from"./tag-list-select/index.js";export{TagWrapper}from"./tag-wrapper/index.js";export{TextCssEllipsis}from"./text-css-ellipsis/index.js";export{TextOverflow}from"./text-overflow/index.js";export{TextOverflowRender}from"./text-overflow-render/index.js";export{TextSymbolWrapper}from"./text-symbol-wrapper/index.js";export{TimePickerWrapper}from"./time-picker-wrapper/index.js";export{TimeRangePickerWrapper}from"./time-range-picker-wrapper/index.js";export{TimeRangePickerWrapperFormItem}from"./time-range-picker-wrapper-form-item/index.js";export{TipsTitle}from"./tips-title/index.js";export{TipsWrapper}from"./tips-wrapper/index.js";export{TreeSelectorWrapper}from"./tree-selector-wrapper/index.js";export{TreeWrapper}from"./tree-wrapper/index.js";export{UploadWrapper}from"./upload-wrapper/index.js";import"./_rollupPluginBabelHelpers-a0769acd.js";import"@dimjs/utils/cjs/class-names";import"@wove/react/cjs/hooks";import"@dimjs/lang/cjs/is-object";import"@flatbiz/utils";import"react";import"react-ace";import"./ext-language_tools-0c27f877.js";import"react/jsx-runtime";import"./mode-json-062fdb24.js";import"sql-formatter";import"antd";import"xml-formatter";import"@dimjs/utils/cjs/get";import"@dimjs/lang/cjs/is-number";import"ahooks";import"@ant-design/icons/es/icons/MoreOutlined";import"@dimjs/lang/cjs/is-undefined";import"@dimjs/lang/cjs/is-plain-object";import"@dimjs/lang/cjs/is-string";import"@dimjs/lang/cjs/is-promise";import"@ant-design/icons/es/icons/LoadingOutlined";import"@dimjs/lang/cjs/is-array";import"@dimjs/utils/cjs/extend";import"@ant-design/icons/es/icons/RedoOutlined";import"@dimjs/model";import"@dimjs/model-react";import"@wove/react/cjs/create-ctx";import"@ant-design/icons/es/icons/CloseCircleOutlined";import"antd/es/locale/en_US";import"antd/es/locale/zh_CN";import"dayjs";import"dayjs/locale/en";import"dayjs/locale/zh-cn";import"dayjs/plugin/advancedFormat";import"dayjs/plugin/customParseFormat";import"dayjs/plugin/localeData";import"dayjs/plugin/utc";import"dayjs/plugin/weekday";import"dayjs/plugin/weekOfYear";import"dayjs/plugin/weekYear";import"./time-53b3f55f.js";import"react-dom/client";import"./context-1f2093c6.js";import"./dom-4d04aa64.js";import"@dimjs/lang/cjs/is-null";import"@dimjs/utils/cjs/array";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@ant-design/icons/es/icons/DragOutlined";import"@dnd-kit/utilities";import"@dnd-kit/modifiers";import"@ant-design/icons/es/icons/SaveOutlined";import"@ant-design/icons/es/icons/ExclamationCircleFilled";import"@ant-design/icons/es/icons/DownOutlined";import"@ant-design/icons/es/icons/UpOutlined";import"react-is";import"@ant-design/icons/es/icons/CloseOutlined";import"@ant-design/icons/es/icons/CheckOutlined";import"@ant-design/icons/es/icons/EditOutlined";import"./context-25d0b686.js";import"@ant-design/icons/es/icons/PlusOutlined";import"@dimjs/lang/cjs/is-boolean";import"@ant-design/icons/es/icons/DeleteOutlined";import"@wove/react/cjs/editor";import"./use-responsive-point-21b8c601.js";import"@dimjs/lang/cjs/is-deep-equal";import"@flatbiz/antd";import"@tinymce/tinymce-react";import"@ant-design/icons/es/icons/PlusCircleOutlined";import"@ant-design/icons/es/icons/FullscreenOutlined";import"@dimjs/utils/cjs/json";import"pubsub-js";import"react-split";import"@dimjs/lang/cjs/is-empty";import"@ant-design/icons/es/icons/QuestionCircleOutlined";import"dayjs/plugin/isSameOrAfter";import"dayjs/plugin/isSameOrBefore";import"@ant-design/icons/es/icons/CaretDownFilled";import"dequal";import"@dimjs/utils/cjs/tree";import"react-dom";
|
|
124
125
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.label-value-render .label-value-label{color:rgba(0,0,0,.45);flex-shrink:0;font-weight:400;padding:8px 10px}.label-value-render .label-value-value{flex:1;overflow:hidden;padding:8px 0}.label-value-render .text-symbol-wrapper{display:inline-block;max-width:100%}.label-value-render .tips-wrapper{max-width:100%}.label-value-render .tips-wrapper .tips-wrapper-text{flex:initial}.label-value-render-border .box-grad-row{border-bottom:1px solid rgba(5,5,5,.06);border-left:1px solid rgba(5,5,5,.06);border-radius:6px;border-top:1px solid rgba(5,5,5,.06);overflow:hidden}.label-value-render-border .box-grad-col:not(.label-value-last-tr){border-bottom:1px solid rgba(5,5,5,.06)}.label-value-render-border .label-value-label{background-color:rgba(0,0,0,.02);color:rgba(0,0,0,.45);font-weight:400;padding:8px 16px}.label-value-render-border .label-value-value{border-left:1px solid rgba(5,5,5,.06);border-right:1px solid rgba(5,5,5,.06);padding:8px 16px}.label-value-render-right .label-value-label{text-align:right}.label-value-render-right .label-value-label .tips-wrapper{justify-content:right}.label-value-render-left .label-value-label{text-align:left}.label-value-render-center .label-value-label{text-align:center}.label-value-render-center .label-value-label .tips-wrapper{justify-content:center}.label-value-tr{display:flex}.label-value-render-vertical .label-value-tr{display:block}.label-value-render-vertical .label-value-label{display:block;padding:0;text-align:left}.label-value-render-vertical .label-value-value{display:block;padding:5px 0 15px}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import './../text-overflow/index.css';
|
|
3
|
+
import './../fba-hooks/index.css';
|
|
4
|
+
import './../tips-wrapper/index.css';
|
|
5
|
+
import './index.css';
|
|
6
|
+
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
7
|
+
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 a}from"react";import{fbaHooks as s,BoxGrid as n,TextSymbolWrapper as o}from"@flatbiz/antd";import{arrayTotal as u,isUndefinedOrNull as p}from"@flatbiz/utils";import{TextOverflow as d}from"../text-overflow/index.js";import{TipsWrapper as m}from"../tips-wrapper/index.js";import{jsx as f,jsxs as v}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-string";import"ahooks";import"antd";import"../fba-hooks/index.js";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";import"@ant-design/icons/es/icons/QuestionCircleOutlined";var c=function e(r){var i=[];var t=0;var a=[];for(var s=0;s<r.length;s++){var n=r[s];var o=n.grid;var p=l({},n,{grid:o});if(t+o<=24&&o>0){t+=o;a.push(p)}else{i.push(a);t=o;a=[p]}}if(a.length>0){i.push(a)}if(i.length>0){i=i.map((function(e,r){if(e.length===1){e[0].grid=24}else{var l=u(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 d=[];i.forEach((function(e){d=d.concat(e)}));console.log("resultsFt",d);return d};var x=function u(x){var h=s.useResponsivePoint()||"";var g=i(),b=g[0],j=g[1];var y=x.column,w=x.forceColumn,N=x.labelAlign,k=x.labelWidth,B=x.dataList,C=x.border,P=x.width;var L=p(x.ellipsis)?true:x.ellipsis;var R=!C?h==="xs"||b==="xs":false;var S=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[3]:r[y]}),[y,w]);var T=t((function(){if(!b)return undefined;var e=[];B.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:S[b]}))}}));return c(e.filter(Boolean))}),[b,S]);var q=C?"":":";var z=function e(){return T==null?void 0:T.map((function(e,i){var t=p(e.ellipsis)?L:e.ellipsis;var s=R?undefined:k||100;var u=""+e.label+q;if(e.tips&&t){u=f(m,{tipType:"tooltip",tooltipProps:{title:e.tips},children:f(d,{text:u})})}else if(e.tips){u=f(m,{tipType:"tooltip",tooltipProps:{title:e.tips},children:u})}else if(t){u=f(d,{text:u})}return f(n.Col,l({},S,{span:e.grid,className:r("label-value-tr",{"label-value-last-tr":e.isLast}),children:!e.replenish?v(a,{children:[f("span",{className:"label-value-label",style:l({width:s},x.labelStyle),children:e.required?f(o,{text:u,symbolType:"required"}):u}),t?f("span",{className:"label-value-value",style:x.valueStyle,children:f(d,{text:e.value})}):f("span",{className:"label-value-value",style:x.valueStyle,children:e.value})]}):f(a,{})}),i)})).filter(Boolean)};var E=e.useCallbackRef((function(e){j(e)}));var _=t((function(){if(["xs","sm"].includes(h)||!P){return{}}return{width:P}}),[h]);var A=N||(C?"left":"right");return f(n.Row,{style:l({},_,x.style),className:r("label-value-render","label-value-render-"+A,{"label-value-render-border":C,"label-value-render-vertical":R},x.className),gutter:C?[0,0]:[30,0],onBoxBreakpointChange:E,children:z()})};export{x as LabelValueRender};
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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 { BoxGrid, fbaHooks, TBoxBreakpoint, TextSymbolWrapper } from '@flatbiz/antd';\nimport { isUndefinedOrNull } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { TextOverflow } from '../text-overflow';\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 * 定义一行显示几列, 默认值:3\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 dataList: 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, dataList, 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[3] : columnMap[column];\n }, [column, forceColumn]);\n\n const renderList = useMemo(() => {\n if (!breakpoint) return undefined;\n const dataListNew: TLabelValueRenderItem[] = [];\n dataList.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 className=\"label-value-value\" style={props.valueStyle}>\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","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","onBoxBreakpointChange","_hooks","useCallbackRef","innerStyle","includes","align","Row","gutter"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.text-overflow{display:flex;overflow:hidden;width:100%}.tow-content{position:relative;text-align:
|
|
1
|
+
.text-overflow{display:flex;overflow:hidden;width:100%}.tow-content{position:relative;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;width:100%}.tow-content,.tow-hidden{display:inline-block;overflow:hidden}.tow-hidden{height:0;left:0;position:absolute;top:0;width:0}.tow-hidden span{white-space:nowrap}.tow-hidden span,.tow-inner-text{display:inline-block}.tow-trigger .tow-content,.tow-trigger .tow-cut-content{color:#1677ff;transition:color .3s}.tow-trigger .tow-show-text{cursor:pointer}.tow-trigger .tow-show-text:hover{color:#69b1ff}
|
|
@@ -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{useRef as
|
|
5
|
+
import{_ as t}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isString as e}from"@dimjs/lang/cjs/is-string";import{useRef as r,Fragment as n,useMemo as i,memo as a}from"react";import{classNames as o}from"@dimjs/utils/cjs/class-names";import{useSize as l}from"ahooks";import{Tooltip as c}from"antd";import{fbaHooks as s}from"../fba-hooks/index.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{getStrByteLen as m,subStringByBytes as h}from"@flatbiz/utils";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"../use-responsive-point-21b8c601.js";var v=function t(e){var i=r(null);var a=l(i);var m=(a==null?void 0:a.width)||0;var h=s.useMemoCustom((function(){if(i.current){var t;var e=((t=i.current.querySelector(".tow-inner-text"))==null?void 0:t.clientWidth)||0;return e}return 0}),[i.current]);var v=h>m;return u(n,{children:d("div",{className:o("text-overflow",{"tow-trigger":e.onClick}),ref:i,children:[u("span",{className:"tow-hidden",children:u("span",{className:"tow-inner-text",children:e.text})}),u(c,{title:v?e.text:undefined,children:u("span",{className:"tow-content",children:u("span",{className:"tow-show-text",onClick:e.onClick,children:e.text})})})]})})};var f=function t(e){var i=r(null);var a=l(i);var v=e.maxLength;var f=(a==null?void 0:a.width)||0;var x=e.text;var w=s.useMemoCustom((function(){return m(x)>v*2}),[v,x]);var p=s.useMemoCustom((function(){if(i.current){var t;var e=((t=i.current.querySelector(".tow-inner-text"))==null?void 0:t.clientWidth)||0;return e}return 0}),[i.current]);var N=w&&p<f;var g=f<p+1||w;return u(n,{children:d("div",{className:o("text-overflow",{"tow-trigger":e.onClick}),ref:i,children:[u("span",{className:"tow-hidden",children:u("span",{className:"tow-inner-text",children:h(x,e.maxLength*2)})}),u(c,{title:g?x:undefined,children:N?u("span",{className:"tow-cut-content",children:d("span",{className:"tow-show-text",onClick:e.onClick,children:[h(x,e.maxLength*2),"..."]})}):u("span",{className:"tow-content",children:u("span",{className:"tow-show-text",onClick:e.onClick,children:x})})})]})})};var x=function t(e){var a=r(null);var m=l(a);var h=(m==null?void 0:m.width)||0;var v=e.maxWidth||0;var f=s.useMemoCustom((function(){if(a.current){var t;var e=((t=a.current.querySelector(".tow-inner-text"))==null?void 0:t.clientWidth)||0;return e}return 0}),[a.current]);var x=i((function(){if(f<v)return undefined;var t=f>v?v:f;if(h>t){return t}return undefined}),[f,v,h]);var w=x||f>h;return u(n,{children:d("div",{className:o("text-overflow",{"tow-trigger":e.onClick}),ref:a,children:[u("span",{className:"tow-hidden",children:u("span",{className:"tow-inner-text",children:e.text})}),u(c,{title:w?e.text:undefined,children:u("span",{className:"tow-content",style:{width:x},children:u("span",{className:"tow-show-text",onClick:e.onClick,children:e.text})})})]})})};var w=function r(n){if(n.maxLength&&e(n.text)){return u(f,t({},n))}if(n.maxWidth){return u(x,t({},n))}return u(v,t({},n))};var p=a(w,(function(t,e){if(t.text!==e.text||t.maxLength!==e.maxLength||t.maxWidth!==t.maxWidth){return false}return true}));export{p 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 { Fragment, 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 <Fragment>\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\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {props.text}\n </span>\n </span>\n </Tooltip>\n </div>\n </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { getStrByteLen, subStringByBytes } from '@flatbiz/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { Fragment, 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\n const needCut = fbaHooks.useMemoCustom(() => {\n return getStrByteLen(props.text) > maxLength * 2;\n }, [maxLength, props.text]);\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 return (\n <Fragment>\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\">\n {subStringByBytes(props.text, (props.maxLength as number) * 2)}\n </span>\n </span>\n\n <Tooltip title={showTips ? props.text : undefined}>\n {showCustomEllipsis ? (\n <span className=\"tow-cut-content\">\n <span className=\"tow-show-text\" onClick={props.onClick}>\n {subStringByBytes(props.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 {props.text}\n </span>\n </span>\n )}\n </Tooltip>\n </div>\n </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { Fragment, 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 <Fragment>\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 </Fragment>\n );\n};\n","import { 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) {\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","_jsx","Fragment","children","_jsxs","className","_classNames","onClick","ref","text","Tooltip","title","undefined","OverflowLength","maxLength","needCut","getStrByteLen","cutedTextWidth","cutContentWidth","showCustomEllipsis","subStringByBytes","OverflowWidth","maxWidth","showTextWidth","useMemo","textWidthBast","style","InnerTextOverflow","_extends","TextOverflow","memo","pre","next"],"mappings":";8gBAQO,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,EAACC,EAAQ,CAAAC,SACPC,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAepB,EAAMqB,UAEvBC,IAAKrB,EAAQgB,UAEbF,EAAA,OAAA,CAAMI,UAAU,aAAYF,SAC1BF,EAAA,OAAA,CAAMI,UAAU,iBAAgBF,SAAEjB,EAAMuB,SAG1CR,EAACS,EAAO,CAACC,MAAOX,EAAWd,EAAMuB,KAAOG,UAAUT,SAChDF,EAAA,OAAA,CAAMI,UAAU,cAAaF,SAC3BF,EAAA,OAAA,CAAMI,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDjB,EAAMuB,eAOrB,ECvCO,IAAMI,EAAiB,SAAjBA,EAAkB3B,GAC7B,IAAMC,EAAUC,EAAuB,MACvC,IAAMC,EAAOC,EAAQH,GACrB,IAAM2B,EAAY5B,EAAM4B,UACxB,IAAMvB,GAAkBF,eAAAA,EAAMG,QAAS,EAEvC,IAAMuB,EAAUrB,EAASC,eAAc,WACrC,OAAOqB,EAAc9B,EAAMuB,MAAQK,EAAY,CAChD,GAAE,CAACA,EAAW5B,EAAMuB,OAGrB,IAAMQ,EAAiBvB,EAASC,eAAc,WAC5C,GAAIR,EAAQS,QAAS,CAAA,IAAAC,EAEnB,IAAMqB,IAAkBrB,EAAAV,EAAQS,QAAQE,cAAc,qBAAkB,UAAA,EAAhDD,EAAkDE,cAAe,EAEzF,OAAOmB,CACT,CACA,OAAO,CACT,GAAG,CAAC/B,EAAQS,UAEZ,IAAMuB,EAAqBJ,GAAWE,EAAiB1B,EAEvD,IAAMS,EAAWT,EAAkB0B,EAAiB,GAAKF,EAEzD,OACEd,EAACC,EAAQ,CAAAC,SACPC,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAepB,EAAMqB,UAEvBC,IAAKrB,EAAQgB,UAEbF,EAAA,OAAA,CAAMI,UAAU,aAAYF,SAC1BF,EAAA,OAAA,CAAMI,UAAU,iBAAgBF,SAC7BiB,EAAiBlC,EAAMuB,KAAOvB,EAAM4B,UAAuB,OAIhEb,EAACS,EAAO,CAACC,MAAOX,EAAWd,EAAMuB,KAAOG,UAAUT,SAC/CgB,EACClB,EAAA,OAAA,CAAMI,UAAU,kBAAiBF,SAC/BC,EAAA,OAAA,CAAMC,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDiB,CAAAA,EAAiBlC,EAAMuB,KAAOvB,EAAM4B,UAAuB,GAAG,WAKnEb,EAAA,OAAA,CAAMI,UAAU,cAAaF,SAC3BF,EAAA,OAAA,CAAMI,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDjB,EAAMuB,eAQvB,EC3DO,IAAMY,EAAgB,SAAhBA,EAAiBnC,GAC5B,IAAMC,EAAUC,EAAuB,MACvC,IAAMC,EAAOC,EAAQH,GACrB,IAAMI,GAAkBF,eAAAA,EAAMG,QAAS,EACvC,IAAM8B,EAAWpC,EAAMoC,UAAY,EAGnC,IAAM7B,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,IAAM2B,EAAgBC,GAAQ,WAC5B,GAAI/B,EAAY6B,EAAU,OAAOV,UACjC,IAAMa,EAAgBhC,EAAY6B,EAAWA,EAAW7B,EACxD,GAAIF,EAAkBkC,EAAe,CACnC,OAAOA,CACT,CACA,OAAOb,SACR,GAAE,CAACnB,EAAW6B,EAAU/B,IACzB,IAAMS,EAAWuB,GAAiB9B,EAAYF,EAE9C,OACEU,EAACC,EAAQ,CAAAC,SACPC,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAepB,EAAMqB,UAEvBC,IAAKrB,EAAQgB,UAEbF,EAAA,OAAA,CAAMI,UAAU,aAAYF,SAC1BF,EAAA,OAAA,CAAMI,UAAU,iBAAgBF,SAAEjB,EAAMuB,SAG1CR,EAACS,EAAO,CAACC,MAAOX,EAAWd,EAAMuB,KAAOG,UAAUT,SAChDF,EAAA,OAAA,CAAMI,UAAU,cAAcqB,MAAO,CAAElC,MAAO+B,GAAgBpB,SAC5DF,EAAA,OAAA,CAAMI,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDjB,EAAMuB,eAOrB,EChDA,IAAMkB,EAAoB,SAApBA,EAAqBzC,GACzB,GAAIA,EAAM4B,UAAW,CACnB,OAAOb,EAACY,EAAce,EAAK1C,CAAAA,EAAAA,GAC7B,CACA,GAAIA,EAAMoC,SAAU,CAClB,OAAOrB,EAACoB,EAAaO,EAAK1C,CAAAA,EAAAA,GAC5B,CACA,OAAOe,EAAChB,EAAY2C,EAAK1C,CAAAA,EAAAA,GAC3B,EAyBO,IAAM2C,EAAeC,EAAKH,GAAmB,SAACI,EAAKC,GACxD,GAAID,EAAItB,OAASuB,EAAKvB,MAAQsB,EAAIjB,YAAckB,EAAKlB,WAAaiB,EAAIT,WAAaS,EAAIT,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 { Fragment, 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 <Fragment>\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 </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { getStrByteLen, subStringByBytes } from '@flatbiz/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { Fragment, 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 = fbaHooks.useMemoCustom(() => {\n return getStrByteLen(text) > maxLength * 2;\n }, [maxLength, text]);\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 return (\n <Fragment>\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 </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { useSize } from 'ahooks';\nimport { Tooltip } from 'antd';\nimport { Fragment, 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 <Fragment>\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 </Fragment>\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","_jsx","Fragment","children","_jsxs","className","_classNames","onClick","ref","text","Tooltip","title","undefined","OverflowLength","maxLength","needCut","getStrByteLen","cutedTextWidth","cutContentWidth","showCustomEllipsis","subStringByBytes","OverflowWidth","maxWidth","showTextWidth","useMemo","textWidthBast","style","InnerTextOverflow","_isString","_extends","TextOverflow","memo","pre","next"],"mappings":";mkBAQO,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,EAACC,EAAQ,CAAAC,SACPC,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAepB,EAAMqB,UAEvBC,IAAKrB,EAAQgB,UAEbF,EAAA,OAAA,CAAMI,UAAU,aAAYF,SAC1BF,EAAA,OAAA,CAAMI,UAAU,iBAAgBF,SAAEjB,EAAMuB,SAE1CR,EAACS,EAAO,CAACC,MAAOX,EAAWd,EAAMuB,KAAOG,UAAUT,SAChDF,EAAA,OAAA,CAAMI,UAAU,cAAaF,SAC3BF,EAAA,OAAA,CAAMI,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDjB,EAAMuB,eAOrB,ECtCO,IAAMI,EAAiB,SAAjBA,EAAkB3B,GAC7B,IAAMC,EAAUC,EAAuB,MACvC,IAAMC,EAAOC,EAAQH,GACrB,IAAM2B,EAAY5B,EAAM4B,UACxB,IAAMvB,GAAkBF,eAAAA,EAAMG,QAAS,EACvC,IAAMiB,EAAOvB,EAAMuB,KAEnB,IAAMM,EAAUrB,EAASC,eAAc,WACrC,OAAOqB,EAAcP,GAAQK,EAAY,CAC3C,GAAG,CAACA,EAAWL,IAGf,IAAMQ,EAAiBvB,EAASC,eAAc,WAC5C,GAAIR,EAAQS,QAAS,CAAA,IAAAC,EAEnB,IAAMqB,IAAkBrB,EAAAV,EAAQS,QAAQE,cAAc,qBAAkB,UAAA,EAAhDD,EAAkDE,cAAe,EAEzF,OAAOmB,CACT,CACA,OAAO,CACT,GAAG,CAAC/B,EAAQS,UAEZ,IAAMuB,EAAqBJ,GAAWE,EAAiB1B,EAEvD,IAAMS,EAAWT,EAAkB0B,EAAiB,GAAKF,EAEzD,OACEd,EAACC,EAAQ,CAAAC,SACPC,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAepB,EAAMqB,UAEvBC,IAAKrB,EAAQgB,UAEbF,EAAA,OAAA,CAAMI,UAAU,aAAYF,SAC1BF,EAAA,OAAA,CAAMI,UAAU,iBAAgBF,SAAEiB,EAAiBX,EAAOvB,EAAM4B,UAAuB,OAGzFb,EAACS,EAAO,CAACC,MAAOX,EAAWS,EAAOG,UAAUT,SACzCgB,EACClB,EAAA,OAAA,CAAMI,UAAU,kBAAiBF,SAC/BC,EAAA,OAAA,CAAMC,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDiB,CAAAA,EAAiBX,EAAOvB,EAAM4B,UAAuB,GAAG,WAK7Db,EAAA,OAAA,CAAMI,UAAU,cAAaF,SAC3BF,EAAA,OAAA,CAAMI,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDM,YAQjB,EC1DO,IAAMY,EAAgB,SAAhBA,EAAiBnC,GAC5B,IAAMC,EAAUC,EAAuB,MACvC,IAAMC,EAAOC,EAAQH,GACrB,IAAMI,GAAkBF,eAAAA,EAAMG,QAAS,EACvC,IAAM8B,EAAWpC,EAAMoC,UAAY,EAGnC,IAAM7B,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,IAAM2B,EAAgBC,GAAQ,WAC5B,GAAI/B,EAAY6B,EAAU,OAAOV,UACjC,IAAMa,EAAgBhC,EAAY6B,EAAWA,EAAW7B,EACxD,GAAIF,EAAkBkC,EAAe,CACnC,OAAOA,CACT,CACA,OAAOb,SACR,GAAE,CAACnB,EAAW6B,EAAU/B,IACzB,IAAMS,EAAWuB,GAAiB9B,EAAYF,EAE9C,OACEU,EAACC,EAAQ,CAAAC,SACPC,EAAA,MAAA,CACEC,UAAWC,EAAW,gBAAiB,CACrC,cAAepB,EAAMqB,UAEvBC,IAAKrB,EAAQgB,UAEbF,EAAA,OAAA,CAAMI,UAAU,aAAYF,SAC1BF,EAAA,OAAA,CAAMI,UAAU,iBAAgBF,SAAEjB,EAAMuB,SAG1CR,EAACS,EAAO,CAACC,MAAOX,EAAWd,EAAMuB,KAAOG,UAAUT,SAChDF,EAAA,OAAA,CAAMI,UAAU,cAAcqB,MAAO,CAAElC,MAAO+B,GAAgBpB,SAC5DF,EAAA,OAAA,CAAMI,UAAU,gBAAgBE,QAASrB,EAAMqB,QAAQJ,SACpDjB,EAAMuB,eAOrB,EC/CA,IAAMkB,EAAoB,SAApBA,EAAqBzC,GACzB,GAAIA,EAAM4B,WAAac,EAAS1C,EAAMuB,MAAO,CAC3C,OAAOR,EAACY,EAAcgB,EAAK3C,CAAAA,EAAAA,GAC7B,CACA,GAAIA,EAAMoC,SAAU,CAClB,OAAOrB,EAACoB,EAAaQ,EAAK3C,CAAAA,EAAAA,GAC5B,CACA,OAAOe,EAAChB,EAAY4C,EAAK3C,CAAAA,EAAAA,GAC3B,EAyBO,IAAM4C,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 +1 @@
|
|
|
1
|
-
.text-symbol-wrapper{position:relative}.tsw-symbol{font-size:14px;line-height:normal;position:absolute;top:50%}.tsw-symbol-before{transform:translate(-100%,-50%)}.tsw-symbol-after{transform:translate(100%,-50%)}.tsw-required .tsw-symbol{color:#ff4d4f}
|
|
1
|
+
.text-symbol-wrapper{display:inline-block;position:relative}.tsw-symbol{font-size:14px;line-height:normal;position:absolute;top:50%}.tsw-symbol-before{transform:translate(-100%,-50%)}.tsw-symbol-after{transform:translate(100%,-50%)}.tsw-required .tsw-symbol{color:#ff4d4f}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.tips-wrapper{align-items:center;display:inline-flex}.tips-wrapper-icon{flex-shrink:0;opacity:.8}.tips-wrapper-text{flex:1;overflow:hidden}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import './index.css';
|
|
3
3
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
-
import{_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import
|
|
4
|
+
import{_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as s}from"@dimjs/utils/cjs/class-names";import r from"@ant-design/icons/es/icons/QuestionCircleOutlined";import{isUndefinedOrNull as i}from"@flatbiz/utils";import{Tooltip as a,Popover as p}from"antd";import{Fragment as l}from"react";import{jsx as t,jsxs as n}from"react/jsx-runtime";var c=function c(o){var m=o.icon||t(r,{});var h=o.trigger||"icon";var d=i(o.gap)?3:o.gap;if(o.tipType==="tooltip"&&h==="icon"){return n("span",{className:s("tips-wrapper",o.className),style:o.style,children:[t("span",{className:"tips-wrapper-text",style:{marginRight:d},children:o.children}),t(a,e({},o.tooltipProps,{children:t("span",{className:"tips-wrapper-icon",children:m})}))]})}if(o.tipType==="tooltip"&&h==="all"){return t(a,e({},o.tooltipProps,{children:n("span",{className:s("tips-wrapper",o.className),style:o.style,children:[t("span",{className:"tips-wrapper-text",style:{marginRight:d},children:o.children}),t("span",{className:"tips-wrapper-icon",children:m})]})}))}if(o.tipType==="popover"&&h==="icon"){return n("span",{className:s("tips-wrapper",o.className),style:o.style,children:[t("span",{className:"tips-wrapper-text",style:{marginRight:d},children:o.children}),t(p,e({},o.popoverProps,{children:t("span",{className:"tips-wrapper-icon",children:m})}))]})}if(o.tipType==="popover"&&h==="all"){return t(p,e({},o.popoverProps,{children:n("span",{className:s("tips-wrapper",o.className),style:o.style,children:[t("span",{className:"tips-wrapper-text",style:{marginRight:d},children:o.children}),t("span",{className:"tips-wrapper-icon",children:m})]})}))}if(o.onClick&&h==="icon"){return n("span",{className:s("tips-wrapper",o.className),style:o.style,children:[t("span",{className:"tips-wrapper-text",style:{marginRight:d},children:o.children}),t("span",{onClick:o.onClick,className:"tips-wrapper-icon",children:m})]})}if(o.onClick&&h==="all"){return n("span",{className:s("tips-wrapper",o.className),style:o.style,onClick:o.onClick,children:[t("span",{className:"tips-wrapper-text",style:{marginRight:d},children:o.children}),t("span",{className:"tips-wrapper-icon",children:m})]})}if(o.icon){return n("span",{className:s("tips-wrapper",o.className),style:o.style,children:[t("span",{className:"tips-wrapper-text",style:{marginRight:d},children:o.children}),t("span",{className:"tips-wrapper-icon",children:m})]})}return t(l,{children:o.children})};export{c as TipsWrapper};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/tips-wrapper/tips-wrapper.tsx"],"sourcesContent":["import { QuestionCircleOutlined } from '@ant-design/icons';\nimport { isUndefinedOrNull } from '@flatbiz/utils';\nimport { Popover, PopoverProps,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/tips-wrapper/tips-wrapper.tsx"],"sourcesContent":["import { QuestionCircleOutlined } from '@ant-design/icons';\nimport { classNames } from '@dimjs/utils';\nimport { isUndefinedOrNull } from '@flatbiz/utils';\nimport { Popover, PopoverProps, Tooltip, TooltipProps } from 'antd';\nimport { Fragment, ReactNode, type CSSProperties, type ReactElement } from 'react';\nimport './style.less';\n\nexport type TipsWrapperProps = {\n // 间隙,默认值:3\n gap?: number;\n className?: string;\n style?: CSSProperties;\n children?: ReactNode;\n icon?: ReactElement;\n /** Icon添加点击事件,设置hoverTips后失效 */\n onClick?: (event) => void;\n /**\n * 提示效果类型\n * ```\n * 1. popover 气泡卡片,内容通过popoverProps设置\n * 2. tooltip 文字提示,内容通过tooltipProps设置\n * ```\n */\n tipType?: 'popover' | 'tooltip';\n popoverProps?: PopoverProps;\n tooltipProps?: TooltipProps;\n trigger?: 'icon' | 'all';\n};\n\n/**\n * 为目标元素右侧添加Icon\n * ```\n * Icon有两种交互行为\n * 1. 鼠标悬浮显示提示效果;\n * 2. 为Icon添加点击事件\n *\n * 例如:\n * 1.\n * <TipsWrapper tipType=\"tooltip\" tooltipProps={{ title:'说明文案' }}>ABC</TipsWrapper>\n * 2.\n * <TipsWrapper tipType=\"popover\" popoverProps={{ title:'说明标题', content:'说明内容' }}>ABC</TipsWrapper>\n * 3.\n * <TipsWrapper onClick={noop}>ABC</TipsWrapper>\n * ```\n */\nexport const TipsWrapper = (props: TipsWrapperProps) => {\n const icon = props.icon || <QuestionCircleOutlined />;\n const trigger = props.trigger || 'icon';\n const gap = isUndefinedOrNull(props.gap) ? 3 : props.gap;\n if (props.tipType === 'tooltip' && trigger === 'icon') {\n return (\n <span className={classNames('tips-wrapper', props.className)} style={props.style}>\n <span className=\"tips-wrapper-text\" style={{ marginRight: gap }}>\n {props.children}\n </span>\n <Tooltip {...props.tooltipProps}>\n <span className=\"tips-wrapper-icon\">{icon}</span>\n </Tooltip>\n </span>\n );\n }\n if (props.tipType === 'tooltip' && trigger === 'all') {\n return (\n <Tooltip {...props.tooltipProps}>\n <span className={classNames('tips-wrapper', props.className)} style={props.style}>\n <span className=\"tips-wrapper-text\" style={{ marginRight: gap }}>\n {props.children}\n </span>\n <span className=\"tips-wrapper-icon\">{icon}</span>\n </span>\n </Tooltip>\n );\n }\n\n if (props.tipType === 'popover' && trigger === 'icon') {\n return (\n <span className={classNames('tips-wrapper', props.className)} style={props.style}>\n <span className=\"tips-wrapper-text\" style={{ marginRight: gap }}>\n {props.children}\n </span>\n <Popover {...props.popoverProps}>\n <span className=\"tips-wrapper-icon\">{icon}</span>\n </Popover>\n </span>\n );\n }\n if (props.tipType === 'popover' && trigger === 'all') {\n return (\n <Popover {...props.popoverProps}>\n <span className={classNames('tips-wrapper', props.className)} style={props.style}>\n <span className=\"tips-wrapper-text\" style={{ marginRight: gap }}>\n {props.children}\n </span>\n <span className=\"tips-wrapper-icon\">{icon}</span>\n </span>\n </Popover>\n );\n }\n\n if (props.onClick && trigger === 'icon') {\n return (\n <span className={classNames('tips-wrapper', props.className)} style={props.style}>\n <span className=\"tips-wrapper-text\" style={{ marginRight: gap }}>\n {props.children}\n </span>\n <span onClick={props.onClick} className=\"tips-wrapper-icon\">\n {icon}\n </span>\n </span>\n );\n }\n if (props.onClick && trigger === 'all') {\n return (\n <span\n className={classNames('tips-wrapper', props.className)}\n style={props.style}\n onClick={props.onClick}\n >\n <span className=\"tips-wrapper-text\" style={{ marginRight: gap }}>\n {props.children}\n </span>\n <span className=\"tips-wrapper-icon\">{icon}</span>\n </span>\n );\n }\n if (props.icon) {\n return (\n <span className={classNames('tips-wrapper', props.className)} style={props.style}>\n <span className=\"tips-wrapper-text\" style={{ marginRight: gap }}>\n {props.children}\n </span>\n <span className=\"tips-wrapper-icon\">{icon}</span>\n </span>\n );\n }\n return <Fragment>{props.children}</Fragment>;\n};\n"],"names":["TipsWrapper","props","icon","_jsx","_QuestionCircleOutlined","trigger","gap","isUndefinedOrNull","tipType","_jsxs","className","_classNames","style","children","marginRight","Tooltip","_extends","tooltipProps","Popover","popoverProps","onClick","Fragment"],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -3168,6 +3168,80 @@ export type LabelValueLayoutProps = {
|
|
|
3168
3168
|
* options[].hidden 是否隐藏 Description.Item
|
|
3169
3169
|
*/
|
|
3170
3170
|
export declare const LabelValueLayout: (props: LabelValueLayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
3171
|
+
export type TLabelValueItem = {
|
|
3172
|
+
label: string | ReactElement;
|
|
3173
|
+
value: string | number | ReactElement;
|
|
3174
|
+
/** 一行有4列,当前labelValue数据占用的列数,默认是根据LabelValueRender.column配置来 */
|
|
3175
|
+
span?: 1 | 2 | 3 | 4;
|
|
3176
|
+
/** 是否隐藏 */
|
|
3177
|
+
hidden?: boolean;
|
|
3178
|
+
/** 超出宽度是否隐藏 */
|
|
3179
|
+
ellipsis?: boolean;
|
|
3180
|
+
/** 是否添加必填标识 */
|
|
3181
|
+
required?: boolean;
|
|
3182
|
+
/** 添加说明标签 */
|
|
3183
|
+
tips?: string;
|
|
3184
|
+
};
|
|
3185
|
+
export type LabelValueRenderProps = {
|
|
3186
|
+
className?: string;
|
|
3187
|
+
style?: CSSProperties;
|
|
3188
|
+
/**
|
|
3189
|
+
* 定义一行显示几列, 默认值:3
|
|
3190
|
+
* ```
|
|
3191
|
+
* 1. 当外层宽度尺寸大于 992px(lg) 时,一行显示几列
|
|
3192
|
+
* 1. 当外层宽度尺寸小于992px(lg),为xs、sm、md情况下不受column值影响,响应式布局
|
|
3193
|
+
* 2. 宽度尺寸定义
|
|
3194
|
+
* xs: 宽度 < 576px
|
|
3195
|
+
* sm: 宽度 ≥ 576px
|
|
3196
|
+
* md: 宽度 ≥ 768px
|
|
3197
|
+
* lg: 宽度 ≥ 992px
|
|
3198
|
+
* xl: 宽度 ≥ 1200px
|
|
3199
|
+
* xxl: 宽度 ≥ 1600px
|
|
3200
|
+
* 3. 列数尺寸定义
|
|
3201
|
+
* {
|
|
3202
|
+
* 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
|
|
3203
|
+
* 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
|
|
3204
|
+
* 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 },
|
|
3205
|
+
* 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 },
|
|
3206
|
+
* };
|
|
3207
|
+
* ```
|
|
3208
|
+
*/
|
|
3209
|
+
column?: 1 | 2 | 3 | 4;
|
|
3210
|
+
/**
|
|
3211
|
+
* 强制定义一行显示几列,不考虑响应式
|
|
3212
|
+
* ```
|
|
3213
|
+
* 1. 优先级大于column
|
|
3214
|
+
* 2. 建议优先使用column配置
|
|
3215
|
+
* ```
|
|
3216
|
+
*/
|
|
3217
|
+
forceColumn?: 1 | 2 | 3 | 4;
|
|
3218
|
+
/** 数据源配置 */
|
|
3219
|
+
dataList: TLabelValueItem[];
|
|
3220
|
+
/**
|
|
3221
|
+
* 超过宽度将自动省略,默认值:true
|
|
3222
|
+
*/
|
|
3223
|
+
ellipsis?: boolean;
|
|
3224
|
+
/** 是否添加边框 */
|
|
3225
|
+
border?: boolean;
|
|
3226
|
+
/** label对齐方式 */
|
|
3227
|
+
labelAlign?: "left" | "right" | "center";
|
|
3228
|
+
/** label 宽度,默认值:100 */
|
|
3229
|
+
labelWidth?: number;
|
|
3230
|
+
width?: number;
|
|
3231
|
+
/** label 样式 */
|
|
3232
|
+
labelStyle?: CSSProperties;
|
|
3233
|
+
/** value 样式 */
|
|
3234
|
+
valueStyle?: CSSProperties;
|
|
3235
|
+
};
|
|
3236
|
+
/**
|
|
3237
|
+
* label+value 列表布局
|
|
3238
|
+
* ```
|
|
3239
|
+
* 1. 可设置超出隐藏、必填标识、设置隐藏、添加说明标签等功能
|
|
3240
|
+
* 2. 可自定义设置占用网格列数
|
|
3241
|
+
* 3. 内置响应式布局
|
|
3242
|
+
* ```
|
|
3243
|
+
*/
|
|
3244
|
+
export declare const LabelValueRender: (props: LabelValueRenderProps) => import("react/jsx-runtime").JSX.Element;
|
|
3171
3245
|
export type LocalLoadingServiceConfig = {
|
|
3172
3246
|
onRequest: (params?: TAny) => Promise<TAny>;
|
|
3173
3247
|
params?: TPlainObject;
|
|
@@ -4456,7 +4530,8 @@ export type CssTextEllipsisProps = {
|
|
|
4456
4530
|
*/
|
|
4457
4531
|
export declare const TextCssEllipsis: (props: CssTextEllipsisProps) => import("react/jsx-runtime").JSX.Element;
|
|
4458
4532
|
export type TextOverflowProps = {
|
|
4459
|
-
text
|
|
4533
|
+
/** text 为ReactElement类型时,maxLength配置无效 */
|
|
4534
|
+
text: string | ReactElement;
|
|
4460
4535
|
/** 最大显示宽度 */
|
|
4461
4536
|
maxWidth?: number;
|
|
4462
4537
|
/** 最大显示字数 */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flatbiz/antd",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.16",
|
|
4
4
|
"description": "flat-biz ui components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"typings": "index.d.ts",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@dimjs/utils": ">=1.4.4",
|
|
34
34
|
"@flatbiz/utils": ">=4.0.19",
|
|
35
35
|
"@wove/react": ">=1.2.23",
|
|
36
|
-
"antd": ">=5.
|
|
36
|
+
"antd": ">=5.17.0",
|
|
37
37
|
"dayjs": ">=1.11.9",
|
|
38
38
|
"react": ">=18.2.0",
|
|
39
39
|
"react-dom": ">=18.2.0",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@dimjs/utils": "^1.4.4",
|
|
48
48
|
"@flatbiz/utils": "^4.0.16",
|
|
49
49
|
"@wove/react": "^1.2.23",
|
|
50
|
-
"antd": "5.
|
|
50
|
+
"antd": "5.17.0",
|
|
51
51
|
"dayjs": "1.11.9",
|
|
52
52
|
"dequal": "2.0.3",
|
|
53
53
|
"react": "18.2.0",
|