tenjin-ui-kit 0.3.73 → 0.3.74

package/components/Canvas.js

@@ -1,5 +1,6 @@
 "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
 });
@@ -11,155 +12,75 @@ var _WorkFlow = _interopRequireDefault(require("./WorkFlow"));
 require("../../App.css");
 var _material = require("@mui/material");
 var _text = _interopRequireDefault(require("./text"));
-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 = () => {
+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() {
   return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
     backend: _reactDndHtml5Backend.HTML5Backend
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DragDrop, null)));
 };
-var _default = exports.default = Canvas;
-const WorkFlowList = [{
+var _default = Canvas;
+exports.default = _default;
+var WorkFlowList = [{
   id: 1,
   name: "If Else Box"
 }, {
   id: 2,
   name: "Simple Text Box"
 }];
-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 = {
+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 = {
       name: workFlowList[0].name,
       id: workFlowList[0].id
     };
     if (isDropped) {
-      setBoard(board => [...board, workflow]);
+      setBoard(function (board) {
+        return [].concat(_toConsumableArray(board), [workflow]);
+      });
     } else {
-      setBoard(board => [...board, workflow.name]);
+      setBoard(function (board) {
+        return [].concat(_toConsumableArray(board), [workflow.name]);
+      });
     }
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "WorkFlow"
-  }, WorkFlowList?.map(workflow => {
+  }, WorkFlowList === null || WorkFlowList === void 0 ? void 0 : WorkFlowList.map(function (workflow) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WorkFlow.default, {
       name: workflow.name,
       id: workflow.id
@@ -167,7 +88,7 @@ const DragDrop = () => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "Board",
     ref: drop
-  }, board?.map((workflow, index) => {
+  }, board === null || board === void 0 ? void 0 : board.map(function (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", {
@@ -227,29 +148,35 @@ const DragDrop = () => {
   }));
 };
 exports.DragDrop = DragDrop;
-const AddNewBox = () => {
-  const [inputBoxes, setInputBoxes] = (0, _react.useState)([]);
-  let [type, setType] = (0, _react.useState)(null);
-  const addInputBox = () => {
-    setInputBoxes([...inputBoxes, {
+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), [{
       label: "Text",
       value: ""
-    }]);
+    }]));
     setType("input");
   };
-  const handleInputChange = (index, event) => {
-    const values = [...inputBoxes];
+  var handleInputChange = function handleInputChange(index, event) {
+    var values = _toConsumableArray(inputBoxes);
     values[index] = event.target.value;
     setInputBoxes(values);
   };
-  const addIfElseInputBox = () => {
-    setInputBoxes([...inputBoxes, {
+  var addIfElseInputBox = function addIfElseInputBox() {
+    setInputBoxes([].concat(_toConsumableArray(inputBoxes), [{
       label: "If",
       value: ""
     }, {
       label: "Else",
       value: ""
-    }]);
+    }]));
     setType("if_else");
   };
 
@@ -291,35 +218,37 @@ const AddNewBox = () => {
     },
     onClick: addIfElseInputBox,
     title: "Add If Else Box"
-  }, /*#__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);
-    }
-  })))))));
+  }, /*#__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);
+      }
+    })))));
+  }));
 };
 exports.AddNewBox = AddNewBox;

package/components/DragBox/index.js

@@ -7,29 +7,39 @@ exports.DragBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDnd = require("react-dnd");
 var _text = _interopRequireDefault(require("../text"));
-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;
+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;
   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;