@elliemae/ds-shared 1.57.1-rc.0 → 2.0.0-alpha.11

package/cjs/FocusGroup/FocusGrid.js

@@ -2,75 +2,78 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var dsUtilities = require('@elliemae/ds-utilities');
-var FocusGroup_utils_getNextCellPosition = require('./utils/getNextCellPosition.js');
+var utils = require('@elliemae/ds-utilities/utils');
+var useHotkeys = require('@elliemae/ds-utilities/hooks/useHotkeys');
+var system = require('@elliemae/ds-utilities/system');
+var getNextCellPosition = require('./utils/getNextCellPosition.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
 
 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 FocusGridContext = /*#__PURE__*/React.createContext();
-var Provider = FocusGridContext.Provider;
-
-var preventDefault = function preventDefault(e) {
-  return e.preventDefault();
-};
-
-function registerHotKeysHooks(hotKeys, _ref) {
-  var focusedRow = _ref.focusedRow,
-      focusedCell = _ref.focusedCell;
-  Object.keys(hotKeys).forEach(function (key) {
-    var _hotKeys$key = hotKeys[key],
-        _handler = _hotKeys$key.handler,
-        options = _hotKeys$key.options;
-    dsUtilities.useHotkeys({
+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 FocusGridContext = /*#__PURE__*/React.createContext();
+const {
+  Provider
+} = FocusGridContext;
+
+const preventDefault = e => e.preventDefault();
+
+function registerHotKeysHooks(hotKeys, {
+  focusedRow,
+  focusedCell
+}) {
+  Object.keys(hotKeys).forEach(key => {
+    const {
+      handler,
+      options
+    } = hotKeys[key];
+    useHotkeys__default["default"]({
       keys: key,
-      handler: function handler(e) {
+      handler: e => {
         e.preventDefault();
-
-        _handler({
+        handler({
           rowIndex: focusedRow.current,
           cellIndex: focusedCell.current
         });
       },
-      options: options
+      options
     });
   });
 } // eslint-disable-next-line max-statements
 
 
-function FocusGridProvider(_ref2) {
-  var _ref2$shouldWrapRows = _ref2.shouldWrapRows,
-      shouldWrapRows = _ref2$shouldWrapRows === void 0 ? false : _ref2$shouldWrapRows,
-      _ref2$shouldWrapCells = _ref2.shouldWrapCells,
-      shouldWrapCells = _ref2$shouldWrapCells === void 0 ? false : _ref2$shouldWrapCells,
-      _ref2$shouldRefocus = _ref2.shouldRefocus,
-      shouldRefocus = _ref2$shouldRefocus === void 0 ? true : _ref2$shouldRefocus,
-      children = _ref2.children,
-      keyBindings = _ref2.keyBindings,
-      hotKeys = _ref2.hotKeys;
-  var focusedRow = React.useRef();
-  var focusedCell = React.useRef();
-  var grid = React.useRef([]);
-  var containerRef = React.useRef(document);
-  var child = React__default['default'].Children.only(children);
-  var decoratedChild = /*#__PURE__*/React__default['default'].cloneElement(child, {
-    innerRef: dsUtilities.mergeRefs(child.props.innerRef, containerRef)
+function FocusGridProvider({
+  shouldWrapRows = false,
+  shouldWrapCells = false,
+  shouldRefocus = true,
+  children,
+  keyBindings,
+  hotKeys
+}) {
+  const focusedRow = React.useRef();
+  const focusedCell = React.useRef();
+  const grid = React.useRef([]);
+  const containerRef = React.useRef(document);
+  const child = React__default["default"].Children.only(children);
+  const decoratedChild = /*#__PURE__*/React__default["default"].cloneElement(child, {
+    innerRef: system.mergeRefs(child.props.innerRef, containerRef)
   });
 
-  var getNode = function getNode(_ref3) {
-    var rowIndex = _ref3.rowIndex,
-        cellIndex = _ref3.cellIndex;
-    return dsUtilities.get(grid.current, [rowIndex, cellIndex]);
-  };
+  const getNode = ({
+    rowIndex,
+    cellIndex
+  }) => utils.get(grid.current, [rowIndex, cellIndex]);
 
-  var register = function register(node, rowIndex, columnIndex) {
+  const register = (node, rowIndex, columnIndex) => {
     if (!node) return;
 
     if (!Array.isArray(grid.current[rowIndex])) {
@@ -83,8 +86,8 @@ function FocusGridProvider(_ref2) {
       node.setAttribute('tabindex', -1);
     }
 
-    node.onfocus = function () {
-      var prevNode = getNode({
+    node.onfocus = () => {
+      const prevNode = getNode({
         rowIndex: focusedRow.current,
         cellIndex: focusedCell.current
       });
@@ -97,31 +100,31 @@ function FocusGridProvider(_ref2) {
     grid.current[rowIndex][columnIndex] = node;
   };
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (shouldRefocus) {
-      var rowIndex = focusedRow.current;
-      var cellIndex = focusedCell.current;
-      var node = dsUtilities.get(grid.current, [rowIndex, cellIndex]);
+      const rowIndex = focusedRow.current;
+      const cellIndex = focusedCell.current;
+      const node = utils.get(grid.current, [rowIndex, cellIndex]);
       if (node) node.focus();
     }
   });
 
-  var focusNextCell = function focusNextCell(directionY, directionX, position) {
-    var _ref4 = position || FocusGroup_utils_getNextCellPosition({
+  const focusNextCell = (directionY, directionX, position) => {
+    const {
+      rowIndex,
+      cellIndex
+    } = position || getNextCellPosition({
       grid: grid.current,
       currentCell: focusedCell.current,
       currentRow: focusedRow.current,
-      directionX: directionX,
-      directionY: directionY,
-      shouldWrapCells: shouldWrapCells,
-      shouldWrapRows: shouldWrapRows
-    }),
-        rowIndex = _ref4.rowIndex,
-        cellIndex = _ref4.cellIndex;
-
-    var node = getNode({
-      rowIndex: rowIndex,
-      cellIndex: cellIndex
+      directionX,
+      directionY,
+      shouldWrapCells,
+      shouldWrapRows
+    });
+    const node = getNode({
+      rowIndex,
+      cellIndex
     }); // can focus
 
     if (node) {
@@ -132,85 +135,74 @@ function FocusGridProvider(_ref2) {
   };
 
   registerHotKeysHooks(hotKeys, {
-    focusedCell: focusedCell,
-    focusedRow: focusedRow
+    focusedCell,
+    focusedRow
   });
 
-  var defaultKeyBindings = _objectSpread({
-    ArrowUp: dsUtilities.runAll(preventDefault, function () {
-      return focusNextCell(-1, 0);
-    }),
-    ArrowRight: dsUtilities.runAll(preventDefault, function () {
-      return focusNextCell(0, 1);
-    }),
-    ArrowDown: dsUtilities.runAll(preventDefault, function () {
-      return focusNextCell(1, 0);
-    }),
-    ArrowLeft: dsUtilities.runAll(preventDefault, function () {
-      return focusNextCell(0, -1);
-    }),
-    Home: dsUtilities.runAll(preventDefault, function (e) {
-      var rowIndex = focusedRow.current;
+  const defaultKeyBindings = _objectSpread({
+    ArrowUp: utils.runAll(preventDefault, () => focusNextCell(-1, 0)),
+    ArrowRight: utils.runAll(preventDefault, () => focusNextCell(0, 1)),
+    ArrowDown: utils.runAll(preventDefault, () => focusNextCell(1, 0)),
+    ArrowLeft: utils.runAll(preventDefault, () => focusNextCell(0, -1)),
+    Home: utils.runAll(preventDefault, e => {
+      let rowIndex = focusedRow.current;
 
       if (e.ctrlKey) {
         rowIndex = 0;
       }
 
       focusNextCell(0, 0, {
-        rowIndex: rowIndex,
+        rowIndex,
         cellIndex: 0
       });
     }),
-    End: dsUtilities.runAll(preventDefault, function (e) {
-      var rowIndex = focusedRow.current;
+    End: utils.runAll(preventDefault, e => {
+      let rowIndex = focusedRow.current;
 
       if (e.ctrlKey) {
         rowIndex = grid.current.length - 1;
       }
 
       focusNextCell(0, 0, {
-        rowIndex: rowIndex,
+        rowIndex,
         cellIndex: grid.current[0].length - 1
       });
     })
   }, keyBindings);
 
-  var nextKeyBindings = dsUtilities.isFunction(keyBindings) ? keyBindings({
+  const nextKeyBindings = utils.isFunction(keyBindings) ? keyBindings({
     defaultBindings: defaultKeyBindings,
     rowIndex: focusedRow.current,
     cellIndex: focusedCell.current
   }) : _objectSpread(_objectSpread({}, defaultKeyBindings), keyBindings);
 
-  var onKeyDown = function onKeyDown(e) {
+  const onKeyDown = e => {
     if (e.target.tagName.toLowerCase() === 'input') return;
-    var action = nextKeyBindings[e.key];
-    if (dsUtilities.isFunction(action)) action(e);
+    const action = nextKeyBindings[e.key];
+    if (utils.isFunction(action)) action(e);
   };
 
-  var activate = function activate(container) {
+  const activate = container => {
     container.addEventListener('keydown', onKeyDown, true);
   };
 
-  var deactivate = function deactivate(container) {
+  const deactivate = container => {
     container.removeEventListener('keydown', onKeyDown, true);
   };
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     activate(containerRef.current);
-    return function () {
+    return () => {
       deactivate(containerRef.current);
     };
   }, []);
-  var valueProvider = React.useMemo(function () {
-    return {
-      register: register
-    };
-  }, []);
-  return /*#__PURE__*/React__default['default'].createElement(Provider, {
+  const valueProvider = React.useMemo(() => ({
+    register
+  }), []);
+  return /*#__PURE__*/_jsx__default["default"](Provider, {
     value: valueProvider
-  }, decoratedChild);
+  }, void 0, decoratedChild);
 }
 
 exports.FocusGridContext = FocusGridContext;
-exports['default'] = FocusGridProvider;
-//# sourceMappingURL=FocusGrid.js.map
+exports["default"] = FocusGridProvider;