@kineticdata/react 6.0.1 → 6.0.3

package/lib/components/table/tests/components.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockTableConfig = exports.TableViewMock = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["header", "body", "footer"],
+  _excluded2 = ["headerRow"],
+  _excluded3 = ["columnHeaders"],
+  _excluded4 = ["title", "columnControl"],
+  _excluded5 = ["tableRows"],
+  _excluded6 = ["cells"],
+  _excluded7 = ["value"],
+  _excluded8 = ["footerRow"],
+  _excluded9 = ["cells"],
+  _excluded10 = ["filters"],
+  _excluded11 = ["fields", "error", "buttons"],
+  _excluded12 = ["table", "pagination", "filter", "columnControl"];
+var stringifyProps = function stringifyProps(props) {
+  return JSON.stringify(props,
+  // Make sure functions are stringified to an empty function string
+  // instead of being omitted
+  function (k, v) {
+    return typeof v === 'function' ? '() => {}' : v;
+  }, 2);
+};
+var mockTableConfig = exports.mockTableConfig = {
+  TableLayout: function TableLayout(_ref) {
+    var header = _ref.header,
+      body = _ref.body,
+      footer = _ref.footer,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    return /*#__PURE__*/_react["default"].createElement("table", {
+      "data-testid": "TableLayoutMock",
+      "data-props": stringifyProps(props)
+    }, header, body, footer);
+  },
+  Header: function Header(_ref2) {
+    var headerRow = _ref2.headerRow,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+    return /*#__PURE__*/_react["default"].createElement("thead", {
+      "data-testid": "HeaderMock",
+      "data-props": stringifyProps(props)
+    }, headerRow);
+  },
+  HeaderRow: function HeaderRow(_ref3) {
+    var columnHeaders = _ref3.columnHeaders,
+      props = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      "data-testid": "HeaderRowMock",
+      "data-props": stringifyProps(props)
+    }, columnHeaders);
+  },
+  HeaderCell: function HeaderCell(_ref4) {
+    var title = _ref4.title,
+      columnControl = _ref4.columnControl,
+      props = (0, _objectWithoutProperties2["default"])(_ref4, _excluded4);
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      "data-testid": "HeaderCellMock",
+      "data-props": stringifyProps(props)
+    }, title);
+  },
+  Body: function Body(_ref5) {
+    var tableRows = _ref5.tableRows,
+      props = (0, _objectWithoutProperties2["default"])(_ref5, _excluded5);
+    return /*#__PURE__*/_react["default"].createElement("tbody", {
+      "data-testid": "BodyMock",
+      "data-props": stringifyProps(props)
+    }, tableRows);
+  },
+  BodyRow: function BodyRow(_ref6) {
+    var cells = _ref6.cells,
+      props = (0, _objectWithoutProperties2["default"])(_ref6, _excluded6);
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      "data-testid": "BodyRowMock",
+      "data-props": stringifyProps(props)
+    }, cells);
+  },
+  BodyCell: function BodyCell(_ref7) {
+    var value = _ref7.value,
+      props = (0, _objectWithoutProperties2["default"])(_ref7, _excluded7);
+    return /*#__PURE__*/_react["default"].createElement("td", {
+      "data-testid": "BodyCellMock",
+      "data-props": stringifyProps(props)
+    }, value);
+  },
+  Footer: function Footer(_ref8) {
+    var footerRow = _ref8.footerRow,
+      props = (0, _objectWithoutProperties2["default"])(_ref8, _excluded8);
+    return /*#__PURE__*/_react["default"].createElement("tfoot", {
+      "data-testid": "FooterMock",
+      "data-props": stringifyProps(props)
+    }, footerRow);
+  },
+  FooterRow: function FooterRow(_ref9) {
+    var cells = _ref9.cells,
+      props = (0, _objectWithoutProperties2["default"])(_ref9, _excluded9);
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      "data-testid": "FooterRowMock",
+      "data-props": stringifyProps(props)
+    }, cells);
+  },
+  FooterCell: function FooterCell(props) {
+    return /*#__PURE__*/_react["default"].createElement("td", {
+      "data-testid": "FooterCellMock",
+      "data-props": stringifyProps(props)
+    });
+  },
+  EmptyBodyRow: function EmptyBodyRow(props) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      "data-testid": "EmptyBodyRowMock",
+      "data-props": stringifyProps(props)
+    }, /*#__PURE__*/_react["default"].createElement("td", {
+      className: "text-center",
+      colSpan: props.colSpan
+    }, /*#__PURE__*/_react["default"].createElement("em", null, "No data found.")));
+  },
+  PaginationControl: function PaginationControl(props) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      "data-testid": "PaginationControlMock",
+      "data-props": stringifyProps(props)
+    }, /*#__PURE__*/_react["default"].createElement("button", null, "Previous"), /*#__PURE__*/_react["default"].createElement("button", null, "Next"));
+  },
+  FilterLayout: function FilterLayout(_ref10) {
+    var filters = _ref10.filters,
+      props = (0, _objectWithoutProperties2["default"])(_ref10, _excluded10);
+    return /*#__PURE__*/_react["default"].createElement("form", {
+      "data-testid": "FilterLayoutMock",
+      "data-props": stringifyProps(props)
+    }, filters.map(function (filter, name) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+        key: name
+      }, filter);
+    }).toIndexedSeq().toList(), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Search"));
+  },
+  TextFilter: function TextFilter(props) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      "data-testid": "TextFilterMock",
+      "data-props": stringifyProps(props)
+    });
+  },
+  BooleanFilter: function BooleanFilter(props) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      "data-testid": "BooleanFilterMock",
+      "data-props": stringifyProps(props)
+    });
+  },
+  ColumnControl: function ColumnControl(props) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      "data-testid": "ColumnControlMock",
+      "data-props": stringifyProps(props)
+    });
+  },
+  fields: {
+    FormLayout: function FormLayout(_ref11) {
+      var fields = _ref11.fields,
+        error = _ref11.error,
+        buttons = _ref11.buttons,
+        props = (0, _objectWithoutProperties2["default"])(_ref11, _excluded11);
+      return /*#__PURE__*/_react["default"].createElement("form", {
+        "data-testid": "FormLayoutMock",
+        "data-props": stringifyProps(props)
+      });
+    }
+  }
+};
+var TableViewMock = exports.TableViewMock = function TableViewMock(_ref12) {
+  var table = _ref12.table,
+    pagination = _ref12.pagination,
+    filter = _ref12.filter,
+    columnControl = _ref12.columnControl,
+    props = (0, _objectWithoutProperties2["default"])(_ref12, _excluded12);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    "data-testid": "TableViewMock",
+    "data-props": stringifyProps(props)
+  }, table, pagination, filter, columnControl);
+};

