ronds-metadata 1.1.88 → 1.1.89

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Date.js

@@ -5,10 +5,11 @@ import { withFieldCellWrapper } from '../HOC';
 import { DEFAULT_DATE_FORMAT } from '../../../../../../../comps/MetadataForm/DataCell/Input';
 
 var Index = function Index(props) {
-  var data = props.data;
+  var setting = props.setting;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DatePicker, {
     showTime: true,
-    format: DEFAULT_DATE_FORMAT
+    format: DEFAULT_DATE_FORMAT,
+    disabled: setting === null || setting === void 0 ? void 0 : setting.disabled
   }));
 };
 

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/List.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/List.js

@@ -0,0 +1,17 @@
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import React from "react";
+import { withFieldCellWrapper } from '../HOC';
+
+var Index = function Index(props) {
+  var data = props.data,
+      fgStream = props.fgStream,
+      setting = props.setting;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input, {
+    disabled: setting === null || setting === void 0 ? void 0 : setting.disabled,
+    placeholder: setting === null || setting === void 0 ? void 0 : setting.placeholder,
+    allowClear: true
+  }));
+};
+
+export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/MutiSelect.js

@@ -1,12 +1,54 @@
 import "antd/es/select/style";
 import _Select from "antd/es/select";
-import React from "react";
+import React from 'react';
 import { withFieldCellWrapper } from '../HOC';
+import { deepClone } from '../../../../../../../utils';
 
 var Index = function Index(props) {
-  var data = props.data;
+  var setting = props.setting;
+  var processNormalOptions = React.useCallback(function (opt) {
+    var _options = [];
+
+    var _enum = deepClone(opt);
+
+    _enum.forEach(function (it) {
+      var _it$key;
+
+      var obj = {
+        label: it.value,
+        value: (_it$key = it === null || it === void 0 ? void 0 : it.key) !== null && _it$key !== void 0 ? _it$key : it === null || it === void 0 ? void 0 : it.value
+      };
+
+      _options.push(obj);
+    });
+
+    return _options;
+  }, []);
+  var options = React.useMemo(function () {
+    var _setting$enum;
+
+    if (setting === null || setting === void 0 ? void 0 : (_setting$enum = setting.enum) === null || _setting$enum === void 0 ? void 0 : _setting$enum.value) {
+      var _setting$enum2;
+
+      return processNormalOptions(setting === null || setting === void 0 ? void 0 : (_setting$enum2 = setting.enum) === null || _setting$enum2 === void 0 ? void 0 : _setting$enum2.value);
+    }
+
+    return [{
+      label: 'uloveits1',
+      value: '1'
+    }, {
+      label: 'uloveits2',
+      value: '2'
+    }, {
+      label: 'uloveits3',
+      value: '3'
+    }];
+  }, [setting === null || setting === void 0 ? void 0 : setting.enum]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Select, {
-    mode: "multiple"
+    options: options,
+    mode: "multiple",
+    placeholder: setting === null || setting === void 0 ? void 0 : setting.placeholder,
+    disabled: setting === null || setting === void 0 ? void 0 : setting.disabled
   }));
 };
 

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Number.js

@@ -4,8 +4,11 @@ import React from "react";
 import { withFieldCellWrapper } from '../HOC';
 
 var Index = function Index(props) {
-  var data = props.data;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_InputNumber, null));
+  var setting = props.setting;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_InputNumber, {
+    placeholder: setting === null || setting === void 0 ? void 0 : setting.placeholder,
+    disabled: setting === null || setting === void 0 ? void 0 : setting.disabled
+  }));
 };
 
 export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Obj.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Obj.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+/*
+ * @Author: uloveits 719310130@qq.com
+ * @Date: 2023-02-06 15:05:42
+ * @LastEditors: uloveits 719310130@qq.com
+ * @LastEditTime: 2023-02-13 19:39:56
+ */
+import CanvasCore from '../../index';
+import { withFieldCellWrapper } from '../HOC';
+
+var Index = function Index(props) {
+  var data = props.data,
+      fgStream = props.fgStream,
+      setting = props.setting;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CanvasCore, {
+    onChange: function onChange(nodes) {// nodesRef.current = nodes;
+    }
+  }));
+};
+
+export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Select.js

@@ -1,11 +1,55 @@
 import "antd/es/select/style";
 import _Select from "antd/es/select";
-import React from "react";
 import { withFieldCellWrapper } from '../HOC';
