npm - @elliemae/ds-resizeable-container - Versions diffs - 2.2.0-alpha.1 → 2.2.0-alpha.5 - Mend

@elliemae/ds-resizeable-container 2.2.0-alpha.1 → 2.2.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/cjs/Resizable.js CHANGED Viewed

@@ -1,172 +1,190 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var _jsx2 = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-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');
-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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var Resizable_exports = {};
+__export(Resizable_exports, {
+  DSResizableContainerWithSchema: () => DSResizableContainerWithSchema,
+  ResizableContainer: () => ResizableContainer,
+  default: () => Resizable_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_props = require("./props");
+var import_defaultProps = require("./defaultProps");
 const safeDifference = 15;
 const minDifference = 8;
-const EVENT_TYPE = {
-  MOUSE: 'mouse',
-  KEY: 'arrows'
-};
+const EVENT_TYPE = { MOUSE: "mouse", KEY: "arrows" };
 const DIRECTION = {
-  L: 'left',
-  R: 'right',
-  U: 'up',
-  D: 'down'
+  L: "left",
+  R: "right",
+  U: "up",
+  D: "down"
 };
 function calcPosition(arrow, position) {
   let offset;
   switch (arrow) {
     case DIRECTION.U:
       offset = position - 3;
       break;
     case DIRECTION.D:
       offset = position + 3;
       break;
     case DIRECTION.L:
       offset = position - 3;
       break;
     case DIRECTION.R:
       offset = position + 3;
       break;
     default:
       offset = position;
   }
   return offset;
 }
 function cursorResolver(nextPx, px, isVertical) {
   const orientation = {
-    vertical: 'row-resize',
-    horizontal: 'col-resize',
-    left: 'w-resize',
-    right: 'e-resize',
-    up: 'n-resize',
-    down: 's-resize'
+    vertical: "row-resize",
+    horizontal: "col-resize",
+    left: "w-resize",
+    right: "e-resize",
+    up: "n-resize",
+    down: "s-resize"
   };
-  if (isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.up;
-  if (isVertical && px > safeDifference + 1) return orientation.vertical;
-  if (isVertical && px <= safeDifference + 1) return orientation.down;
-  if (!isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.left;
-  if (!isVertical && px <= safeDifference + 1) return orientation.right;
-  if (!isVertical && px > safeDifference + 1) return orientation.horizontal;
+  if (isVertical && nextPx && nextPx <= safeDifference + 1)
+    return orientation.up;
+  if (isVertical && px > safeDifference + 1)
+    return orientation.vertical;
+  if (isVertical && px <= safeDifference + 1)
+    return orientation.down;
+  if (!isVertical && nextPx && nextPx <= safeDifference + 1)
+    return orientation.left;
+  if (!isVertical && px <= safeDifference + 1)
+    return orientation.right;
+  if (!isVertical && px > safeDifference + 1)
+    return orientation.horizontal;
   return isVertical ? orientation.vertical : orientation.horizontal;
 }
-function ResizableItemComponent(_ref) {
-  let {
-    innerRef
-  } = _ref,
-      p = _objectWithoutProperties__default["default"](_ref, _excluded);
-  return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread({
-    ref: innerRef
-  }, p));
+function ResizableItemComponent({ innerRef, ...p }) {
+  return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    ref: innerRef,
+    ...p
+  });
 }
-const ResizableGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-forwbw-0"
-})([""]);
-const ResizableItem = /*#__PURE__*/styled__default["default"](ResizableItemComponent).withConfig({
-  componentId: "sc-forwbw-1"
-})(["position:relative;"]);
-const ResizableBar = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-forwbw-2"
-})(["position:absolute;cursor:", ";", ""], _ref2 => {
-  let {
-    container,
-    nextContainer,
-    v
-  } = _ref2;
-  return cursorResolver(nextContainer, container, v);
-}, props => {
+const ResizableGrid = (0, import_styled_components.default)(import_ds_grid.Grid)``;
+const ResizableItem = (0, import_styled_components.default)(ResizableItemComponent)`
+  position: relative;
+`;
+const ResizableBar = import_styled_components.default.div`
+  position: absolute;
+  cursor: ${({ container, nextContainer, v }) => cursorResolver(nextContainer, container, v)};
+  ${(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      ");
+    return `
+        bottom: calc(${(0, import_ds_system.mapGap)(props.gutter)} * -0.5);
+        left: 0;
+        width: 100%;
+        height: 10px;
+        margin-bottom: -5px;
+        display: flex;
+        flex-direction: column;
+        justify-content:space-around;
+        align-items: center;
+        &:after{
+          width: 100%;
+          height: 1px;
+          display: block;
+          background: ${props.theme.colors.neutral["300"]};
+          content: '';
+        }
+        &:hover{
+          &:after{
+            background: ${props.theme.colors.brand["600"]};
+          }
+        }
+      `;
   }
-  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    ");
-});
-const getWidths = list => list.map(l => l.clientWidth);
-const getHeights = list => list.map(l => l.clientHeight);
-function ResizableContainer(_ref3) {
-  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));
+  return `
+    top: 0;
+    right: calc(${(0, import_ds_system.mapGap)(props.gutter)} * -0.5);
+    height: 100%;
+    width: 10px;
+    margin-right: -5px;
+    display: flex;
+    flex-direction: row;
+    justify-content:space-around;
+    align-items: center;
+    &:after{
+      height: 100%;
+      width: 1px;
+      display: block;
+      background: ${props.theme.colors.neutral["300"]};
+      content: '';
+    }
+    &:hover{
+      &:after{
+        background: ${props.theme.colors.brand["600"]};
+      }
+    }
+    `;
+}}
+`;
+const getWidths = (list) => list.map((l) => l.clientWidth);
+const getHeights = (list) => list.map((l) => l.clientHeight);
+function ResizableContainer({
+  children,
+  cols,
+  rows,
+  vertical,
+  horizontal,
+  ...rest
+}) {
+  const refs = (0, import_react.useRef)([]);
+  const [containers, setContainers] = (0, import_react.useState)(cols);
+  const [blocks, setBlocks] = (0, import_react.useState)(rows);
+  const [isDragging, setDragging] = (0, import_react.useState)(false);
+  const [start, setStartPoint] = (0, import_react.useState)(0);
+  const [resetPoint, setResetPoint] = (0, import_react.useState)();
+  (0, import_react.useEffect)(() => {
+    if (horizontal)
+      setContainers(getWidths(refs.current));
+    if (vertical)
+      setBlocks(getHeights(refs.current));
   }, [refs.current, horizontal, vertical]);
-  const addRef = node => {
+  const addRef = (node) => {
     refs.current.push(node);
   };
-  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 resizePanels = (diff = 1, v = false) => {
     const index = parseInt(start.index, 10);
     if (!v) {
       const newContainers = [...containers];
       if (newContainers[index + 1] && newContainers[index + 1] > minDifference) {
         newContainers[index + 1] = newContainers[index + 1] - diff;
         newContainers[index] = diff + newContainers[index];
@@ -174,11 +192,10 @@ function ResizableContainer(_ref3) {
         newContainers[index - 1] = newContainers[index - 1] - diff;
         newContainers[index] = diff + newContainers[index];
       }
-      if (newContainers.every(c => c > safeDifference)) setContainers(newContainers);
+      if (newContainers.every((c) => c > safeDifference))
+        setContainers(newContainers);
     } else {
       const newBlocks = [...blocks];
       if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {
         newBlocks[index + 1] = newBlocks[index + 1] - diff;
         newBlocks[index] = diff + newBlocks[index];
@@ -186,14 +203,11 @@ function ResizableContainer(_ref3) {
         newBlocks[index - 1] = newBlocks[index - 1] - diff;
         newBlocks[index] = diff + newBlocks[index];
       }
-      if (newBlocks.every(c => c > safeDifference)) setBlocks(newBlocks);
+      if (newBlocks.every((c) => c > safeDifference))
+        setBlocks(newBlocks);
     }
   };
-  const startResize = function (event, index) {
-    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    let type = arguments.length > 3 ? arguments[3] : undefined;
+  const startResize = (event, index, v = false, type) => {
     setDragging(type);
     setStartPoint({
       x: event.clientX,
@@ -201,41 +215,30 @@ function ResizableContainer(_ref3) {
       index,
       v
     });
-    setResetPoint({
-      containers,
-      blocks
-    });
+    setResetPoint({ containers, blocks });
   };
   const moveResize = (event, type) => {
     if (isDragging && isDragging === type && !start.v) {
       const diff = event.clientX - start.x;
-      if (diff === 0) return;
-      setStartPoint({
-        x: event.clientX,
-        index: start.index
-      });
+      if (diff === 0)
+        return;
+      setStartPoint({ x: event.clientX, index: start.index });
       resizePanels(diff);
     } else if (isDragging && isDragging === type && start.v) {
       const diff = event.clientY - start.y;
-      if (diff === 0) return;
-      setStartPoint(_objectSpread(_objectSpread({}, start), {}, {
-        y: event.clientY,
-        index: start.index
-      }));
+      if (diff === 0)
+        return;
+      setStartPoint({ ...start, y: event.clientY, index: start.index });
       resizePanels(diff, true);
     }
   };
-  const endResize = type => {
+  const endResize = (type) => {
     if (isDragging === type) {
       setDragging(false);
       setStartPoint();
     }
   };
-  const handleKeyDown = function (e, index) {
-    let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const handleKeyDown = (e, index, v = false) => {
     const keyCodes = {
       37: DIRECTION.L,
       Left: DIRECTION.L,
@@ -250,74 +253,62 @@ function ResizableContainer(_ref3) {
       Down: DIRECTION.D,
       ArrowDown: DIRECTION.D
     };
     if (keyCodes[e.key || e.keyCode]) {
       e.preventDefault();
-      const {
-        top: y,
-        left: x
-      } = e.target.getBoundingClientRect();
+      const { top: y, left: x } = e.target.getBoundingClientRect();
       if (!start) {
-        startResize({
-          clientX: x,
-          clientY: y
-        }, index, v, EVENT_TYPE.KEY);
+        startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);
       } else {
         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,
-          clientY
-        }, EVENT_TYPE.KEY);
+        moveResize({ clientX, clientY }, EVENT_TYPE.KEY);
       }
     }
   };
-  const onLeave = type => {
+  const onLeave = (type) => {
     if (isDragging === type) {
       setDragging(false);
-      if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);
-      if (resetPoint && resetPoint.containers) setContainers(resetPoint.containers);
+      if (resetPoint && resetPoint.blocks)
+        setBlocks(resetPoint.blocks);
+      if (resetPoint && resetPoint.containers)
+        setContainers(resetPoint.containers);
     }
   };
-  const count = React__default["default"].Children.count(children);
-  return /*#__PURE__*/jsxRuntime.jsx(ResizableGrid, _objectSpread(_objectSpread({}, rest), {}, {
+  const count = import_react.default.Children.count(children);
+  return /* @__PURE__ */ import_react.default.createElement(ResizableGrid, {
+    ...rest,
     cols: containers,
     onKeyUp: () => endResize(EVENT_TYPE.KEY),
     onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
-    onMouseMove: e => moveResize(e, 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
-    }, 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: e => handleKeyDown(e, index, false),
-      onMouseDown: e => startResize(e, index, false, EVENT_TYPE.MOUSE),
-      tabIndex: 0
-    }), count - 1 !== index && vertical && /*#__PURE__*/_jsx2__default["default"](ResizableBar, {
-      container: blocks[index],
-      "data-index": index,
-      gutter: rest.gutter,
-      nextContainer: blocks[index + 1],
-      onKeyDown: e => handleKeyDown(e, index, true),
-      onMouseDown: e => startResize(e, index, true, EVENT_TYPE.MOUSE),
-      tabIndex: 0,
-      v: true
-    })))
-  }));
+    rows: blocks
+  }, import_react.default.Children.map(children, (child, index) => /* @__PURE__ */ import_react.default.createElement(ResizableItem, {
+    "data-index": index,
+    innerRef: addRef
+  }, child, count - 1 !== index && horizontal && /* @__PURE__ */ import_react.default.createElement(ResizableBar, {
+    container: containers[index],
+    "data-index": index,
+    gutter: rest.gutter,
+    nextContainer: containers[index + 1],
+    onKeyDown: (e) => handleKeyDown(e, index, false),
+    onMouseDown: (e) => startResize(e, index, false, EVENT_TYPE.MOUSE),
+    tabIndex: 0
+  }), count - 1 !== index && vertical && /* @__PURE__ */ import_react.default.createElement(ResizableBar, {
+    container: blocks[index],
+    "data-index": index,
+    gutter: rest.gutter,
+    nextContainer: blocks[index + 1],
+    onKeyDown: (e) => handleKeyDown(e, index, true),
+    onMouseDown: (e) => startResize(e, index, true, EVENT_TYPE.MOUSE),
+    tabIndex: 0,
+    v: true
+  }))));
 }
-ResizableContainer.defaultProps = defaultProps.defaultProps;
-const DSResizableContainerWithSchema = reactDesc.describe(ResizableContainer);
-DSResizableContainerWithSchema.propTypes = props.props;
-exports.DSResizableContainerWithSchema = DSResizableContainerWithSchema;
-exports.ResizableContainer = ResizableContainer;
-exports["default"] = ResizableContainer;
+ResizableContainer.propTypes = import_props.props;
+ResizableContainer.defaultProps = import_defaultProps.defaultProps;
+const DSResizableContainerWithSchema = (0, import_react_desc.describe)(ResizableContainer);
+DSResizableContainerWithSchema.propTypes = import_props.props;
+var Resizable_default = ResizableContainer;
+module.exports = __toCommonJS(Resizable_exports);
+//# sourceMappingURL=Resizable.js.map

package/cjs/Resizable.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Resizable.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useEffect } from 'react';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst safeDifference = 15;\nconst minDifference = 8;\nconst EVENT_TYPE = { MOUSE: 'mouse', KEY: 'arrows' };\nconst DIRECTION = {\n  L: 'left',\n  R: 'right',\n  U: 'up',\n  D: 'down',\n};\n\nfunction calcPosition(arrow, position) {\n  let offset;\n  switch (arrow) {\n    case DIRECTION.U:\n      offset = position - 3;\n      break;\n    case DIRECTION.D:\n      offset = position + 3;\n      break;\n    case DIRECTION.L:\n      offset = position - 3;\n      break;\n    case DIRECTION.R:\n      offset = position + 3;\n      break;\n    default:\n      offset = position;\n  }\n  return offset;\n}\n\nfunction cursorResolver(nextPx, px, isVertical) {\n  const orientation = {\n    vertical: 'row-resize',\n    horizontal: 'col-resize',\n    left: 'w-resize',\n    right: 'e-resize',\n    up: 'n-resize',\n    down: 's-resize',\n  };\n\n  if (isVertical && nextPx && nextPx <= safeDifference + 1)\n    return orientation.up;\n  if (isVertical && px > safeDifference + 1) return orientation.vertical;\n  if (isVertical && px <= safeDifference + 1) return orientation.down;\n\n  if (!isVertical && nextPx && nextPx <= safeDifference + 1)\n    return orientation.left;\n  if (!isVertical && px <= safeDifference + 1) return orientation.right;\n  if (!isVertical && px > safeDifference + 1) return orientation.horizontal;\n\n  return isVertical ? orientation.vertical : orientation.horizontal;\n}\n\nfunction ResizableItemComponent({ innerRef, ...p }) {\n  return <Grid ref={innerRef} {...p} />;\n}\n\nconst ResizableGrid = styled(Grid)``;\nconst ResizableItem = styled(ResizableItemComponent)`\n  position: relative;\n`;\nconst ResizableBar = styled.div`\n  position: absolute;\n  cursor: ${({ container, nextContainer, v }) =>\n    cursorResolver(nextContainer, container, v)};\n\n  ${(props) => {\n    if (props.v) {\n      return `\n        bottom: calc(${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: ${props.theme.colors.neutral['300']};\n          content: '';\n        }\n        &:hover{\n          &:after{\n            background: ${props.theme.colors.brand['600']};\n          } \n        }\n      `;\n    }\n    return `\n    top: 0;\n    right: calc(${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: ${props.theme.colors.neutral['300']};\n      content: '';\n    }\n    &:hover{\n      &:after{\n        background: ${props.theme.colors.brand['600']};\n      } \n    }\n    `;\n  }}\n`;\nconst getWidths = (list) => list.map((l) => l.clientWidth);\nconst getHeights = (list) => list.map((l) => l.clientHeight);\n\nfunction ResizableContainer({\n  children,\n  cols,\n  rows,\n  vertical,\n  horizontal,\n  ...rest\n}) {\n  const refs = useRef([]);\n  const [containers, setContainers] = useState(cols);\n  const [blocks, setBlocks] = useState(rows);\n  const [isDragging, setDragging] = useState(false);\n  const [start, setStartPoint] = useState(0);\n  const [resetPoint, setResetPoint] = useState();\n\n  useEffect(() => {\n    if (horizontal) setContainers(getWidths(refs.current));\n    if (vertical) setBlocks(getHeights(refs.current));\n  }, [refs.current, horizontal, vertical]);\n  const addRef = (node) => {\n    refs.current.push(node);\n  };\n  const resizePanels = (diff = 1, v = false) => {\n    const index = parseInt(start.index, 10);\n    if (!v) {\n      const newContainers = [...containers];\n      if (\n        newContainers[index + 1] &&\n        newContainers[index + 1] > minDifference\n      ) {\n        newContainers[index + 1] = newContainers[index + 1] - diff;\n        newContainers[index] = diff + newContainers[index];\n      } else if (\n        newContainers[index - 1] &&\n        newContainers[index - 1] > minDifference\n      ) {\n        newContainers[index - 1] = newContainers[index - 1] - diff;\n        newContainers[index] = diff + newContainers[index];\n      }\n      if (newContainers.every((c) => c > safeDifference))\n        setContainers(newContainers);\n    } else {\n      const newBlocks = [...blocks];\n      if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {\n        newBlocks[index + 1] = newBlocks[index + 1] - diff;\n        newBlocks[index] = diff + newBlocks[index];\n      } else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {\n        newBlocks[index - 1] = newBlocks[index - 1] - diff;\n        newBlocks[index] = diff + newBlocks[index];\n      }\n      if (newBlocks.every((c) => c > safeDifference)) setBlocks(newBlocks);\n    }\n  };\n  const startResize = (event, index, v = false, type) => {\n    setDragging(type);\n    setStartPoint({\n      x: event.clientX,\n      y: event.clientY,\n      index,\n      v,\n    });\n    setResetPoint({ containers, blocks });\n  };\n  const moveResize = (event, type) => {\n    if (isDragging && isDragging === type && !start.v) {\n      const diff = event.clientX - start.x;\n      if (diff === 0) return;\n      setStartPoint({ x: event.clientX, index: start.index });\n      resizePanels(diff);\n    } else if (isDragging && isDragging === type && start.v) {\n      const diff = event.clientY - start.y;\n      if (diff === 0) return;\n      setStartPoint({ ...start, y: event.clientY, index: start.index });\n      resizePanels(diff, true);\n    }\n  };\n  const endResize = (type) => {\n    if (isDragging === type) {\n      setDragging(false);\n      setStartPoint();\n    }\n  };\n  const handleKeyDown = (e, index, v = false) => {\n    const keyCodes = {\n      37: DIRECTION.L,\n      Left: DIRECTION.L,\n      ArrowLeft: DIRECTION.L,\n      38: DIRECTION.U,\n      Up: DIRECTION.U,\n      ArrowUp: DIRECTION.U,\n      39: DIRECTION.R,\n      Right: DIRECTION.R,\n      ArrowRight: DIRECTION.R,\n      40: DIRECTION.D,\n      Down: DIRECTION.D,\n      ArrowDown: DIRECTION.D,\n    };\n\n    if (keyCodes[e.key || e.keyCode]) {\n      e.preventDefault();\n      const { top: y, left: x } = e.target.getBoundingClientRect();\n      if (!start) {\n        startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);\n      } else {\n        const clientX =\n          keyCodes[e.keyCode] === DIRECTION.L ||\n          keyCodes[e.keyCode] === DIRECTION.R\n            ? calcPosition(keyCodes[e.keyCode], x)\n            : x;\n        const clientY =\n          keyCodes[e.keyCode] === DIRECTION.U ||\n          keyCodes[e.keyCode] === DIRECTION.D\n            ? calcPosition(keyCodes[e.keyCode], y)\n            : y;\n\n        moveResize({ clientX, clientY }, EVENT_TYPE.KEY);\n      }\n    }\n  };\n\n  const onLeave = (type) => {\n    if (isDragging === type) {\n      setDragging(false);\n\n      if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);\n      if (resetPoint && resetPoint.containers)\n        setContainers(resetPoint.containers);\n    }\n  };\n  const count = React.Children.count(children);\n\n  return (\n    <ResizableGrid\n      {...rest}\n      cols={containers}\n      onKeyUp={() => endResize(EVENT_TYPE.KEY)}\n      onMouseLeave={() => onLeave(EVENT_TYPE.MOUSE)}\n      onMouseMove={(e) => moveResize(e, EVENT_TYPE.MOUSE)}\n      onMouseUp={() => endResize(EVENT_TYPE.MOUSE)}\n      rows={blocks}\n    >\n      {React.Children.map(children, (child, index) => (\n        <ResizableItem data-index={index} innerRef={addRef}>\n          {child}\n          {count - 1 !== index && horizontal && (\n            <ResizableBar\n              container={containers[index]}\n              data-index={index}\n              gutter={rest.gutter}\n              nextContainer={containers[index + 1]}\n              onKeyDown={(e) => handleKeyDown(e, index, false)}\n              onMouseDown={(e) =>\n                startResize(e, index, false, EVENT_TYPE.MOUSE)\n              }\n              tabIndex={0}\n            />\n          )}\n          {count - 1 !== index && vertical && (\n            <ResizableBar\n              container={blocks[index]}\n              data-index={index}\n              gutter={rest.gutter}\n              nextContainer={blocks[index + 1]}\n              onKeyDown={(e) => handleKeyDown(e, index, true)}\n              onMouseDown={(e) => startResize(e, index, true, EVENT_TYPE.MOUSE)}\n              tabIndex={0}\n              v\n            />\n          )}\n        </ResizableItem>\n      ))}\n    </ResizableGrid>\n  );\n}\n\nResizableContainer.propTypes = rprops;\nResizableContainer.defaultProps = defaultProps;\n\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/cjs/defaultProps.js CHANGED Viewed

@@ -1,10 +1,38 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var defaultProps_exports = {};
+__export(defaultProps_exports, {
+  defaultProps: () => defaultProps
+});
+var React = __toESM(require("react"));
 const defaultProps = {
   vertical: false,
   horizontal: false
 };
-exports.defaultProps = defaultProps;
+module.exports = __toCommonJS(defaultProps_exports);
+//# sourceMappingURL=defaultProps.js.map

package/cjs/defaultProps.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const defaultProps = {\n  vertical: false,\n  horizontal: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AAAA;",
+  "names": []
+}