package/lib/components/task/builder/Connector.js

@@ -21,7 +21,7 @@ var _helpers = require("./helpers");
 var _SvgText = require("./SvgText");
 var _filter = _interopRequireDefault(require("../../../../assets/task/icons/filter.svg"));
 var _lodashEs = require("lodash-es");
-var Connector = /*#__PURE__*/function (_Component) {
+var Connector = exports.Connector = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Connector, _Component);
   var _super = (0, _createSuper2["default"])(Connector);
   function Connector(props) {
@@ -31,11 +31,24 @@ var Connector = /*#__PURE__*/function (_Component) {
     _this.setTreeBuilder = function (treeBuilder) {
       _this.treeBuilder = treeBuilder;
     };
+    /*****************************************************************************
+     * Click handlers                                                            *
+     ****************************************************************************/
     _this.onSelect = function (event) {
       if (typeof _this.props.onSelect === 'function') {
         _this.props.onSelect(_this.props.connector, event.shiftKey);
       }
     };
+    /*****************************************************************************
+     * Drag-and-drop support                                                     *
+     * Leverages the `watchDrag` helper exposed by the `TreeBuilder` instance.   *
+     * On move we update this instance's `head` or `tail` properties and set     *
+     * `dragging` to either "head" or "tail" so that the `draw` method knows if  *
+     * we are drawing to a dragging point or to the center of a node.            *
+     * On drop we check to see if the point we are dropping at is within a node  *
+     * (we check that its a valid node as well) and dispatch a redux action to   *
+     * persist the change or we reset the `head` or `tail` properties and `draw` *
+     ****************************************************************************/
     _this.dragHead = function (event) {
       _this.treeBuilder.watchDrag({
         relative: false,
@@ -90,18 +103,29 @@ var Connector = /*#__PURE__*/function (_Component) {
         _this.setTail(_this.props.tailNode.position, false);
       }
     };
+    // Dragging will be true when dragging by the head and false when called via
+    // dragging node.
     _this.setHead = function (point) {
       var dragging = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       _this.dragging = dragging ? 'head' : null;
       _this.head = point;
       _this.draw();
     };
+    // Dragging will be true when dragging by the tail and false when called via
+    // dragging node.
     _this.setTail = function (point) {
       var dragging = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       _this.dragging = dragging ? 'tail' : null;
       _this.tail = point;
       _this.draw();
     };
+    /*****************************************************************************
+     * Rendering                                                                 *
+     * To make the drag-and-drop perform as fast as possible we manually         *
+     * manipulate some DOM elements in the `draw` method below. Anything that    *
+     * changes the instance's `head` or `tail` properties should also call       *
+     * `draw`                                                                    *
+     ****************************************************************************/
     _this.draw = function () {
       _this.connector.current.parentElement.style.display = '';
       var _getRectIntersections = (0, _helpers.getRectIntersections)((0, _assertThisInitialized2["default"])(_this)),
@@ -183,14 +207,6 @@ var Connector = /*#__PURE__*/function (_Component) {
         this.draw();
       }
     }
-
-    /*****************************************************************************
-     * Rendering                                                                 *
-     * To make the drag-and-drop perform as fast as possible we manually         *
-     * manipulate some DOM elements in the `draw` method below. Anything that    *
-     * changes the instance's `head` or `tail` properties should also call       *
-     * `draw`                                                                    *
-     ****************************************************************************/
   }, {
     key: "render",
     value: function render() {
@@ -288,5 +304,4 @@ var Connector = /*#__PURE__*/function (_Component) {
     }
   }]);
   return Connector;
-}(_react.Component);
-exports.Connector = Connector;
+}(_react.Component);

