ronds-metadata 1.2.10 → 1.2.12

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

@@ -0,0 +1,261 @@
+import "antd/es/button/style";
+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 { useDrag, useDrop } from 'react-dnd';
+import { DragOutlined, SnippetsOutlined, DeleteOutlined } from '@ant-design/icons';
+import { FGCtx } from '../../../../../Provider';
+import { dragItemType, streamEventType } from '../../../../../settings';
+import useObservable from '../../../../../../../framework/rxjs-hooks/useObservable';
+export function withFieldCellWrapper(WrappedComponent) {
+  return function (props) {
+    var _cellSetting$depend, _cellSetting$depend2, _cellSetting$depend3, _cellSetting$depend4;
+
+    var data = props.data,
+        refId = props.refId,
+        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),
+        types = _React$useState4[0],
+        setTypes = _React$useState4[1];
+
+    var _React$useState5 = React.useState(),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        position = _React$useState6[0],
+        setPosition = _React$useState6[1];
+
+    React.useEffect(function () {
+      if ((fGCtx === null || fGCtx === void 0 ? void 0 : fGCtx.types) && (fGCtx === null || fGCtx === void 0 ? void 0 : fGCtx.types[data.id])) {
+        //
+        setTypes(_objectSpread({}, fGCtx === null || fGCtx === void 0 ? void 0 : fGCtx.types[data.id]));
+      }
+    }, [fGCtx === null || fGCtx === void 0 ? void 0 : fGCtx.types]);
+    var processFgStreamData = React.useCallback(function (p) {
+      switch (p === null || p === void 0 ? void 0 : p.type) {
+        case streamEventType.onSettingValueChange:
+          if ((p === null || p === void 0 ? void 0 : p.payload.refId) === refId) {
+            if (p === null || p === void 0 ? void 0 : p.payload[data.id]) {
+              setCellSetting(_objectSpread({}, p === null || p === void 0 ? void 0 : p.payload[data.id]));
+            }
+          }
+
+          break;
+      }
+    }, []);
+    useObservable(function (p) {
+      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,
+            refId: refId
+          }
+        });
+      },
+      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({
+        type: streamEventType.onNodeDelete,
+        payload: {
+          id: data.id,
+          refId: refId
+        }
+      });
+    };
+
+    var onNodeCopy = function onNodeCopy(e) {
+      e.stopPropagation();
+      fGCtx.fgStream && fGCtx.fgStream.next({
+        type: streamEventType.onNodeCopy,
+        payload: data
+      });
+    };
+
+    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'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--ronds-metadata-color-border-2)'
+      }
+    }, (cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.id) || data.id), (cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.hidden) && /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--ronds-metadata-color-text-2)'
+      }
+    }, " [ hidden ] "), (cellSetting === null || cellSetting === void 0 ? void 0 : (_cellSetting$depend = cellSetting.depend) === null || _cellSetting$depend === void 0 ? void 0 : _cellSetting$depend.hidden) && /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--ronds-metadata-color-text-2)'
+      }
+    }, " [ hidden:", cellSetting === null || cellSetting === void 0 ? void 0 : (_cellSetting$depend2 = cellSetting.depend) === null || _cellSetting$depend2 === void 0 ? void 0 : _cellSetting$depend2.hidden, " ] "), (cellSetting === null || cellSetting === void 0 ? void 0 : (_cellSetting$depend3 = cellSetting.depend) === null || _cellSetting$depend3 === void 0 ? void 0 : _cellSetting$depend3.show) && /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'var(--ronds-metadata-color-text-2)'
+      }
+    }, " [ show:", cellSetting === null || cellSetting === void 0 ? void 0 : (_cellSetting$depend4 = cellSetting.depend) === null || _cellSetting$depend4 === void 0 ? void 0 : _cellSetting$depend4.show, " ] ")), /*#__PURE__*/React.createElement(_Form.Item, {
+      key: "".concat(cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.defaultValue),
+      name: (cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.id) || data.id,
+      label: /*#__PURE__*/React.createElement("span", {
+        style: (cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.color) ? {
+          color: cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.color
+        } : {}
+      }, (cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.label) || data.name),
+      initialValue: cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.defaultValue,
+      help: cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.help,
+      tooltip: cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.tooltip,
+      rules: [{
+        required: cellSetting === null || cellSetting === void 0 ? void 0 : cellSetting.require
+      }]
+    }, /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+      fgStream: fGCtx.fgStream,
+      types: types,
+      setting: cellSetting
+    }))), isShowAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      ref: drag,
+      style: {
+        position: 'absolute',
+        top: '-1px',
+        left: '-1px'
+      }
+    }, /*#__PURE__*/React.createElement(_Button, {
+      size: "small",
+      type: "primary",
+      icon: /*#__PURE__*/React.createElement(DragOutlined, null)
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        bottom: '-1px',
+        right: '0px'
+      }
+    }, /*#__PURE__*/React.createElement(_Button, {
+      size: "small",
+      type: "primary",
+      onClick: onNodeDelete,
+      icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
+    }), /*#__PURE__*/React.createElement(_Button, {
+      size: "small",
+      type: "primary",
+      onClick: onNodeCopy,
+      icon: /*#__PURE__*/React.createElement(SnippetsOutlined, null)
+    }))));
+  };
+}

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

