lu-lowcode-package-form 0.9.93 → 0.9.94

package/src/components/sortList/index.jsx

@@ -0,0 +1,70 @@
+import React,{useRef} from 'react';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { throttle } from 'lodash';
+
+const ItemType = 'ITEM';
+
+
+function SortableItem({ item, index, moveItem, renderItem }) {
+    const ref = useRef(null);
+    const [{ isDragging }, drag] = useDrag({
+      type: ItemType,
+      item: { index },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+    });
+  
+    const throttleMoveItem = throttle(moveItem, 100);
+  
+    const [, drop] = useDrop({
+      accept: ItemType,
+      hover: (draggedItem) => {
+        if (draggedItem.index !== index) {
+          throttleMoveItem(draggedItem.index, index);
+          draggedItem.index = index;
+        }
+      },
+    });
+  
+    drag(drop(ref));
+  
+    return (
+      <div
+        ref={ref}
+        style={{
+          transform: isDragging ? 'scale(1.05)' : 'scale(1)',
+          transition: 'transform 0.2s ease',
+          zIndex: isDragging ? 1000 : 'auto',
+        }}
+      >
+        {renderItem(item, index, isDragging)}
+      </div>
+    );
+  }
+
+function SortList({ items, setItems, renderItem }) {
+  const moveItem = (fromIndex, toIndex) => {
+    const updatedItems = [...items];
+    const [movedItem] = updatedItems.splice(fromIndex, 1);
+    updatedItems.splice(toIndex, 0, movedItem);
+    setItems(updatedItems);
+  };
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+        {items.map((item, index) => (
+          <SortableItem
+            key={item.id}
+            index={index}
+            item={item}
+            moveItem={moveItem}
+            renderItem={renderItem}
+          />
+        ))}
+    </DndProvider>
+  );
+}
+
+export {SortList} ;

package/src/components/wangEditor/index.jsx

@@ -16,33 +16,33 @@ import { Modal } from 'antd'
 let setSize = null;
 let setRotation = null;
 
-const printSizeConf = {
-    key: 'printSize',
-    factory() {
-        return new CustomMenu("纸张大小", (editor, value) => {
-            typeof setSize === 'function' && setSize(editor, value)
-        })
-    }
-}
-const printRotationConf = {
-    key: 'printRotation',
-    factory() {
-        return new CustomMenu("纸张方向", (editor, value) => {
-            typeof setRotation === 'function' && setRotation(editor, value)
-        })
-    }
-}
-const formParamsConf = {
-    key: 'formParams',
-    factory() {
-        return new CustomMenu("表单参数", (editor, value) => {
-            typeof setRotation === 'function' && setRotation(editor, value)
-        })
-    }
-}
-Boot.registerMenu(printSizeConf)
-Boot.registerMenu(printRotationConf)
-Boot.registerMenu(formParamsConf)
+// const printSizeConf = {
+//     key: 'printSize',
+//     factory() {
+//         return new CustomMenu("纸张大小", (editor, value) => {
+//             typeof setSize === 'function' && setSize(editor, value)
+//         })
+//     }
+// }
+// const printRotationConf = {
+//     key: 'printRotation',
+//     factory() {
+//         return new CustomMenu("纸张方向", (editor, value) => {
+//             typeof setRotation === 'function' && setRotation(editor, value)
+//         })
+//     }
+// }
+// const formParamsConf = {
+//     key: 'formParams',
+//     factory() {
+//         return new CustomMenu("表单参数", (editor, value) => {
+//             typeof setRotation === 'function' && setRotation(editor, value)
+//         })
+//     }
+// }
+// Boot.registerMenu(printSizeConf)
+// Boot.registerMenu(printRotationConf)
+// Boot.registerMenu(formParamsConf)
 
 
 