+import React from 'react';
+import { deepClone } from '@/utils';
 
 var Index = function Index(props) {
-  var data = props.data;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Select, null));
+  var setting = props.setting;
+  var processNormalOptions = React.useCallback(function (opt) {
+    var _options = [];
+
+    var _enum = deepClone(opt);
+
+    _enum.forEach(function (it) {
+      var _it$key;
+
+      var obj = {
+        label: it.value,
+        value: (_it$key = it === null || it === void 0 ? void 0 : it.key) !== null && _it$key !== void 0 ? _it$key : it === null || it === void 0 ? void 0 : it.value
+      };
+
+      _options.push(obj);
+    });
+
+    return _options;
+  }, []);
+  var options = React.useMemo(function () {
+    var _setting$enum;
+
+    if (setting === null || setting === void 0 ? void 0 : (_setting$enum = setting.enum) === null || _setting$enum === void 0 ? void 0 : _setting$enum.value) {
+      var _setting$enum2;
+
+      return processNormalOptions(setting === null || setting === void 0 ? void 0 : (_setting$enum2 = setting.enum) === null || _setting$enum2 === void 0 ? void 0 : _setting$enum2.value);
+    }
+
+    return [{
+      label: 'uloveits1',
+      value: '1'
+    }, {
+      label: 'uloveits2',
+      value: '2'
+    }, {
+      label: 'uloveits3',
+      value: '3'
+    }];
+  }, [setting === null || setting === void 0 ? void 0 : setting.enum]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Select, {
+    options: options,
+    placeholder: setting === null || setting === void 0 ? void 0 : setting.placeholder,
+    disabled: setting === null || setting === void 0 ? void 0 : setting.disabled,
+    allowClear: true
+  }));
 };
 
 export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Switch.js

@@ -4,8 +4,10 @@ import React from "react";
 import { withFieldCellWrapper } from '../HOC';
 
 var Index = function Index(props) {
-  var data = props.data;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Switch, null));
+  var setting = props.setting;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Switch, {
+    disabled: setting === null || setting === void 0 ? void 0 : setting.disabled
+  }));
 };
 
 export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/TextArea.js

@@ -4,8 +4,11 @@ import React from "react";
 import { withFieldCellWrapper } from '../HOC';
 
 var Index = function Index(props) {
-  var data = props.data;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input.TextArea, null));
+  var setting = props.setting;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input.TextArea, {
+    placeholder: setting === null || setting === void 0 ? void 0 : setting.placeholder,
+    disabled: setting === null || setting === void 0 ? void 0 : setting.disabled
+  }));
 };
 
 export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/HOC/index.js

@@ -3,24 +3,32 @@ import _Button from "antd/es/button";
 import "antd/es/form/style";
 import _Form from "antd/es/form";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
 import { DragOutlined, SnippetsOutlined, DeleteOutlined } from '@ant-design/icons';
 import { FGCtx } from '../../../../../Provider';
-import { streamEventType } from '../../../../../settings';
+import { dragItemType, streamEventType } from '../../../../../settings';
 import useObservable from '../../../../../../../framework/rxjs-hooks/useObservable';
