@flatbiz/antd 4.4.10 → 4.4.11
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
CHANGED
|
@@ -4,5 +4,5 @@ import './../fba-hooks/index.css';
|
|
|
4
4
|
import './../form-wrapper/index.css';
|
|
5
5
|
import './index.css';
|
|
6
6
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
7
|
-
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{a as
|
|
7
|
+
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{a as e,_ as o}from"../_rollupPluginBabelHelpers-a0769acd.js";import{isUndefinedOrNull as i}from"@flatbiz/utils";import{useMemo as s,Children as m,Fragment as t}from"react";import{BoxGrid as l}from"../box-grid/index.js";import{fbaHooks as n}from"../fba-hooks/index.js";import{FormWrapper as a}from"../form-wrapper/index.js";import{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 u=["column","forceColumn","children","width","gridGutter"];var d=function d(x){var f=n.useResponsivePoint()||"";var c=x.column,v=x.forceColumn,g=x.children,h=x.width,j=x.gridGutter,y=e(x,u);var b=s((function(){if(v){var r=24/v;return{xs:r,sm:r,md:r,lg:r,xl:r,xxl:r}}if(!c){return{xs:24,sm:12,md:12,lg:8,xl:8,xxl:6}}var e={1:{xs:24,sm:24,md:24,lg:24,xl:24,xxl:24},2:{xs:24,sm:12,md:12,lg:12,xl:12,xxl:12},3:{xs:24,sm:12,md:12,lg:8,xl:8,xxl:8},4:{xs:24,sm:12,md:12,lg:6,xl:6,xxl:6}};return e[c]}),[]);var w=function r(){return m.toArray(g).map((function(r,e){if(r.props["hidden"])return null;if(r.type["domTypeName"]==="BoxGridCol")return p(t,{children:r},e);var i=undefined;if(r.type["domTypeName"]==="FormItemWrapper"){i=r.props["span"];if(i){if(f==="xs"){i=24}else if(f==="sm"){i=i>12?i:12}}}return p(l.Col,o({},b,{span:i,children:r}),e)})).filter(Boolean)};var C=s((function(){if(["xs","sm"].includes(f)||!h){return{}}return{width:h}}),[f]);var N=i(j)?[15,0]:j;return p(a,o({},y,{style:o({},C,y.style),className:r(y.className,"easy-form"),autoComplete:"off",children:p(l.Row,{gutter:N,children:w()})}))};export{d as EasyForm};
|
|
8
8
|
//# 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 { isUndefinedOrNull } from '@flatbiz/utils';\nimport { Children, Fragment, ReactElement, useMemo } 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: ReactElement | ReactElement[];\n};\n\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/easy-form/form.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { isUndefinedOrNull } from '@flatbiz/utils';\nimport { Children, Fragment, ReactElement, useMemo } 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: ReactElement | ReactElement[];\n};\n\n/**\n * 简单Form布局，可自定义网格布局\n * ```\n * 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/label\n * 2. 布局网格以当前节点的宽度来计算的，不是屏幕宽度\n * 3. EasyForm 子节点包含 hidden = true 会被忽略\n * 4. 通过 column 可定义一行显示几列FormItem\n * 5. 通过 labelItemVertical 可定义 formitem 竖直布局\n * 6. 通过 formItemGap 可定义 formItem竖直方向间隙\n * 7. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式\n * 8. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）\n * 9. 自定义栅格占位格数，见下方`例如`\n\n * 例如\n * <EasyForm column={3}>\n *\t <Form.Item name=\"field1\" label=\"条件1\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </Form.Item>\n *\t <Form.Item name=\"field2\" label=\"条件2\">\n *\t <Input placeholder=\"请输入\" allowClear={true} />\n *\t </Form.Item>\n *\t <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->\n *\t <BoxGrid.Col span={24}>\n *\t <Form.Item name=\"field5\" label=\"条件5\">\n *\t \t<Input placeholder=\"请输入\" allowClear={true} />\n *\t </Form.Item>\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 { column, forceColumn, children, width, gridGutter, ...otherProps } = 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 }, []);\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') {\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\n return (\n <FormWrapper\n {...otherProps}\n style={{ ...innerStyle, ...otherProps.style }}\n className={classNames(otherProps.className, 'easy-form')}\n autoComplete=\"off\"\n >\n <BoxGrid.Row gutter={gutter}>{getFormRowChildren()}</BoxGrid.Row>\n </FormWrapper>\n );\n};\n"],"names":["EasyForm","props","screenType","fbaHooks","useResponsivePoint","column","forceColumn","children","width","gridGutter","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","FormWrapper","style","className","_classNames","autoComplete","Row"],"mappings":";wpBAkFaA,EAAW,SAAXA,EAAYC,GACvB,IAAMC,EAAaC,EAASC,sBAAwB,GAEpD,IAAQC,EAAoEJ,EAApEI,OAAQC,EAA4DL,EAA5DK,YAAaC,EAA+CN,EAA/CM,SAAUC,EAAqCP,EAArCO,MAAOC,EAA8BR,EAA9BQ,WAAeC,EAAUC,EAAKV,EAAKW,GAEjF,IAAMC,EAAWC,GAAQ,WACvB,GAAIR,EAAa,CACf,IAAMS,EAAM,GAAKT,EACjB,MAAO,CAAEU,GAAID,EAAKE,GAAIF,EAAKG,GAAIH,EAAKI,GAAIJ,EAAKK,GAAIL,EAAKM,IAAKN,EAC7D,CACA,IAAKV,EAAQ,CACX,MAAO,CAAEW,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,IAAK,EACtD,CACA,IAAMC,EAAY,CAChB,EAAG,CAAEN,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,IAAK,IAClD,EAAG,CAAEL,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,IAAK,IAClD,EAAG,CAAEL,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,IAAK,GAChD,EAAG,CAAEL,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,IAAK,IAElD,OAAOC,EAAUjB,EAClB,GAAE,IAEH,IAAMkB,EAAqB,SAArBA,IACJ,OAAOC,EAASC,QAAQlB,GACrBmB,KAAI,SAACC,EAAWC,GACf,GAAID,EAAK1B,MAAM,UAAW,OAAO,KACjC,GAAI0B,EAAKE,KAAK,iBAAmB,aAAc,OAAOC,EAACC,EAAQ,CAAAxB,SAAcoB,GAARC,GACrE,IAAII,EAA2BC,UAC/B,GAAIN,EAAKE,KAAK,iBAAmB,kBAAmB,CAClDG,EAAOL,EAAK1B,MAAM,QAClB,GAAI+B,EAAM,CACR,GAAI9B,IAAe,KAAM,CACvB8B,EAAO,EACT,MAAO,GAAI9B,IAAe,KAAM,CAC9B8B,EAAOA,EAAO,GAAKA,EAAO,EAC5B,CACF,CACF,CACA,OACEF,EAACI,EAAQC,IAAGC,KAAiBvB,EAAQ,CAAEmB,KAAMA,EAAKzB,SAC/CoB,IADeC,EAItB,IACCS,OAAOC,UAGZ,IAAMC,EAAazB,GAAQ,WAEzB,GAAI,CAAC,KAAM,MAAM0B,SAAStC,KAAgBM,EAAO,CAC/C,MAAO,EACT,CACA,MAAO,CAAEA,MAAAA,EACX,GAAG,CAACN,IAEJ,IAAMuC,EAAUC,EAAkBjC,GAAc,CAAC,GAAI,GAAKA,EAE1D,OACEqB,EAACa,EAAWP,KACN1B,EAAU,CACdkC,MAAKR,EAAOG,CAAAA,EAAAA,EAAe7B,EAAWkC,OACtCC,UAAWC,EAAWpC,EAAWmC,UAAW,aAC5CE,aAAa,MAAKxC,SAElBuB,EAACI,EAAQc,IAAG,CAACP,OAAQA,EAAOlC,SAAEgB,QAGpC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import './index.css';
|
|
3
3
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
4
|
-
import{a as
|
|
4
|
+
import{a as e,_ as r}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as l}from"@dimjs/utils/cjs/class-names";import{composeProps as a}from"@flatbiz/utils";import{Form as i}from"antd";import{useMemo as t,isValidElement as n,cloneElement as m}from"react";import{jsx as o,jsxs as f}from"react/jsx-runtime";var p=["wrapper","children","inputNormalize"],u=["wrapper","isClear","labelWidth","labelItemVertical","labelAlign","children","before","after","inputNormalize","outputNormalize"];var s=function r(l){var i=l.wrapper,t=l.children,n=l.inputNormalize,u=e(l,p);var s=u.hasOwnProperty("value");if(s&&n){u["value"]=n(u["value"])}var c=m(t,a(t.props,u,true));if(i){return i(c)}if(l.before||l.after){return f("div",{style:{display:"flex",alignItems:"center"},children:[l.before?o("span",{style:{marginRight:10},children:l.before}):null,o("div",{style:{flex:1},children:c}),l.after?o("span",{style:{marginLeft:10},children:l.after}):null]})}return c};var c=function a(m){var f=m.wrapper,p=m.isClear,c=m.labelWidth,d=m.labelItemVertical,b=m.labelAlign,v=m.children,h=m.before,N=m.after,z=m.inputNormalize,g=m.outputNormalize,y=e(m,u);var w=t((function(){var e="";if(c){e+="form-item-label-"+c}if(d){e+=" form-item-label-value-vertical"}if(b){e+=" form-item-label-align-"+b}return e}),[c,d,b]);if(p)return null;return o(i.Item,r({normalize:g},y,{className:l(w,y.className),children:n(v)?o(s,{wrapper:f,before:h,after:N,inputNormalize:z,children:v}):v}))};c["domTypeName"]="FormItemWrapper";export{c as FormItemWrapper};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-wrapper/form-item-wrapper.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { composeProps, TAny } from '@flatbiz/utils';\nimport { Form, FormItemProps } from 'antd';\nimport { cloneElement, isValidElement, ReactElement, ReactNode, useMemo } from 'react';\n\nexport interface FormItemWrapperProps extends FormItemProps {\n wrapper?: (children: ReactNode) => ReactElement;\n /** 设置wrapper后，before、after失效 */\n before?: ReactNode;\n /** 设置wrapper后，before、after失效 */\n after?: ReactNode;\n /** value 序列化处理 */\n inputNormalize?: (value?: TAny) => TAny;\n /**\n * onChange 参数序列化处理\n * 如果设置 normalize 属性，outputNormalize将失效\n */\n outputNormalize?: (value?: TAny) => TAny;\n /** 是否清除 Form.Item */\n isClear?: boolean;\n /**\n * label宽度\n * ```\n * 1. 如果想控制Form下所有label，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性\n * ```\n */\n labelWidth?:\n | 'auto'\n | '70'\n | '80'\n | '90'\n | '100'\n | '110'\n | '120'\n | '130'\n | '140'\n | '150'\n | '160'\n | '170'\n | '180'\n | '190'\n | '200';\n\n /**\n * labelItem 竖直布局\n * ```\n * 1. 如果想控制Form下所有labelItem，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性\n * ```\n */\n labelItemVertical?: true;\n /**\n * label 对齐方式\n * ```\n * 1. 如果想控制Form下所有labelAlign，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性\n * ```\n */\n labelAlign?: 'left' | 'right';\n}\n\ntype FormItemWrapperChildrenProps = Pick<\n FormItemWrapperProps,\n 'wrapper' | 'after' | 'before' | 'inputNormalize'\n> & {\n children: ReactElement;\n};\n\nconst FormItemWrapperChildren = (props: FormItemWrapperChildrenProps) => {\n const { wrapper, children, inputNormalize, ...rest } = props;\n // composeProps 合并执行 Form.Item 传的 onChange 以及组件本身的方法\n const hasValue = rest.hasOwnProperty('value');\n if (hasValue && inputNormalize) {\n rest['value'] = inputNormalize(rest['value']);\n }\n const _children = cloneElement(children, composeProps(children.props, rest, true));\n if (wrapper) {\n return wrapper(_children);\n }\n if (props.before || props.after) {\n return (\n <div style={{ display: 'flex', alignItems: 'center' }}>\n {props.before ? <span style={{ marginRight: 10 }}>{props.before}</span> : null}\n <div style={{ flex: 1 }}>{_children}</div>\n {props.after ? <span style={{ marginLeft: 10 }}>{props.after}</span> : null}\n </div>\n );\n }\n return _children;\n};\n\n/**\n * 对 Form.Item 包装处理\n * ```\n * 1. 为 children 增加 before、after\n * 2. 对输入、输出数据进行序列化处理\n * 3. 内置布局样式使用 preDefinedClassName.formItem\n * ```\n */\nexport const FormItemWrapper = (props: FormItemWrapperProps) => {\n const {\n wrapper,\n isClear,\n labelWidth,\n labelItemVertical,\n labelAlign,\n children,\n before,\n after,\n inputNormalize,\n outputNormalize,\n ...rest\n } = props;\n\n const innerClassName = useMemo(() => {\n let cn = '';\n if (labelWidth) {\n cn += `form-item-label-${labelWidth}`;\n }\n if (labelItemVertical) {\n cn += ` form-label-value-vertical`;\n }\n if (labelAlign) {\n cn += ` form-label-align-${labelAlign}`;\n }\n return cn;\n }, [labelWidth, labelItemVertical, labelAlign]);\n\n if (isClear) return null;\n\n return (\n <Form.Item normalize={outputNormalize} {...rest} className={classNames(innerClassName, rest.className)}>\n {isValidElement(children) ? (\n <FormItemWrapperChildren\n wrapper={wrapper}\n before={before}\n after={after}\n inputNormalize={inputNormalize}\n >\n {children}\n </FormItemWrapperChildren>\n ) : (\n children\n )}\n </Form.Item>\n );\n};\n"],"names":["FormItemWrapperChildren","props","wrapper","children","inputNormalize","rest","_objectWithoutPropertiesLoose","_excluded","hasValue","hasOwnProperty","_children","cloneElement","composeProps","before","after","_jsxs","style","display","alignItems","_jsx","marginRight","flex","marginLeft","FormItemWrapper","isClear","labelWidth","labelItemVertical","labelAlign","outputNormalize","_excluded2","innerClassName","useMemo","cn","Form","Item","_extends","normalize","className","_classNames","isValidElement"],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/form-item-wrapper/form-item-wrapper.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { composeProps, TAny } from '@flatbiz/utils';\nimport { Form, FormItemProps } from 'antd';\nimport { cloneElement, isValidElement, ReactElement, ReactNode, useMemo } from 'react';\n\nexport interface FormItemWrapperProps extends FormItemProps {\n wrapper?: (children: ReactNode) => ReactElement;\n /** 设置wrapper后，before、after失效 */\n before?: ReactNode;\n /** 设置wrapper后，before、after失效 */\n after?: ReactNode;\n /** value 序列化处理 */\n inputNormalize?: (value?: TAny) => TAny;\n /**\n * onChange 参数序列化处理\n * 如果设置 normalize 属性，outputNormalize将失效\n */\n outputNormalize?: (value?: TAny) => TAny;\n /** 是否清除 Form.Item */\n isClear?: boolean;\n /**\n * label宽度\n * ```\n * 1. 如果想控制Form下所有label，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性\n * ```\n */\n labelWidth?:\n | 'auto'\n | '70'\n | '80'\n | '90'\n | '100'\n | '110'\n | '120'\n | '130'\n | '140'\n | '150'\n | '160'\n | '170'\n | '180'\n | '190'\n | '200';\n\n /**\n * labelItem 竖直布局\n * ```\n * 1. 如果想控制Form下所有labelItem，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性\n * ```\n */\n labelItemVertical?: true;\n /**\n * label 对齐方式\n * ```\n * 1. 如果想控制Form下所有labelAlign，可使用FormWrapper组件 替换 Form组件，在FormWrapper上设置属性\n * ```\n */\n labelAlign?: 'left' | 'right';\n /**\n * 栅格占位格数，最大值：24\n * ```\n * 1. 当 FormItemWrapper 处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数；\n * ```\n */\n span?: number;\n}\n\ntype FormItemWrapperChildrenProps = Pick<\n FormItemWrapperProps,\n 'wrapper' | 'after' | 'before' | 'inputNormalize'\n> & {\n children: ReactElement;\n};\n\nconst FormItemWrapperChildren = (props: FormItemWrapperChildrenProps) => {\n const { wrapper, children, inputNormalize, ...rest } = props;\n // composeProps 合并执行 Form.Item 传的 onChange 以及组件本身的方法\n const hasValue = rest.hasOwnProperty('value');\n if (hasValue && inputNormalize) {\n rest['value'] = inputNormalize(rest['value']);\n }\n const _children = cloneElement(children, composeProps(children.props, rest, true));\n if (wrapper) {\n return wrapper(_children);\n }\n if (props.before || props.after) {\n return (\n <div style={{ display: 'flex', alignItems: 'center' }}>\n {props.before ? <span style={{ marginRight: 10 }}>{props.before}</span> : null}\n <div style={{ flex: 1 }}>{_children}</div>\n {props.after ? <span style={{ marginLeft: 10 }}>{props.after}</span> : null}\n </div>\n );\n }\n return _children;\n};\n\n/**\n * 对 Form.Item 包装处理\n * ```\n * 1. 为 children 增加 before、after\n * 2. 对输入、输出数据进行序列化处理\n * 3. 内置布局样式使用 preDefinedClassName.formItem\n * ```\n */\nexport const FormItemWrapper = (props: FormItemWrapperProps) => {\n const {\n wrapper,\n isClear,\n labelWidth,\n labelItemVertical,\n labelAlign,\n children,\n before,\n after,\n inputNormalize,\n outputNormalize,\n ...rest\n } = props;\n\n const innerClassName = useMemo(() => {\n let cn = '';\n if (labelWidth) {\n cn += `form-item-label-${labelWidth}`;\n }\n if (labelItemVertical) {\n cn += ` form-item-label-value-vertical`;\n }\n if (labelAlign) {\n cn += ` form-item-label-align-${labelAlign}`;\n }\n\n return cn;\n }, [labelWidth, labelItemVertical, labelAlign]);\n\n if (isClear) return null;\n\n return (\n <Form.Item normalize={outputNormalize} {...rest} className={classNames(innerClassName, rest.className)}>\n {isValidElement(children) ? (\n <FormItemWrapperChildren\n wrapper={wrapper}\n before={before}\n after={after}\n inputNormalize={inputNormalize}\n >\n {children}\n </FormItemWrapperChildren>\n ) : (\n children\n )}\n </Form.Item>\n );\n};\n\nFormItemWrapper['domTypeName'] = 'FormItemWrapper';\n"],"names":["FormItemWrapperChildren","props","wrapper","children","inputNormalize","rest","_objectWithoutPropertiesLoose","_excluded","hasValue","hasOwnProperty","_children","cloneElement","composeProps","before","after","_jsxs","style","display","alignItems","_jsx","marginRight","flex","marginLeft","FormItemWrapper","isClear","labelWidth","labelItemVertical","labelAlign","outputNormalize","_excluded2","innerClassName","useMemo","cn","Form","Item","_extends","normalize","className","_classNames","isValidElement"],"mappings":";mfAyEA,IAAMA,EAA0B,SAA1BA,EAA2BC,GAC/B,IAAQC,EAA+CD,EAA/CC,QAASC,EAAsCF,EAAtCE,SAAUC,EAA4BH,EAA5BG,eAAmBC,EAAIC,EAAKL,EAAKM,GAE5D,IAAMC,EAAWH,EAAKI,eAAe,SACrC,GAAID,GAAYJ,EAAgB,CAC9BC,EAAK,SAAWD,EAAeC,EAAK,SACtC,CACA,IAAMK,EAAYC,EAAaR,EAAUS,EAAaT,EAASF,MAAOI,EAAM,OAC5E,GAAIH,EAAS,CACX,OAAOA,EAAQQ,EACjB,CACA,GAAIT,EAAMY,QAAUZ,EAAMa,MAAO,CAC/B,OACEC,EAAA,MAAA,CAAKC,MAAO,CAAEC,QAAS,OAAQC,WAAY,UAAWf,SACnDF,CAAAA,EAAMY,OAASM,EAAA,OAAA,CAAMH,MAAO,CAAEI,YAAa,IAAKjB,SAAEF,EAAMY,SAAiB,KAC1EM,EAAA,MAAA,CAAKH,MAAO,CAAEK,KAAM,GAAIlB,SAAEO,IACzBT,EAAMa,MAAQK,EAAA,OAAA,CAAMH,MAAO,CAAEM,WAAY,IAAKnB,SAAEF,EAAMa,QAAgB,OAG7E,CACA,OAAOJ,CACT,MAUaa,EAAkB,SAAlBA,EAAmBtB,GAC9B,IACEC,EAWED,EAXFC,QACAsB,EAUEvB,EAVFuB,QACAC,EASExB,EATFwB,WACAC,EAQEzB,EARFyB,kBACAC,EAOE1B,EAPF0B,WACAxB,EAMEF,EANFE,SACAU,EAKEZ,EALFY,OACAC,EAIEb,EAJFa,MACAV,EAGEH,EAHFG,eACAwB,EAEE3B,EAFF2B,gBACGvB,EAAIC,EACLL,EAAK4B,GAET,IAAMC,EAAiBC,GAAQ,WAC7B,IAAIC,EAAK,GACT,GAAIP,EAAY,CACdO,sBAAyBP,CAC3B,CACA,GAAIC,EAAmB,CACrBM,GAAuC,iCACzC,CACA,GAAIL,EAAY,CACdK,6BAAgCL,CAClC,CAEA,OAAOK,CACR,GAAE,CAACP,EAAYC,EAAmBC,IAEnC,GAAIH,EAAS,OAAO,KAEpB,OACEL,EAACc,EAAKC,KAAIC,EAAA,CAACC,UAAWR,GAAqBvB,EAAI,CAAEgC,UAAWC,EAAWR,EAAgBzB,EAAKgC,WAAWlC,SACpGoC,EAAepC,GACdgB,EAACnB,EAAuB,CACtBE,QAASA,EACTW,OAAQA,EACRC,MAAOA,EACPV,eAAgBA,EAAeD,SAE9BA,IAGHA,IAIR,EAEAoB,EAAgB,eAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-editor/preview/preview.tsx","@flatbiz/antd/src/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import { PlusCircleOutlined } from '@ant-design/icons';\nimport { Image } from 'antd';\nimport { Fragment } from 'react';\nimport { dynamicNode } from '../../dynamic-node';\nimport { fbaHooks } from '../../fba-hooks';\nimport './preview.less';\n\nexport const Preview = (props) => {\n const { visible, url } = props;\n\n fbaHooks.useEffectCustom(() => {\n if (visible) {\n dynamicNode.append({\n content: (\n <PlusCircleOutlined\n onClick={props.close}\n className=\"preview-image-popup-close\"\n twoToneColor=\"#1890ff\"\n />\n ),\n });\n } else {\n dynamicNode.remove();\n }\n }, [visible]);\n\n if (!url) return <></>;\n\n return (\n <Fragment>\n <Image\n key={url}\n style={{ left: '100px' }}\n preview={{\n className: 'preview-image-popup',\n maskStyle: { backgroundColor: 'rgba(0,0,0,0.85)' },\n visible,\n src: url,\n onVisibleChange: () => {\n props.close();\n },\n }}\n />\n </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { getStrByteLen, type TAny } from '@flatbiz/utils';\nimport { Editor, type IAllProps } from '@tinymce/tinymce-react';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { message } from 'antd';\nimport { useRef, useState } from 'react';\nimport { type Editor as TinyMCEEditor } from 'tinymce';\nimport { Preview } from './preview';\nimport './style.less';\n\nexport interface RichTextEditorProps extends Omit<IAllProps, 'onChange' | 'init'> {\n onChange?: (data?: string) => void;\n /** 上传图片服务 */\n onUploadImage?: (file: File) => Promise<string>;\n className?: string;\n /** 图片点击预览 */\n imgPreview?: boolean;\n init?: IAllProps['init'] & {\n /**\n * 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度\n * ```\n * 1. 默认值：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n * ```\n */\n img_ratio?: { min: number; max?: number; ratio: number }[];\n /**\n * 粘贴文本大小限制\n * ```\n * 1. limit 限制大小，单位KB，例如限制2M，值为2*1024\n * 2. 限制提示文案\n * ```\n */\n paste_text_limit?: {\n limit: number;\n message: string;\n };\n /** 插件添加；自定义plugins后失效 */\n plugins_append?: string;\n /** 工具栏添加；自定义toolbar后失效 */\n toolbar_append?: string;\n };\n /** 点击全屏按钮回调 */\n onFullScreenChange?: (state?: boolean) => void;\n}\n\n/**\n * 富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6\n * @param props\n * @returns\n * ```\n * 1. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口\n * 2. 获取富文本实例，通过onInit(_, editor)函数获取\n * 3. 预览富文本数据，使用 RichTextViewer 组件\n * 4. 添加其他插件使用方式，配置 init.plugins_append、init.toolbar_append\n * <RichTextEditor init={{ plugins_append: 'codesample', toolbar_append: 'codesample' }} />\n * 5. 可通过设置 init.plugins、init.toolbar 完全自定义插件、工具栏\n * 6. 其他插件\n * emoticons 表情插件\n * 7. 可通过设置 init.img_ratio 设置通过粘贴上传的图片压缩显示比例\n * 默认比例：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n * ```\n */\nexport const RichTextEditor = (props: RichTextEditorProps) => {\n const { onUploadImage, onChange, className, ...otherProps } = props;\n\n const editorRef = useRef<TAny>(null);\n const [previewUrl, setPreviewUrl] = useState('');\n const imgRatio = props.init?.img_ratio || [\n { min: 0, max: 1000, ratio: 0.5 },\n { min: 1000, ratio: 0.3 },\n ];\n\n // const varStyleString = useMemo(() => {\n // const merge = { ...defaultVarStyle, ...props.varStyle };\n // let varStyleString = '';\n // Object.keys(merge).map((key) => {\n // varStyleString += `${key}:${merge[key]};`;\n // });\n // return varStyleString;\n // }, [props.varStyle]);\n\n useKeyPress(\n () => true,\n (event) => {\n try {\n if (event.type === 'keyup' && event.key === 'Escape') {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n },\n {\n events: ['keydown', 'keyup'],\n },\n );\n\n const onKeyDown = hooks.useCallbackRef((event, editor: TinyMCEEditor) => {\n try {\n if (event.keyCode == 27) {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n props.onKeyDown?.(event, editor);\n });\n\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n editor.on('FullscreenStateChanged', (e) => {\n props.onFullScreenChange?.(e.state);\n });\n try {\n editor.iframeElement?.contentDocument?.addEventListener(\n 'click',\n (event) => {\n if (props.imgPreview && event.target?.['tagName'] === 'IMG') {\n setPreviewUrl(event.target['src']);\n }\n },\n true,\n );\n } catch (error) {\n //\n }\n otherProps.onInit?.(_, editor);\n });\n\n const onEditorChange = hooks.useCallbackRef((a: string, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n otherProps.onEditorChange?.(a, editor);\n onChange?.(a);\n });\n\n const tinymceBaseUrl = 'https://file.40017.cn/tcsk/tinymce@6.4.1';\n\n const getImgRatio = (width: number) => {\n if (imgRatio.length === 0) return 1;\n for (let index = 0; index < imgRatio.length; index++) {\n const element = imgRatio[index];\n if (element.max) {\n if (width >= element.min && width <= element.max) return element.ratio;\n } else {\n if (width >= element.min) return element.ratio;\n }\n }\n return 1;\n };\n\n const paste_postprocess = hooks.useCallbackRef((editor, args) => {\n try {\n const nodes = (args.node.children || []) as unknown as HTMLElement[];\n if (nodes.length === 1 && nodes[0].nodeName === 'IMG') {\n nodes[0].setAttribute('style', `display:none`);\n const img = document.createElement('img');\n img.src = nodes[0].getAttribute('src') as string;\n img.onload = () => {\n const ratio = getImgRatio(img.width);\n editor.execCommand(\n 'mceInsertContent',\n true,\n `<img src=\"${img.src}\" width=\"${img.width * ratio}\" height=\"${img.height * ratio}\" />`,\n );\n };\n }\n } catch (error) {\n //\n }\n });\n\n const paste_preprocess = hooks.useCallbackRef((_plugin, args) => {\n const paste_text_limit = props.init?.paste_text_limit;\n if (paste_text_limit) {\n const byteLen = getStrByteLen(args.content);\n if (byteLen > 1024 * paste_text_limit.limit) {\n message.error(paste_text_limit.message);\n args.content = '';\n }\n }\n });\n\n return (\n <div className={classNames('v-editor-wrapper', className)}>\n <Editor\n // apiKey=\"ds6j8so4g3d2cycidbhgkds36q0phy1uqd9jd8bot91sfe5l\"\n tinymceScriptSrc={`${tinymceBaseUrl}/tinymce.min.js`}\n {...otherProps}\n onInit={onInit}\n onKeyDown={onKeyDown}\n onEditorChange={onEditorChange}\n init={{\n promotion: false,\n language: 'zh-Hans',\n height: 500,\n paste_data_images: onUploadImage ? true : false,\n paste_postprocess,\n paste_preprocess,\n autosave_ask_before_unload: false,\n base_url: tinymceBaseUrl,\n autoresize_bottom_margin: 0,\n images_upload_handler: async (blobInfo) => {\n try {\n const blob = blobInfo.blob();\n const file = new File([blob], blob.name, { type: blob.type });\n const respData = await onUploadImage?.(file);\n return Promise.resolve(respData as string);\n } catch (error: any) {\n return Promise.reject(error?.message || '图片上传异常');\n }\n },\n plugins:\n 'lists link image advlist charmap preview fullscreen code table help codesample ' +\n (props.init?.plugins_append || ''),\n toolbar:\n 'undo redo fullscreen preview | bold italic underline strikethrough |' +\n 'fontsize blocks |' +\n 'forecolor backcolor removeformat |' +\n 'numlist bullist advlist |' +\n 'alignleft aligncenter alignright alignjustify |' +\n 'outdent indent |' +\n 'hr image link code codesample |' +\n (props.init?.toolbar_append || ''),\n font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px',\n ...props.init,\n content_style: `img {max-width:100%;} table{width:100%} ${props.init?.content_style}`,\n convert_urls: false,\n }}\n />\n <Preview\n visible={!!previewUrl}\n url={previewUrl}\n close={() => {\n setPreviewUrl('');\n }}\n />\n </div>\n );\n};\n\n/**\n * undo redo\n * codesample\n * fontselect fontsizeselect formatselect\n * image media link anchor\n * preview save print\n * emoticons(表情)\n */\n"],"names":["Preview","props","visible","url","fbaHooks","useEffectCustom","dynamicNode","append","content","_jsx","_PlusCircleOutlined","onClick","close","className","twoToneColor","remove","_Fragment","Fragment","children","Image","style","left","preview","maskStyle","backgroundColor","src","onVisibleChange","RichTextEditor","_props$init","_props$init3","_props$init4","_props$init5","onUploadImage","onChange","otherProps","_objectWithoutPropertiesLoose","_excluded","editorRef","useRef","_useState","useState","previewUrl","setPreviewUrl","imgRatio","init","img_ratio","min","max","ratio","useKeyPress","event","type","key","_editorRef$current","isFull","current","editorContainer","classList","contains","_editorRef$current2","editorCommands","execCommand","error","events","onKeyDown","_hooks","useCallbackRef","editor","keyCode","_editorRef$current3","_editorRef$current4","onInit","_","on","e","onFullScreenChange","state","_editor$iframeElement","iframeElement","contentDocument","addEventListener","_event$target","imgPreview","target","onEditorChange","a","tinymceBaseUrl","getImgRatio","width","length","index","element","paste_postprocess","args","nodes","node","nodeName","setAttribute","img","document","createElement","getAttribute","onload","height","paste_preprocess","_plugin","_props$init2","paste_text_limit","byteLen","getStrByteLen","limit","message","_jsxs","_classNames","Editor","_extends","tinymceScriptSrc","promotion","language","paste_data_images","autosave_ask_before_unload","base_url","autoresize_bottom_margin","images_upload_handler","blobInfo","Promise","$return","$error","blob","_file","respData","$Try_5_Catch","reject","$boundEx","file","File","name","resolve","then","$await_6","plugins","plugins_append","toolbar","toolbar_append","font_size_formats","content_style","convert_urls"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-editor/preview/preview.tsx","@flatbiz/antd/src/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import { PlusCircleOutlined } from '@ant-design/icons';\nimport { Image } from 'antd';\nimport { Fragment } from 'react';\nimport { dynamicNode } from '../../dynamic-node';\nimport { fbaHooks } from '../../fba-hooks';\nimport './preview.less';\n\nexport const Preview = (props) => {\n const { visible, url } = props;\n\n fbaHooks.useEffectCustom(() => {\n if (visible) {\n dynamicNode.append({\n content: (\n <PlusCircleOutlined\n onClick={props.close}\n className=\"preview-image-popup-close\"\n twoToneColor=\"#1890ff\"\n />\n ),\n });\n } else {\n dynamicNode.remove();\n }\n }, [visible]);\n\n if (!url) return <></>;\n\n return (\n <Fragment>\n <Image\n key={url}\n style={{ left: '100px' }}\n preview={{\n className: 'preview-image-popup',\n maskStyle: { backgroundColor: 'rgba(0,0,0,0.85)' },\n visible,\n src: url,\n onVisibleChange: () => {\n props.close();\n },\n }}\n />\n </Fragment>\n );\n};\n","import { classNames } from '@dimjs/utils';\nimport { getStrByteLen, type TAny } from '@flatbiz/utils';\nimport { Editor, type IAllProps } from '@tinymce/tinymce-react';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { message } from 'antd';\nimport { useRef, useState } from 'react';\nimport { type Editor as TinyMCEEditor } from 'tinymce';\nimport { Preview } from './preview';\nimport './style.less';\n\nexport interface RichTextEditorProps extends Omit<IAllProps, 'onChange' | 'init'> {\n onChange?: (data?: string) => void;\n /** 上传图片服务 */\n onUploadImage?: (file: File) => Promise<string>;\n className?: string;\n /** 图片点击预览 */\n imgPreview?: boolean;\n init?: IAllProps['init'] & {\n /**\n * 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度\n * ```\n * 1. 默认值：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n * ```\n */\n img_ratio?: { min: number; max?: number; ratio: number }[];\n /**\n * 粘贴文本大小限制\n * ```\n * 1. limit 限制大小，单位KB，例如限制2M，值为2*1024\n * 2. 限制提示文案\n * ```\n */\n paste_text_limit?: {\n limit: number;\n message: string;\n };\n /** 插件添加；自定义plugins后失效 */\n plugins_append?: string;\n /** 工具栏添加；自定义toolbar后失效 */\n toolbar_append?: string;\n };\n /** 点击全屏按钮回调 */\n onFullScreenChange?: (state?: boolean) => void;\n}\n\n/**\n * 富文本编辑器，配置参考tinymce https://www.tiny.cloud/docs/tinymce/6\n * @param props\n * @returns\n * ```\n * 1. 修改高度 init={{ height: 300 }}\n * 2. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口\n * 3. 获取富文本实例，通过onInit(_, editor)函数获取\n * 4. 预览富文本数据，使用 RichTextViewer 组件\n * 5. 添加其他插件使用方式，配置 init.plugins_append、init.toolbar_append\n * <RichTextEditor init={{ plugins_append: 'codesample', toolbar_append: 'codesample' }} />\n * 6. 可通过设置 init.plugins、init.toolbar 完全自定义插件、工具栏\n * 7. 其他插件\n * emoticons 表情插件\n * 8. 可通过设置 init.img_ratio 设置通过粘贴上传的图片压缩显示比例\n * 默认比例：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n * ```\n */\nexport const RichTextEditor = (props: RichTextEditorProps) => {\n const { onUploadImage, onChange, className, ...otherProps } = props;\n\n const editorRef = useRef<TAny>(null);\n const [previewUrl, setPreviewUrl] = useState('');\n const imgRatio = props.init?.img_ratio || [\n { min: 0, max: 1000, ratio: 0.5 },\n { min: 1000, ratio: 0.3 },\n ];\n\n // const varStyleString = useMemo(() => {\n // const merge = { ...defaultVarStyle, ...props.varStyle };\n // let varStyleString = '';\n // Object.keys(merge).map((key) => {\n // varStyleString += `${key}:${merge[key]};`;\n // });\n // return varStyleString;\n // }, [props.varStyle]);\n\n useKeyPress(\n () => true,\n (event) => {\n try {\n if (event.type === 'keyup' && event.key === 'Escape') {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n },\n {\n events: ['keydown', 'keyup'],\n },\n );\n\n const onKeyDown = hooks.useCallbackRef((event, editor: TinyMCEEditor) => {\n try {\n if (event.keyCode == 27) {\n const isFull = editorRef.current?.editorContainer.classList.contains('tox-fullscreen');\n if (isFull) {\n editorRef.current?.editorCommands.execCommand('mceFullScreen');\n }\n }\n } catch (error) {\n // 异常不处理\n }\n props.onKeyDown?.(event, editor);\n });\n\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n editor.on('FullscreenStateChanged', (e) => {\n props.onFullScreenChange?.(e.state);\n });\n try {\n editor.iframeElement?.contentDocument?.addEventListener(\n 'click',\n (event) => {\n if (props.imgPreview && event.target?.['tagName'] === 'IMG') {\n setPreviewUrl(event.target['src']);\n }\n },\n true,\n );\n } catch (error) {\n //\n }\n otherProps.onInit?.(_, editor);\n });\n\n const onEditorChange = hooks.useCallbackRef((a: string, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n otherProps.onEditorChange?.(a, editor);\n onChange?.(a);\n });\n\n const tinymceBaseUrl = 'https://file.40017.cn/tcsk/tinymce@6.4.1';\n\n const getImgRatio = (width: number) => {\n if (imgRatio.length === 0) return 1;\n for (let index = 0; index < imgRatio.length; index++) {\n const element = imgRatio[index];\n if (element.max) {\n if (width >= element.min && width <= element.max) return element.ratio;\n } else {\n if (width >= element.min) return element.ratio;\n }\n }\n return 1;\n };\n\n const paste_postprocess = hooks.useCallbackRef((editor, args) => {\n try {\n const nodes = (args.node.children || []) as unknown as HTMLElement[];\n if (nodes.length === 1 && nodes[0].nodeName === 'IMG') {\n nodes[0].setAttribute('style', `display:none`);\n const img = document.createElement('img');\n img.src = nodes[0].getAttribute('src') as string;\n img.onload = () => {\n const ratio = getImgRatio(img.width);\n editor.execCommand(\n 'mceInsertContent',\n true,\n `<img src=\"${img.src}\" width=\"${img.width * ratio}\" height=\"${img.height * ratio}\" />`,\n );\n };\n }\n } catch (error) {\n //\n }\n });\n\n const paste_preprocess = hooks.useCallbackRef((_plugin, args) => {\n const paste_text_limit = props.init?.paste_text_limit;\n if (paste_text_limit) {\n const byteLen = getStrByteLen(args.content);\n if (byteLen > 1024 * paste_text_limit.limit) {\n message.error(paste_text_limit.message);\n args.content = '';\n }\n }\n });\n\n return (\n <div className={classNames('v-editor-wrapper', className)}>\n <Editor\n // apiKey=\"ds6j8so4g3d2cycidbhgkds36q0phy1uqd9jd8bot91sfe5l\"\n tinymceScriptSrc={`${tinymceBaseUrl}/tinymce.min.js`}\n {...otherProps}\n onInit={onInit}\n onKeyDown={onKeyDown}\n onEditorChange={onEditorChange}\n init={{\n promotion: false,\n language: 'zh-Hans',\n height: 500,\n paste_data_images: onUploadImage ? true : false,\n paste_postprocess,\n paste_preprocess,\n autosave_ask_before_unload: false,\n base_url: tinymceBaseUrl,\n autoresize_bottom_margin: 0,\n images_upload_handler: async (blobInfo) => {\n try {\n const blob = blobInfo.blob();\n const file = new File([blob], blob.name, { type: blob.type });\n const respData = await onUploadImage?.(file);\n return Promise.resolve(respData as string);\n } catch (error: any) {\n return Promise.reject(error?.message || '图片上传异常');\n }\n },\n plugins:\n 'lists link image advlist charmap preview fullscreen code table help codesample ' +\n (props.init?.plugins_append || ''),\n toolbar:\n 'undo redo fullscreen preview | bold italic underline strikethrough |' +\n 'fontsize blocks |' +\n 'forecolor backcolor removeformat |' +\n 'numlist bullist advlist |' +\n 'alignleft aligncenter alignright alignjustify |' +\n 'outdent indent |' +\n 'hr image link code codesample |' +\n (props.init?.toolbar_append || ''),\n font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px',\n ...props.init,\n content_style: `img {max-width:100%;} table{width:100%} ${props.init?.content_style}`,\n convert_urls: false,\n }}\n />\n <Preview\n visible={!!previewUrl}\n url={previewUrl}\n close={() => {\n setPreviewUrl('');\n }}\n />\n </div>\n );\n};\n\n/**\n * undo redo\n * codesample\n * fontselect fontsizeselect formatselect\n * image media link anchor\n * preview save print\n * emoticons(表情)\n */\n"],"names":["Preview","props","visible","url","fbaHooks","useEffectCustom","dynamicNode","append","content","_jsx","_PlusCircleOutlined","onClick","close","className","twoToneColor","remove","_Fragment","Fragment","children","Image","style","left","preview","maskStyle","backgroundColor","src","onVisibleChange","RichTextEditor","_props$init","_props$init3","_props$init4","_props$init5","onUploadImage","onChange","otherProps","_objectWithoutPropertiesLoose","_excluded","editorRef","useRef","_useState","useState","previewUrl","setPreviewUrl","imgRatio","init","img_ratio","min","max","ratio","useKeyPress","event","type","key","_editorRef$current","isFull","current","editorContainer","classList","contains","_editorRef$current2","editorCommands","execCommand","error","events","onKeyDown","_hooks","useCallbackRef","editor","keyCode","_editorRef$current3","_editorRef$current4","onInit","_","on","e","onFullScreenChange","state","_editor$iframeElement","iframeElement","contentDocument","addEventListener","_event$target","imgPreview","target","onEditorChange","a","tinymceBaseUrl","getImgRatio","width","length","index","element","paste_postprocess","args","nodes","node","nodeName","setAttribute","img","document","createElement","getAttribute","onload","height","paste_preprocess","_plugin","_props$init2","paste_text_limit","byteLen","getStrByteLen","limit","message","_jsxs","_classNames","Editor","_extends","tinymceScriptSrc","promotion","language","paste_data_images","autosave_ask_before_unload","base_url","autoresize_bottom_margin","images_upload_handler","blobInfo","Promise","$return","$error","blob","_file","respData","$Try_5_Catch","reject","$boundEx","file","File","name","resolve","then","$await_6","plugins","plugins_append","toolbar","toolbar_append","font_size_formats","content_style","convert_urls"],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -964,6 +964,13 @@ export interface FormItemWrapperProps extends FormItemProps {
|
|
|
964
964
|
* ```
|
|
965
965
|
*/
|
|
966
966
|
labelAlign?: "left" | "right";
|
|
967
|
+
/**
|
|
968
|
+
* 栅格占位格数，最大值：24
|
|
969
|
+
* ```
|
|
970
|
+
* 1. 当 FormItemWrapper 处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数；
|
|
971
|
+
* ```
|
|
972
|
+
*/
|
|
973
|
+
span?: number;
|
|
967
974
|
}
|
|
968
975
|
/**
|
|
969
976
|
* 对 Form.Item 包装处理
|
|
@@ -973,7 +980,10 @@ export interface FormItemWrapperProps extends FormItemProps {
|
|
|
973
980
|
* 3. 内置布局样式使用 preDefinedClassName.formItem
|
|
974
981
|
* ```
|
|
975
982
|
*/
|
|
976
|
-
export declare const FormItemWrapper:
|
|
983
|
+
export declare const FormItemWrapper: {
|
|
984
|
+
(props: FormItemWrapperProps): import("react/jsx-runtime").JSX.Element | null;
|
|
985
|
+
domTypeName: string;
|
|
986
|
+
};
|
|
977
987
|
export type DateRangePickerWrapperFormItemProps = Omit<FormItemWrapperProps, "name"> & {
|
|
978
988
|
/**
|
|
979
989
|
* 开始的时间name
|
|
@@ -1961,33 +1971,35 @@ export type EasyFormProps = Omit<FormWrapperProps, "children"> & {
|
|
|
1961
1971
|
/**
|
|
1962
1972
|
* 简单Form布局，可自定义网格布局
|
|
1963
1973
|
* ```
|
|
1964
|
-
* 1.
|
|
1965
|
-
* 2.
|
|
1966
|
-
* 3.
|
|
1967
|
-
* 4.
|
|
1974
|
+
* 1. demo：https://fex.qa.tcshuke.com/docs/admin/main/form/label
|
|
1975
|
+
* 2. 布局网格以当前节点的宽度来计算的，不是屏幕宽度
|
|
1976
|
+
* 3. EasyForm 子节点包含 hidden = true 会被忽略
|
|
1977
|
+
* 4. 通过 column 可定义一行显示几列FormItem
|
|
1968
1978
|
* 5. 通过 labelItemVertical 可定义 formitem 竖直布局
|
|
1969
1979
|
* 6. 通过 formItemGap 可定义 formItem竖直方向间隙
|
|
1970
1980
|
* 7. 通过 forceColumn 可强制定义一行显示几列，不考虑响应式
|
|
1971
1981
|
* 8. 通过 labelWidth 可控制Form内部所有label的宽度（可实现整齐效果）
|
|
1982
|
+
* 9. 自定义栅格占位格数，见下方`例如`
|
|
1972
1983
|
|
|
1973
1984
|
* 例如
|
|
1974
1985
|
* <EasyForm column={3}>
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1986
|
+
* <Form.Item name="field1" label="条件1">
|
|
1987
|
+
* <Input placeholder="请输入" allowClear={true} />
|
|
1988
|
+
* </Form.Item>
|
|
1989
|
+
* <Form.Item name="field2" label="条件2">
|
|
1990
|
+
* <Input placeholder="请输入" allowClear={true} />
|
|
1991
|
+
* </Form.Item>
|
|
1992
|
+
* <!-- ！！自定义栅格占位格数第一种方式：可通过使用 BoxGrid.Col 包裹元素来自定义网格占比 -->
|
|
1993
|
+
* <BoxGrid.Col span={24}>
|
|
1994
|
+
* <Form.Item name="field5" label="条件5">
|
|
1995
|
+
* <Input placeholder="请输入" allowClear={true} />
|
|
1996
|
+
* </Form.Item>
|
|
1997
|
+
* </BoxGrid.Col>
|
|
1998
|
+
* <!-- ！！自定义栅格占位格数第二种方式：如果为FormItemWrapper组件，可设置span属性 -->
|
|
1999
|
+
* <FormItemWrapper name="field6" label="条件6" span={24}>
|
|
2000
|
+
* <Input placeholder="请输入" allowClear={true} />
|
|
2001
|
+
* </FormItemWrapper>
|
|
2002
|
+
* </EasyForm>
|
|
1991
2003
|
* ```
|
|
1992
2004
|
*/
|
|
1993
2005
|
export declare const EasyForm: (props: EasyFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3415,15 +3427,16 @@ export interface RichTextEditorProps extends Omit<IAllProps, "onChange" | "init"
|
|
|
3415
3427
|
* @param props
|
|
3416
3428
|
* @returns
|
|
3417
3429
|
* ```
|
|
3418
|
-
* 1.
|
|
3419
|
-
* 2.
|
|
3420
|
-
* 3.
|
|
3421
|
-
* 4.
|
|
3430
|
+
* 1. 修改高度 init={{ height: 300 }}
|
|
3431
|
+
* 2. 如果需要粘贴上传图片服务，需要提供 onUploadImage 上传图片接口
|
|
3432
|
+
* 3. 获取富文本实例，通过onInit(_, editor)函数获取
|
|
3433
|
+
* 4. 预览富文本数据，使用 RichTextViewer 组件
|
|
3434
|
+
* 5. 添加其他插件使用方式，配置 init.plugins_append、init.toolbar_append
|
|
3422
3435
|
* <RichTextEditor init={{ plugins_append: 'codesample', toolbar_append: 'codesample' }} />
|
|
3423
|
-
*
|
|
3424
|
-
*
|
|
3436
|
+
* 6. 可通过设置 init.plugins、init.toolbar 完全自定义插件、工具栏
|
|
3437
|
+
* 7. 其他插件
|
|
3425
3438
|
* emoticons 表情插件
|
|
3426
|
-
*
|
|
3439
|
+
* 8. 可通过设置 init.img_ratio 设置通过粘贴上传的图片压缩显示比例
|
|
3427
3440
|
* 默认比例：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]
|
|
3428
3441
|
* ```
|
|
3429
3442
|
*/
|