@kineticdata/react 6.0.1 → 6.0.2

package/lib/components/table/Table.test.js

@@ -141,23 +141,53 @@ describe('<Table />', function () {
     test('kitchen sink', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var ActionCell, addColumns;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            ActionCell = function ActionCell(props) {
+              return /*#__PURE__*/_react["default"].createElement("td", null, props.value);
+            };
+            addColumns = [{
+              value: '_action',
+              label: 'Actions',
+              components: {
+                BodyCell: ActionCell
+              }
+            }];
+            _context.next = 4;
+            return mountTable({
+              columns: columns,
+              addColumns: addColumns,
+              dataSource: function dataSource(_tableOptions) {
+                return {
+                  fn: dataSourceFn,
+                  params: function params(_paramData) {
+                    return [];
+                  },
+                  transform: function transform(result) {
+                    return {
+                      data: result.mockData
+                    };
+                  }
+                };
+              }
+            });
+          case 4:
+            wrapper = _context.sent;
+            expect(wrapper).toMatchSnapshot();
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    describe('filters', function () {
+      test('legacy filters', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2() {
+        var filterLayout;
+        return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              ActionCell = function ActionCell(props) {
-                return /*#__PURE__*/_react["default"].createElement("td", null, props.value);
-              };
-              addColumns = [{
-                value: '_action',
-                label: 'Actions',
-                components: {
-                  BodyCell: ActionCell
-                }
-              }];
-              _context.next = 4;
+              _context2.next = 2;
               return mountTable({
-                columns: columns,
-                addColumns: addColumns,
                 dataSource: function dataSource(_tableOptions) {
                   return {
                     fn: dataSourceFn,
@@ -172,95 +202,59 @@ describe('<Table />', function () {
                   };
                 }
               });
-            case 4:
-              wrapper = _context.sent;
-              expect(wrapper).toMatchSnapshot();
+            case 2:
+              wrapper = _context2.sent;
+              filterLayout = wrapper.find('FilterLayout');
+              expect(filterLayout).toBeDefined();
+              expect(filterLayout).toMatchSnapshot();
             case 6:
             case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    })));
-    describe('filters', function () {
-      test('legacy filters', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2() {
-        var filterLayout;
-        return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return mountTable({
-                  dataSource: function dataSource(_tableOptions) {
-                    return {
-                      fn: dataSourceFn,
-                      params: function params(_paramData) {
-                        return [];
-                      },
-                      transform: function transform(result) {
-                        return {
-                          data: result.mockData
-                        };
-                      }
-                    };
-                  }
-                });
-              case 2:
-                wrapper = _context2.sent;
-                filterLayout = wrapper.find('FilterLayout');
-                expect(filterLayout).toBeDefined();
-                expect(filterLayout).toMatchSnapshot();
-              case 6:
-              case "end":
-                return _context2.stop();
-            }
+              return _context2.stop();
           }
         }, _callee2);
       })));
       test('filter form', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee3() {
         var filterForm;
         return (0, _regeneratorRuntime2["default"])().wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                _context3.next = 2;
-                return mountTable({
-                  filters: function filters() {
-                    return function () {
-                      return [{
-                        name: 'name',
-                        label: 'Name',
-                        type: 'text'
-                      }, {
-                        name: 'status',
-                        label: 'Status',
-                        type: 'text'
-                      }];
-                    };
-                  },
-                  dataSource: function dataSource(_tableOptions) {
-                    return {
-                      fn: dataSourceFn,
-                      params: function params(_paramData) {
-                        return [];
-                      },
-                      transform: function transform(result) {
-                        return {
-                          data: result.mockData
-                        };
-                      }
-                    };
-                  }
-                });
-              case 2:
-                wrapper = _context3.sent;
-                filterForm = wrapper.find('FilterForm');
-                expect(filterForm).toBeDefined();
-                expect(filterForm).toMatchSnapshot();
-              case 6:
-              case "end":
-                return _context3.stop();
-            }
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return mountTable({
+                filters: function filters() {
+                  return function () {
+                    return [{
+                      name: 'name',
+                      label: 'Name',
+                      type: 'text'
+                    }, {
+                      name: 'status',
+                      label: 'Status',
+                      type: 'text'
+                    }];
+                  };
+                },
+                dataSource: function dataSource(_tableOptions) {
+                  return {
+                    fn: dataSourceFn,
+                    params: function params(_paramData) {
+                      return [];
+                    },
+                    transform: function transform(result) {
+                      return {
+                        data: result.mockData
+                      };
+                    }
+                  };
+                }
+              });
+            case 2:
+              wrapper = _context3.sent;
+              filterForm = wrapper.find('FilterForm');
+              expect(filterForm).toBeDefined();
+              expect(filterForm).toMatchSnapshot();
+            case 6:
+            case "end":
+              return _context3.stop();
           }
         }, _callee3);
       })));
