@flatbiz/antd 4.2.99 → 4.2.102
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/drag-table/index.js +1 -1
- package/esm/drag-table/index.js.map +1 -1
- package/esm/rich-text-editor/index.js +1 -1
- package/esm/rich-text-editor/index.js.map +1 -1
- package/esm/rich-text-viewer/index.js +1 -1
- package/esm/rich-text-viewer/index.js.map +1 -1
- package/esm/roll-location-center/index.js +1 -1
- package/esm/roll-location-center/index.js.map +1 -1
- package/esm/upload-wrapper/index.js +1 -1
- package/esm/upload-wrapper/index.js.map +1 -1
- package/index.d.ts +13 -0
- package/package.json +1 -1
package/esm/drag-table/index.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
import './../icon-wrapper/index.css';
|
|
3
3
|
import './index.css';
|
|
4
4
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
5
|
-
import r from"@ant-design/icons/es/icons/DragOutlined";import{a as n,_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useSensors as o,useSensor as t,PointerSensor as i,DndContext as a}from"@dnd-kit/core";import{restrictToVerticalAxis as
|
|
5
|
+
import r from"@ant-design/icons/es/icons/DragOutlined";import{a as n,_ as e}from"../_rollupPluginBabelHelpers-a0769acd.js";import{useSensors as o,useSensor as t,PointerSensor as i,DndContext as a}from"@dnd-kit/core";import{restrictToVerticalAxis as d}from"@dnd-kit/modifiers";import{SortableContext as s,verticalListSortingStrategy as c,arrayMove as l,useSortable as f}from"@dnd-kit/sortable";import{CSS as u}from"@dnd-kit/utilities";import{noop as m}from"@flatbiz/utils";import{Table as v}from"antd";import p,{useState as g,useEffect as x,useMemo as y,isValidElement as h}from"react";import{IconWrapper as b}from"../icon-wrapper/index.js";import{jsx as I}from"react/jsx-runtime";import"@dimjs/utils/cjs/class-names";var k=["dragIcon","uidFieldKey","columns","dataSource","onDragChange"],w=["children"];var C=function C(S){var j=S.dragIcon,D=S.uidFieldKey,z=S.columns,A=S.dataSource,K=S.onDragChange,N=n(S,k);var R=g([]),E=R[0],F=R[1];x((function(){F(A||[])}),[A]);var T=function r(n){var e=n.active,o=n.over;if(e.id!==(o==null?void 0:o.id)){var t=E.findIndex((function(r){return r[D]===e.id}));var i=E.findIndex((function(r){return r[D]===(o==null?void 0:o.id)}));var a=l(E,t,i);F([].concat(a));K==null?void 0:K(a,{activeId:e.id,activeIndex:t,overIndex:i})}};var Y=function r(n){var o=f({id:n["data-row-key"]}),t=o.listeners,i=o.setNodeRef,a=o.transform,d=o.transition,s=o.isDragging;var c=e({},n.style,{transform:u.Transform.toString(a&&e({},a,{scaleY:1})),transition:d,cursor:j===false?"move":undefined},s?{position:"relative",zIndex:9999,boxShadow:" 0px 0px 12px 4px rgba(34, 33, 81, 0.1)"}:{});return I("tr",e({},n,{ref:i,style:c},t))};var _=function o(t){var i=t.children,a=n(t,w);var d=a["data-row-key"];if(!d){return I("tr",e({},a,{children:i}))}var s=f({id:d}),c=s.setActivatorNodeRef,l=s.listeners,v=s.setNodeRef,g=s.transform,x=s.transition,y=s.isDragging;debugger;var k=e({},a.style,{transform:u.Transform.toString(g&&e({},g,{scaleY:1})),transition:x,cursor:j===false?"move":undefined},y?{position:"relative",zIndex:9999,boxShadow:" 0px 0px 12px 4px rgba(34, 33, 81, 0.1)",backgroundColor:"#fff"}:{});var C=h(j)?j:I(r,{});return I("tr",e({},a,{ref:v,style:k,children:p.Children.map(i,(function(r){if(r.key==="sort"){return p.cloneElement(r,{children:I("span",e({ref:c,style:{touchAction:"none",cursor:"move"}},l,{children:I(b,{style:{touchAction:"none",cursor:"move",padding:"1px 0px",margin:0,justifyContent:"center",color:"#787878"},icon:C,onClick:m})}))})}return r}))}))};var B=y((function(){if(j===false)return z;return[{key:"sort",dataIndex:"sort",align:"center",width:50}].concat(z||[])}),[z,j]);var H=o(t(i,{activationConstraint:{delay:j===false?150:0,tolerance:0}}));return I(a,{sensors:H,modifiers:[d],onDragEnd:T,children:I(s,{items:E.map((function(r){return r[D]})),strategy:c,children:I(v,e({pagination:false,rowKey:D,bordered:true},N,{dataSource:E,columns:B,components:{body:{row:S.dragIcon===false?Y:_}}}))})})};export{C as DragTable};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/drag-table/drag-table.tsx"],"sourcesContent":["import { DragOutlined } from '@ant-design/icons';\nimport { DndContext, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { noop, type TAny, type TPlainObject } from '@flatbiz/utils';\nimport { Table, type RowProps, type TableProps } from 'antd';\nimport React, { isValidElement, useEffect, useMemo, useState, type ReactElement } from 'react';\nimport { IconWrapper } from '../icon-wrapper';\n\ntype DragTableProps = Omit<TableProps<TPlainObject>, 'dataSource'> & {\n dragIcon?: boolean | ReactElement;\n /** 表格数据唯一值字段Key */\n uidFieldKey: string;\n dataSource?: TPlainObject[];\n /**\n * 拖拽结束事件\n * ```\n * dataSource: 拖拽完成后的数据源\n * dragData\n * 1. activeId 拖拽ID\n * 2. activeIndex 拖拽起始表格数组索引值\n * 3. overIndex 拖拽结束表格数组索引值\n * ```\n */\n onDragChange?: (\n dataSource: TPlainObject[],\n dragData: {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/drag-table/drag-table.tsx"],"sourcesContent":["import { DragOutlined } from '@ant-design/icons';\nimport { DndContext, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { noop, type TAny, type TPlainObject } from '@flatbiz/utils';\nimport { Table, type RowProps, type TableProps } from 'antd';\nimport React, { isValidElement, useEffect, useMemo, useState, type ReactElement } from 'react';\nimport { IconWrapper } from '../icon-wrapper';\n\ntype DragTableProps = Omit<TableProps<TPlainObject>, 'dataSource'> & {\n dragIcon?: boolean | ReactElement;\n /** 表格数据唯一值字段Key */\n uidFieldKey: string;\n dataSource?: TPlainObject[];\n /**\n * 拖拽结束事件\n * ```\n * dataSource: 拖拽完成后的数据源\n * dragData\n * 1. activeId 拖拽ID\n * 2. activeIndex 拖拽起始表格数组索引值\n * 3. overIndex 拖拽结束表格数组索引值\n * ```\n */\n onDragChange?: (\n dataSource: TPlainObject[],\n dragData: {\n activeId: string | number;\n activeIndex: number;\n overIndex: number;\n },\n ) => void;\n};\n\n/**\n * 可拖拽表格\n * ```\n * 1. 必须设置唯一值字段 uidFieldKey\n * 2. 如果拖拽显示异常，请检查 uidFieldKey 是否正确\n * ```\n */\nexport const DragTable = (props: DragTableProps) => {\n const { dragIcon, uidFieldKey, columns, dataSource, onDragChange, ...otherProps } = props;\n const [dataList, setDataList] = useState<TAny[]>([]);\n\n useEffect(() => {\n setDataList(dataSource || []);\n }, [dataSource]);\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n const activeIndex = dataList.findIndex((i) => i[uidFieldKey] === active.id);\n const overIndex = dataList.findIndex((i) => i[uidFieldKey] === over?.id);\n const dataListNew = arrayMove(dataList, activeIndex, overIndex);\n setDataList([...dataListNew]);\n onDragChange?.(dataListNew, {\n activeId: active.id,\n activeIndex,\n overIndex,\n });\n }\n };\n\n const TableBodyRow = (innerProps) => {\n const { listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: innerProps['data-row-key'],\n });\n\n const style: React.CSSProperties = {\n ...innerProps.style,\n transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),\n transition,\n cursor: dragIcon === false ? 'move' : undefined,\n ...(isDragging\n ? {\n position: 'relative',\n zIndex: 9999,\n boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)',\n }\n : {}),\n };\n\n return <tr {...innerProps} ref={setNodeRef} style={style} {...listeners} />;\n };\n\n const TableBodyRowByIcon = ({ children, ...innerProps }: RowProps) => {\n const rowId = innerProps['data-row-key'];\n if (!rowId) {\n return <tr {...innerProps}>{children}</tr>;\n }\n const { setActivatorNodeRef, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: rowId,\n });\n debugger;\n const style: React.CSSProperties = {\n ...innerProps.style,\n transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),\n transition,\n cursor: dragIcon === false ? 'move' : undefined,\n ...(isDragging\n ? {\n position: 'relative',\n zIndex: 9999,\n boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)',\n backgroundColor: '#fff',\n }\n : {}),\n };\n const iconElement = isValidElement(dragIcon) ? dragIcon : <DragOutlined />;\n return (\n <tr {...innerProps} ref={setNodeRef} style={style}>\n {React.Children.map(children, (child) => {\n if ((child as React.ReactElement).key === 'sort') {\n return React.cloneElement(child as React.ReactElement, {\n children: (\n <span\n ref={setActivatorNodeRef}\n style={{ touchAction: 'none', cursor: 'move' }}\n {...listeners}\n >\n <IconWrapper\n style={{\n touchAction: 'none',\n cursor: 'move',\n padding: '1px 0px',\n margin: 0,\n justifyContent: 'center',\n color: '#787878',\n }}\n icon={iconElement}\n onClick={noop}\n />\n </span>\n ),\n });\n }\n return child;\n })}\n </tr>\n );\n };\n\n const columnsList = useMemo(() => {\n if (dragIcon === false) return columns;\n return [\n {\n key: 'sort',\n dataIndex: 'sort',\n align: 'center',\n width: 50,\n } as TAny,\n ].concat(columns || []);\n }, [columns, dragIcon]);\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n // 当拖拽触发区域有其他点击事件时，需要延迟触发拖拽动作\n delay: dragIcon === false ? 150 : 0,\n tolerance: 0,\n },\n }),\n );\n\n return (\n <DndContext sensors={sensors} modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>\n <SortableContext items={dataList.map((i) => i[uidFieldKey])} strategy={verticalListSortingStrategy}>\n <Table\n pagination={false}\n rowKey={uidFieldKey}\n bordered\n {...otherProps}\n dataSource={dataList}\n columns={columnsList}\n components={{\n body: {\n row: props.dragIcon === false ? TableBodyRow : TableBodyRowByIcon,\n },\n }}\n />\n </SortableContext>\n </DndContext>\n );\n};\n"],"names":["DragTable","props","dragIcon","uidFieldKey","columns","dataSource","onDragChange","otherProps","_objectWithoutPropertiesLoose","_excluded","_useState","useState","dataList","setDataList","useEffect","onDragEnd","_ref","active","over","id","activeIndex","findIndex","i","overIndex","dataListNew","arrayMove","concat","activeId","TableBodyRow","innerProps","_useSortable","useSortable","listeners","setNodeRef","transform","transition","isDragging","style","_extends","CSS","Transform","toString","scaleY","cursor","undefined","position","zIndex","boxShadow","_jsx","ref","TableBodyRowByIcon","_ref2","children","_excluded2","rowId","_useSortable2","setActivatorNodeRef","backgroundColor","iconElement","isValidElement","_DragOutlined","React","Children","map","child","key","cloneElement","touchAction","IconWrapper","padding","margin","justifyContent","color","icon","onClick","noop","columnsList","useMemo","dataIndex","align","width","sensors","useSensors","useSensor","PointerSensor","activationConstraint","delay","tolerance","DndContext","modifiers","restrictToVerticalAxis","SortableContext","items","strategy","verticalListSortingStrategy","Table","pagination","rowKey","bordered","components","body","row"],"mappings":"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"}
|
|
@@ -3,5 +3,5 @@ import './../dynamic-node/index.css';
|
|
|
3
3
|
import './../fba-hooks/index.css';
|
|
4
4
|
import './index.css';
|
|
5
5
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
6
|
-
import{a as e,_ as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as t}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{
|
|
6
|
+
import{a as e,_ as n}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as t}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{getStrByteLen as i}from"@flatbiz/utils";import{Editor as o}from"@tinymce/tinymce-react";import{useKeyPress as a}from"ahooks";import{Image as l,message as s}from"antd";import{Fragment as c,useRef as u,useState as m}from"react";import d from"@ant-design/icons/es/icons/PlusCircleOutlined";import{dynamicNode as f}from"../dynamic-node/index.js";import{fbaHooks as p}from"../fba-hooks/index.js";import{jsx as v,Fragment as g,jsxs as h}from"react/jsx-runtime";import"react-dom/client";import"../dom-4d04aa64.js";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";var y=function e(n){var t=n.visible,r=n.url;p.useEffectCustom((function(){if(t){f.append({content:v(d,{onClick:n.close,className:"preview-image-popup-close",twoToneColor:"#1890ff"})})}else{f.remove()}}),[t]);if(!r)return v(g,{});return v(c,{children:v(l,{style:{left:"100px"},preview:{className:"preview-image-popup",maskStyle:{backgroundColor:"rgba(0,0,0,0.85)"},visible:t,src:r,onVisibleChange:function e(){n.close()}}},r)})};var b=["onUploadImage","onChange","className"];var C=function l(c){var d,f,p,g;var C=c.onUploadImage,k=c.onChange,x=c.className,_=e(c,b);var w=u(null);var j=m(""),E=j[0],I=j[1];var S=((d=c.init)==null?void 0:d.img_ratio)||[{min:0,max:1e3,ratio:.5},{min:1e3,ratio:.3}];a((function(){return true}),(function(e){try{if(e.type==="keyup"&&e.key==="Escape"){var n;var t=(n=w.current)==null?void 0:n.editorContainer.classList.contains("tox-fullscreen");if(t){var r;(r=w.current)==null?void 0:r.editorCommands.execCommand("mceFullScreen")}}}catch(e){}}),{events:["keydown","keyup"]});var F=r.useCallbackRef((function(e,n){try{if(e.keyCode==27){var t;var r=(t=w.current)==null?void 0:t.editorContainer.classList.contains("tox-fullscreen");if(r){var i;(i=w.current)==null?void 0:i.editorCommands.execCommand("mceFullScreen")}}}catch(e){}c.onKeyDown==null?void 0:c.onKeyDown(e,n)}));var N=r.useCallbackRef((function(e,n){w.current=n;n.on("FullscreenStateChanged",(function(e){c.onFullScreenChange==null?void 0:c.onFullScreenChange(e.state)}));try{var t;(t=n.iframeElement)==null||(t=t.contentDocument)==null?void 0:t.addEventListener("click",(function(e){var n;if(c.imgPreview&&((n=e.target)==null?void 0:n["tagName"])==="IMG"){I(e.target["src"])}}),true)}catch(e){}_.onInit==null?void 0:_.onInit(e,n)}));var P=r.useCallbackRef((function(e,n){w.current=n;_.onEditorChange==null?void 0:_.onEditorChange(e,n);k==null?void 0:k(e)}));var z="https://file.40017.cn/tcsk/tinymce@6.4.1";var R=function e(n){if(S.length===0)return 1;for(var t=0;t<S.length;t++){var r=S[t];if(r.max){if(n>=r.min&&n<=r.max)return r.ratio}else{if(n>=r.min)return r.ratio}}return 1};var D=r.useCallbackRef((function(e,n){try{var t=n.node.children||[];if(t.length===1&&t[0].nodeName==="IMG"){t[0].setAttribute("style","display:none");var r=document.createElement("img");r.src=t[0].getAttribute("src");r.onload=function(){var n=R(r.width);e.execCommand("mceInsertContent",true,'<img src="'+r.src+'" width="'+r.width*n+'" height="'+r.height*n+'" />')}}}catch(e){}}));var K=r.useCallbackRef((function(e,n){var t;var r=(t=c.init)==null?void 0:t.paste_text_limit;if(r){var o=i(n.content);if(o>1024*r.limit){s.error(r.message);n.content=""}}}));return h("div",{className:t("v-editor-wrapper",x),children:[v(o,n({tinymceScriptSrc:z+"/tinymce.min.js"},_,{onInit:N,onKeyDown:F,onEditorChange:P,init:n({promotion:false,language:"zh-Hans",height:500,paste_data_images:C?true:false,paste_postprocess:D,paste_preprocess:K,autosave_ask_before_unload:false,base_url:z,autoresize_bottom_margin:0,images_upload_handler:function e(n){return new Promise((function(e,t){var r,i,o;var a=function(n){try{return e(Promise.reject((n==null?void 0:n.message)||"图片上传异常"))}catch(e){return t(e)}};try{r=n.blob();i=new File([r],r.name,{type:r.type});return Promise.resolve(C==null?void 0:C(i)).then((function(n){try{o=n;return e(Promise.resolve(o))}catch(e){return a(e)}}),a)}catch(e){a(e)}}))},plugins:"lists link image advlist charmap preview fullscreen code table help codesample "+(((f=c.init)==null?void 0:f.plugins_append)||""),toolbar:"undo redo fullscreen preview | bold italic underline strikethrough |"+"fontsize blocks |"+"forecolor backcolor removeformat |"+"numlist bullist advlist |"+"alignleft aligncenter alignright alignjustify |"+"outdent indent |"+"hr image link code codesample |"+(((p=c.init)==null?void 0:p.toolbar_append)||""),font_size_formats:"8px 10px 12px 14px 16px 18px 24px 36px 48px"},c.init,{content_style:"img {max-width:100%;} table{width:100%} "+((g=c.init)==null?void 0:g.content_style),convert_urls:false})})),v(y,{visible:!!E,url:E,close:function e(){I("")}})]})};export{C as RichTextEditor};
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -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 { type TAny } from '@flatbiz/utils';\nimport { Editor, type IAllProps } from '@tinymce/tinymce-react';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\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 // value?: string;\n /** 上传图片服务 */\n onUploadImage?: (file: File) => Promise<string>;\n className?: string;\n /** 图片点击预览 */\n imgPreview?: boolean;\n init?: IAllProps['init'] & {\n /**\n * 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度\n * 1. 默认值：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]\n */\n img_ratio?: { min: number; max?: number; ratio: number }[];\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 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 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\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 }}\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$init2","_props$init3","_props$init4","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","_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","message","$boundEx","file","File","name","resolve","then","$await_6","plugins","plugins_append","toolbar","toolbar_append","font_size_formats","content_style"],"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. 如果需要粘贴上传图片服务，需要提供 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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"}
|
|
@@ -5,5 +5,5 @@ import './../rich-text-editor/index.css';
|
|
|
5
5
|
import './../dynamic-node/index.css';
|
|
6
6
|
import './index.css';
|
|
7
7
|
/*! @flatjs/forge MIT @flatbiz/antd */
|
|
8
|
-
import e from"@ant-design/icons/es/icons/FullscreenOutlined";import{classNames as i}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{useKeyPress as o}from"ahooks";import{useState as t,useRef as n}from"react";import{fbaHooks as s}from"../fba-hooks/index.js";import{IconWrapper as a}from"../icon-wrapper/index.js";import{RichTextEditor as
|
|
8
|
+
import e from"@ant-design/icons/es/icons/FullscreenOutlined";import{classNames as i}from"@dimjs/utils/cjs/class-names";import{hooks as r}from"@wove/react/cjs/hooks";import{useKeyPress as o}from"ahooks";import{useState as t,useRef as n}from"react";import{fbaHooks as s}from"../fba-hooks/index.js";import{IconWrapper as a}from"../icon-wrapper/index.js";import{RichTextEditor as l}from"../rich-text-editor/index.js";import{jsxs as m,jsx as c}from"react/jsx-runtime";import"../_rollupPluginBabelHelpers-a0769acd.js";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";import"antd";import"@flatbiz/utils";import"@tinymce/tinymce-react";import"@ant-design/icons/es/icons/PlusCircleOutlined";import"../dynamic-node/index.js";import"react-dom/client";import"../dom-4d04aa64.js";var u=function u(d){var p=t(false),f=p[0],v=p[1];var j=n();o((function(){return true}),(function(e){if(e.type==="keyup"&&e.key==="Escape"&&f){v(false)}}),{events:["keydown","keyup"]});var b=r.useCallbackRef((function(){v(!f)}));var y=r.useCallbackRef((function(e,i){j.current=i;d.onInit==null?void 0:d.onInit(i)}));s.useEffectCustom((function(){var e;(e=j.current)==null?void 0:e.editorCommands.execCommand("mceAutoResize")}),[d.value]);return m("div",{className:i("fba-editor-viewer",{"fba-editor-viewer-fixed":f},d.className),style:d.style,children:[d.children,d.fullscreen&&d.value&&c("div",{className:"fba-editor-viewer-icon",children:c(a,{hoverTips:d.fullscreenIconTips,icon:c(e,{}),onClick:b})}),c(l,{value:d.value,onInit:y,imgPreview:true,disabled:true,init:{plugins:"autoresize",menubar:false,toolbar:"",statusbar:false}})]})};export{u as RichTextViewer};
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-viewer/rich-text-viewer.tsx"],"sourcesContent":["import { FullscreenOutlined } from '@ant-design/icons';\nimport { classNames } from '@dimjs/utils';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { CSSProperties, ReactElement, useRef, useState } from 'react';\nimport { Editor as TinyMCEEditor } from 'tinymce';\n\nimport { fbaHooks } from '../fba-hooks';\nimport { IconWrapper } from '../icon-wrapper';\nimport { RichTextEditor } from '../rich-text-editor';\nimport './style.less';\n\ntype RichTextViewerProps = {\n value: string;\n className?: string;\n style?: CSSProperties;\n fullscreen?: boolean;\n onInit?: (editor: TinyMCEEditor) => void;\n children?: ReactElement;\n fullscreenIconTips?: string;\n};\n\n/**\n * 预览 RichTextEditor 生成的富文本数据\n * ```\n * 1. 通过 onInit 属性可获取实例：editor\n * 2. 如果高度发生变更，可执行 editor.execCommand('mceAutoResize');\n *\n * ```\n * @param props\n * @returns\n */\nexport const RichTextViewer = (props: RichTextViewerProps) => {\n const [isFixed, setIsFixed] = useState(false);\n const editorRef = useRef<TinyMCEEditor>();\n\n useKeyPress(\n () => true,\n (event) => {\n if (event.type === 'keyup' && event.key === 'Escape' && isFixed) {\n setIsFixed(false);\n }\n },\n { events: ['keydown', 'keyup'] },\n );\n\n const onChangeFixed = hooks.useCallbackRef(() => {\n setIsFixed(!isFixed);\n });\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n props.onInit?.(editor);\n });\n\n fbaHooks.useEffectCustom(() => {\n editorRef.current?.editorCommands.execCommand('mceAutoResize');\n }, [props.value]);\n\n return (\n <div\n className={classNames('fba-editor-viewer', { 'fba-editor-viewer-fixed': isFixed }, props.className)}\n style={props.style}\n >\n {props.children}\n {props.fullscreen && props.value && (\n <div className=\"fba-editor-viewer-icon\">\n <IconWrapper\n hoverTips={props.fullscreenIconTips}\n icon={<FullscreenOutlined />}\n onClick={onChangeFixed}\n />\n </div>\n )}\n <RichTextEditor\n value={props.value}\n onInit={onInit}\n imgPreview\n disabled\n init={{\n plugins: 'autoresize',\n menubar: false,\n toolbar: '',\n statusbar: false,\n }}\n />\n </div>\n );\n};\n"],"names":["RichTextViewer","props","_useState","useState","isFixed","setIsFixed","editorRef","useRef","useKeyPress","event","type","key","events","onChangeFixed","_hooks","useCallbackRef","onInit","_","editor","current","fbaHooks","useEffectCustom","_editorRef$current","editorCommands","execCommand","value","_jsxs","className","_classNames","style","children","fullscreen","_jsx","IconWrapper","hoverTips","fullscreenIconTips","icon","_FullscreenOutlined","onClick","RichTextEditor","imgPreview","disabled","init","plugins","menubar","toolbar","statusbar"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/rich-text-viewer/rich-text-viewer.tsx"],"sourcesContent":["import { FullscreenOutlined } from '@ant-design/icons';\nimport { classNames } from '@dimjs/utils';\nimport { hooks } from '@wove/react';\nimport { useKeyPress } from 'ahooks';\nimport { CSSProperties, ReactElement, useRef, useState } from 'react';\nimport { Editor as TinyMCEEditor } from 'tinymce';\n\nimport { fbaHooks } from '../fba-hooks';\nimport { IconWrapper } from '../icon-wrapper';\nimport { RichTextEditor } from '../rich-text-editor';\nimport './style.less';\n\ntype RichTextViewerProps = {\n value: string;\n className?: string;\n style?: CSSProperties;\n fullscreen?: boolean;\n onInit?: (editor: TinyMCEEditor) => void;\n children?: ReactElement;\n fullscreenIconTips?: string;\n};\n\n/**\n * 预览 RichTextEditor 生成的富文本数据\n * ```\n * 1. 通过 onInit 属性可获取实例：editor\n * 2. 如果高度发生变更，可执行 editor.execCommand('mceAutoResize');\n *\n * ```\n * @param props\n * @returns\n */\nexport const RichTextViewer = (props: RichTextViewerProps) => {\n const [isFixed, setIsFixed] = useState(false);\n const editorRef = useRef<TinyMCEEditor>();\n\n useKeyPress(\n () => true,\n (event) => {\n if (event.type === 'keyup' && event.key === 'Escape' && isFixed) {\n setIsFixed(false);\n }\n },\n { events: ['keydown', 'keyup'] },\n );\n\n const onChangeFixed = hooks.useCallbackRef(() => {\n setIsFixed(!isFixed);\n });\n const onInit = hooks.useCallbackRef((_, editor: TinyMCEEditor) => {\n editorRef.current = editor;\n props.onInit?.(editor);\n });\n\n fbaHooks.useEffectCustom(() => {\n editorRef.current?.editorCommands.execCommand('mceAutoResize');\n }, [props.value]);\n\n return (\n <div\n className={classNames('fba-editor-viewer', { 'fba-editor-viewer-fixed': isFixed }, props.className)}\n style={props.style}\n >\n {props.children}\n {props.fullscreen && props.value && (\n <div className=\"fba-editor-viewer-icon\">\n <IconWrapper\n hoverTips={props.fullscreenIconTips}\n icon={<FullscreenOutlined />}\n onClick={onChangeFixed}\n />\n </div>\n )}\n <RichTextEditor\n value={props.value}\n onInit={onInit}\n imgPreview\n disabled\n init={{\n plugins: 'autoresize',\n menubar: false,\n toolbar: '',\n statusbar: false,\n }}\n />\n </div>\n );\n};\n"],"names":["RichTextViewer","props","_useState","useState","isFixed","setIsFixed","editorRef","useRef","useKeyPress","event","type","key","events","onChangeFixed","_hooks","useCallbackRef","onInit","_","editor","current","fbaHooks","useEffectCustom","_editorRef$current","editorCommands","execCommand","value","_jsxs","className","_classNames","style","children","fullscreen","_jsx","IconWrapper","hoverTips","fullscreenIconTips","icon","_FullscreenOutlined","onClick","RichTextEditor","imgPreview","disabled","init","plugins","menubar","toolbar","statusbar"],"mappings":";+xBAgCaA,EAAiB,SAAjBA,EAAkBC,GAC7B,IAAAC,EAA8BC,EAAS,OAAhCC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAC1B,IAAMI,EAAYC,IAElBC,GACE,WAAA,OAAM,IACN,IAAA,SAACC,GACC,GAAIA,EAAMC,OAAS,SAAWD,EAAME,MAAQ,UAAYP,EAAS,CAC/DC,EAAW,MACb,CACF,GACA,CAAEO,OAAQ,CAAC,UAAW,WAGxB,IAAMC,EAAgBC,EAAMC,gBAAe,WACzCV,GAAYD,EACd,IACA,IAAMY,EAASF,EAAMC,gBAAe,SAACE,EAAGC,GACtCZ,EAAUa,QAAUD,EACpBjB,EAAMe,QAANf,UAAAA,EAAAA,EAAMe,OAASE,EACjB,IAEAE,EAASC,iBAAgB,WAAM,IAAAC,GAC7BA,EAAAhB,EAAUa,UAAO,UAAA,EAAjBG,EAAmBC,eAAeC,YAAY,gBAChD,GAAG,CAACvB,EAAMwB,QAEV,OACEC,EAAA,MAAA,CACEC,UAAWC,EAAW,oBAAqB,CAAE,0BAA2BxB,GAAWH,EAAM0B,WACzFE,MAAO5B,EAAM4B,MAAMC,SAElB7B,CAAAA,EAAM6B,SACN7B,EAAM8B,YAAc9B,EAAMwB,OACzBO,EAAA,MAAA,CAAKL,UAAU,yBAAwBG,SACrCE,EAACC,EAAW,CACVC,UAAWjC,EAAMkC,mBACjBC,KAAMJ,EAAAK,MACNC,QAASzB,MAIfmB,EAACO,EAAc,CACbd,MAAOxB,EAAMwB,MACbT,OAAQA,EACRwB,WAAU,KACVC,SAAQ,KACRC,KAAM,CACJC,QAAS,aACTC,QAAS,MACTC,QAAS,GACTC,UAAW,WAKrB"}
|
|
@@ -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{classNames as r}from"@dimjs/utils/cjs/class-names";import{useMutationObserver as e}from"ahooks";import{useRef as
|
|
5
|
+
import{classNames as r}from"@dimjs/utils/cjs/class-names";import{useMutationObserver as e}from"ahooks";import{useRef as t}from"react";import{fbaHooks as o}from"../fba-hooks/index.js";import{jsx as i}from"react/jsx-runtime";import"../_rollupPluginBabelHelpers-a0769acd.js";import"@dimjs/lang/cjs/is-array";import"@wove/react/cjs/hooks";import"../use-responsive-point-21b8c601.js";import"antd";var l=function l(a){var c=t(null);var n=a.behavior||"smooth";var v=a.direction||"vertical";var s=function r(e){var t,o;var i=(t=c.current)==null?void 0:t.querySelector(".roll-location-center-"+e);if(!i)return;var l=(o=c.current)==null?void 0:o.offsetHeight;var a=i.offsetTop;var v=i.offsetHeight;if(a<=v){var s;(s=c.current)==null?void 0:s.scrollTo({top:0,behavior:n})}else{var u=a-l/2+v/2;if(u>0){var f;(f=c.current)==null?void 0:f.scrollTo({top:u,behavior:n})}else{var m;(m=c.current)==null?void 0:m.scrollTo({top:0,behavior:n})}}};var u=function r(e){var t,o;var i=(t=c.current)==null?void 0:t.querySelector(".roll-location-center-"+e);if(!i)return;var l=(o=c.current)==null?void 0:o.offsetWidth;var a=i.offsetLeft;var v=i.offsetWidth;if(a<=v){var s;(s=c.current)==null?void 0:s.scrollTo({left:0,behavior:n})}else{var u=a-l/2+v/2;if(u>0){var f;(f=c.current)==null?void 0:f.scrollTo({left:u,behavior:n})}else{var m;(m=c.current)==null?void 0:m.scrollTo({left:0,behavior:n})}}};o.useEffectCustom((function(){if(a.activeKey){if(v==="vertical"){s(a.activeKey)}else{u(a.activeKey)}}}),[a.activeKey]);e((function(){if(a.activeKey){if(v==="vertical"){s(a.activeKey)}else{u(a.activeKey)}}}),c,{subtree:true,childList:true,characterData:true});return i("div",{className:r("roll-location-center","roll-location-center-"+v,a.className),style:a.style,ref:c,children:a.renderList.map((function(r){return i("div",{className:"roll-location-center-"+r.activeKey,children:r.render},r.activeKey)}))})};export{l as RollLocationCenter};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/roll-location-center/center.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { useMutationObserver } from 'ahooks';\nimport { CSSProperties, ReactElement, useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\n\nexport type RollLocationCenterProps = {\n renderList: { activeKey: string; render: ReactElement }[];\n activeKey?: string;\n behavior?: ScrollBehavior;\n direction?: 'horizontal' | 'vertical';\n style?: CSSProperties;\n className?: string;\n};\nexport const RollLocationCenter = (props: RollLocationCenterProps) => {\n const rollLocationCenterRef = useRef<HTMLDivElement>(null);\n const behavior = props.behavior || 'smooth';\n const direction = props.direction || 'vertical';\n\n const targetVerticalRoll = (key: string) => {\n const targetNode = rollLocationCenterRef.current?.querySelector(\n `.roll-location-center-${key}`,\n ) as HTMLDivElement;\n const parentNodeHeight = rollLocationCenterRef.current?.offsetHeight as number;\n const targetNodeOffsetTop = targetNode.offsetTop;\n const targetNodeHeight = targetNode.offsetHeight;\n if (targetNodeOffsetTop <= targetNodeHeight) {\n rollLocationCenterRef.current?.scrollTo({ top: 0, behavior });\n } else {\n const rollHeight = targetNodeOffsetTop - parentNodeHeight / 2 + targetNodeHeight / 2;\n if (rollHeight > 0) {\n rollLocationCenterRef.current?.scrollTo({ top: rollHeight, behavior });\n } else {\n rollLocationCenterRef.current?.scrollTo({ top: 0, behavior });\n }\n }\n };\n const targetHorizontalRoll = (key: string) => {\n const targetNode = rollLocationCenterRef.current?.querySelector(\n `.roll-location-center-${key}`,\n ) as HTMLDivElement;\n const parentNodeWidth = rollLocationCenterRef.current?.offsetWidth as number;\n const targetNodeOffsetLeft = targetNode.offsetLeft;\n const targetNodeWidth = targetNode.offsetWidth;\n if (targetNodeOffsetLeft <= targetNodeWidth) {\n rollLocationCenterRef.current?.scrollTo({ left: 0, behavior });\n } else {\n const rollWidth = targetNodeOffsetLeft - parentNodeWidth / 2 + targetNodeWidth / 2;\n if (rollWidth > 0) {\n rollLocationCenterRef.current?.scrollTo({ left: rollWidth, behavior });\n } else {\n rollLocationCenterRef.current?.scrollTo({ left: 0, behavior });\n }\n }\n };\n\n fbaHooks.useEffectCustom(() => {\n if (props.activeKey) {\n if (direction === 'vertical') {\n targetVerticalRoll(props.activeKey);\n } else {\n targetHorizontalRoll(props.activeKey);\n }\n }\n }, [props.activeKey]);\n\n useMutationObserver(\n () => {\n if (props.activeKey) {\n if (direction === 'vertical') {\n targetVerticalRoll(props.activeKey);\n } else {\n targetHorizontalRoll(props.activeKey);\n }\n }\n },\n rollLocationCenterRef,\n {\n subtree: true,\n childList: true,\n characterData: true,\n },\n );\n\n return (\n <div\n className={classNames('roll-location-center', `roll-location-center-${direction}`, props.className)}\n style={props.style}\n ref={rollLocationCenterRef}\n >\n {props.renderList.map((item) => {\n return (\n <div className={`roll-location-center-${item.activeKey}`} key={item.activeKey}>\n {item.render}\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["RollLocationCenter","props","rollLocationCenterRef","useRef","behavior","direction","targetVerticalRoll","key","_rollLocationCenterRe","_rollLocationCenterRe2","targetNode","current","querySelector","parentNodeHeight","offsetHeight","targetNodeOffsetTop","offsetTop","targetNodeHeight","_rollLocationCenterRe3","scrollTo","top","rollHeight","_rollLocationCenterRe4","_rollLocationCenterRe5","targetHorizontalRoll","_rollLocationCenterRe6","_rollLocationCenterRe7","parentNodeWidth","offsetWidth","targetNodeOffsetLeft","offsetLeft","targetNodeWidth","_rollLocationCenterRe8","left","rollWidth","_rollLocationCenterRe9","_rollLocationCenterRe10","fbaHooks","useEffectCustom","activeKey","useMutationObserver","subtree","childList","characterData","_jsx","className","_classNames","style","ref","children","renderList","map","item","render"],"mappings":";4YAcaA,EAAqB,SAArBA,EAAsBC,GACjC,IAAMC,EAAwBC,EAAuB,MACrD,IAAMC,EAAWH,EAAMG,UAAY,SACnC,IAAMC,EAAYJ,EAAMI,WAAa,WAErC,IAAMC,EAAqB,SAArBA,EAAsBC,GAAgB,IAAAC,EAAAC,EAC1C,IAAMC,GAAUF,EAAGN,EAAsBS,UAAO,UAAA,EAA7BH,EAA+BI,cAAa,yBACpCL,GAE3B,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/roll-location-center/center.tsx"],"sourcesContent":["import { classNames } from '@dimjs/utils';\nimport { useMutationObserver } from 'ahooks';\nimport { CSSProperties, ReactElement, useRef } from 'react';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\n\nexport type RollLocationCenterProps = {\n renderList: { activeKey: string; render: ReactElement }[];\n activeKey?: string;\n behavior?: ScrollBehavior;\n direction?: 'horizontal' | 'vertical';\n style?: CSSProperties;\n className?: string;\n};\nexport const RollLocationCenter = (props: RollLocationCenterProps) => {\n const rollLocationCenterRef = useRef<HTMLDivElement>(null);\n const behavior = props.behavior || 'smooth';\n const direction = props.direction || 'vertical';\n\n const targetVerticalRoll = (key: string) => {\n const targetNode = rollLocationCenterRef.current?.querySelector(\n `.roll-location-center-${key}`,\n ) as HTMLDivElement;\n if (!targetNode) return;\n const parentNodeHeight = rollLocationCenterRef.current?.offsetHeight as number;\n const targetNodeOffsetTop = targetNode.offsetTop;\n const targetNodeHeight = targetNode.offsetHeight;\n if (targetNodeOffsetTop <= targetNodeHeight) {\n rollLocationCenterRef.current?.scrollTo({ top: 0, behavior });\n } else {\n const rollHeight = targetNodeOffsetTop - parentNodeHeight / 2 + targetNodeHeight / 2;\n if (rollHeight > 0) {\n rollLocationCenterRef.current?.scrollTo({ top: rollHeight, behavior });\n } else {\n rollLocationCenterRef.current?.scrollTo({ top: 0, behavior });\n }\n }\n };\n const targetHorizontalRoll = (key: string) => {\n const targetNode = rollLocationCenterRef.current?.querySelector(\n `.roll-location-center-${key}`,\n ) as HTMLDivElement;\n if (!targetNode) return;\n const parentNodeWidth = rollLocationCenterRef.current?.offsetWidth as number;\n const targetNodeOffsetLeft = targetNode.offsetLeft;\n const targetNodeWidth = targetNode.offsetWidth;\n if (targetNodeOffsetLeft <= targetNodeWidth) {\n rollLocationCenterRef.current?.scrollTo({ left: 0, behavior });\n } else {\n const rollWidth = targetNodeOffsetLeft - parentNodeWidth / 2 + targetNodeWidth / 2;\n if (rollWidth > 0) {\n rollLocationCenterRef.current?.scrollTo({ left: rollWidth, behavior });\n } else {\n rollLocationCenterRef.current?.scrollTo({ left: 0, behavior });\n }\n }\n };\n\n fbaHooks.useEffectCustom(() => {\n if (props.activeKey) {\n if (direction === 'vertical') {\n targetVerticalRoll(props.activeKey);\n } else {\n targetHorizontalRoll(props.activeKey);\n }\n }\n }, [props.activeKey]);\n\n useMutationObserver(\n () => {\n if (props.activeKey) {\n if (direction === 'vertical') {\n targetVerticalRoll(props.activeKey);\n } else {\n targetHorizontalRoll(props.activeKey);\n }\n }\n },\n rollLocationCenterRef,\n {\n subtree: true,\n childList: true,\n characterData: true,\n },\n );\n\n return (\n <div\n className={classNames('roll-location-center', `roll-location-center-${direction}`, props.className)}\n style={props.style}\n ref={rollLocationCenterRef}\n >\n {props.renderList.map((item) => {\n return (\n <div className={`roll-location-center-${item.activeKey}`} key={item.activeKey}>\n {item.render}\n </div>\n );\n })}\n </div>\n );\n};\n"],"names":["RollLocationCenter","props","rollLocationCenterRef","useRef","behavior","direction","targetVerticalRoll","key","_rollLocationCenterRe","_rollLocationCenterRe2","targetNode","current","querySelector","parentNodeHeight","offsetHeight","targetNodeOffsetTop","offsetTop","targetNodeHeight","_rollLocationCenterRe3","scrollTo","top","rollHeight","_rollLocationCenterRe4","_rollLocationCenterRe5","targetHorizontalRoll","_rollLocationCenterRe6","_rollLocationCenterRe7","parentNodeWidth","offsetWidth","targetNodeOffsetLeft","offsetLeft","targetNodeWidth","_rollLocationCenterRe8","left","rollWidth","_rollLocationCenterRe9","_rollLocationCenterRe10","fbaHooks","useEffectCustom","activeKey","useMutationObserver","subtree","childList","characterData","_jsx","className","_classNames","style","ref","children","renderList","map","item","render"],"mappings":";4YAcaA,EAAqB,SAArBA,EAAsBC,GACjC,IAAMC,EAAwBC,EAAuB,MACrD,IAAMC,EAAWH,EAAMG,UAAY,SACnC,IAAMC,EAAYJ,EAAMI,WAAa,WAErC,IAAMC,EAAqB,SAArBA,EAAsBC,GAAgB,IAAAC,EAAAC,EAC1C,IAAMC,GAAUF,EAAGN,EAAsBS,UAAO,UAAA,EAA7BH,EAA+BI,cAAa,yBACpCL,GAE3B,IAAKG,EAAY,OACjB,IAAMG,GAAgBJ,EAAGP,EAAsBS,UAAO,UAAA,EAA7BF,EAA+BK,aACxD,IAAMC,EAAsBL,EAAWM,UACvC,IAAMC,EAAmBP,EAAWI,aACpC,GAAIC,GAAuBE,EAAkB,CAAA,IAAAC,GAC3CA,EAAAhB,EAAsBS,UAAtBO,UAAAA,EAAAA,EAA+BC,SAAS,CAAEC,IAAK,EAAGhB,SAAAA,GACpD,KAAO,CACL,IAAMiB,EAAaN,EAAsBF,EAAmB,EAAII,EAAmB,EACnF,GAAII,EAAa,EAAG,CAAA,IAAAC,GAClBA,EAAApB,EAAsBS,UAAtBW,UAAAA,EAAAA,EAA+BH,SAAS,CAAEC,IAAKC,EAAYjB,SAAAA,GAC7D,KAAO,CAAA,IAAAmB,GACLA,EAAArB,EAAsBS,UAAtBY,UAAAA,EAAAA,EAA+BJ,SAAS,CAAEC,IAAK,EAAGhB,SAAAA,GACpD,CACF,GAEF,IAAMoB,EAAuB,SAAvBA,EAAwBjB,GAAgB,IAAAkB,EAAAC,EAC5C,IAAMhB,GAAUe,EAAGvB,EAAsBS,UAAO,UAAA,EAA7Bc,EAA+Bb,cAAa,yBACpCL,GAE3B,IAAKG,EAAY,OACjB,IAAMiB,GAAeD,EAAGxB,EAAsBS,UAAO,UAAA,EAA7Be,EAA+BE,YACvD,IAAMC,EAAuBnB,EAAWoB,WACxC,IAAMC,EAAkBrB,EAAWkB,YACnC,GAAIC,GAAwBE,EAAiB,CAAA,IAAAC,GAC3CA,EAAA9B,EAAsBS,UAAtBqB,UAAAA,EAAAA,EAA+Bb,SAAS,CAAEc,KAAM,EAAG7B,SAAAA,GACrD,KAAO,CACL,IAAM8B,EAAYL,EAAuBF,EAAkB,EAAII,EAAkB,EACjF,GAAIG,EAAY,EAAG,CAAA,IAAAC,GACjBA,EAAAjC,EAAsBS,UAAtBwB,UAAAA,EAAAA,EAA+BhB,SAAS,CAAEc,KAAMC,EAAW9B,SAAAA,GAC7D,KAAO,CAAA,IAAAgC,GACLA,EAAAlC,EAAsBS,UAAtByB,UAAAA,EAAAA,EAA+BjB,SAAS,CAAEc,KAAM,EAAG7B,SAAAA,GACrD,CACF,GAGFiC,EAASC,iBAAgB,WACvB,GAAIrC,EAAMsC,UAAW,CACnB,GAAIlC,IAAc,WAAY,CAC5BC,EAAmBL,EAAMsC,UAC3B,KAAO,CACLf,EAAqBvB,EAAMsC,UAC7B,CACF,CACF,GAAG,CAACtC,EAAMsC,YAEVC,GACE,WACE,GAAIvC,EAAMsC,UAAW,CACnB,GAAIlC,IAAc,WAAY,CAC5BC,EAAmBL,EAAMsC,UAC3B,KAAO,CACLf,EAAqBvB,EAAMsC,UAC7B,CACF,CACD,GACDrC,EACA,CACEuC,QAAS,KACTC,UAAW,KACXC,cAAe,OAInB,OACEC,EAAA,MAAA,CACEC,UAAWC,EAAW,uBAAsB,wBAA0BzC,EAAaJ,EAAM4C,WACzFE,MAAO9C,EAAM8C,MACbC,IAAK9C,EAAsB+C,SAE1BhD,EAAMiD,WAAWC,KAAI,SAACC,GACrB,OACER,EAAA,MAAA,CAAKC,UAAS,wBAA0BO,EAAKb,UAAYU,SACtDG,EAAKC,QADuDD,EAAKb,eAO9E"}
|
|
@@ -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 r from"@ant-design/icons/es/icons/PlusOutlined";import{a as e,_ as i}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as n}from"@dimjs/utils/cjs/class-names";import{hooks as t}from"@wove/react/cjs/hooks";import{isPlainObject as a}from"@dimjs/lang/cjs/is-plain-object";import{extend as s}from"@dimjs/utils/cjs/extend";import{isUndefinedOrNull as o,toArray as u}from"@flatbiz/utils";import{message as l,Upload as d,Button as f}from"antd";import{useState as m,useMemo as c,Fragment as p}from"react";import{flushSync as v}from"react-dom";import{fbaHooks as g}from"../fba-hooks/index.js";import{jsx as h,jsxs as x}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";var j=["onChange","onUploadError","value","triggerText","limitHidden"];var C=function r(f){var p=f.onChange,x=f.onUploadError,C=f.value,y=f.triggerText,b=f.limitHidden,O=e(f,j);var R=o(C)?undefined:u(C);var E=m(),U=E[0],k=E[1];var D=s({uid:"uid",name:"name",url:"url"},f.fieldNames);g.useEffectCustom((function(){var r=(U==null?void 0:U.filter((function(r){return r["status"]==="error"})))||[];var e=(R==null?void 0:R.map((function(r){return{uid:r[D.uid],name:r[D.name],url:r[D.url],status:"done",isOriginal:true,responseData:r["responseData"]}})))||[];if(r.length>0){var i=r.map((function(r){return{uid:r.uid,name:r.name,status:"error",isOriginal:true,response:r["response"]}}));e=e.concat(i)}k(e)}),[D.name,D.uid,D.url,R]);var H=function r(e){var i=[];var n=false;e.forEach((function(r){if(r["isOriginal"]){if(r["status"]!=="error"){var e;i.push((e={},e[D.uid]=r.uid,e[D.name]=r.name,e[D.url]=r.url,e))}}else if(a(r.response)){if(r.response.code==="0000"){var t;var s=r.response.data;var o=(f.onRequestResultAdapter==null?void 0:f.onRequestResultAdapter(s))||s;i.push((t={},t[D.uid]=o[D.uid]||r.uid,t[D.name]=o[D.name]||r.name,t[D.url]=o[D.url],t.responseData=s,t))}else{n=true;r.status="error";r.response=r.response.message||"上传失败"}}}));if(n){k([].concat(e))}p==null?void 0:p(i)};var L=t.useCallbackRef((function(r){var e=r.fileList;if(r.file.status==="done"){var i=[].concat(r.fileList);var n=i.filter((function(r){return r.status==="done"||r["isOriginal"]}));var t=n.length===i.length;if(t){H(i)}v((function(){return k(i)}));return}else if(r.file.status==="removed"){var a=r.file.uid;var s=R!==undefined?[].concat(R):[];var o=s.findIndex((function(r){var e=r[D.uid];return e===a}));if(o>=0){s.splice(o,1)}p==null?void 0:p(
|
|
5
|
+
import r from"@ant-design/icons/es/icons/PlusOutlined";import{a as e,_ as i}from"../_rollupPluginBabelHelpers-a0769acd.js";import{classNames as n}from"@dimjs/utils/cjs/class-names";import{hooks as t}from"@wove/react/cjs/hooks";import{isPlainObject as a}from"@dimjs/lang/cjs/is-plain-object";import{extend as s}from"@dimjs/utils/cjs/extend";import{isUndefinedOrNull as o,toArray as u}from"@flatbiz/utils";import{message as l,Upload as d,Button as f}from"antd";import{useState as m,useMemo as c,Fragment as p}from"react";import{flushSync as v}from"react-dom";import{fbaHooks as g}from"../fba-hooks/index.js";import{jsx as h,jsxs as x}from"react/jsx-runtime";import"@dimjs/lang/cjs/is-array";import"../use-responsive-point-21b8c601.js";var j=["onChange","onUploadError","value","triggerText","limitHidden"];var C=function r(f){var p=f.onChange,x=f.onUploadError,C=f.value,y=f.triggerText,b=f.limitHidden,O=e(f,j);var R=o(C)?undefined:u(C);var E=m(),U=E[0],k=E[1];var D=s({uid:"uid",name:"name",url:"url"},f.fieldNames);g.useEffectCustom((function(){var r=(U==null?void 0:U.filter((function(r){return r["status"]==="error"})))||[];var e=(R==null?void 0:R.map((function(r){return{uid:r[D.uid],name:r[D.name],url:r[D.url],status:"done",isOriginal:true,responseData:r["responseData"]}})))||[];if(r.length>0){var i=r.map((function(r){return{uid:r.uid,name:r.name,status:"error",isOriginal:true,response:r["response"]}}));e=e.concat(i)}k(e)}),[D.name,D.uid,D.url,R]);var H=function r(e){var i=[];var n=false;e.forEach((function(r){if(r["isOriginal"]){if(r["status"]!=="error"){var e;i.push((e={},e[D.uid]=r.uid,e[D.name]=r.name,e[D.url]=r.url,e))}}else if(a(r.response)){if(r.response.code==="0000"){var t;var s=r.response.data;var o=(f.onRequestResultAdapter==null?void 0:f.onRequestResultAdapter(s))||s;i.push((t={},t[D.uid]=o[D.uid]||r.uid,t[D.name]=o[D.name]||r.name,t[D.url]=o[D.url],t.responseData=s,t))}else{var u=r.response.message||"上传失败";n=true;r.status="error";r.response=r.response.message||"上传失败";if(x){x==null?void 0:x(u)}else{void l.error("上传操作失败...")}}}}));if(n){k([].concat(e))}p==null?void 0:p(i)};var L=t.useCallbackRef((function(r){var e=r.fileList;if(r.file.status==="done"){var i=[].concat(r.fileList);var n=i.filter((function(r){return r.status==="done"||r["isOriginal"]}));var t=n.length===i.length;if(t){H(i)}v((function(){return k(i)}));return}else if(r.file.status==="removed"){var a=r.file.uid;var s=R!==undefined?[].concat(R):[];var o=s.findIndex((function(r){var e=r[D.uid];return e===a}));if(o>=0){s.splice(o,1)}p==null?void 0:p(s)}else if(r.file.status==="error"){if(x){x()}else{void l.error("上传操作失败...")}}k([].concat(e));f.onUploadChange==null?void 0:f.onUploadChange(r)}));var N=c((function(){if(O.maxCount===undefined||!b)return false;if(O.maxCount===0)return true;if(U&&U.length>=O.maxCount)return true;return false}),[b,O.maxCount,U]);return h(d,i({},O,{onChange:L,fileList:U,className:n("v-upload-wrapper",O.className),children:O.disabled||N?null:h(T,{triggerText:y,listType:O.listType,children:f.children})}))};var T=function e(i){if(i.children)return h(p,{children:i.children});if(i.listType==="picture-card"){return x("div",{children:[h(r,{}),h("div",{style:{marginTop:8},children:i.triggerText||"上传图片"})]})}if(i.listType==="picture"){return h(f,{type:"primary",ghost:true,children:i.triggerText||"选择图片上传"})}return h(f,{type:"primary",ghost:true,children:i.triggerText||"选择文件上传"})};export{C as UploadWrapper};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/upload-wrapper/upload-wrapper.tsx"],"sourcesContent":["import { PlusOutlined } from '@ant-design/icons';\nimport { isPlainObject } from '@dimjs/lang';\nimport { classNames, extend } from '@dimjs/utils';\nimport { isUndefinedOrNull, TAny, toArray, TPlainObject } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Button, message, Upload, UploadProps } from 'antd';\nimport { UploadChangeParam } from 'antd/lib/upload';\nimport { UploadFile, UploadListType } from 'antd/lib/upload/interface';\nimport { Fragment, ReactNode, useMemo, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\n\nexport type UploadWrapperFileItem = {\n uid: string;\n name: string;\n url?: string;\n};\n\nexport type UploadWrapperProps<T extends TPlainObject = TPlainObject> = {\n value?: T[] | T;\n onChange?: (value?: T[]) => void;\n onUploadError?: (message?: string) => void;\n onUploadChange?: (info: UploadChangeParam<UploadFile>) => void;\n /**\n * 属性映射\n */\n fieldNames?: {\n uid: string;\n name?: string;\n url?: string;\n };\n /**\n * 接口响应数据适配器，如果配置了fieldNames，适配器返回值会再进过fieldNames转换\n */\n onRequestResultAdapter?: (respData: TAny) => TPlainObject;\n /** 操作触发显示文本 */\n triggerText?: string;\n /** 超过maxCount 隐藏上传入口 */\n limitHidden?: boolean;\n} & Omit<UploadProps, 'onChange' | 'fileList'>;\n\n/**\n * 文件上传\n * ```\n * 1. 可通过配置children替换默认上传触发布局\n * 2. 接口返回结构：\n * formData上传接口返回值\n * {\n * code: '0000',\n * data: {\n * uid: '唯一值，可使用fileKey值'\n * name: '文件名称'\n * url: '预览地址'\n * }\n * }\n * 3. 如果接口返回的不是上面的字段名称，可通过fieldNames配置接口返回字段名称映射\n *\n * 4. 最佳使用方式，与Form结合使用\n * <Form.Item name=\"attachmentList\" label=\"附件\">\n * <UploadWrapper action={uploadUrl} />\n * </Form.Item>\n * ```\n *\n */\nexport const UploadWrapper = (props: UploadWrapperProps) => {\n const { onChange, onUploadError, value, triggerText, limitHidden, ...otherProps } = props;\n const valueList = isUndefinedOrNull(value) ? undefined : toArray<TPlainObject>(value);\n const [uploadList, setUploadList] = useState<UploadWrapperFileItem[]>();\n const fieldNames = extend(\n {\n uid: 'uid',\n name: 'name',\n url: 'url',\n },\n props.fieldNames,\n ) as Required<UploadWrapperFileItem>;\n\n fbaHooks.useEffectCustom(() => {\n const errorList = uploadList?.filter((item) => item['status'] === 'error') || [];\n let newList =\n valueList?.map((item) => {\n return {\n uid: item[fieldNames.uid],\n name: item[fieldNames.name],\n url: item[fieldNames.url],\n status: 'done',\n isOriginal: true,\n responseData: item['responseData'],\n };\n }) || [];\n if (errorList.length > 0) {\n const newErrorList = errorList.map((item) => {\n return {\n uid: item.uid,\n name: item.name,\n status: 'error',\n isOriginal: true,\n response: item['response'],\n };\n }) as TAny[];\n newList = newList.concat(newErrorList);\n }\n setUploadList(newList);\n }, [fieldNames.name, fieldNames.uid, fieldNames.url, valueList]);\n\n const handleResponse = (fileList: UploadFile<TAny>[]) => {\n const newFileList: TAny[] = [];\n let hasError = false;\n fileList.forEach((item) => {\n if (item['isOriginal']) {\n if (item['status'] !== 'error') {\n newFileList.push({\n [fieldNames.uid]: item.uid,\n [fieldNames.name]: item.name,\n [fieldNames.url]: item.url,\n });\n }\n } else if (isPlainObject(item.response)) {\n if (item.response.code === '0000') {\n const respData = item.response.data;\n const result = (props.onRequestResultAdapter?.(respData) || respData) as TPlainObject;\n newFileList.push({\n [fieldNames.uid]: result[fieldNames.uid] || item.uid,\n [fieldNames.name]: result[fieldNames.name] || item.name,\n [fieldNames.url]: result[fieldNames.url],\n responseData: respData,\n });\n } else {\n hasError = true;\n item.status = 'error';\n item.response = item.response.message || '上传失败';\n }\n }\n });\n if (hasError) {\n setUploadList([...fileList] as UploadWrapperFileItem[]);\n }\n onChange?.(newFileList);\n };\n\n const onUploadChange = hooks.useCallbackRef((info) => {\n const fileList = info.fileList as TPlainObject[];\n if (info.file.status === 'done') {\n const newFileList = [...info.fileList];\n const donwList = newFileList.filter((item) => item.status === 'done' || item['isOriginal']);\n\n const allDone = donwList.length === newFileList.length;\n if (allDone) {\n handleResponse(newFileList);\n }\n flushSync(() => setUploadList(newFileList));\n return;\n } else if (info.file.status === 'removed') {\n const uid = info.file.uid;\n const targetList = valueList !== undefined ? [...valueList] : [];\n const targetIndex = targetList.findIndex((item) => {\n const tempUid = item[fieldNames.uid];\n return tempUid === uid;\n });\n if (targetIndex >= 0) {\n targetList.splice(targetIndex, 1);\n }\n onChange?.(valueList);\n } else if (info.file.status === 'error') {\n if (onUploadError) {\n onUploadError();\n } else {\n void message.error('上传操作失败...');\n }\n }\n // https://github.com/ant-design/ant-design/issues/2423\n setUploadList([...fileList] as UploadWrapperFileItem[]);\n props.onUploadChange?.(info);\n });\n\n const hiddenEmtry = useMemo(() => {\n if (otherProps.maxCount === undefined || !limitHidden) return false;\n if (otherProps.maxCount === 0) return true;\n if (uploadList && uploadList.length >= otherProps.maxCount) return true;\n return false;\n }, [limitHidden, otherProps.maxCount, uploadList]);\n\n return (\n <Upload\n {...otherProps}\n onChange={onUploadChange}\n fileList={uploadList}\n className={classNames('v-upload-wrapper', otherProps.className)}\n >\n {otherProps.disabled || hiddenEmtry ? null : (\n <UploadTrigger triggerText={triggerText} listType={otherProps.listType}>\n {props.children}\n </UploadTrigger>\n )}\n </Upload>\n );\n};\n\nconst UploadTrigger = (props: {\n listType?: UploadListType;\n children?: ReactNode | ReactNode[];\n triggerText?: string;\n}) => {\n if (props.children) return <Fragment>{props.children}</Fragment>;\n if (props.listType === 'picture-card') {\n return (\n <div>\n <PlusOutlined />\n <div style={{ marginTop: 8 }}>{props.triggerText || '上传图片'}</div>\n </div>\n );\n }\n if (props.listType === 'picture') {\n return (\n <Button type=\"primary\" ghost>\n {props.triggerText || '选择图片上传'}\n </Button>\n );\n }\n return (\n <Button type=\"primary\" ghost>\n {props.triggerText || '选择文件上传'}\n </Button>\n );\n};\n"],"names":["UploadWrapper","props","onChange","onUploadError","value","triggerText","limitHidden","otherProps","_objectWithoutPropertiesLoose","_excluded","valueList","isUndefinedOrNull","undefined","toArray","_useState","useState","uploadList","setUploadList","fieldNames","_extend","uid","name","url","fbaHooks","useEffectCustom","errorList","filter","item","newList","map","status","isOriginal","responseData","length","newErrorList","response","concat","handleResponse","fileList","newFileList","hasError","forEach","_newFileList$push","push","_isPlainObject","code","_newFileList$push2","respData","data","result","onRequestResultAdapter","message","onUploadChange","_hooks","useCallbackRef","info","file","donwList","allDone","flushSync","targetList","targetIndex","findIndex","tempUid","splice","error","hiddenEmtry","useMemo","maxCount","_jsx","Upload","_extends","className","_classNames","children","disabled","UploadTrigger","listType","Fragment","_jsxs","_PlusOutlined","style","marginTop","Button","type","ghost"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["@flatbiz/antd/src/upload-wrapper/upload-wrapper.tsx"],"sourcesContent":["import { PlusOutlined } from '@ant-design/icons';\nimport { isPlainObject } from '@dimjs/lang';\nimport { classNames, extend } from '@dimjs/utils';\nimport { isUndefinedOrNull, TAny, toArray, TPlainObject } from '@flatbiz/utils';\nimport { hooks } from '@wove/react';\nimport { Button, message, Upload, UploadProps } from 'antd';\nimport { UploadChangeParam } from 'antd/lib/upload';\nimport { UploadFile, UploadListType } from 'antd/lib/upload/interface';\nimport { Fragment, ReactNode, useMemo, useState } from 'react';\nimport { flushSync } from 'react-dom';\nimport { fbaHooks } from '../fba-hooks';\nimport './style.less';\n\nexport type UploadWrapperFileItem = {\n uid: string;\n name: string;\n url?: string;\n};\n\nexport type UploadWrapperProps<T extends TPlainObject = TPlainObject> = {\n value?: T[] | T;\n onChange?: (value?: T[]) => void;\n onUploadError?: (message?: string) => void;\n onUploadChange?: (info: UploadChangeParam<UploadFile>) => void;\n /**\n * 属性映射\n */\n fieldNames?: {\n uid: string;\n name?: string;\n url?: string;\n };\n /**\n * 接口响应数据适配器，如果配置了fieldNames，适配器返回值会再进过fieldNames转换\n */\n onRequestResultAdapter?: (respData: TAny) => TPlainObject;\n /** 操作触发显示文本 */\n triggerText?: string;\n /** 超过maxCount 隐藏上传入口 */\n limitHidden?: boolean;\n} & Omit<UploadProps, 'onChange' | 'fileList'>;\n\n/**\n * 文件上传\n * ```\n * 1. 可通过配置children替换默认上传触发布局\n * 2. 接口返回结构：\n * formData上传接口返回值\n * {\n * code: '0000',\n * data: {\n * uid: '唯一值，可使用fileKey值'\n * name: '文件名称'\n * url: '预览地址'\n * }\n * }\n * 3. 如果接口返回的不是上面的字段名称，可通过fieldNames配置接口返回字段名称映射\n *\n * 4. 最佳使用方式，与Form结合使用\n * <Form.Item name=\"attachmentList\" label=\"附件\">\n * <UploadWrapper action={uploadUrl} />\n * </Form.Item>\n * ```\n *\n */\nexport const UploadWrapper = (props: UploadWrapperProps) => {\n const { onChange, onUploadError, value, triggerText, limitHidden, ...otherProps } = props;\n const valueList = isUndefinedOrNull(value) ? undefined : toArray<TPlainObject>(value);\n const [uploadList, setUploadList] = useState<UploadWrapperFileItem[]>();\n const fieldNames = extend(\n {\n uid: 'uid',\n name: 'name',\n url: 'url',\n },\n props.fieldNames,\n ) as Required<UploadWrapperFileItem>;\n\n fbaHooks.useEffectCustom(() => {\n const errorList = uploadList?.filter((item) => item['status'] === 'error') || [];\n let newList =\n valueList?.map((item) => {\n return {\n uid: item[fieldNames.uid],\n name: item[fieldNames.name],\n url: item[fieldNames.url],\n status: 'done',\n isOriginal: true,\n responseData: item['responseData'],\n };\n }) || [];\n if (errorList.length > 0) {\n const newErrorList = errorList.map((item) => {\n return {\n uid: item.uid,\n name: item.name,\n status: 'error',\n isOriginal: true,\n response: item['response'],\n };\n }) as TAny[];\n newList = newList.concat(newErrorList);\n }\n setUploadList(newList);\n }, [fieldNames.name, fieldNames.uid, fieldNames.url, valueList]);\n\n const handleResponse = (fileList: UploadFile<TAny>[]) => {\n const newFileList: TAny[] = [];\n let hasError = false;\n fileList.forEach((item) => {\n if (item['isOriginal']) {\n if (item['status'] !== 'error') {\n newFileList.push({\n [fieldNames.uid]: item.uid,\n [fieldNames.name]: item.name,\n [fieldNames.url]: item.url,\n });\n }\n } else if (isPlainObject(item.response)) {\n if (item.response.code === '0000') {\n const respData = item.response.data;\n const result = (props.onRequestResultAdapter?.(respData) || respData) as TPlainObject;\n newFileList.push({\n [fieldNames.uid]: result[fieldNames.uid] || item.uid,\n [fieldNames.name]: result[fieldNames.name] || item.name,\n [fieldNames.url]: result[fieldNames.url],\n responseData: respData,\n });\n } else {\n const errorMsg = item.response.message || '上传失败';\n hasError = true;\n item.status = 'error';\n item.response = item.response.message || '上传失败';\n if (onUploadError) {\n onUploadError?.(errorMsg);\n } else {\n void message.error('上传操作失败...');\n }\n }\n }\n });\n if (hasError) {\n setUploadList([...fileList] as UploadWrapperFileItem[]);\n }\n onChange?.(newFileList);\n };\n\n const onUploadChange = hooks.useCallbackRef((info) => {\n const fileList = info.fileList as TPlainObject[];\n if (info.file.status === 'done') {\n const newFileList = [...info.fileList];\n const donwList = newFileList.filter((item) => item.status === 'done' || item['isOriginal']);\n\n const allDone = donwList.length === newFileList.length;\n if (allDone) {\n handleResponse(newFileList);\n }\n flushSync(() => setUploadList(newFileList));\n return;\n } else if (info.file.status === 'removed') {\n const uid = info.file.uid;\n const targetList = valueList !== undefined ? [...valueList] : [];\n const targetIndex = targetList.findIndex((item) => {\n const tempUid = item[fieldNames.uid];\n return tempUid === uid;\n });\n if (targetIndex >= 0) {\n targetList.splice(targetIndex, 1);\n }\n onChange?.(targetList);\n } else if (info.file.status === 'error') {\n if (onUploadError) {\n onUploadError();\n } else {\n void message.error('上传操作失败...');\n }\n }\n // https://github.com/ant-design/ant-design/issues/2423\n setUploadList([...fileList] as UploadWrapperFileItem[]);\n props.onUploadChange?.(info);\n });\n\n const hiddenEmtry = useMemo(() => {\n if (otherProps.maxCount === undefined || !limitHidden) return false;\n if (otherProps.maxCount === 0) return true;\n if (uploadList && uploadList.length >= otherProps.maxCount) return true;\n return false;\n }, [limitHidden, otherProps.maxCount, uploadList]);\n\n return (\n <Upload\n {...otherProps}\n onChange={onUploadChange}\n fileList={uploadList}\n className={classNames('v-upload-wrapper', otherProps.className)}\n >\n {otherProps.disabled || hiddenEmtry ? null : (\n <UploadTrigger triggerText={triggerText} listType={otherProps.listType}>\n {props.children}\n </UploadTrigger>\n )}\n </Upload>\n );\n};\n\nconst UploadTrigger = (props: {\n listType?: UploadListType;\n children?: ReactNode | ReactNode[];\n triggerText?: string;\n}) => {\n if (props.children) return <Fragment>{props.children}</Fragment>;\n if (props.listType === 'picture-card') {\n return (\n <div>\n <PlusOutlined />\n <div style={{ marginTop: 8 }}>{props.triggerText || '上传图片'}</div>\n </div>\n );\n }\n if (props.listType === 'picture') {\n return (\n <Button type=\"primary\" ghost>\n {props.triggerText || '选择图片上传'}\n </Button>\n );\n }\n return (\n <Button type=\"primary\" ghost>\n {props.triggerText || '选择文件上传'}\n </Button>\n );\n};\n"],"names":["UploadWrapper","props","onChange","onUploadError","value","triggerText","limitHidden","otherProps","_objectWithoutPropertiesLoose","_excluded","valueList","isUndefinedOrNull","undefined","toArray","_useState","useState","uploadList","setUploadList","fieldNames","_extend","uid","name","url","fbaHooks","useEffectCustom","errorList","filter","item","newList","map","status","isOriginal","responseData","length","newErrorList","response","concat","handleResponse","fileList","newFileList","hasError","forEach","_newFileList$push","push","_isPlainObject","code","_newFileList$push2","respData","data","result","onRequestResultAdapter","errorMsg","message","error","onUploadChange","_hooks","useCallbackRef","info","file","donwList","allDone","flushSync","targetList","targetIndex","findIndex","tempUid","splice","hiddenEmtry","useMemo","maxCount","_jsx","Upload","_extends","className","_classNames","children","disabled","UploadTrigger","listType","Fragment","_jsxs","_PlusOutlined","style","marginTop","Button","type","ghost"],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -2638,13 +2638,26 @@ export interface RichTextEditorProps extends Omit<IAllProps, "onChange" | "init"
|
|
|
2638
2638
|
init?: IAllProps["init"] & {
|
|
2639
2639
|
/**
|
|
2640
2640
|
* 通过粘贴图片创建的img标签，显示压缩比例，此处min、max是和指图片宽度
|
|
2641
|
+
* ```
|
|
2641
2642
|
* 1. 默认值：[{ min: 0, max: 1000, ratio: 0.5 }, { min: 1000, ratio: 0.3 }]
|
|
2643
|
+
* ```
|
|
2642
2644
|
*/
|
|
2643
2645
|
img_ratio?: {
|
|
2644
2646
|
min: number;
|
|
2645
2647
|
max?: number;
|
|
2646
2648
|
ratio: number;
|
|
2647
2649
|
}[];
|
|
2650
|
+
/**
|
|
2651
|
+
* 粘贴文本大小限制
|
|
2652
|
+
* ```
|
|
2653
|
+
* 1. limit 限制大小，单位KB，例如限制2M，值为2*1024
|
|
2654
|
+
* 2. 限制提示文案
|
|
2655
|
+
* ```
|
|
2656
|
+
*/
|
|
2657
|
+
paste_text_limit?: {
|
|
2658
|
+
limit: number;
|
|
2659
|
+
message: string;
|
|
2660
|
+
};
|
|
2648
2661
|
/** 插件添加；自定义plugins后失效 */
|
|
2649
2662
|
plugins_append?: string;
|
|
2650
2663
|
/** 工具栏添加；自定义toolbar后失效 */
|