tenjin-ui-kit 0.3.72-dev-1 → 0.3.73

package/components/Canvas.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,75 +11,155 @@ var _WorkFlow = _interopRequireDefault(require("./WorkFlow"));
 require("../../App.css");
 var _material = require("@mui/material");
 var _text = _interopRequireDefault(require("./text"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var Canvas = function Canvas() {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// import { Grid } from '@mui/material';
+// import React, { useState } from 'react';
+
+// const Canvas = () => {
+//   const [inputBoxes, setInputBoxes] = useState([]);
+//   let [type, setType] = useState(null);
+
+//   const addInputBox = () => {
+//     setInputBoxes([...inputBoxes, { label: 'Text', value: '' }]);
+//     setType('input');
+//   };
+
+//   const handleInputChange = (index, event) => {
+//     const values = [...inputBoxes];
+//     values[index] = event.target.value;
+//     setInputBoxes(values);
+//   };
+
+//   const addIfElseInputBox = () => {
+//     setInputBoxes([
+//       ...inputBoxes,
+//       { label: 'If', value: '' },
+//       { label: 'Else', value: '' },
+//     ]);
+//     setType('if_else');
+//   };
+
+//   //   const handleIfElseInputChange = (index, event) => {
+//   //     const values = [...inputBoxes];
+//   //     values[index] = event.target.value;
+//   //     setInputBoxes(values);
+//   //   };
+
+//   return (
+//     <div
+//       style={{
+//         border: '1px solid black',
+//         padding: '10px',
+//         display: 'inline-block',
+//       }}
+//     >
+//       <div
+//         style={{
+//           display: 'flex',
+//           justifyContent: 'center',
+//           alignItems: 'center',
+//         }}
+//       >
+//         <div
+//           style={{ fontSize: '30px', cursor: 'pointer' }}
+//           onClick={addInputBox}
+//           title="Add Text Box"
+//         >
+//           +
+//         </div>
+//       </div>
+//       <div
+//         style={{
+//           display: 'flex',
+//           justifyContent: 'center',
+//           alignItems: 'center',
+//         }}
+//       >
+//         <div
+//           style={{ fontSize: '30px', cursor: 'pointer' }}
+//           onClick={addIfElseInputBox}
+//           title="Add If Else Box"
+//         >
+//           +
+//         </div>
+//       </div>
+
+//       {inputBoxes.map((box, index) => (
+//         <Grid item container>
+//           <Grid item xs>
+// <div
+//   style={{
+//     border: '1px solid black',
+//     padding: '10px',
+//     display: 'inline-block',
+//   }}
+// >
+//               <div key={index} style={{ marginTop: '1rem' }}>
+//                 <label htmlFor={`${type}-${index}`}>{box.label}</label>
+//                 <br />
+//                 <input
+//                   id={`${type}-${index}`}
+//                   type="text"
+//                   value={box.value}
+//                   onChange={(e) => {
+//                     const updatedBoxes = [...inputBoxes];
+//                     updatedBoxes[index].value = e.target.value;
+//                     setInputBoxes(updatedBoxes);
+//                   }}
+//                 />
+//               </div>
+//             </div>
+//           </Grid>
+//         </Grid>
+//       ))}
+//     </div>
+//   );
+// };
+
+// export default Canvas;
+
+///New
+
+const Canvas = () => {
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
     backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DragDrop, null)));
 };
