@orfeas126/box-ui-elements
Version:
Box UI Elements
86 lines (84 loc) • 3.62 kB
JavaScript
const _excluded = ["currentCollection", "gridColumnCount", "onItemSelect", "rootElement", "rootId", "selected"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
import * as React from 'react';
import ArrowKeyStepper from '@box/react-virtualized/dist/es/ArrowKeyStepper';
import AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';
import getProp from 'lodash/get';
import GridView from '../../components/grid-view/GridView';
import { focus } from '../../utils/dom';
import ItemGridCell from './ItemGridCell';
const ItemGrid = _ref => {
let {
currentCollection,
gridColumnCount,
onItemSelect,
rootElement,
rootId,
selected
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
const items = getProp(currentCollection, 'items', []);
const gridRowCount = Math.ceil(items.length / gridColumnCount);
const linearIndex = selected ? items.findIndex(item => item?.id === selected?.id) : 0;
const selectedRowIndex = Math.floor(linearIndex / gridColumnCount);
const selectedColumnIndex = linearIndex % gridColumnCount;
/**
* Renderer used for cards in grid view
*
* @param {number} slotIndex - index of item in currentCollection.items
* @return {React.Element} - Element to display in card
*/
const slotRenderer = slotIndex => {
const item = getProp(currentCollection, `items[${slotIndex}]`);
return item ? /*#__PURE__*/React.createElement(ItemGridCell, _extends({
item: item,
onItemSelect: onItemSelect,
rootId: rootId
}, rest)) : null;
};
/**
* Update the currently selected item when navigating with keyboard
* @param {number} row - row index of selected item
* @param {number} column - column index of selected item
* @return {void}
*/
const onCellSelect = (row, column) => {
const index = row * gridColumnCount + column;
const item = getProp(currentCollection, `items[${index}]`);
if (item) {
onItemSelect(item, () => {
focus(rootElement, '.bdl-GridViewSlot-content--selected .be-item-name .be-item-label', false);
});
}
};
return /*#__PURE__*/React.createElement(AutoSizer, null, ({
height,
width
}) => /*#__PURE__*/React.createElement(ArrowKeyStepper, {
columnCount: gridColumnCount,
mode: "cells",
isControlled: true,
scrollToRow: selectedRowIndex,
scrollToColumn: selectedColumnIndex,
onScrollToChange: ({
scrollToRow,
scrollToColumn
}) => {
onCellSelect(scrollToRow, scrollToColumn);
},
rowCount: gridRowCount
}, ({
scrollToRow
}) => /*#__PURE__*/React.createElement(GridView, {
columnCount: gridColumnCount,
currentCollection: currentCollection,
height: height,
scrollToRow: scrollToRow,
slotRenderer: slotRenderer,
width: width
})));
};
export default ItemGrid;
//# sourceMappingURL=ItemGrid.js.map