@@ -268,33 +262,31 @@ describe('<Table />', function () {
     describe('dataSource', function () {
       test('dataSource resolves', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee4() {
         return (0, _regeneratorRuntime2["default"])().wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                _context4.next = 2;
-                return mountTable({
-                  dataSource: function dataSource(_tableOptions) {
-                    return {
-                      fn: dataSourceFn,
-                      params: function params(_paramData) {
-                        return [];
-                      },
-                      transform: function transform(result) {
-                        return {
-                          data: result.mockData
-                        };
-                      }
-                    };
-                  }
-                });
-              case 2:
-                wrapper = _context4.sent;
-                expect(wrapper).toMatchSnapshot();
-                expect(dataSourceFn.mock.calls).toMatchSnapshot();
-              case 5:
-              case "end":
-                return _context4.stop();
-            }
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return mountTable({
+                dataSource: function dataSource(_tableOptions) {
+                  return {
+                    fn: dataSourceFn,
+                    params: function params(_paramData) {
+                      return [];
+                    },
+                    transform: function transform(result) {
+                      return {
+                        data: result.mockData
+                      };
+                    }
+                  };
+                }
+              });
+            case 2:
+              wrapper = _context4.sent;
+              expect(wrapper).toMatchSnapshot();
+              expect(dataSourceFn.mock.calls).toMatchSnapshot();
+            case 5:
+            case "end":
+              return _context4.stop();
           }
         }, _callee4);
       })));

package/lib/components/table/defaults/BodyCell.js

@@ -14,5 +14,4 @@ var BodyCell = function BodyCell(_ref) {
     scope: 'row'
   } : {}, value);
 };
-var _default = BodyCell;
-exports["default"] = _default;
+var _default = exports["default"] = BodyCell;

package/lib/components/table/defaults/BodyRow.js

@@ -10,5 +10,4 @@ var BodyRow = function BodyRow(_ref) {
   var cells = _ref.cells;
   return /*#__PURE__*/_react["default"].createElement("tr", null, cells);
 };
-var _default = BodyRow;
-exports["default"] = _default;
+var _default = exports["default"] = BodyRow;

package/lib/components/table/defaults/BooleanFilter.js

@@ -28,5 +28,4 @@ var BooleanFilter = function BooleanFilter(_ref) {
     value: "false"
   }, "No")));
 };
-var _default = BooleanFilter;
-exports["default"] = _default;
+var _default = exports["default"] = BooleanFilter;

package/lib/components/table/defaults/ColumnControl.js

@@ -22,5 +22,4 @@ var ColumnControl = function ColumnControl(_ref) {
     }, column.get('label')));
   }));
 };
-var _default = ColumnControl;
-exports["default"] = _default;
+var _default = exports["default"] = ColumnControl;

package/lib/components/table/defaults/EmptyBodyRow.js

@@ -14,5 +14,4 @@ var EmptyBodyRow = function EmptyBodyRow(_ref) {
     colSpan: colSpan
   }, /*#__PURE__*/_react["default"].createElement("em", null, /*#__PURE__*/_react["default"].createElement(_I18n.I18n, null, "No data found."))));
 };
-var _default = EmptyBodyRow;
-exports["default"] = _default;
+var _default = exports["default"] = EmptyBodyRow;

package/lib/components/table/defaults/FilterLayout.js

@@ -25,5 +25,4 @@ var FilterLayout = function FilterLayout(_ref) {
     type: "submit"
   }, "Search"));
 };
-var _default = FilterLayout;
-exports["default"] = _default;
+var _default = exports["default"] = FilterLayout;

package/lib/components/table/defaults/Footer.js

@@ -11,5 +11,4 @@ var Footer = function Footer(_ref) {
   var footerRow = _ref.footerRow;
   return /*#__PURE__*/_react["default"].createElement("tfoot", null, footerRow);
 };
-var _default = Footer;
-exports["default"] = _default;
+var _default = exports["default"] = Footer;

package/lib/components/table/defaults/FooterCell.js

@@ -9,5 +9,4 @@ var _react = _interopRequireDefault(require("react"));
 var FooterCell = function FooterCell() {
   return /*#__PURE__*/_react["default"].createElement("td", null);
 };
-var _default = FooterCell;
-exports["default"] = _default;
+var _default = exports["default"] = FooterCell;

