ronds-metadata 1.1.84 → 1.1.86

package/es/comps/FormGenerator/Provider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IFGCtxProps } from './index.d';
+export declare const FGCtx: React.Context<IFGCtxProps>;

package/es/comps/FormGenerator/Provider.js

@@ -0,0 +1,8 @@
+/*
+ * @Author: uloveits 719310130@qq.com
+ * @Date: 2023-02-06 19:04:23
+ * @LastEditors: uloveits 719310130@qq.com
+ * @LastEditTime: 2023-02-06 19:04:54
+ */
+import React from 'react';
+export var FGCtx = /*#__PURE__*/React.createContext(null);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Date.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/Date.js

@@ -0,0 +1,22 @@
+import "antd/es/date-picker/style";
+import _DatePicker from "antd/es/date-picker";
+import React from "react";
+
+/*
+ * @Author: uloveits 719310130@qq.com
+ * @Date: 2023-02-06 15:05:42
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-08 13:43:36
+ */
+import { DEFAULT_DATE_FORMAT } from '../../../../../../../comps/MetadataForm/DataCell/Input';
+import { withFieldCellWrapper } from '../HOC';
+
+var Index = function Index(props) {
+  var data = props.data;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DatePicker, {
+    showTime: true,
+    format: DEFAULT_DATE_FORMAT
+  }));
+};
+
+export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Input.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/Input.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.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/MutiSelect.js

@@ -0,0 +1,13 @@
+import "antd/es/select/style";
+import _Select from "antd/es/select";
+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(_Select, {
+    mode: "multiple"
+  }));
+};
+
+export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Number.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/Number.js

@@ -0,0 +1,11 @@
+import "antd/es/input-number/style";
+import _InputNumber from "antd/es/input-number";
+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));
+};
+
+export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Select.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/Select.js

@@ -0,0 +1,11 @@
+import "antd/es/select/style";
+import _Select from "antd/es/select";
+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(_Select, null));
+};
+
+export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/Switch.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/Switch.js

@@ -0,0 +1,11 @@
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+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));
+};
+
+export default withFieldCellWrapper(Index);

package/es/comps/FormGenerator/comps/Canvas/core/RenderField/Cell/TextArea.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/TextArea.js

@@ -0,0 +1,11 @@
+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;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input.TextArea, null));
+};
+
+export default withFieldCellWrapper(Index);

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

@@ -0,0 +1 @@
+export declare function withFieldCellWrapper(WrappedComponent: any): (props: any) => JSX.Element;

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

@@ -0,0 +1,114 @@
+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 _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 useObservable from '../../../../../../../framework/rxjs-hooks/useObservable';
+export function withFieldCellWrapper(WrappedComponent) {
+  return function (props) {
+    var data = props.data,
+        isShowAction = props.isShowAction;
+    var fGCtx = React.useContext(FGCtx) || {};
+
+    var _React$useState = React.useState(),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        cellSetting = _React$useState2[0],
+        setCellSetting = _React$useState2[1];
+
+    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[data.id]) {
+            setCellSetting(_objectSpread({}, p === null || p === void 0 ? void 0 : p.payload[data.id]));
+          }
+
+          break;
+      }
+    }, []);
+    useObservable(function (p) {
+      processFgStreamData(p);
+    }, [fGCtx.fgStream]);
+
+    var onNodeDelete = function onNodeDelete(e) {
+      e.stopPropagation();
+      fGCtx.fgStream && fGCtx.fgStream.next({
+        type: streamEventType.onNodeDelete,
+        payload: {
+          id: data.id
+        }
+      });
+    };
+
+    var onNodeCopy = function onNodeCopy(e) {
+      e.stopPropagation();
+      fGCtx.fgStream && fGCtx.fgStream.next({
+        type: streamEventType.onNodeCopy,
+        payload: data
+      });
+    };
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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 ] ")), /*#__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,
+      setting: cellSetting
+    }))), isShowAction && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '-3px',
+        left: '-3px'
+      }
+    }, /*#__PURE__*/React.createElement(_Button, {
+      size: "small",
+      type: "primary",
+      icon: /*#__PURE__*/React.createElement(DragOutlined, null)
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        bottom: '-3px',
+        right: '-2px'
+      }
+    }, /*#__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.d.ts

@@ -0,0 +1,7 @@
+import { FG } from '../../../../index.d';
+interface IRenderFieldProps {
+    data: FG.Node;
+    isShowAction?: boolean;
+}
+declare const RenderField: (props: IRenderFieldProps) => JSX.Element;
+export default RenderField;

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

@@ -0,0 +1,44 @@
+/*
+ * @Author: wangxian
+ * @Date: 2023-02-06 11:35:45
+ * @LastEditTime: 2023-02-08 13:41:36
+ */
+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';
+
+var RenderField = function RenderField(props) {
+  var data = props.data,
+      _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,
+        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
+};

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