@@ -0,0 +1,62 @@
+/*
+ * @Author: wangxian
+ * @Date: 2023-02-06 11:35:45
+ * @LastEditTime: 2023-02-27 10:13:49
+ */
+import React from 'react';
+import Input from './Cell/Input';
+import TextArea from './Cell/TextArea';
+import Date from './Cell/Date';
+import Number from './Cell/Number';
+import Switch from './Cell/Switch';
+import Select from './Cell/Select';
+import MutiSelect from './Cell/MutiSelect';
+import Color from './Cell/Color';
+import Checkbox from './Cell/Checkbox';
+import Radio from './Cell/Radio';
+import Password from './Cell/Password';
+import Upload from './Cell/Upload';
+import Obj from './Cell/Obj';
+import List from './Cell/List';
+import Table from './Cell/Table';
+
+var RenderField = function RenderField(props) {
+  var data = props.data,
+      refId = props.refId,
+      _props$isShowAction = props.isShowAction,
+      isShowAction = _props$isShowAction === void 0 ? false : _props$isShowAction;
+  var FieldContent = React.useMemo(function () {
+    var _content = /*#__PURE__*/React.createElement(React.Fragment, null);
+
+    if (data.type && DataCellMap[data.type]) {
+      var Comm = DataCellMap[data.type];
+      return /*#__PURE__*/React.createElement(Comm, {
+        data: data,
+        refId: refId,
+        isShowAction: isShowAction
+      });
+    }
+
+    return _content;
+  }, [data, isShowAction]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, FieldContent);
+};
+
+export default RenderField;
+var DataCellMap = {
+  input: Input,
+  textarea: TextArea,
+  date: Date,
+  number: Number,
+  switch: Switch,
+  select: Select,
+  mutiSelect: MutiSelect,
+  color: Color,
+  checkbox: Checkbox,
+  radio: Radio,
+  password: Password,
+  upload: Upload,
+  obj: Obj,
+  list: List,
+  table: Table
+};

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

