ronds-metadata 1.1.91 → 1.1.92

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

@@ -1,20 +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
+ * @LastEditTime: 2023-02-14 19:14:21
  */
 import CanvasCore from '../../index';
 import { withFieldCellWrapper } from '../HOC';
+import React from 'react';
 
 var Index = function Index(props) {
   var data = props.data,
       fgStream = props.fgStream,
       setting = props.setting;
+  var nodesRef = React.useRef([]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CanvasCore, {
-    onChange: function onChange(nodes) {// nodesRef.current = nodes;
+    refId: data.id,
+    onChange: function onChange(nodes) {
+      nodesRef.current = nodes;
     }
   }));
 };

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

@@ -83,7 +83,7 @@ export function withFieldCellWrapper(WrappedComponent) {
             dropId: data.id,
             position: position
           }
-        }); // setPosition(undefined);
+        });
       },
       hover: function hover(item, monitor) {
         // 只检查被hover的最小元素

package/es/comps/FormGenerator/comps/Canvas/core/index.d.ts

@@ -1,6 +1,15 @@
 import { FG } from '../../../../../comps/FormGenerator/index.d';
 import './index.less';
 interface ICanvasCoreProps {
+    /**
+     * 对象类型引用的
+     */
+    refId?: string;
+    /**
+     * 渲染内容回调
+     * @param nodes
+     * @returns
+     */
     onChange?: (nodes: FG.Node[]) => void;
 }
 declare const CanvasCore: (props: ICanvasCoreProps) => JSX.Element;

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

@@ -19,7 +19,8 @@ import './index.less';
 var CanvasCore = function CanvasCore(props) {
   var _formSetting$layout;
 
-  var onChange = props.onChange;
+  var refId = props.refId,
+      onChange = props.onChange;
   var fGCtx = React.useContext(FGCtx) || {};
 
   var _React$useState = React.useState([]),
@@ -156,9 +157,28 @@ var CanvasCore = function CanvasCore(props) {
       }
 
       addNewNode(item.dragItem);
+    },
+    hover: function hover(item, monitor) {
+      // 只检查被hover的最小元素
+      var didHover = monitor.isOver({
+        shallow: true
+      });
+
+      if (didHover) {}
+    },
+    collect: function collect(monitor) {
+      return {
+        isOver: monitor.isOver({
+          shallow: true
+        }),
+        canDrop: monitor.canDrop()
+      };
     }
   }),
       _useDrop2 = _slicedToArray(_useDrop, 2),
+      _useDrop2$ = _useDrop2[0],
+      isOver = _useDrop2$.isOver,
+      canDrop = _useDrop2$.canDrop,
       dropRef = _useDrop2[1];
 
   var onSelect = function onSelect(it) {
@@ -179,15 +199,17 @@ var CanvasCore = function CanvasCore(props) {
     return _formColSpan;
   };
 
+  var isActive = canDrop && isOver;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "canvas-wrapper",
     ref: dropRef,
     style: {
       width: '100%',
       height: 'calc(100% - 40px)',
+      minHeight: '100px',
       background: 'var(--ronds-metadata-color-bg-3)',
       padding: '8px',
-      border: '1px solid var(--ronds-metadata-color-border-1)',
+      border: "".concat(isActive ? '2px solid red' : '1px dashed var(--ronds-metadata-color-border-1)'),
       overflowY: 'auto'
     }
   }, /*#__PURE__*/React.createElement(_Form, {
@@ -204,10 +226,11 @@ var CanvasCore = function CanvasCore(props) {
     autoComplete: "off"
   }, /*#__PURE__*/React.createElement(_Row, {
     gutter: 8
-  }, list.map(function (it) {
+  }, list.length > 0 && list.map(function (it) {
     var _allSetting$it$id;
 
     return /*#__PURE__*/React.createElement(_Col, {
+      key: it.id,
       span: processColSpan(allSetting && ((_allSetting$it$id = allSetting[it.id]) === null || _allSetting$it$id === void 0 ? void 0 : _allSetting$it$id.colSpan), formSetting === null || formSetting === void 0 ? void 0 : formSetting.colSpan),
       style: {
         width: '100%'
@@ -222,7 +245,15 @@ var CanvasCore = function CanvasCore(props) {
       data: it,
       isShowAction: curNodeId === it.id
     })));
-  })))));
+  }), list.length === 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      textAlign: 'center',
+      padding: '20px',
+      color: 'var(--ronds-metadata-color-text-2)',
+      opacity: 0.6
+    }
+  }, "\u62D6\u62FD\u5DE6\u4FA7\u680F\u7684\u7EC4\u4EF6\u8FDB\u884C\u6DFB\u52A0")))));
 };
 
 export default CanvasCore;

package/es/comps/MetadataForm/DataCell/Select.js

@@ -3,6 +3,10 @@ import _Form from "antd/es/form";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import "antd/es/radio/style";
 import _Radio from "antd/es/radio";
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
 import "antd/es/checkbox/style";
 import _Checkbox from "antd/es/checkbox";
 import "antd/es/select/style";
@@ -27,7 +31,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author:wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-14 15:38:26
+ * @LastEditTime: 2023-02-14 16:38:38
  */
 import React from 'react';
 import { MetadataFormContext, MetadataRefContext } from '../interface';
