box-ui-elements 16.0.0-beta.8 → 16.0.0

package/es/components/table/makeSelectable.js

@@ -6,6 +6,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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(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; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -70,114 +78,259 @@ function makeSelectable(BaseTable) {
         }
       });
 
+      _defineProperty(_assertThisInitialized(_this), "getSharedHotkeyConfigs", function () {
+        var hotkeyType = _this.props.hotkeyType;
+        return [new HotkeyRecord({
+          key: 'shift+x',
+          description: React.createElement(FormattedMessage, messages.shiftXDescription),
+          handler: function handler() {
+            var focusedIndex = _this.state.focusedIndex;
+
+            if (focusedIndex === undefined) {
+              return;
+            }
+
+            _this.selectToggle(focusedIndex);
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: ['meta+a', 'ctrl+a'],
+          description: React.createElement(FormattedMessage, messages.selectAllDescription),
+          handler: function handler(event) {
+            var data = _this.props.data;
+            event.preventDefault();
+
+            _this.onSelect(new Set(data), _this.state.focusedIndex);
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'esc',
+          description: React.createElement(FormattedMessage, messages.deselectAllDescription),
+          handler: function handler() {
+            _this.onSelect(new Set(), _this.state.focusedIndex);
+          },
+          type: hotkeyType
+        })];
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "getListViewHotKeyConfigs", function () {
+        var hotkeyType = _this.props.hotkeyType;
+        return [new HotkeyRecord({
+          key: 'down',
+          description: React.createElement(FormattedMessage, messages.downDescription),
+          handler: function handler(event) {
+            var data = _this.props.data;
+            var focusedIndex = _this.state.focusedIndex;
+            event.preventDefault();
+            var newFocusedIndex = focusedIndex !== undefined ? Math.min(focusedIndex + 1, data.length - 1) : 0;
+
+            _this.setState({
+              focusedIndex: newFocusedIndex
+            });
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'up',
+          description: React.createElement(FormattedMessage, messages.upDescription),
+          handler: function handler(event) {
+            var _this$state$focusedIn = _this.state.focusedIndex,
+                focusedIndex = _this$state$focusedIn === void 0 ? 0 : _this$state$focusedIn;
+            event.preventDefault();
+            var newFocusedIndex = Math.max(focusedIndex - 1, 0);
+
+            _this.setState({
+              focusedIndex: newFocusedIndex
+            });
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'shift+down',
+          description: React.createElement(FormattedMessage, messages.shiftDownDescription),
+          handler: function handler() {
+            var data = _this.props.data;
+            var focusedIndex = _this.state.focusedIndex;
+
+            if (focusedIndex === undefined) {
+              return;
+            }
+
+            var newFocusedIndex = Math.min(focusedIndex + 1, data.length - 1);
+
+            _this.handleShiftKeyDown(newFocusedIndex, data.length - 1);
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'shift+up',
+          description: React.createElement(FormattedMessage, messages.shiftUpDescription),
+          handler: function handler() {
+            var focusedIndex = _this.state.focusedIndex;
+
+            if (focusedIndex === undefined) {
+              return;
+            }
+
+            var newFocusedIndex = Math.max(focusedIndex - 1, 0);
+
+            _this.handleShiftKeyDown(newFocusedIndex, 0);
+          },
+          type: hotkeyType
+        })];
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "getGridViewHotKeyConfigs", function () {
+        var hotkeyType = _this.props.hotkeyType;
+        return [new HotkeyRecord({
+          key: 'right',
+          description: React.createElement(FormattedMessage, messages.downDescription),
+          handler: function handler(event) {
+            var data = _this.props.data;
+            var focusedIndex = _this.state.focusedIndex;
+            event.preventDefault();
+            var newFocusedIndex = focusedIndex !== undefined ? Math.min(focusedIndex + 1, data.length - 1) : 0;
+
+            _this.setState({
+              focusedIndex: newFocusedIndex
+            });
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'left',
+          description: React.createElement(FormattedMessage, messages.upDescription),
+          handler: function handler(event) {
+            var _this$state$focusedIn2 = _this.state.focusedIndex,
+                focusedIndex = _this$state$focusedIn2 === void 0 ? 0 : _this$state$focusedIn2;
+            event.preventDefault();
+            var newFocusedIndex = Math.max(focusedIndex - 1, 0);
+
+            _this.setState({
+              focusedIndex: newFocusedIndex
+            });
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'down',
+          description: React.createElement(FormattedMessage, messages.downDescription),
+          handler: function handler(event) {
+            var _this$props = _this.props,
+                data = _this$props.data,
+                gridColumnCount = _this$props.gridColumnCount;
+            var focusedIndex = _this.state.focusedIndex;
+            event.preventDefault();
+            var newFocusedIndex = focusedIndex !== undefined ? Math.min(focusedIndex + gridColumnCount, data.length - 1) : 0;
+
+            _this.setState({
+              focusedIndex: newFocusedIndex
+            });
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'up',
+          description: React.createElement(FormattedMessage, messages.upDescription),
+          handler: function handler(event) {
+            var gridColumnCount = _this.props.gridColumnCount;
+            var _this$state$focusedIn3 = _this.state.focusedIndex,
+                focusedIndex = _this$state$focusedIn3 === void 0 ? 0 : _this$state$focusedIn3;
+            event.preventDefault();
+            var newFocusedIndex = Math.max(focusedIndex - gridColumnCount, 0);
+
+            _this.setState({
+              focusedIndex: newFocusedIndex
+            });
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'shift+right',
+          description: React.createElement(FormattedMessage, messages.shiftDownDescription),
+          handler: function handler() {
+            var data = _this.props.data;
+            var focusedIndex = _this.state.focusedIndex;
+
+            if (focusedIndex === undefined) {
+              return;
+            }
+
+            var newFocusedIndex = Math.min(focusedIndex + 1, data.length - 1);
+
+            _this.handleShiftKeyDownForGrid(newFocusedIndex, data.length - 1);
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'shift+left',
+          description: React.createElement(FormattedMessage, messages.shiftUpDescription),
+          handler: function handler() {
+            var focusedIndex = _this.state.focusedIndex;
+
+            if (focusedIndex === undefined) {
+              return;
+            }
+
+            var newFocusedIndex = Math.max(focusedIndex - 1, 0);
+
+            _this.handleShiftKeyDownForGrid(newFocusedIndex, 0);
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'shift+down',
+          description: React.createElement(FormattedMessage, messages.shiftDownDescription),
+          handler: function handler() {
+            var _this$props2 = _this.props,
+                data = _this$props2.data,
+                gridColumnCount = _this$props2.gridColumnCount;
+            var focusedIndex = _this.state.focusedIndex;
+
+            if (focusedIndex === undefined) {
+              return;
+            }
+
+            var newFocusedIndex = Math.min(focusedIndex + gridColumnCount, data.length - 1);
+
+            _this.handleShiftKeyDownForGrid(newFocusedIndex, data.length - 1);
+          },
+          type: hotkeyType
+        }), new HotkeyRecord({
+          key: 'shift+up',
+          description: React.createElement(FormattedMessage, messages.shiftUpDescription),
+          handler: function handler() {
+            var gridColumnCount = _this.props.gridColumnCount;
+            var focusedIndex = _this.state.focusedIndex;
+
+            if (focusedIndex === undefined) {
+              return;
+            }
+
+            var newFocusedIndex = Math.max(focusedIndex - gridColumnCount, 0);
+
+            _this.handleShiftKeyDownForGrid(newFocusedIndex, 0);
+          },
+          type: hotkeyType
+        })];
+      });
+
       _defineProperty(_assertThisInitialized(_this), "getHotkeyConfigs", function () {
-        var _this$props = _this.props,
-            enableHotkeys = _this$props.enableHotkeys,
-            hotkeyType = _this$props.hotkeyType;
+        var _this$props3 = _this.props,
+            enableHotkeys = _this$props3.enableHotkeys,
+            isGridView = _this$props3.isGridView,
+            gridColumnCount = _this$props3.gridColumnCount;
 
         if (!enableHotkeys && !_this.hotkeys) {
           _this.hotkeys = [];
         }
 
         if (!_this.hotkeys) {
-          _this.hotkeys = [new HotkeyRecord({
-            key: 'down',
-            description: React.createElement(FormattedMessage, messages.downDescription),
-            handler: function handler(event) {
-              var data = _this.props.data;
-              var focusedIndex = _this.state.focusedIndex;
-              event.preventDefault();
-              var newFocusedIndex = focusedIndex !== undefined ? Math.min(focusedIndex + 1, data.length - 1) : 0;
-
-              _this.setState({
-                focusedIndex: newFocusedIndex
-              });
-            },
-            type: hotkeyType
-          }), new HotkeyRecord({
-            key: 'up',
-            description: React.createElement(FormattedMessage, messages.upDescription),
-            handler: function handler(event) {
-              var _this$state$focusedIn = _this.state.focusedIndex,
-                  focusedIndex = _this$state$focusedIn === void 0 ? 0 : _this$state$focusedIn;
-              event.preventDefault();
-              var newFocusedIndex = Math.max(focusedIndex - 1, 0);
-
-              _this.setState({
-                focusedIndex: newFocusedIndex
-              });
-            },
-            type: hotkeyType
-          }), new HotkeyRecord({
-            key: 'shift+x',
-            description: React.createElement(FormattedMessage, messages.shiftXDescription),
-            handler: function handler() {
-              var focusedIndex = _this.state.focusedIndex;
-
-              if (focusedIndex === undefined) {
-                return;
-              }
-
-              _this.selectToggle(focusedIndex);
-            },
-            type: hotkeyType
-          }), new HotkeyRecord({
-            key: ['meta+a', 'ctrl+a'],
-            description: React.createElement(FormattedMessage, messages.selectAllDescription),
-            handler: function handler(event) {
-              var data = _this.props.data;
-              event.preventDefault();
-
-              _this.onSelect(new Set(data), _this.state.focusedIndex);
-            },
-            type: hotkeyType
-          }), new HotkeyRecord({
-            key: 'shift+down',
-            description: React.createElement(FormattedMessage, messages.shiftDownDescription),
-            handler: function handler() {
-              var data = _this.props.data;
-              var focusedIndex = _this.state.focusedIndex;
-
-              if (focusedIndex === undefined) {
-                return;
-              }
-
-              var newFocusedIndex = Math.min(focusedIndex + 1, data.length - 1);
-
-              _this.handleShiftKeyDown(newFocusedIndex, data.length - 1);
-            },
-            type: hotkeyType
-          }), new HotkeyRecord({
-            key: 'shift+up',
-            description: React.createElement(FormattedMessage, messages.shiftUpDescription),
-            handler: function handler() {
-              var focusedIndex = _this.state.focusedIndex;
-
-              if (focusedIndex === undefined) {
-                return;
-              }
-
-              var newFocusedIndex = Math.max(focusedIndex - 1, 0);
-
-              _this.handleShiftKeyDown(newFocusedIndex, 0);
-            },
-            type: hotkeyType
-          }), new HotkeyRecord({
-            key: 'esc',
-            description: React.createElement(FormattedMessage, messages.deselectAllDescription),
-            handler: function handler() {
-              _this.onSelect(new Set(), _this.state.focusedIndex);
-            },
-            type: hotkeyType
-          })];
+          var viewSpecificHotKeyConfigs = isGridView && gridColumnCount !== undefined ? _this.getGridViewHotKeyConfigs() : _this.getListViewHotKeyConfigs();
+          _this.hotkeys = [].concat(_toConsumableArray(_this.getSharedHotkeyConfigs()), _toConsumableArray(viewSpecificHotKeyConfigs));
         }
 
         return _this.hotkeys;
       });
 
       _defineProperty(_assertThisInitialized(_this), "getProcessedProps", function () {
-        var selectedItems = _this.props.selectedItems;
+        var _this$props4 = _this.props,
+            data = _this$props4.data,
+            loadedData = _this$props4.loadedData,
+            selectedItems = _this$props4.selectedItems;
         return _objectSpread({}, _this.props, {
+          loadedData: loadedData ? Set(loadedData) : Set(data),
           selectedItems: Set.isSet(selectedItems) ? selectedItems : new Set(selectedItems)
         });
       });
@@ -307,6 +460,55 @@ function makeSelectable(BaseTable) {
         _this.onSelect(selectedItems.add(data[focusedIndex]), newFocusedIndex);
       });
 
+      _defineProperty(_assertThisInitialized(_this), "isContiguousSelection", function (selectedItemIndecies, sourceIndex, targetIndex) {
+        if (sourceIndex < targetIndex && selectedItemIndecies.has(sourceIndex - 1)) {
+          return true;
+        }
+
+        if (targetIndex < sourceIndex && selectedItemIndecies.has(sourceIndex + 1)) {
+          return true;
+        }
+
+        return false;
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleShiftKeyDownForGrid", function (newFocusedIndex) {
+        var _this$getProcessedPro6 = _this.getProcessedProps(),
+            data = _this$getProcessedPro6.data,
+            loadedData = _this$getProcessedPro6.loadedData,
+            selectedItems = _this$getProcessedPro6.selectedItems;
+
+        var focusedIndex = _this.state.focusedIndex;
+        var dataSize = data.length;
+        var targetIndex = newFocusedIndex < 0 ? 0 : Math.min(newFocusedIndex, dataSize - 1);
+        var isSourceSelected = selectedItems.has(data[focusedIndex]);
+        var isTargetSelected = selectedItems.has(data[targetIndex]); // if data is not loaded, we don't want it to be able to be selected
+
+        if (!loadedData.has(data[targetIndex])) {
+          return;
+        }
+
+        var selectedItemIndices = new Set(data.reduce(function (rows, item, i) {
+          if (selectedItems.has(item)) {
+            rows.push(i);
+          }
+
+          return rows;
+        }, [])); // reset the anchor on a new selection block
+
+        if (!isSourceSelected && !isTargetSelected && // if we are starting a new mass selection adjacent selected block, we want to connect them
+        !_this.isContiguousSelection(selectedItemIndices, focusedIndex, targetIndex)) {
+          _this.anchorIndex = focusedIndex;
+        }
+
+        var newSelectedItemIndices = shiftSelect(selectedItemIndices, focusedIndex, targetIndex, _this.anchorIndex);
+        var newSelectedItems = newSelectedItemIndices.map(function (i) {
+          return data[i];
+        });
+
+        _this.onSelect(newSelectedItems, targetIndex);
+      });
+
       _defineProperty(_assertThisInitialized(_this), "handleKeyboardSearch", function (event) {
         var searchStrings = _this.props.searchStrings;
 
@@ -374,9 +576,9 @@ function makeSelectable(BaseTable) {
     }, {
       key: "render",
       value: function render() {
-        var _this$props2 = this.props,
-            className = _this$props2.className,
-            data = _this$props2.data;
+        var _this$props5 = this.props,
+            className = _this$props5.className,
+            data = _this$props5.data;
         var focusedIndex = this.state.focusedIndex;
         var focusedItem = data[focusedIndex];
         return React.createElement(Hotkeys, {
@@ -399,6 +601,8 @@ function makeSelectable(BaseTable) {
 
     /** Array of unique IDs of the items in the table. Each item should be a string or number, in the order they appear in the table. */
     data: PropTypes.array.isRequired,
+    gridColumnCount: PropTypes.number,
+    isGridView: PropTypes.bool,
 
     /** Called when focus changes. `(focusedIndex: number) => void` */
     onFocus: PropTypes.func,
@@ -419,6 +623,9 @@ function makeSelectable(BaseTable) {
      * with an ImmutableJS Set.
      */
     selectedItems: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.set]),
+
+    /** Array of unique IDs of the items in the table that are loaded and accessible. If not provided, this will default to all data */
+    loadedData: PropTypes.array,
     enableHotkeys: PropTypes.bool,
 
     /** Translated type for hotkeys. If not provided, then the hotkeys will not appear in the help modal. */