-var _default = Canvas;
-exports.default = _default;
-var WorkFlowList = [{
+var _default = exports.default = Canvas;
+const WorkFlowList = [{
   id: 1,
   name: "If Else Box"
 }, {
   id: 2,
   name: "Simple Text Box"
 }];
-var DragDrop = function DragDrop() {
-  var _useState = (0, _react.useState)([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    board = _useState2[0],
-    setBoard = _useState2[1];
-  var _useDrop = (0, _reactDnd.useDrop)(function () {
-      return {
-        accept: "block",
-        drop: function drop(item) {
-          return addBlockToBoard(item.id, true);
-        },
-        collect: function collect(monitor) {
-          return {
-            isOver: !!monitor.isOver()
-          };
-        }
-      };
-    }),
-    _useDrop2 = _slicedToArray(_useDrop, 2),
-    isOver = _useDrop2[0].isOver,
-    drop = _useDrop2[1];
-  var addBlockToBoard = function addBlockToBoard(id, isDropped) {
-    var workFlowList = WorkFlowList.filter(function (workflow) {
-      return id === workflow.id;
-    });
-    var workflow = {
+const DragDrop = () => {
+  const [board, setBoard] = (0, _react.useState)([]);
+  const [{
+    isOver
+  }, drop] = (0, _reactDnd.useDrop)(() => ({
+    accept: "block",
+    drop: item => addBlockToBoard(item.id, true),
+    collect: monitor => ({
+      isOver: !!monitor.isOver()
+    })
+  }));
+  const addBlockToBoard = (id, isDropped) => {
+    const workFlowList = WorkFlowList.filter(workflow => id === workflow.id);
+    const workflow = {
       name: workFlowList[0].name,
       id: workFlowList[0].id
     };
     if (isDropped) {
-      setBoard(function (board) {
-        return [].concat(_toConsumableArray(board), [workflow]);
-      });
+      setBoard(board => [...board, workflow]);
     } else {
-      setBoard(function (board) {
-        return [].concat(_toConsumableArray(board), [workflow.name]);
-      });
+      setBoard(board => [...board, workflow.name]);
     }
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "WorkFlow"
-  }, WorkFlowList === null || WorkFlowList === void 0 ? void 0 : WorkFlowList.map(function (workflow) {
+  }, WorkFlowList?.map(workflow => {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WorkFlow.default, {
       name: workflow.name,
       id: workflow.id
@@ -88,7 +167,7 @@ var DragDrop = function DragDrop() {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "Board",
     ref: drop
-  }, board === null || board === void 0 ? void 0 : board.map(function (workflow, index) {
+  }, board?.map((workflow, index) => {
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index
     }, workflow.name === "If Else Box" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -148,35 +227,29 @@ var DragDrop = function DragDrop() {
   }));
 };
 exports.DragDrop = DragDrop;
-var AddNewBox = function AddNewBox() {
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputBoxes = _useState4[0],
-    setInputBoxes = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    type = _useState6[0],
-    setType = _useState6[1];
-  var addInputBox = function addInputBox() {
-    setInputBoxes([].concat(_toConsumableArray(inputBoxes), [{
+const AddNewBox = () => {
+  const [inputBoxes, setInputBoxes] = (0, _react.useState)([]);
+  let [type, setType] = (0, _react.useState)(null);
+  const addInputBox = () => {
+    setInputBoxes([...inputBoxes, {
       label: "Text",
       value: ""
-    }]));
+    }]);
     setType("input");
   };
-  var handleInputChange = function handleInputChange(index, event) {
-    var values = _toConsumableArray(inputBoxes);
+  const handleInputChange = (index, event) => {
+    const values = [...inputBoxes];
     values[index] = event.target.value;
     setInputBoxes(values);
   };
-  var addIfElseInputBox = function addIfElseInputBox() {
-    setInputBoxes([].concat(_toConsumableArray(inputBoxes), [{
+  const addIfElseInputBox = () => {
+    setInputBoxes([...inputBoxes, {
       label: "If",
       value: ""
     }, {
       label: "Else",
       value: ""
-    }]));
+    }]);
     setType("if_else");
   };
 
@@ -218,37 +291,35 @@ var AddNewBox = function AddNewBox() {
     },
     onClick: addIfElseInputBox,
     title: "Add If Else Box"
-  }, /*#__PURE__*/_react.default.createElement(_text.default, null, "+"))), inputBoxes.map(function (box, index) {
-    return /*#__PURE__*/_react.default.createElement(_material.Grid, {
-      item: true,
-      container: true
-    }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
-      item: true,
-      xs: true
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        border: "1px solid black",
-        padding: "10px",
-        display: "inline-block",
-        margin: "0.5rem"
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      key: index,
-      style: {
-        marginTop: "1rem"
-      }
-    }, /*#__PURE__*/_react.default.createElement("label", {
-      htmlFor: "".concat(type, "-").concat(index)
-    }, /*#__PURE__*/_react.default.createElement(_text.default, null, box.label)), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", {
-      id: "".concat(type, "-").concat(index),
-      type: "text",
-      value: box.value,
-      onChange: function onChange(e) {
-        var updatedBoxes = _toConsumableArray(inputBoxes);
-        updatedBoxes[index].value = e.target.value;
-        setInputBoxes(updatedBoxes);
-      }
-    })))));
-  }));
+  }, /*#__PURE__*/_react.default.createElement(_text.default, null, "+"))), inputBoxes.map((box, index) => /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    container: true
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: "1px solid black",
+      padding: "10px",
+      display: "inline-block",
+      margin: "0.5rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    key: index,
+    style: {
+      marginTop: "1rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: `${type}-${index}`
+  }, /*#__PURE__*/_react.default.createElement(_text.default, null, box.label)), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", {
+    id: `${type}-${index}`,
+    type: "text",
+    value: box.value,
+    onChange: e => {
+      const updatedBoxes = [...inputBoxes];
+      updatedBoxes[index].value = e.target.value;
+      setInputBoxes(updatedBoxes);
+    }
+  })))))));
 };
 exports.AddNewBox = AddNewBox;

package/components/DragBox/index.js

@@ -7,39 +7,29 @@ exports.DragBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDnd = require("react-dnd");
 var _text = _interopRequireDefault(require("../text"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var DragBox = function DragBox(_ref) {
-  var name = _ref.name;
-  var _useDrag = (0, _reactDnd.useDrag)(function () {
-      return {
-        type: "box",
-        item: {
-          name: name
-        },
-        collect: function collect(monitor) {
-          return {
-            isDragging: monitor.isDragging(),
-            handlerId: monitor.getHandlerId()
-          };
-        }
-      };
-    }),
-    _useDrag2 = _slicedToArray(_useDrag, 2),
-    isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1];
-  var opacity = isDragging ? 0.4 : 1;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DragBox = exports.DragBox = function DragBox(_ref) {
+  let {
+    name
+  } = _ref;
+  const [{
+    isDragging
+  }, drag] = (0, _reactDnd.useDrag)(() => ({
+    type: "box",
+    item: {
+      name
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+      handlerId: monitor.getHandlerId()
+    })
+  }));
+  const opacity = isDragging ? 0.4 : 1;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: drag,
     style: {
-      opacity: opacity
+      opacity
     },
-    "data-testid": "box"
+    "data-testid": `box`
   }, /*#__PURE__*/_react.default.createElement(_text.default, null, name));
-};
-exports.DragBox = DragBox;
+};