@@ -59,7 +59,6 @@ const WangEditor = () => {
     setRotation = (editor, value) => {
         setModalTitle('设置纸张方向')
         setShowEdit(true)
-
     }
     // 模拟 ajax 请求，异步设置 html
     useEffect(() => {
@@ -67,8 +66,6 @@ const WangEditor = () => {
     }, [])
     useEffect(() => {
         if (editor) {
-            
-            console.log("editor.menus ////",editor.menus)
             editor.on('before-delete', (type, range) => {
                 console.log('before-delete', type, range);
                 const selection = window.getSelection();

package/src/components/wangEditorNext/index.jsx

@@ -1,11 +1,61 @@
 import React, { useState, useEffect } from 'react';
 import '@wangeditor-next/editor/dist/css/style.css';
+import { Boot } from '@wangeditor-next/editor'
 import { Editor, Toolbar } from '@wangeditor-next/editor-for-react';
+import { Modal } from 'antd';
+import CustomMenu from "./menu/custom-menu"
+
+let setSize = null;
+let setRotation = null;
+
+const printSizeConf = {
+  key: 'printSize',
+  factory() {
+    return new CustomMenu("纸张大小", (editor, value) => {
+      typeof setSize === 'function' && setSize(editor, value)
+    })
+  }
+}
+const printRotationConf = {
+  key: 'printRotation',
+  factory() {
+    return new CustomMenu("纸张方向", (editor, value) => {
+      typeof setRotation === 'function' && setRotation(editor, value)
+    })
+  }
+}
+const formParamsConf = {
+  key: 'formParams',
+  factory() {
+    return new CustomMenu("插入表单参数", (editor, value) => {
+      typeof setRotation === 'function' && setRotation(editor, value)
+    })
+  }
+}
+
+Boot.registerMenu(printSizeConf)
+Boot.registerMenu(printRotationConf)
+Boot.registerMenu(formParamsConf)
 
 function WangEditorNext() {
+  
   const [editor, setEditor] = useState(null); // 存储 editor 实例
   const [html, setHtml] = useState('<p>hello</p>');
 
+  const [showEdit, setShowEdit] = useState(false)
+  const [modalTitle, setModalTitle] = useState('纸张大小')
+
+  setSize = (editor, value) => {
+    setModalTitle('设置纸张大小')
+    setShowEdit(true)
+  }
+  setRotation = (editor, value) => {
+    setModalTitle('设置纸张方向')
+    setShowEdit(true)
+  }
+
+  const handleWithOk = () => {
+  }
   // 模拟 ajax 请求，异步设置 html
   useEffect(() => {
     setTimeout(() => {
@@ -13,7 +63,15 @@ function WangEditorNext() {
     }, 1500);
   }, []);
 
-  const toolbarConfig = {};
+  const toolbarConfig = {
+    insertKeys: {
+      index: 0,
+      keys: ['|' ], // show menu in toolbar
+    },
+    excludeKeys: [
+      'fullScreen', "insertLink"
+    ],
+  };
   const editorConfig = {
     placeholder: '请输入内容...',
   };
@@ -55,8 +113,19 @@ function WangEditorNext() {
           style={{ height: '500px' }}
         />
       </div>
+
+      <Modal
+        destroyOnClose={true}
+        width={500}
+        title={modalTitle}
+        open={showEdit}
+        onCancel={() => setShowEdit(false)}
+        onOk={handleWithOk}
+      >
+        111111111111
+      </Modal>
     </>
   );
 }
 
-export {WangEditorNext} ;
+export { WangEditorNext };

package/src/components/wangEditorNext/menu/custom-menu.jsx

@@ -0,0 +1,23 @@
+
+class CustomMenu  {
+    constructor(title, handleClick) {
+        this.title = title
+        this.tag = 'button'
+        this.handleClick = handleClick
+    }
+
+    getValue(editor) {
+        return 'A4' 
+    }
+    isActive(editor) {
+        return false // or true
+    }
+    isDisabled(editor) {
+        return false // or true
+    }
+    exec(editor, value) {
+       typeof this.handleClick === 'function' && this.handleClick(editor,value)
+    }
+}
+
+export default CustomMenu