package/lib/components/task/builder/ConnectorForm.js

@@ -81,11 +81,10 @@ var handleSubmit = function handleSubmit(_ref4) {
     return connector.merge(values);
   };
 };
-var ConnectorForm = (0, _Form.generateForm)({
+var ConnectorForm = exports.ConnectorForm = (0, _Form.generateForm)({
   formOptions: ['connector', 'tasks', 'tree'],
   dataSources: dataSources,
   fields: fields,
   handleSubmit: handleSubmit
 });
-exports.ConnectorForm = ConnectorForm;
 ConnectorForm.displayName = 'ConnectorForm';

package/lib/components/task/builder/Node.js

@@ -14,19 +14,23 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodashEs = require("lodash-es");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _store = require("../../../store");
-var constants = _interopRequireWildcard(require("./constants"));
+var _constants = _interopRequireWildcard(require("./constants"));
+var constants = _constants;
 var _helpers = require("./helpers");
 var _models = require("./models");
 var _SvgText = require("./SvgText");
 var _plus_small = _interopRequireDefault(require("../../../../assets/task/icons/plus_small.svg"));
 var _dragHandle = _interopRequireDefault(require("../../../../assets/task/icons/drag-handle.svg"));
-var Node = /*#__PURE__*/function (_Component) {
+var Node = exports.Node = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Node, _Component);
   var _super = (0, _createSuper2["default"])(Node);
   function Node(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, Node);
     _this = _super.call(this, props);
+    /*****************************************************************************
+     * Click handlers                                                            *
+     ****************************************************************************/
     _this.onSelect = function (shiftKey) {
       return function () {
         if ((0, _lodashEs.isFunction)(_this.props.onSelect)) {
@@ -34,6 +38,16 @@ var Node = /*#__PURE__*/function (_Component) {
         }
       };
     };
+    /*****************************************************************************
+     * Drag-and-drop support                                                     *
+     * Leverages the `watchDrag` helper exposed by the `TreeBuilder` instance.   *
+     * On move we need to update any related connectors manually (for maximum    *
+     * performance).                                                             *
+     * On drop we dispatch an action to update the node in redux to persist the  *
+     * change.                                                                   *
+     * We also watch for drag on the plus button, which should leverage the      *
+     * `TreeBuilder` instance to start creating a new connector                  *
+     ****************************************************************************/
     _this.drag = function (event) {
       _this.treeBuilder.watchDrag({
         event: event,
@@ -48,7 +62,7 @@ var Node = /*#__PURE__*/function (_Component) {
         relative: false,
         onMove: _this.treeBuilder.dragNewConnector(_this.props.node),
         onDrop: _this.treeBuilder.dropNewConnector,
-        onClick: _this.treeBuilder.addNewNode(_this.props.node, event.nativeEvent, (0, _helpers.getNodeType)(_this.props.node) === 'start' ? constants.NODE_START_RADIUS * 2 - 18 : constants.NODE_WIDTH - 18, (0, _helpers.getNodeType)(_this.props.node) === 'start' ? (constants.NODE_START_RADIUS * 2 - constants.NODE_HEIGHT) / 2 : 0)
+        onClick: _this.treeBuilder.addNewNode(_this.props.node, event.nativeEvent, (0, _helpers.getNodeType)(_this.props.node) === 'start' ? _constants.NODE_START_RADIUS * 2 - 18 : _constants.NODE_WIDTH - 18, (0, _helpers.getNodeType)(_this.props.node) === 'start' ? (_constants.NODE_START_RADIUS * 2 - _constants.NODE_HEIGHT) / 2 : 0)
       });
     };
     _this.drop = function () {
@@ -84,10 +98,6 @@ var Node = /*#__PURE__*/function (_Component) {
     value: function setTreeBuilder(treeBuilder) {
       this.treeBuilder = treeBuilder;
     }
-
-    /*****************************************************************************
-     * Click handlers                                                            *
-     ****************************************************************************/
   }, {
     key: "shouldComponentUpdate",
     value:
@@ -238,5 +248,4 @@ var Node = /*#__PURE__*/function (_Component) {
     }
   }]);
   return Node;
-}(_react.Component);
-exports.Node = Node;
+}(_react.Component);

package/lib/components/task/builder/NodeForm.js

@@ -212,11 +212,10 @@ var handleSubmit = function handleSubmit(_ref11) {
     return node.merge(values);
   };
 };
