ronds-metadata 1.1.85 → 1.1.87

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

@@ -0,0 +1,116 @@
+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 settingValueRef = React.useRef({
+    formSetting: formSetting.param.defaultValue
+  });
+  var processFgStreamData = React.useCallback(function (p) {
+    var _p$payload, _p$payload2;
+
+    switch (p === null || p === void 0 ? void 0 : p.type) {
+      case streamEventType.onNodeSelect:
+        setCurNode(_objectSpread({}, p === null || p === void 0 ? void 0 : p.payload));
+        setCurTab(p === null || p === void 0 ? void 0 : (_p$payload = p.payload) === null || _p$payload === void 0 ? void 0 : _p$payload.id); // 赋值
+
+        if (settingValueRef.current[p === null || p === void 0 ? void 0 : (_p$payload2 = p.payload) === null || _p$payload2 === void 0 ? void 0 : _p$payload2.id]) {
+          setTimeout(function () {
+            var _p$payload3;
+
+            compFormRef.current && compFormRef.current.setFieldsValue(_objectSpread({}, settingValueRef.current[p === null || p === void 0 ? void 0 : (_p$payload3 = p.payload) === null || _p$payload3 === void 0 ? void 0 : _p$payload3.id]));
+          }, 100);
+        }
+
+        break;
+
+      case streamEventType.onClearCanvas:
+        setCurNode(undefined);
+        setCurTab('formSetting');
+        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;
+    _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), _payload)
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100%',
+      width: '20%',
+      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;
+    } // layout="horizontal"
+    ,
+    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,
+    labelSpan: 6,
+    onValuesChange: function onValuesChange(val, allVals) {
+      _onValuesChange(formSetting.id, val, allVals);
+    }
+  }))));
+};
+
+export default Settings;

package/es/comps/FormGenerator/comps/Sidebar/Elements.d.ts

@@ -0,0 +1,6 @@
+import { FG } from '../../index.d';
+interface IElementsProps {
+    data: FG.Node;
+}
+declare const Elements: (props: IElementsProps) => JSX.Element;
+export default Elements;

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: '4px',
+      cursor: 'pointer',
+      opacity: opacity
+    }
+  }, data.name)));
+};
+
+export default Elements;

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

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

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: '20%',
+      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.d.ts

@@ -0,0 +1,5 @@
+import './index.less';
+interface IFormGeneratorProps {
+}
+declare const FormGenerator: (props: IFormGeneratorProps) => JSX.Element;
+export default FormGenerator;

package/es/comps/FormGenerator/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+/*
+ * @Author: wangxian
+ * @Date: 2023-02-04 13:45:31
+ * @LastEditTime: 2023-02-09 14:50:24
+ */
+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';
+
+var FormGenerator = function FormGenerator(props) {
+  var FGStream = useMemoSubject();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FGCtx.Provider, {
+    value: {
+      fgStream: FGStream
+    }
+  }, /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, /*#__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;

package/es/comps/FormGenerator/index.less

@@ -0,0 +1,21 @@
+.form-generator-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  .ant-tabs {
+    height: 100%;
+    .ant-tabs-nav {
+      margin: 0px 0 8px 0;
+    }
+    .ant-tabs-content-holder {
+      height: calc(100% - 50px);
+      .ant-tabs-content {
+        height: 100%;
+        padding: 8px;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+    }
+  }
+}