@@ -0,0 +1,315 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { useDrop } from 'react-dnd';
+import { FGCtx } from '../../../../../comps/FormGenerator/Provider';
+import { dragItemType, formSetting as _formSetting, streamEventType } from '../../../settings';
+import useObservable from '../../../../../framework/rxjs-hooks/useObservable';
+import { arrayInsert, arrayMoveImmutable, guid } from '../../../../../utils';
+import RenderField from './RenderField';
+import './index.less';
+
+var CanvasCore = function CanvasCore(props) {
+  var _formSetting$layout;
+
+  var refId = props.refId,
+      nodes = props.nodes,
+      onChange = props.onChange;
+  var fGCtx = React.useContext(FGCtx) || {};
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      list = _React$useState2[0],
+      setList = _React$useState2[1];
+
+  var listRef = React.useRef([]);
+
+  var _React$useState3 = React.useState(),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      curNodeId = _React$useState4[0],
+      setCurNodeId = _React$useState4[1];
+
+  var _React$useState5 = React.useState(_formSetting.param.defaultValue),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      formSetting = _React$useState6[0],
+      setFormSetting = _React$useState6[1];
+
+  var _React$useState7 = React.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      allSetting = _React$useState8[0],
+      setAllSetting = _React$useState8[1];
+
+  var allSettingRef = React.useRef();
+  React.useEffect(function () {
+    if (refId && nodes.length > 0) {
+      setList(_toConsumableArray(nodes));
+      listRef.current = nodes;
+    }
+  }, [refId, nodes]); // 处理默认数据
+
+  var processDefaultValue = React.useCallback(function (data) {
+    if (!refId) {
+      setList(_toConsumableArray(data.nodes));
+      listRef.current = data.nodes;
+
+      if (data.types) {
+        fGCtx.fgStream && fGCtx.fgStream.next({
+          type: streamEventType.onTypesChange,
+          payload: data.types
+        });
+      }
+
+      onChange && onChange(data.nodes);
+    }
+  }, []);
+  var addNewNode = React.useCallback(function (_node, dropId, position) {
+    var _newNode;
+
+    var _list = listRef.current;
+    var newNode = _node;
+
+    var oldIdx = _list.findIndex(function (it) {
+      return it.id === _node.id;
+    });
+
+    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) {
+      fGCtx.fgStream && fGCtx.fgStream.next({
+        type: streamEventType.onNodeSelect,
+        payload: {
+          node: newNode,
+          refId: refId
+        }
+      });
+    }
+
+    setList(_toConsumableArray(_list));
+    listRef.current = _list;
+    onChange && onChange(_list);
+  }, []);
+  var processFgStreamData = React.useCallback(function (p) {
+    var _p$payload, _p$payload$node, _p$payload2, _p$payload3, _p$payload4;
+
+    switch (p === null || p === void 0 ? void 0 : p.type) {
+      case streamEventType.onNodeSelect:
+        setCurNodeId(p === null || p === void 0 ? void 0 : (_p$payload = p.payload) === null || _p$payload === void 0 ? void 0 : (_p$payload$node = _p$payload.node) === null || _p$payload$node === void 0 ? void 0 : _p$payload$node.id);
+        break;
+
+      case streamEventType.onClearCanvas:
+        setList([]);
+        listRef.current = [];
+        onChange && onChange([]);
+        break;
+
+      case streamEventType.onDropOver:
+        if (refId === ((_p$payload2 = p.payload) === null || _p$payload2 === void 0 ? void 0 : _p$payload2.refId)) {
+          addNewNode(p.payload.dragItem, p.payload.dropId, p.payload.position);
+        }
+
+        break;
+
+      case streamEventType.onNodeCopy:
+        addNewNode(p.payload);
+        break;
+
+      case streamEventType.onNodeDelete:
+        if (refId === ((_p$payload3 = p.payload) === null || _p$payload3 === void 0 ? void 0 : _p$payload3.refId)) {
+          var _list = listRef.current;
+          _list = _list.filter(function (it) {
+            return it.id !== p.payload.id;
+          });
+          setList(_toConsumableArray(_list));
+          listRef.current = _list;
+          onChange && onChange(_list); // 默认焦点放在第一个
+
+          if (_list.length > 0) {
+            onSelect(_list[0]);
+          } else {
+            fGCtx.fgStream && fGCtx.fgStream.next({
+              type: streamEventType.onClearCanvas
+            });
+          }
+        }
+
+        break;
+
+      case streamEventType.onSettingValueChange:
+        if (p === null || p === void 0 ? void 0 : (_p$payload4 = p.payload) === null || _p$payload4 === void 0 ? void 0 : _p$payload4.formSetting) {
+          var _p$payload5;
+
+          setFormSetting(_objectSpread({}, p === null || p === void 0 ? void 0 : (_p$payload5 = p.payload) === null || _p$payload5 === void 0 ? void 0 : _p$payload5.formSetting));
+        }
+
+        if ((p === null || p === void 0 ? void 0 : p.payload.refId) === refId) {
+          if (refId) {
+            var _p$payload6, _p$payload7;
+
+            setAllSetting(_objectSpread({}, p === null || p === void 0 ? void 0 : (_p$payload6 = p.payload) === null || _p$payload6 === void 0 ? void 0 : _p$payload6.allSetting[refId]));
+            allSettingRef.current = _objectSpread({}, p === null || p === void 0 ? void 0 : (_p$payload7 = p.payload) === null || _p$payload7 === void 0 ? void 0 : _p$payload7.allSetting[refId]);
+          } else {
+            var _p$payload8, _p$payload9;
+
+            setAllSetting(_objectSpread({}, p === null || p === void 0 ? void 0 : (_p$payload8 = p.payload) === null || _p$payload8 === void 0 ? void 0 : _p$payload8.allSetting));
+            allSettingRef.current = _objectSpread({}, p === null || p === void 0 ? void 0 : (_p$payload9 = p.payload) === null || _p$payload9 === void 0 ? void 0 : _p$payload9.allSetting);
+          }
+        }
+
+        break;
+
+      case streamEventType.onDefaultValue:
+        processDefaultValue(p === null || p === void 0 ? void 0 : p.payload);
+        break;
+    }
+  }, []);
+  useObservable(function (p) {
+    processFgStreamData(p);
+  }, [fGCtx.fgStream]); // 处理组件拖拽落下事件
+
+  var _useDrop = useDrop({
+    accept: [dragItemType],
+    drop: function drop(item, monitor) {
+      // 如果 children 已经作为了 drop target，不处理
+      var didDrop = monitor.didDrop();
+
+      if (didDrop) {
+        return;
+      }
+
+      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) {
+    fGCtx.fgStream && fGCtx.fgStream.next({
+      type: streamEventType.onNodeSelect,
+      payload: {
+        node: it,
+        refId: refId
+      }
+    });
+  };
+
+  var processColSpan = function processColSpan(compColSpan, formColSpan) {
+    var _formColSpan = formColSpan !== null && formColSpan !== void 0 ? formColSpan : 24;
+
+    if (compColSpan) {
+      return compColSpan * _formColSpan <= 24 ? compColSpan * _formColSpan : 24;
+    }
+
+    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: "".concat(isActive ? '2px solid red' : '1px dashed var(--ronds-metadata-color-border-1)'),
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(_Form, {
+    layout: (_formSetting$layout = formSetting === null || formSetting === void 0 ? void 0 : formSetting.layout) !== null && _formSetting$layout !== void 0 ? _formSetting$layout : 'horizontal',
+    wrapperCol: (formSetting === null || formSetting === void 0 ? void 0 : formSetting.labelSpan) && (formSetting === null || formSetting === void 0 ? void 0 : formSetting.layout) === 'horizontal' ? {
+      span: 24 - (formSetting === null || formSetting === void 0 ? void 0 : formSetting.labelSpan),
+      offset: 0
+    } : undefined,
+    labelCol: (formSetting === null || formSetting === void 0 ? void 0 : formSetting.labelSpan) && (formSetting === null || formSetting === void 0 ? void 0 : formSetting.layout) === 'horizontal' ? {
+      span: formSetting === null || formSetting === void 0 ? void 0 : formSetting.labelSpan,
+      offset: 0
+    } : undefined,
+    labelWrap: true,
+    autoComplete: "off"
+  }, /*#__PURE__*/React.createElement(_Row, {
+    gutter: 8
+  }, 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%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      key: it.id,
+      className: "drag-item ".concat(curNodeId === it.id ? 'drag-item-selected' : ''),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onSelect(it);
+      }
+    }, /*#__PURE__*/React.createElement(RenderField, {
+      refId: refId,
+      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 /*#__PURE__*/React.memo(CanvasCore);