-var NodeForm = (0, _Form.generateForm)({
+var NodeForm = exports.NodeForm = (0, _Form.generateForm)({
   formOptions: ['node', 'tasks', 'tree'],
   dataSources: dataSources,
   fields: fields,
   handleSubmit: handleSubmit
 });
-exports.NodeForm = NodeForm;
 NodeForm.displayName = 'NodeForm';

package/lib/components/task/builder/NodeParametersForm.js

@@ -134,11 +134,10 @@ var handleSubmit = function handleSubmit(_ref5) {
     return values;
   };
 };
-var NodeParametersForm = (0, _Form.generateForm)({
+var NodeParametersForm = exports.NodeParametersForm = (0, _Form.generateForm)({
   formOptions: ['node', 'task', 'tasks', 'tree'],
   dataSources: dataSources,
   fields: fields,
   handleSubmit: handleSubmit
 });
-exports.NodeParametersForm = NodeParametersForm;
 NodeParametersForm.displayName = 'NodeParametersForm';

package/lib/components/task/builder/SvgCanvas.js

@@ -15,7 +15,7 @@ var _lodashEs = require("lodash-es");
 var _helpers = require("./helpers");
 var constants = _interopRequireWildcard(require("./constants"));
 var _models = require("./models");
-var SvgCanvas = /*#__PURE__*/function (_Component) {
+var SvgCanvas = exports.SvgCanvas = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(SvgCanvas, _Component);
   var _super = (0, _createSuper2["default"])(SvgCanvas);
   function SvgCanvas(props) {
@@ -267,5 +267,4 @@ var SvgCanvas = /*#__PURE__*/function (_Component) {
     }
   }]);
   return SvgCanvas;
-}(_react.Component);
-exports.SvgCanvas = SvgCanvas;
+}(_react.Component);

package/lib/components/task/builder/SvgText.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SvgText = void 0;
 var _react = _interopRequireDefault(require("react"));
-var SvgText = function SvgText(props) {
+var SvgText = exports.SvgText = function SvgText(props) {
   return /*#__PURE__*/_react["default"].createElement("foreignObject", {
     className: props.className,
     x: props.x + props.padding,
@@ -16,5 +16,4 @@ var SvgText = function SvgText(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "text-node"
   }, /*#__PURE__*/_react["default"].createElement("span", null, props.children)));
-};
-exports.SvgText = SvgText;
+};

package/lib/components/task/builder/TaskDefinitionConfigForm.js

@@ -10,15 +10,14 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 var _immutable = require("immutable");
 var _Form = require("../../form/Form");
 var _apis = require("../../../apis");