package/lib/components/table/defaults/FooterRow.js

@@ -10,5 +10,4 @@ var FooterRow = function FooterRow(_ref) {
   var cells = _ref.cells;
   return /*#__PURE__*/_react["default"].createElement("tr", null, cells);
 };
-var _default = FooterRow;
-exports["default"] = _default;
+var _default = exports["default"] = FooterRow;

package/lib/components/table/defaults/Header.js

@@ -10,5 +10,4 @@ var Header = function Header(_ref) {
   var headerRow = _ref.headerRow;
   return /*#__PURE__*/_react["default"].createElement("thead", null, headerRow);
 };
-var _default = Header;
-exports["default"] = _default;
+var _default = exports["default"] = Header;

package/lib/components/table/defaults/HeaderCell.js

@@ -19,5 +19,4 @@ var HeaderCell = function HeaderCell(_ref) {
     onClick: onSortColumn
   }, sorting === 'desc' ? /*#__PURE__*/_react["default"].createElement("span", null, "\u2193") : sorting === 'asc' ? /*#__PURE__*/_react["default"].createElement("span", null, "\u2191") : /*#__PURE__*/_react["default"].createElement("span", null, "\u2013"))));
 };
-var _default = HeaderCell;
-exports["default"] = _default;
+var _default = exports["default"] = HeaderCell;

package/lib/components/table/defaults/HeaderRow.js

@@ -10,5 +10,4 @@ var HeaderRow = function HeaderRow(_ref) {
   var columnHeaders = _ref.columnHeaders;
   return /*#__PURE__*/_react["default"].createElement("tr", null, columnHeaders);
 };
-var _default = HeaderRow;
-exports["default"] = _default;
+var _default = exports["default"] = HeaderRow;

package/lib/components/table/defaults/PaginationControl.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.PaginationControl = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _I18n = require("../../core/i18n/I18n");
-var PaginationControl = function PaginationControl(_ref) {
+var PaginationControl = exports.PaginationControl = function PaginationControl(_ref) {
   var nextPage = _ref.nextPage,
     prevPage = _ref.prevPage,
     loading = _ref.loading;
@@ -19,6 +19,4 @@ var PaginationControl = function PaginationControl(_ref) {
     disabled: loading || !nextPage
   }, /*#__PURE__*/_react["default"].createElement(_I18n.I18n, null, "Next")));
 };
-exports.PaginationControl = PaginationControl;
-var _default = PaginationControl;
-exports["default"] = _default;
+var _default = exports["default"] = PaginationControl;

package/lib/components/table/defaults/TableBody.js

@@ -10,5 +10,4 @@ var TableBody = function TableBody(_ref) {
   var tableRows = _ref.tableRows;
   return /*#__PURE__*/_react["default"].createElement("tbody", null, tableRows);
 };
-var _default = TableBody;
-exports["default"] = _default;
+var _default = exports["default"] = TableBody;

package/lib/components/table/defaults/TableLayout.js

@@ -12,5 +12,4 @@ var TableLayout = function TableLayout(_ref) {
     footer = _ref.footer;
   return /*#__PURE__*/_react["default"].createElement("table", null, header, body, footer);
 };
-var _default = TableLayout;
-exports["default"] = _default;
+var _default = exports["default"] = TableLayout;

package/lib/components/table/defaults/TextFilter.js

@@ -25,5 +25,4 @@ var TextFilter = function TextFilter(_ref) {
     }
   }));
 };
-var _default = TextFilter;
-exports["default"] = _default;
+var _default = exports["default"] = TextFilter;

package/lib/components/table/defaults/index.js

@@ -22,7 +22,7 @@ var _BooleanFilter = _interopRequireDefault(require("./BooleanFilter"));
 var _TextFilter = _interopRequireDefault(require("./TextFilter"));
 var _PaginationControl = _interopRequireDefault(require("./PaginationControl"));
 var _ColumnControl = _interopRequireDefault(require("./ColumnControl"));
-var DefaultTableConfig = (0, _immutable.Map)({
+var DefaultTableConfig = exports.DefaultTableConfig = (0, _immutable.Map)({
   TableLayout: _TableLayout["default"],
   Header: _Header["default"],
   HeaderRow: _HeaderRow["default"],
@@ -39,5 +39,4 @@ var DefaultTableConfig = (0, _immutable.Map)({
   BooleanFilter: _BooleanFilter["default"],
   PaginationControl: _PaginationControl["default"],
   ColumnControl: _ColumnControl["default"]
-});
-exports.DefaultTableConfig = DefaultTableConfig;
+});

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);