@@ -0,0 +1,7 @@
+import { FG } from '../../../../../comps/FormGenerator/index.d';
+import './index.less';
+interface ICanvasCoreProps {
+    onChange?: (nodes: FG.Node[]) => void;
+}
+declare const CanvasCore: (props: ICanvasCoreProps) => JSX.Element;
+export default CanvasCore;

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

@@ -0,0 +1,170 @@
+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 _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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, streamEventType } from '../../../settings';
+import useObservable from '../../../../../framework/rxjs-hooks/useObservable';
+import { guid } from '../../../../../utils';
+import RenderField from './RenderField';
+import './index.less';
+
+var CanvasCore = function CanvasCore(props) {
+  var _formSetting$layout;
+
+  var 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(),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      formSetting = _React$useState6[0],
+      setFormSetting = _React$useState6[1];
+
+  React.useEffect(function () {
+    onChange && onChange(listRef.current);
+  }, [list]);
+  var addNewNode = React.useCallback(function (_node) {
+    var _list = listRef.current;
+
+    var obj = _objectSpread(_objectSpread({}, _node), {}, {
+      id: "".concat(_node.id.split('-')[0], "-").concat(guid().substring(0, 4))
+    });
+
+    _list.push(obj);
+
+    setCurNodeId(obj.id);
+    fGCtx.fgStream && fGCtx.fgStream.next({
+      type: streamEventType.onNodeSelect,
+      payload: obj
+    });
+    setList(_toConsumableArray(_list));
+    listRef.current = _list;
+  }, []);
+  var processFgStreamData = React.useCallback(function (p) {
+    var _p$payload;
+
+    switch (p === null || p === void 0 ? void 0 : p.type) {
+      case streamEventType.onClearCanvas:
+        setList([]);
+        listRef.current = [];
+        break;
+
+      case streamEventType.onNodeCopy:
+        addNewNode(p.payload);
+        break;
+
+      case streamEventType.onNodeDelete:
+        var _list = listRef.current;
+        _list = _list.filter(function (it) {
+          return it.id !== p.payload.id;
+        });
+        setList(_toConsumableArray(_list));
+        listRef.current = _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$payload = p.payload) === null || _p$payload === void 0 ? void 0 : _p$payload.formSetting) {
+          var _p$payload2;
+
+          setFormSetting(_objectSpread({}, p === null || p === void 0 ? void 0 : (_p$payload2 = p.payload) === null || _p$payload2 === void 0 ? void 0 : _p$payload2.formSetting));
+        }
+
+        break;
+    }
+  }, []);
+  useObservable(function (p) {
+    processFgStreamData(p);
+  }, [fGCtx.fgStream]); // 处理组件拖拽落下事件
+
+  var _useDrop = useDrop({
+    accept: [dragItemType],
+    drop: function drop(item, monitor) {
+      addNewNode(item.dragItem);
+    }
+  }),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      dropRef = _useDrop2[1];
+
+  var onSelect = function onSelect(it) {
+    setCurNodeId(it.id);
+    fGCtx.fgStream && fGCtx.fgStream.next({
+      type: streamEventType.onNodeSelect,
+      payload: it
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "canvas-wrapper",
+    ref: dropRef,
+    style: {
+      width: '100%',
+      height: 'calc(100% - 40px)',
+      background: 'var(--ronds-metadata-color-bg-3)',
+      padding: '8px',
+      border: '1px solid 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.map(function (it) {
+    var _formSetting$colSpan;
+
+    return /*#__PURE__*/React.createElement(_Col, {
+      span: (_formSetting$colSpan = formSetting === null || formSetting === void 0 ? void 0 : formSetting.colSpan) !== null && _formSetting$colSpan !== void 0 ? _formSetting$colSpan : 24,
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      key: it.id,
+      className: "drag-item ".concat(curNodeId === it.id ? 'drag-item-selected' : ''),
+      onClick: function onClick() {
+        onSelect(it);
+      }
+    }, /*#__PURE__*/React.createElement(RenderField, {
+      data: it,
+      isShowAction: curNodeId === it.id
+    })));
+  })))));
+};
+
+export default CanvasCore;

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