-var checkOmittedParameters = function checkOmittedParameters(node, parameter) {
+var checkOmittedParameters = exports.checkOmittedParameters = function checkOmittedParameters(node, parameter) {
   if (node.definitionId === 'system_submission_create_v1') {
     return !['kappSlug', 'formSlug'].includes(parameter.id);
   } else {
     return true;
   }
 };
-exports.checkOmittedParameters = checkOmittedParameters;
-var generateTaskDefinition = function generateTaskDefinition(taskDefinition) {
+var generateTaskDefinition = exports.generateTaskDefinition = function generateTaskDefinition(taskDefinition) {
   if (taskDefinition && taskDefinition.definitionName === 'system_submission_create') {
     return function (_ref) {
       var form = _ref.form;
@@ -46,7 +45,6 @@ var generateTaskDefinition = function generateTaskDefinition(taskDefinition) {
     return null;
   }
 };
-exports.generateTaskDefinition = generateTaskDefinition;
 var dataSources = function dataSources() {
   return {
     kapps: {
@@ -108,11 +106,10 @@ var handleSubmit = function handleSubmit(_ref6) {
     }).then(generateTaskDefinition(taskDefinition));
   };
 };
-var TaskDefinitionConfigForm = (0, _Form.generateForm)({
+var TaskDefinitionConfigForm = exports.TaskDefinitionConfigForm = (0, _Form.generateForm)({
   formOptions: ['taskDefinition'],
   dataSources: dataSources,
   fields: fields,
   handleSubmit: handleSubmit
 });
-exports.TaskDefinitionConfigForm = TaskDefinitionConfigForm;
 TaskDefinitionConfigForm.displayName = 'TaskDefinitionConfigForm';

package/lib/components/task/builder/TreeBuilder.js

@@ -24,7 +24,7 @@ var _SvgCanvas = require("./SvgCanvas");
 var _Node = require("./Node");
 var _Connector = require("./Connector");
 var _immutable = require("immutable");
-var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
+var TreeBuilderComponent = exports.TreeBuilderComponent = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(TreeBuilderComponent, _Component);
   var _super = (0, _createSuper2["default"])(TreeBuilderComponent);
   function TreeBuilderComponent(props) {
@@ -78,6 +78,12 @@ var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
         return _this.props.tree.nodes.get(connector.headId);
       });
     };
+    // helper provided so that the plus button on a node can start the process of
+    // creating a new connector, since the drop position may not be valid we do
+    // not want to persist anything to redux state until we can confirm the drop
+    // is valid so we store the temp connector in component state so it will be
+    // rendered and then on move we update the Connector instance (by ref) with
+    // the new position
     _this.dragNewConnector = function (node) {
       return function (position) {
         if (!_this.state.newConnector) {
@@ -95,6 +101,8 @@ var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
         }
       };
     };
+    // helper provided so that the plus button on a node can create a new
+    // connector in conjunction with `dragNewConnector` above
     _this.dropNewConnector = function () {
       if (_this.newConnector.current) {
         _this.newConnector.current.dropHead();
@@ -267,6 +275,7 @@ var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
           saving = treeBuilderState.saving,
           tasks = treeBuilderState.tasks,
           tree = treeBuilderState.tree,
+          kappSlug = treeBuilderState.kappSlug,
           undoStack = treeBuilderState.undoStack,
           webApi = treeBuilderState.webApi;
         return this.props.children({
@@ -349,6 +358,7 @@ var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
           sidebarRef: this.sidebarRef,
           tasks: tasks,
           tree: tree,
+          kappSlug: kappSlug,
           treeBuilder: tree && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_SvgCanvas.SvgCanvas, {
             ref: this.canvasRef
           }, tree.connectors.map(function (connector) {
@@ -403,12 +413,11 @@ var TreeBuilderComponent = /*#__PURE__*/function (_Component) {
   }]);
   return TreeBuilderComponent;
 }(_react.Component);
-exports.TreeBuilderComponent = TreeBuilderComponent;
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     treeBuilderState: state.getIn(['trees', props.treeKey]),
-    tree: state.getIn(['trees', props.treeKey, 'tree'])
+    tree: state.getIn(['trees', props.treeKey, 'tree']),
+    kappSlug: state.getIn(['trees', props.treeKey, 'kappSlug'])
   };
 };
-var TreeBuilder = (0, _store.connect)(mapStateToProps)(TreeBuilderComponent);
-exports.TreeBuilder = TreeBuilder;
+var TreeBuilder = exports.TreeBuilder = (0, _store.connect)(mapStateToProps)(TreeBuilderComponent);