@elliemae/ds-resizeable-container 1.60.0 → 2.0.0-alpha.12

package/cjs/Resizable.js

@@ -2,11 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx2 = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.every.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.every.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
@@ -14,30 +22,29 @@ var dsSystem = require('@elliemae/ds-system');
 var dsGrid = require('@elliemae/ds-grid');
 var props = require('./props.js');
 var defaultProps = require('./defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _excluded = ["innerRef"],
-    _excluded2 = ["children", "cols", "rows", "vertical", "horizontal"];
+const _excluded = ["innerRef"],
+      _excluded2 = ["children", "cols", "rows", "vertical", "horizontal"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var safeDifference = 15;
-var minDifference = 8;
-var EVENT_TYPE = {
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const safeDifference = 15;
+const minDifference = 8;
+const EVENT_TYPE = {
   MOUSE: 'mouse',
   KEY: 'arrows'
 };
-var DIRECTION = {
+const DIRECTION = {
   L: 'left',
   R: 'right',
   U: 'up',
@@ -45,7 +52,7 @@ var DIRECTION = {
 };
 
 function calcPosition(arrow, position) {
-  var offset;
+  let offset;
 
   switch (arrow) {
     case DIRECTION.U:
@@ -72,7 +79,7 @@ function calcPosition(arrow, position) {
 }
 
 function cursorResolver(nextPx, px, isVertical) {
-  var orientation = {
+  const orientation = {
     vertical: 'row-resize',
     horizontal: 'col-resize',
     left: 'w-resize',
@@ -90,28 +97,32 @@ function cursorResolver(nextPx, px, isVertical) {
 }
 
 function ResizableItemComponent(_ref) {
-  var innerRef = _ref.innerRef,
-      p = _objectWithoutProperties__default['default'](_ref, _excluded);
+  let {
+    innerRef
+  } = _ref,
+      p = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-  return /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, _extends__default['default']({
+  return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread({
     ref: innerRef
   }, p));
 }
 
-var ResizableGrid = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const ResizableGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-forwbw-0"
 })([""]);
-var ResizableItem = /*#__PURE__*/styled__default['default'](ResizableItemComponent).withConfig({
+const ResizableItem = /*#__PURE__*/styled__default["default"](ResizableItemComponent).withConfig({
   componentId: "sc-forwbw-1"
 })(["position:relative;"]);
-var ResizableBar = /*#__PURE__*/styled__default['default'].div.withConfig({
+const ResizableBar = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-forwbw-2"
-})(["position:absolute;cursor:", ";", ""], function (_ref2) {
-  var container = _ref2.container,
-      nextContainer = _ref2.nextContainer,
-      v = _ref2.v;
+})(["position:absolute;cursor:", ";", ""], _ref2 => {
+  let {
+    container,
+    nextContainer,
+    v
+  } = _ref2;
   return cursorResolver(nextContainer, container, v);
-}, function (props) {
+}, props => {
   if (props.v) {
     return "\n        bottom: calc(".concat(dsSystem.mapGap(props.gutter), " * -0.5);\n        left: 0;\n        width: 100%;\n        height: 10px;\n        margin-bottom: -5px;\n        display: flex;\n        flex-direction: column;\n        justify-content:space-around;\n        align-items: center;\n        &:after{\n          width: 100%;\n          height: 1px;\n          display: block;\n          background: ").concat(props.theme.colors.neutral['300'], ";\n          content: '';\n        }\n        &:hover{\n          &:after{\n            background: ").concat(props.theme.colors.brand['600'], ";\n          } \n        }\n      ");
   }
@@ -119,69 +130,42 @@ var ResizableBar = /*#__PURE__*/styled__default['default'].div.withConfig({
   return "\n    top: 0;\n    right: calc(".concat(dsSystem.mapGap(props.gutter), " * -0.5);\n    height: 100%;\n    width: 10px;\n    margin-right: -5px;\n    display: flex;\n    flex-direction: row;\n    justify-content:space-around;\n    align-items: center;\n    &:after{\n      height: 100%;\n      width: 1px;\n      display: block;\n      background: ").concat(props.theme.colors.neutral['300'], ";\n      content: '';\n    }\n    &:hover{\n      &:after{\n        background: ").concat(props.theme.colors.brand['600'], ";\n      } \n    }\n    ");
 });
 
-var getWidths = function getWidths(list) {
-  return list.map(function (l) {
-    return l.clientWidth;
-  });
-};
+const getWidths = list => list.map(l => l.clientWidth);
 
-var getHeights = function getHeights(list) {
-  return list.map(function (l) {
-    return l.clientHeight;
-  });
-};
+const getHeights = list => list.map(l => l.clientHeight);
 
 function ResizableContainer(_ref3) {
-  var children = _ref3.children,
-      cols = _ref3.cols,
-      rows = _ref3.rows,
-      vertical = _ref3.vertical,
-      horizontal = _ref3.horizontal,
-      rest = _objectWithoutProperties__default['default'](_ref3, _excluded2);
-
-  var refs = React.useRef([]);
-
-  var _useState = React.useState(cols),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      containers = _useState2[0],
-      setContainers = _useState2[1];
-
-  var _useState3 = React.useState(rows),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      blocks = _useState4[0],
-      setBlocks = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      isDragging = _useState6[0],
-      setDragging = _useState6[1];
-
-  var _useState7 = React.useState(0),
-      _useState8 = _slicedToArray__default['default'](_useState7, 2),
-      start = _useState8[0],
-      setStartPoint = _useState8[1];
-
-  var _useState9 = React.useState(),
-      _useState10 = _slicedToArray__default['default'](_useState9, 2),
-      resetPoint = _useState10[0],
-      setResetPoint = _useState10[1];
-
-  React.useEffect(function () {
+  let {
+    children,
+    cols,
+    rows,
+    vertical,
+    horizontal
+  } = _ref3,
+      rest = _objectWithoutProperties__default["default"](_ref3, _excluded2);
+
+  const refs = React.useRef([]);
+  const [containers, setContainers] = React.useState(cols);
+  const [blocks, setBlocks] = React.useState(rows);
+  const [isDragging, setDragging] = React.useState(false);
+  const [start, setStartPoint] = React.useState(0);
+  const [resetPoint, setResetPoint] = React.useState();
+  React.useEffect(() => {
     if (horizontal) setContainers(getWidths(refs.current));
     if (vertical) setBlocks(getHeights(refs.current));
   }, [refs.current, horizontal, vertical]);
 
-  var addRef = function addRef(node) {
+  const addRef = node => {
     refs.current.push(node);
   };
 
-  var resizePanels = function resizePanels() {
-    var diff = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-    var v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var index = parseInt(start.index, 10);
+  const resizePanels = function () {
+    let diff = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const index = parseInt(start.index, 10);
 
     if (!v) {
-      var newContainers = _toConsumableArray__default['default'](containers);
+      const newContainers = [...containers];
 
       if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {
         newContainers[index + 1] = newContainers[index + 1] - diff;
@@ -191,11 +175,9 @@ function ResizableContainer(_ref3) {
         newContainers[index] = diff + newContainers[index];
       }
 
-      if (newContainers.every(function (c) {
-        return c > safeDifference;
-      })) setContainers(newContainers);
+      if (newContainers.every(c => c > safeDifference)) setContainers(newContainers);
     } else {
-      var newBlocks = _toConsumableArray__default['default'](blocks);
+      const newBlocks = [...blocks];
 
       if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {
         newBlocks[index + 1] = newBlocks[index + 1] - diff;
@@ -205,31 +187,29 @@ function ResizableContainer(_ref3) {
         newBlocks[index] = diff + newBlocks[index];
       }
 
-      if (newBlocks.every(function (c) {
-        return c > safeDifference;
-      })) setBlocks(newBlocks);
+      if (newBlocks.every(c => c > safeDifference)) setBlocks(newBlocks);
     }
   };
 
-  var startResize = function startResize(event, index) {
-    var v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var type = arguments.length > 3 ? arguments[3] : undefined;
+  const startResize = function (event, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let type = arguments.length > 3 ? arguments[3] : undefined;
     setDragging(type);
     setStartPoint({
       x: event.clientX,
       y: event.clientY,
-      index: index,
-      v: v
+      index,
+      v
     });
     setResetPoint({
-      containers: containers,
-      blocks: blocks
+      containers,
+      blocks
     });
   };
 
-  var moveResize = function moveResize(event, type) {
+  const moveResize = (event, type) => {
     if (isDragging && isDragging === type && !start.v) {
-      var diff = event.clientX - start.x;
+      const diff = event.clientX - start.x;
       if (diff === 0) return;
       setStartPoint({
         x: event.clientX,
@@ -237,27 +217,26 @@ function ResizableContainer(_ref3) {
       });
       resizePanels(diff);
     } else if (isDragging && isDragging === type && start.v) {
-      var _diff = event.clientY - start.y;
-
-      if (_diff === 0) return;
+      const diff = event.clientY - start.y;
+      if (diff === 0) return;
       setStartPoint(_objectSpread(_objectSpread({}, start), {}, {
         y: event.clientY,
         index: start.index
       }));
-      resizePanels(_diff, true);
+      resizePanels(diff, true);
     }
   };
 
-  var endResize = function endResize(type) {
+  const endResize = type => {
     if (isDragging === type) {
       setDragging(false);
       setStartPoint();
     }
   };
 
-  var handleKeyDown = function handleKeyDown(e, index) {
-    var v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var keyCodes = {
+  const handleKeyDown = function (e, index) {
+    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    const keyCodes = {
       37: DIRECTION.L,
       Left: DIRECTION.L,
       ArrowLeft: DIRECTION.L,
@@ -274,10 +253,10 @@ function ResizableContainer(_ref3) {
 
     if (keyCodes[e.key || e.keyCode]) {
       e.preventDefault();
-
-      var _e$target$getBounding = e.target.getBoundingClientRect(),
-          y = _e$target$getBounding.top,
-          x = _e$target$getBounding.left;
+      const {
+        top: y,
+        left: x
+      } = e.target.getBoundingClientRect();
 
       if (!start) {
         startResize({
@@ -285,17 +264,17 @@ function ResizableContainer(_ref3) {
           clientY: y
         }, index, v, EVENT_TYPE.KEY);
       } else {
-        var clientX = keyCodes[e.keyCode] === DIRECTION.L || keyCodes[e.keyCode] === DIRECTION.R ? calcPosition(keyCodes[e.keyCode], x) : x;
-        var clientY = keyCodes[e.keyCode] === DIRECTION.U || keyCodes[e.keyCode] === DIRECTION.D ? calcPosition(keyCodes[e.keyCode], y) : y;
+        const clientX = keyCodes[e.keyCode] === DIRECTION.L || keyCodes[e.keyCode] === DIRECTION.R ? calcPosition(keyCodes[e.keyCode], x) : x;
+        const clientY = keyCodes[e.keyCode] === DIRECTION.U || keyCodes[e.keyCode] === DIRECTION.D ? calcPosition(keyCodes[e.keyCode], y) : y;
         moveResize({
-          clientX: clientX,
-          clientY: clientY
+          clientX,
+          clientY
         }, EVENT_TYPE.KEY);
       }
     }
   };
 
-  var onLeave = function onLeave(type) {
+  const onLeave = type => {
     if (isDragging === type) {
       setDragging(false);
       if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);
@@ -303,61 +282,42 @@ function ResizableContainer(_ref3) {
     }
   };
 
-  var count = React__default['default'].Children.count(children);
-  return /*#__PURE__*/React__default['default'].createElement(ResizableGrid, _extends__default['default']({}, rest, {
+  const count = React__default["default"].Children.count(children);
+  return /*#__PURE__*/jsxRuntime.jsx(ResizableGrid, _objectSpread(_objectSpread({}, rest), {}, {
     cols: containers,
-    onKeyUp: function onKeyUp() {
-      return endResize(EVENT_TYPE.KEY);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return onLeave(EVENT_TYPE.MOUSE);
-    },
-    onMouseMove: function onMouseMove(e) {
-      return moveResize(e, EVENT_TYPE.MOUSE);
-    },
-    onMouseUp: function onMouseUp() {
-      return endResize(EVENT_TYPE.MOUSE);
-    },
-    rows: blocks
-  }), React__default['default'].Children.map(children, function (child, index) {
-    return /*#__PURE__*/React__default['default'].createElement(ResizableItem, {
+    onKeyUp: () => endResize(EVENT_TYPE.KEY),
+    onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
+    onMouseMove: e => moveResize(e, EVENT_TYPE.MOUSE),
+    onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
+    rows: blocks,
+    children: React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/_jsx2__default["default"](ResizableItem, {
       "data-index": index,
       innerRef: addRef
-    }, child, count - 1 !== index && horizontal && /*#__PURE__*/React__default['default'].createElement(ResizableBar, {
+    }, void 0, child, count - 1 !== index && horizontal && /*#__PURE__*/_jsx2__default["default"](ResizableBar, {
       container: containers[index],
       "data-index": index,
       gutter: rest.gutter,
       nextContainer: containers[index + 1],
-      onKeyDown: function onKeyDown(e) {
-        return handleKeyDown(e, index, false);
-      },
-      onMouseDown: function onMouseDown(e) {
-        return startResize(e, index, false, EVENT_TYPE.MOUSE);
-      },
+      onKeyDown: e => handleKeyDown(e, index, false),
+      onMouseDown: e => startResize(e, index, false, EVENT_TYPE.MOUSE),
       tabIndex: 0
-    }), count - 1 !== index && vertical && /*#__PURE__*/React__default['default'].createElement(ResizableBar, {
+    }), count - 1 !== index && vertical && /*#__PURE__*/_jsx2__default["default"](ResizableBar, {
       container: blocks[index],
       "data-index": index,
       gutter: rest.gutter,
       nextContainer: blocks[index + 1],
-      onKeyDown: function onKeyDown(e) {
-        return handleKeyDown(e, index, true);
-      },
-      onMouseDown: function onMouseDown(e) {
-        return startResize(e, index, true, EVENT_TYPE.MOUSE);
-      },
+      onKeyDown: e => handleKeyDown(e, index, true),
+      onMouseDown: e => startResize(e, index, true, EVENT_TYPE.MOUSE),
       tabIndex: 0,
       v: true
-    }));
+    })))
   }));
 }
 
-ResizableContainer.propTypes = props.props;
 ResizableContainer.defaultProps = defaultProps.defaultProps;
-var DSResizableContainerWithSchema = reactDesc.describe(ResizableContainer);
+const DSResizableContainerWithSchema = reactDesc.describe(ResizableContainer);
 DSResizableContainerWithSchema.propTypes = props.props;
 
 exports.DSResizableContainerWithSchema = DSResizableContainerWithSchema;
 exports.ResizableContainer = ResizableContainer;
-exports['default'] = ResizableContainer;
-//# sourceMappingURL=Resizable.js.map
+exports["default"] = ResizableContainer;

package/cjs/defaultProps.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var defaultProps = {
+const defaultProps = {
   vertical: false,
   horizontal: false
 };
 
 exports.defaultProps = defaultProps;
-//# sourceMappingURL=defaultProps.js.map

package/cjs/index.js

@@ -3,22 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Resizable = require('./Resizable.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('react');
-require('react-desc');
-require('styled-components');
-require('@elliemae/ds-system');
-require('@elliemae/ds-grid');
-require('./props.js');
-require('./defaultProps.js');
 
 
 
 exports.DSResizableContainerWithSchema = Resizable.DSResizableContainerWithSchema;
 exports.ResizableContainer = Resizable.ResizableContainer;
-exports.default = Resizable.ResizableContainer;
-//# sourceMappingURL=index.js.map
+exports["default"] = Resizable.ResizableContainer;

package/cjs/props.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 
-var props = {
+const props = {
   /** grid item content */
   children: reactDesc.PropTypes.node.description('Grid item content'),
 
@@ -22,4 +22,3 @@ var props = {
 };
 
 exports.props = props;
-//# sourceMappingURL=props.js.map