@@ -0,0 +1,24 @@
+.canvas-wrapper {
+  .drag-item {
+    position: relative;
+    border: 1px dashed var(--ronds-metadata-color-border-1);
+    background: var(--ronds-metadata-color-bg-4);
+    padding: 4px 10px;
+    margin-bottom: 8px;
+  }
+
+  .drag-item-selected {
+    border: 3px dashed var(--ronds-metadata-color-border-2);
+  }
+
+  .ant-form-item {
+    margin-bottom: '4px' !important;
+  }
+  .ant-form-item-label {
+    padding: 0%;
+  }
+  .ant-input-number,
+  .ant-picker {
+    width: 100%;
+  }
+}

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

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

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

@@ -0,0 +1,115 @@
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2023-02-06 08:24:17
+ * @LastEditTime: 2023-02-08 15:54:27
+ */
+import useObservable from '@/framework/rxjs-hooks/useObservable';
+import React from 'react';
+import copy from 'copy-to-clipboard';
+import { FGCtx } from '../../Provider';
+import { streamEventType } from '../../settings';
+import { transFG2Schema } from '../../transformer';
+import CanvasCore from './core';
+import MetadataForm from '../../../../comps/MetadataForm';
+
+var Canvas = function Canvas() {
+  var nodesRef = React.useRef([]);
+  var settingRef = React.useRef({});
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      schema = _React$useState2[0],
+      setSchema = _React$useState2[1];
+
+  var fGCtx = React.useContext(FGCtx) || {};
+  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) {
+          settingRef.current = p.payload.allSetting;
+        }
+
+        break;
+    }
+  }, []);
+  useObservable(function (p) {
+    processFgStreamData(p);
+  }, [fGCtx.fgStream]);
+
+  var onClearCanvas = function onClearCanvas() {
+    fGCtx.fgStream && fGCtx.fgStream.next({
+      type: streamEventType.onClearCanvas
+    });
+  };
+
+  var onPreview = function onPreview() {
+    if (schema.length === 0) {
+      var _schema = transFG2Schema(nodesRef.current, settingRef.current);
+
+      setSchema(_toConsumableArray(_schema));
+    } else {
+      setSchema([]);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      width: '60%',
+      padding: '4px'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingBottom: '8px'
+    }
+  }, /*#__PURE__*/React.createElement(_Button, {
+    style: {
+      marginRight: '8px'
+    },
+    onClick: onPreview
+  }, schema.length > 0 ? '取消预览' : '预览'), /*#__PURE__*/React.createElement(_Button, {
+    style: {
+      marginRight: '8px'
+    },
+    onClick: onClearCanvas
+  }, "\u6E05\u7A7A"), /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    onClick: function onClick() {
+      var _schema = transFG2Schema(nodesRef.current, settingRef.current);
+
+      if (copy(JSON.stringify(_schema))) {
+        _message.success("\u5DF2\u590D\u5236\u5230\u526A\u5207\u677F");
+      }
+    }
+  }, "\u5BFC\u51FASchema")), schema.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: 'calc(100% - 40px)',
+      background: 'var(--ronds-metadata-color-bg-2)',
+      padding: '8px',
+      border: '1px solid var(--ronds-metadata-color-border-1)',
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(MetadataForm, {
+    schema: schema
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: "".concat(schema.length === 0 ? 'block' : 'none')
+    }
+  }, /*#__PURE__*/React.createElement(CanvasCore, {
+    onChange: function onChange(nodes) {
+      nodesRef.current = nodes;
+    }
+  })));
+};
+
+export default Canvas;

package/es/comps/FormGenerator/comps/Settings/index.d.ts

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