ronds-metadata 1.2.10 → 1.2.11

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

@@ -0,0 +1,120 @@
+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 _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import copy from 'copy-to-clipboard';
+import { FGCtx } from '../../Provider';
+import { formSetting, streamEventType } from '../../settings';
+import { transFG2Schema } from '../../transformer';
+import CanvasCore from './core';
+import MetadataForm from '../../../../comps/MetadataForm';
+import useObservable from '../../../../framework/rxjs-hooks/useObservable';
+
+var Canvas = function Canvas() {
+  var nodesRef = React.useRef([]);
+  var settingRef = React.useRef({
+    formSetting: formSetting.param.defaultValue
+  });
+  var typesRef = 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;
+
+      case streamEventType.onTypesChange:
+        if (p === null || p === void 0 ? void 0 : p.payload) {
+          typesRef.current = _objectSpread(_objectSpread({}, typesRef.current), p === null || p === void 0 ? void 0 : p.payload);
+        }
+
+        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, typesRef.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, typesRef.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-4)',
+      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.js

@@ -0,0 +1,150 @@
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { FGCtx } from '../../Provider';
+import { formSetting, streamEventType } from '../../settings';
+import MetadataForm from '../../../../comps/MetadataForm';
+import useObservable from '../../../../framework/rxjs-hooks/useObservable';
+
+var Settings = function Settings() {
+  var _curNode$param, _formSetting$param;
+
+  var fGCtx = React.useContext(FGCtx) || {};
+  var compFormRef = React.useRef();
+  var formRef = React.useRef();
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      curNode = _React$useState2[0],
+      setCurNode = _React$useState2[1];
+
+  var _React$useState3 = React.useState(formSetting.id),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      curTab = _React$useState4[0],
+      setCurTab = _React$useState4[1];
+
+  var refIdRef = React.useRef();
+  var settingValueRef = React.useRef({
+    formSetting: formSetting.param.defaultValue
+  }); // 处理默认数据
+
+  var processDefaultValue = React.useCallback(function (data) {
+    settingValueRef.current = data.settings;
+    fGCtx.fgStream && fGCtx.fgStream.next({
+      type: streamEventType.onSettingValueChange,
+      payload: _objectSpread(_objectSpread({}, data.settings), {}, {
+        allSetting: settingValueRef.current,
+        refId: refIdRef.current
+      })
+    });
+  }, []);
+  var processFgStreamData = React.useCallback(function (p) {
+    switch (p === null || p === void 0 ? void 0 : p.type) {
+      case streamEventType.onNodeSelect:
+        refIdRef.current = p === null || p === void 0 ? void 0 : p.payload.refId;
+
+        var _node = p === null || p === void 0 ? void 0 : p.payload.node;
+
+        setCurNode(_objectSpread({}, _node));
+        setCurTab(_node.id); // 赋值
+
+        if (refIdRef.current) {
+          var _key = "".concat(refIdRef.current, "_ref");
+
+          if (settingValueRef.current[_key] && settingValueRef.current[_key][_node.id]) {
+            setTimeout(function () {
+              compFormRef.current && compFormRef.current.setFieldsValue(_objectSpread({}, settingValueRef.current[_key][_node.id]));
+            }, 100);
+          }
+        } else {
+          if (settingValueRef.current[_node.id]) {
+            setTimeout(function () {
+              compFormRef.current && compFormRef.current.setFieldsValue(_objectSpread({}, settingValueRef.current[_node.id]));
+            }, 100);
+          }
+        }
+
+        break;
+
+      case streamEventType.onClearCanvas:
+        setCurNode(undefined);
+        setCurTab('formSetting');
+        break;
+
+      case streamEventType.onDefaultValue:
+        processDefaultValue(p === null || p === void 0 ? void 0 : p.payload);
+        break;
+    }
+  }, []);
+  useObservable(function (p) {
+    processFgStreamData(p);
+  }, [fGCtx.fgStream]);
+
+  var onTabChange = function onTabChange(key) {
+    setCurTab(key);
+  };
+
+  var _onValuesChange = function onValuesChange(id, val, allVals) {
+    var _payload;
+
+    var _settingValue = settingValueRef.current;
+
+    if (refIdRef.current && id !== formSetting.id) {
+      var _key = "".concat(refIdRef.current, "_ref");
+
+      _settingValue = settingValueRef.current[_key] ? settingValueRef.current : _objectSpread(_objectSpread({}, settingValueRef.current), {}, _defineProperty({}, _key, {}));
+      _settingValue[_key][id] = allVals;
+    } else {
+      _settingValue[id] = allVals;
+    }
+
+    settingValueRef.current = _settingValue;
+    fGCtx.fgStream && fGCtx.fgStream.next({
+      type: streamEventType.onSettingValueChange,
+      payload: (_payload = {}, _defineProperty(_payload, id, allVals), _defineProperty(_payload, "allSetting", settingValueRef.current), _defineProperty(_payload, "refId", refIdRef.current), _payload)
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      width: '23%',
+      padding: '4px'
+    }
+  }, /*#__PURE__*/React.createElement(_Tabs, {
+    activeKey: curTab,
+    onChange: onTabChange
+  }, curNode && /*#__PURE__*/React.createElement(_Tabs.TabPane, {
+    tab: "\u7EC4\u4EF6\u914D\u7F6E",
+    key: curNode.id
+  }, /*#__PURE__*/React.createElement(MetadataForm, {
+    schema: (_curNode$param = curNode.param) === null || _curNode$param === void 0 ? void 0 : _curNode$param.schema,
+    getFormInstance: function getFormInstance(form) {
+      compFormRef.current = form;
+    },
+    colSpan: 24,
+    labelSpan: 8,
+    onValuesChange: function onValuesChange(val, allVals) {
+      _onValuesChange(curNode.id, val, allVals);
+    }
+  })), /*#__PURE__*/React.createElement(_Tabs.TabPane, {
+    tab: formSetting.name,
+    key: formSetting.id
+  }, /*#__PURE__*/React.createElement(MetadataForm, {
+    schema: (_formSetting$param = formSetting.param) === null || _formSetting$param === void 0 ? void 0 : _formSetting$param.schema,
+    initialValues: settingValueRef.current.formSetting,
+    getFormInstance: function getFormInstance(form) {
+      formRef.current = form;
+    },
+    colSpan: 24,
+    layout: "vertical",
+    onValuesChange: function onValuesChange(val, allVals) {
+      _onValuesChange(formSetting.id, val, allVals);
+    }
+  }))));
+};
+
+export default Settings;

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