@@ -375,19 +379,29 @@ function Index(props) {
         style: {
           width: '100%'
         }
-      }, (httpOptions && httpOptions.length > 0 ? httpOptions : options).map(function (it) {
-        return /*#__PURE__*/React.createElement(_Checkbox, {
+      }, /*#__PURE__*/React.createElement(_Row, null, (httpOptions && httpOptions.length > 0 ? httpOptions : options).map(function (it) {
+        var _extraInfo$checkbox;
+
+        return /*#__PURE__*/React.createElement(_Col, {
+          key: it.value,
+          span: extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$checkbox = extraInfo.checkbox) === null || _extraInfo$checkbox === void 0 ? void 0 : _extraInfo$checkbox.colSpan
+        }, /*#__PURE__*/React.createElement(_Checkbox, {
           value: it.value
-        }, it.label);
-      })) : /*#__PURE__*/React.createElement(_Radio.Group, {
+        }, it.label));
+      }))) : /*#__PURE__*/React.createElement(_Radio.Group, {
         style: {
           width: '100%'
         }
-      }, (httpOptions && httpOptions.length > 0 ? httpOptions : options).map(function (it) {
-        return /*#__PURE__*/React.createElement(_Radio, {
+      }, /*#__PURE__*/React.createElement(_Row, null, (httpOptions && httpOptions.length > 0 ? httpOptions : options).map(function (it) {
+        var _extraInfo$checkbox2;
+
+        return /*#__PURE__*/React.createElement(_Col, {
+          key: it.value,
+          span: extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$checkbox2 = extraInfo.checkbox) === null || _extraInfo$checkbox2 === void 0 ? void 0 : _extraInfo$checkbox2.colSpan
+        }, /*#__PURE__*/React.createElement(_Radio, {
           value: it.value
-        }, it.label);
-      }));
+        }, it.label));
+      })));
     } else {
       var _extraInfo$disabled3;
 

package/es/comps/MetadataForm/utils.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2023-02-10 17:03:48
+ * @LastEditTime: 2023-02-14 17:26:21
  */
 import React from 'react';
 import Input from './DataCell/Input';
@@ -88,6 +88,7 @@ export function renderForm(schemaRef, options) {
     }
 
     _form.push( /*#__PURE__*/React.createElement(_Col, {
+      key: _properties[i].id,
       span: _colSpan
     }, getDataCell(_properties[i], options)));
   }

package/es/theme.less

@@ -1,75 +1,77 @@
-.ronds-metadata-dark {
-  --ronds-metadata-color-border-1: #314162;
-  --ronds-metadata-color-border-2: #0d9af3;
-  --ronds-metadata-color-bg-2: #0d1f40;
-  --ronds-metadata-color-bg-3: #0d1f40;
-  --ronds-metadata-color-bg-4: #1c3771;
-  --ronds-metadata-color-text-1: #ffffff;
-  --ronds-metadata-color-text-2: #ffffff;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    overflow: auto;
-  }
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-    color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
-    background: var(--scrollbar-color);
-    min-height: 25px;
-    min-width: 25px;
-    border-radius: 3px;
-
-    &:hover {
-      border-radius: 2px;
-      // box-shadow: inset 0 0 5px var(--scrollbar-color-hover);
-      background: var(--scrollbar-color-hover);
-    }
-
-    &:active {
-      // box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
-      background: var(--scrollbar-color-hover);
-    }
-  }
-}
-
-.ronds-metadata-normal {
-  --ronds-metadata-color-border-1: #d9d9d9;
-  --ronds-metadata-color-border-2: #165dff;
-  --ronds-metadata-color-bg-2: #ffffff;
-  --ronds-metadata-color-bg-3: #f6f5f6;
-  --ronds-metadata-color-bg-4: #ffffff;
-  --ronds-metadata-color-text-1: #1d2129;
-  --ronds-metadata-color-text-2: #24292f;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    overflow: auto;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-color);
-    min-height: 25px;
-    min-width: 25px;
-    border-radius: 3px;
-
-    &:hover {
-      background-color: #a8a8a8;
-    }
-
-    &:active {
-      background-color: #787878;
-    }
-
-    /* border: 1px solid #e0e0e0; */
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: #f7f7f7;
-  }
-}
+.ronds-metadata-dark {
+  --ronds-metadata-color-border-1: #314162;
+  --ronds-metadata-color-border-2: #0d9af3;
+  --ronds-metadata-color-bg-2: #0d1f40;
+  --ronds-metadata-color-bg-3: #0d1f40;
+  --ronds-metadata-color-bg-4: #1c3771;
+  --ronds-metadata-color-text-1: #ffffff;
+  --ronds-metadata-color-text-2: #ffffff;
+  --ronds-metadata-color-text-3: #ffffff;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+    color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+    background: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      border-radius: 2px;
+      // box-shadow: inset 0 0 5px var(--scrollbar-color-hover);
+      background: var(--scrollbar-color-hover);
+    }
+
+    &:active {
+      // box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+      background: var(--scrollbar-color-hover);
+    }
+  }
+}
+
+.ronds-metadata-normal {
+  --ronds-metadata-color-border-1: #d9d9d9;
+  --ronds-metadata-color-border-2: #165dff;
+  --ronds-metadata-color-bg-2: #ffffff;
+  --ronds-metadata-color-bg-3: #f6f5f6;
+  --ronds-metadata-color-bg-4: #ffffff;
+  --ronds-metadata-color-text-1: #1d2129;
+  --ronds-metadata-color-text-2: #24292f;
+  --ronds-metadata-color-text-3: #f2f3f5;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: #a8a8a8;
+    }
+
+    &:active {
+      background-color: #787878;
+    }
+
+    /* border: 1px solid #e0e0e0; */
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #f7f7f7;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.1.91",
+  "version": "1.1.92",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",