+import { useDrag, useDrop } from 'react-dnd';
 export function withFieldCellWrapper(WrappedComponent) {
   return function (props) {
     var data = props.data,
         isShowAction = props.isShowAction;
     var fGCtx = React.useContext(FGCtx) || {};
+    var boxRef = React.useRef(null);
 
     var _React$useState = React.useState(),
         _React$useState2 = _slicedToArray(_React$useState, 2),
         cellSetting = _React$useState2[0],
         setCellSetting = _React$useState2[1];
 
+    var _React$useState3 = React.useState(),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        position = _React$useState4[0],
+        setPosition = _React$useState4[1];
+
     var processFgStreamData = React.useCallback(function (p) {
       switch (p === null || p === void 0 ? void 0 : p.type) {
         case streamEventType.onSettingValueChange:
@@ -35,6 +43,97 @@ export function withFieldCellWrapper(WrappedComponent) {
       processFgStreamData(p);
     }, [fGCtx.fgStream]);
 
+    var _useDrag = useDrag({
+      item: {
+        dragItem: data,
+        type: dragItemType
+      },
+      end: function end(item, monitor) {
+        var dropResult = monitor.getDropResult();
+
+        if (item && dropResult) {}
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+        _useDrag2 = _slicedToArray(_useDrag, 3);
+
+    _objectDestructuringEmpty(_useDrag2[0]);
+
+    var drag = _useDrag2[1],
+        dragPreview = _useDrag2[2]; // 处理组件拖拽落下事件
+
+    var _useDrop = useDrop({
+      accept: [dragItemType],
+      drop: function drop(item, monitor) {
+        // 如果 children 已经作为了 drop target，不处理
+        var didDrop = monitor.didDrop();
+
+        if (didDrop) {
+          return;
+        }
+
+        (fGCtx === null || fGCtx === void 0 ? void 0 : fGCtx.fgStream) && fGCtx.fgStream.next({
+          type: streamEventType.onDropOver,
+          payload: {
+            dragItem: item.dragItem,
+            dropId: data.id,
+            position: position
+          }
+        }); // setPosition(undefined);
+      },
+      hover: function hover(item, monitor) {
+        // 只检查被hover的最小元素
+        var didHover = monitor.isOver({
+          shallow: true
+        });
+
+        if (didHover) {
+          if (item.dragItem.id === data.id) return; // Determine rectangle on screen
+
+          // Determine rectangle on screen
+          var hoverBoundingRect = boxRef.current && boxRef.current.getBoundingClientRect(); // Get vertical middle
+
+          // Get vertical middle
+          var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; // Determine mouse position
+          // const clientOffset = monitor.getClientOffset();
+
+          // Determine mouse position
+          // const clientOffset = monitor.getClientOffset();
+          var dragOffset = monitor.getSourceClientOffset(); // Get pixels to the top
+
+          // Get pixels to the top
+          var hoverClientY = dragOffset.y - hoverBoundingRect.top;
+
+          if (hoverClientY <= hoverMiddleY) {
+            setPosition('borderTop');
+          } // Dragging upwards
+
+
+          // Dragging upwards
+          if (hoverClientY > hoverMiddleY) {
+            setPosition('borderBottom');
+          }
+        }
+      },
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver({
+            shallow: true
+          }),
+          canDrop: monitor.canDrop()
+        };
+      }
+    }),
+        _useDrop2 = _slicedToArray(_useDrop, 2),
+        _useDrop2$ = _useDrop2[0],
+        canDrop = _useDrop2$.canDrop,
+        isOver = _useDrop2$.isOver,
+        dropRef = _useDrop2[1];
+
     var onNodeDelete = function onNodeDelete(e) {
       e.stopPropagation();
       fGCtx.fgStream && fGCtx.fgStream.next({
@@ -53,7 +152,27 @@ export function withFieldCellWrapper(WrappedComponent) {
       });
     };
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    var isActive = canDrop && isOver;
+    dragPreview(dropRef(boxRef));
+
+    var getBorder = function getBorder(_position) {
+      var _style = {
+        width: '100%',
+        height: '100%',
+        padding: '4px 10px'
+      };
+
+      if (_position && isActive) {
+        _style[_position] = '2px solid red';
+      }
+
+      return _style;
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      ref: boxRef,
+      style: _objectSpread({}, getBorder(position))
+    }, /*#__PURE__*/React.createElement("div", {
       style: {
         fontSize: '12px',
         textAlign: 'right'
@@ -84,6 +203,7 @@ export function withFieldCellWrapper(WrappedComponent) {
       fgStream: fGCtx.fgStream,
       setting: cellSetting
     }))), isShowAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: drag,
       style: {
         position: 'absolute',
         top: '-3px',

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: wangxian
  * @Date: 2023-02-06 11:35:45
- * @LastEditTime: 2023-02-08 13:41:36
+ * @LastEditTime: 2023-02-13 14:52:56
  */
 import React from 'react';
 import Input from './Cell/Input';
@@ -11,6 +11,8 @@ import Number from './Cell/Number';
 import Switch from './Cell/Switch';
 import Select from './Cell/Select';
 import MutiSelect from './Cell/MutiSelect';
+import Obj from './Cell/Obj';
+import List from './Cell/List';
 
 var RenderField = function RenderField(props) {
   var data = props.data,
@@ -40,5 +42,7 @@ var DataCellMap = {
   number: Number,
   switch: Switch,
   select: Select,
-  mutiSelect: MutiSelect
+  mutiSelect: MutiSelect,
+  obj: Obj,
+  list: List
 };

package/es/comps/FormGenerator/comps/Canvas/core/index.js

@@ -12,7 +12,7 @@ import { useDrop } from 'react-dnd';
 import { FGCtx } from '../../../../../comps/FormGenerator/Provider';
 import { dragItemType, streamEventType } from '../../../settings';
 import useObservable from '../../../../../framework/rxjs-hooks/useObservable';
-import { guid } from '../../../../../utils';
+import { arrayInsert, arrayMoveImmutable, guid } from '../../../../../utils';
 import RenderField from './RenderField';
 import './index.less';
 
@@ -45,22 +45,53 @@ var CanvasCore = function CanvasCore(props) {
       setAllSetting = _React$useState8[1];
 
   React.useEffect(function () {
-    onChange && onChange(listRef.current);
+    onChange && onChange(list);
   }, [list]);
-  var addNewNode = React.useCallback(function (_node) {
+  var addNewNode = React.useCallback(function (_node, dropId, position) {
+    var _newNode;
+
     var _list = listRef.current;
+    var newNode = _node;
 
-    var obj = _objectSpread(_objectSpread({}, _node), {}, {
-      id: "".concat(_node.id.split('-')[0], "-").concat(guid().substring(0, 4))
+    var oldIdx = _list.findIndex(function (it) {
+      return it.id === _node.id;
     });
 
-    _list.push(obj);
+    if (dropId && position) {
+      //先判断是新增还是改变顺序
+      var newIdx = _list.findIndex(function (it) {
+        return it.id === dropId;
+      });
+
+      newIdx = position === 'borderTop' ? newIdx : newIdx + 1;
+
+      if (oldIdx === -1) {
+        newNode = _objectSpread(_objectSpread({}, _node), {}, {
+          id: "".concat(_node.id.split('-')[0], "-").concat(guid().substring(0, 4))
+        });
+        _list = arrayInsert(_list, newIdx, newNode);
+      } else {
+        newIdx = oldIdx < newIdx ? newIdx - 1 : newIdx;
+        _list = arrayMoveImmutable(_list, oldIdx, newIdx);
+      }
+    } else {
+      if (oldIdx === -1) {
+        newNode = _objectSpread(_objectSpread({}, _node), {}, {
+          id: "".concat(_node.id.split('-')[0], "-").concat(guid().substring(0, 4))
+        });
+
+        _list.push(newNode);
+      }
+    }
+
+    if ((_newNode = newNode) === null || _newNode === void 0 ? void 0 : _newNode.id) {
+      setCurNodeId(newNode.id);
+      fGCtx.fgStream && fGCtx.fgStream.next({
+        type: streamEventType.onNodeSelect,
+        payload: newNode
+      });
+    }
 
-    setCurNodeId(obj.id);
-    fGCtx.fgStream && fGCtx.fgStream.next({
-      type: streamEventType.onNodeSelect,
-      payload: obj
-    });
     setList(_toConsumableArray(_list));
     listRef.current = _list;
   }, []);
@@ -73,6 +104,10 @@ var CanvasCore = function CanvasCore(props) {
         listRef.current = [];
         break;
 
+      case streamEventType.onDropOver:
+        addNewNode(p.payload.dragItem, p.payload.dropId, p.payload.position);
+        break;
+
       case streamEventType.onNodeCopy:
         addNewNode(p.payload);
         break;
@@ -113,6 +148,13 @@ var CanvasCore = function CanvasCore(props) {
   var _useDrop = useDrop({
     accept: [dragItemType],
     drop: function drop(item, monitor) {
+      // 如果 children 已经作为了 drop target，不处理
+      var didDrop = monitor.didDrop();
+
+      if (didDrop) {
+        return;
+      }
+
       addNewNode(item.dragItem);
     }
   }),

package/es/comps/FormGenerator/comps/Canvas/core/index.less

@@ -3,7 +3,6 @@
     position: relative;
     border: 1px dashed var(--ronds-metadata-color-border-1);
     background: var(--ronds-metadata-color-bg-4);
-    padding: 4px 10px;
     margin-bottom: 8px;
   }
 

package/es/comps/FormGenerator/comps/Settings/index.js

@@ -76,7 +76,7 @@ var Settings = function Settings() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%',
-      width: '20%',
+      width: '23%',
       padding: '4px'
     }
   }, /*#__PURE__*/React.createElement(_Tabs, {

package/es/comps/FormGenerator/comps/Sidebar/index.js

@@ -8,7 +8,7 @@ var Sidebar = function Sidebar() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%',
-      width: '20%',
+      width: '17%',
       padding: '4px',
       overflowY: 'auto'
     }