@@ -0,0 +1,48 @@
+import "antd/es/col/style";
+import _Col from "antd/es/col";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from "react";
+import { useDrag } from 'react-dnd';
+import { dragItemType } from '../../settings';
+
+var Elements = function Elements(props) {
+  var data = props.data;
+
+  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, 2),
+      isDragging = _useDrag2[0].isDragging,
+      drag = _useDrag2[1];
+
+  var opacity = isDragging ? 0.7 : 1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Col, {
+    span: 12,
+    key: data.id
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: drag,
+    style: {
+      padding: '4px',
+      textAlign: 'center',
+      border: '1px solid var(--ronds-metadata-color-border-1)',
+      borderRadius: '3px',
+      cursor: 'pointer',
+      opacity: opacity
+    }
+  }, data.name)));
+};
+
+export default Elements;

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

@@ -0,0 +1,37 @@
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import React from "react";
+import { sidebarCtx } from '../../settings';
+import Elements from './Elements';
+
+var Sidebar = function Sidebar() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      width: '17%',
+      padding: '4px',
+      overflowY: 'auto'
+    }
+  }, sidebarCtx.map(function (it) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: it.name,
+      style: {
+        paddingBottom: '8px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontWeight: 'bold',
+        paddingBottom: '8px'
+      }
+    }, it.name), /*#__PURE__*/React.createElement(_Row, {
+      gutter: [8, 8]
+    }, it.children.map(function (v) {
+      return /*#__PURE__*/React.createElement(Elements, {
+        key: v.id,
+        data: v
+      });
+    })));
+  }));
+};
+
+export default Sidebar;

package/es/comps/FormGenerator/index.js

@@ -0,0 +1,68 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2023-02-04 13:45:31
+ * @LastEditTime: 2023-02-25 10:53:17
+ */
+import React from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import Canvas from './comps/Canvas';
+import Settings from './comps/Settings';
+import Sidebar from './comps/Sidebar';
+import './index.less';
+import { FGCtx } from './Provider';
+import useMemoSubject from '../../framework/rxjs-hooks/useMemoSubject';
+import useObservable from '../../framework/rxjs-hooks/useObservable';
+import { streamEventType } from './settings';
+import { transSchema2FG } from './transformer';
+
+var FormGenerator = function FormGenerator(props) {
+  var defaultSchema = props.defaultSchema;
+  var FGStream = useMemoSubject();
+
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      types = _React$useState2[0],
+      setTypes = _React$useState2[1];
+
+  var typesRef = React.useRef({});
+  React.useEffect(function () {
+    if (defaultSchema) {
+      var defaultValue = transSchema2FG(defaultSchema);
+      FGStream.next({
+        type: streamEventType.onDefaultValue,
+        payload: _objectSpread({}, defaultValue)
+      });
+    }
+  }, [defaultSchema]);
+  var processFgStreamData = React.useCallback(function (p) {
+    switch (p === null || p === void 0 ? void 0 : p.type) {
+      case streamEventType.onTypesChange:
+        if (p === null || p === void 0 ? void 0 : p.payload) {
+          typesRef.current = _objectSpread(_objectSpread({}, typesRef.current), p === null || p === void 0 ? void 0 : p.payload);
+          setTypes(_objectSpread({}, typesRef.current));
+        }
+
+        break;
+    }
+  }, []);
+  useObservable(function (p) {
+    processFgStreamData(p);
+  }, [FGStream]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FGCtx.Provider, {
+    value: {
+      fgStream: FGStream,
+      types: types
+    }
+  }, /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend,
+    context: window
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "form-generator-container"
+  }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Canvas, null), /*#__PURE__*/React.createElement(Settings, null)))));
+};
+
+export default FormGenerator;