@procore/core-react
Version:
React library of Procore Design Guidelines
567 lines (565 loc) • 26.8 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["children", "style", "columnsCount"],
_excluded2 = ["children", "className", "style"],
_excluded3 = ["style"],
_excluded4 = ["items", "selected", "groups", "title", "gridWidth", "gridHeight", "onSelect", "onDeselect", "disableSelection", "isFetching", "loadMoreItems", "qa", "allowSelectAll", "onSelectAll", "onDeselectAll", "onSelectAllGroup", "onDeselectAllGroup"];
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(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 (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import { useFocusWithin } from '@react-aria/interactions';
import React from 'react';
import InfiniteLoader from 'react-window-infinite-loader';
import { Spinner } from '../Spinner';
import { Tooltip } from '../Tooltip';
import { useI18nContext } from '../_hooks/I18n';
import { mergeRefs } from '../_utils/mergeRefs';
import { useGridNavigation } from './ThumbnailGrid.hooks';
import { StyledCheckbox, StyledGroupCell, StyledGroupTitle, StyledSpinnerWrapper, StyledThumbnail, StyledThumbnailGrid, StyledVariableSizeGrid } from './ThumbnailGrid.styles';
function noop() {}
var asyncNoop = function asyncNoop() {
return Promise.resolve();
};
var titleHeight = 20;
var titleTopPadding = 24;
var thumbnailHeight = 138;
var thumbnailWidh = 104;
var defaultColumnsCount = 5;
var gutterSize = 12;
var _columnWidth = thumbnailWidh + gutterSize;
var gridLeftPadding = 24;
var defaultGridWidth = gridLeftPadding + _columnWidth * defaultColumnsCount;
var defaultGridHeight = (thumbnailHeight + gutterSize) * 3;
var getId = function getId(item) {
return item.id;
};
var getGridRows = function getGridRows(_ref) {
var items = _ref.items,
groups = _ref.groups,
title = _ref.title,
_ref$isFetching = _ref.isFetching,
isFetching = _ref$isFetching === void 0 ? false : _ref$isFetching,
groupTitleFallback = _ref.groupTitleFallback,
_ref$columnsCount = _ref.columnsCount,
columnsCount = _ref$columnsCount === void 0 ? defaultColumnsCount : _ref$columnsCount;
var splitToRows = function splitToRows(items) {
return items.reduce(function (acc, item, index) {
var rowIndex = Math.floor(index / columnsCount);
var row = acc[rowIndex] = acc[rowIndex] || [];
row.push(item);
return acc;
}, []);
};
var splitToGroupedRows = function splitToGroupedRows(items, groups) {
var groupedRows = [];
var groupedThumbnails = items.reduce(function (acc, item) {
var _item$groupId;
var groupId = (_item$groupId = item.groupId) !== null && _item$groupId !== void 0 ? _item$groupId : String(item.groupId);
var group = acc.get(groupId);
if (group) {
group.push(item);
} else {
acc.set(groupId, [item]);
}
return acc;
}, new Map(groups.map(function (_ref2) {
var id = _ref2.id;
return [id, []];
})));
groupedThumbnails.forEach(function (group, groupId) {
var groupRows = splitToRows(group);
if (groupRows.length) {
var _groups$find;
var groupTitleRow = [{
title: ((_groups$find = groups.find(function (_ref3) {
var id = _ref3.id;
return groupId === id;
})) === null || _groups$find === void 0 ? void 0 : _groups$find.title) || groupTitleFallback,
groupId: groupId
}];
groupRows.unshift(groupTitleRow);
}
groupedRows = [].concat(_toConsumableArray(groupedRows), _toConsumableArray(groupRows));
});
return groupedRows;
};
var setGridTitle = function setGridTitle(rows) {
if (title) {
rows.unshift([{
title: title
}]);
}
return rows;
};
var setLoadingIndicator = function setLoadingIndicator(rows) {
if (isFetching) {
rows.push([{
isFetching: isFetching
}]);
}
return rows;
};
var gridRows = groups ? splitToGroupedRows(items, groups) : splitToRows(items);
var gridRowsWithOptionalTitle = setGridTitle(gridRows);
var gridRowsWithOptionalLoadingIndicator = setLoadingIndicator(gridRowsWithOptionalTitle);
return gridRowsWithOptionalLoadingIndicator;
};
var filterByGroupId = function filterByGroupId(item, groupId) {
return String(item.groupId) === groupId;
};
var GroupCell = function GroupCell(_ref4) {
var children = _ref4.children,
style = _ref4.style,
columnsCount = _ref4.columnsCount,
props = _objectWithoutProperties(_ref4, _excluded);
return /*#__PURE__*/React.createElement(StyledGroupCell, _extends({
style: _objectSpread(_objectSpread({}, style), {}, {
left: (style === null || style === void 0 ? void 0 : style.left) + gridLeftPadding,
top: (style === null || style === void 0 ? void 0 : style.top) + gutterSize,
width: _columnWidth * columnsCount
})
}, props), children);
};
var ThumbnailCell = function ThumbnailCell(_ref5) {
var children = _ref5.children,
className = _ref5.className,
style = _ref5.style,
props = _objectWithoutProperties(_ref5, _excluded2);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread(_objectSpread({}, style), {}, {
left: (style === null || style === void 0 ? void 0 : style.left) + gridLeftPadding,
top: (style === null || style === void 0 ? void 0 : style.top) + gutterSize
})
}, props), children);
};
// See https://github.com/bvaughn/react-window/issues/130
var GridOuterContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
return /*#__PURE__*/React.createElement("div", _extends({
ref: ref,
tabIndex: -1
}, props));
});
var GridInnerContainer = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
var style = _ref6.style,
props = _objectWithoutProperties(_ref6, _excluded3);
return /*#__PURE__*/React.createElement("div", _extends({
ref: ref,
tabIndex: -1,
style: _objectSpread(_objectSpread({}, style), {}, {
paddingLeft: gridLeftPadding,
width: (style === null || style === void 0 ? void 0 : style.width) + gridLeftPadding
})
}, props));
});
export var ThumbnailGrid = /*#__PURE__*/React.forwardRef(function (_ref7, forwardRef) {
var items = _ref7.items,
_ref7$selected = _ref7.selected,
selected = _ref7$selected === void 0 ? [] : _ref7$selected,
groups = _ref7.groups,
_ref7$title = _ref7.title,
title = _ref7$title === void 0 ? '' : _ref7$title,
_ref7$gridWidth = _ref7.gridWidth,
gridWidth = _ref7$gridWidth === void 0 ? defaultGridWidth : _ref7$gridWidth,
_ref7$gridHeight = _ref7.gridHeight,
gridHeight = _ref7$gridHeight === void 0 ? defaultGridHeight : _ref7$gridHeight,
_ref7$onSelect = _ref7.onSelect,
onSelect = _ref7$onSelect === void 0 ? noop : _ref7$onSelect,
_ref7$onDeselect = _ref7.onDeselect,
onDeselect = _ref7$onDeselect === void 0 ? noop : _ref7$onDeselect,
_ref7$disableSelectio = _ref7.disableSelection,
disableSelection = _ref7$disableSelectio === void 0 ? {
value: false,
tooltip: ''
} : _ref7$disableSelectio,
_ref7$isFetching = _ref7.isFetching,
isFetching = _ref7$isFetching === void 0 ? false : _ref7$isFetching,
_ref7$loadMoreItems = _ref7.loadMoreItems,
loadMoreItems = _ref7$loadMoreItems === void 0 ? asyncNoop : _ref7$loadMoreItems,
qa = _ref7.qa,
_ref7$allowSelectAll = _ref7.allowSelectAll,
allowSelectAll = _ref7$allowSelectAll === void 0 ? false : _ref7$allowSelectAll,
_ref7$onSelectAll = _ref7.onSelectAll,
onSelectAll = _ref7$onSelectAll === void 0 ? noop : _ref7$onSelectAll,
_ref7$onDeselectAll = _ref7.onDeselectAll,
onDeselectAll = _ref7$onDeselectAll === void 0 ? noop : _ref7$onDeselectAll,
_ref7$onSelectAllGrou = _ref7.onSelectAllGroup,
onSelectAllGroup = _ref7$onSelectAllGrou === void 0 ? noop : _ref7$onSelectAllGrou,
_ref7$onDeselectAllGr = _ref7.onDeselectAllGroup,
onDeselectAllGroup = _ref7$onDeselectAllGr === void 0 ? noop : _ref7$onDeselectAllGr,
props = _objectWithoutProperties(_ref7, _excluded4);
var gridContainerRef = React.useRef(null);
var I18n = useI18nContext();
var gridContainer = gridContainerRef.current;
var gridRef = React.useRef(null);
var _React$useState = React.useState(gridWidth),
_React$useState2 = _slicedToArray(_React$useState, 2),
gridContainerWidth = _React$useState2[0],
setGridContainerWidth = _React$useState2[1];
var _React$useState3 = React.useState(defaultColumnsCount),
_React$useState4 = _slicedToArray(_React$useState3, 2),
columnsCount = _React$useState4[0],
setColumnsCount = _React$useState4[1];
var gridInstance = gridRef.current;
var _useFocusWithin = useFocusWithin({
onFocusWithin: function onFocusWithin(e) {
return setIsGridFocused(true);
},
onBlurWithin: function onBlurWithin(e) {
return setIsGridFocused(false);
}
}),
focusWithinProps = _useFocusWithin.focusWithinProps;
React.useEffect(function () {
var handleResize = function handleResize() {
if (gridContainer !== null && gridContainer !== void 0 && gridContainer.offsetWidth) {
var containerWidth = gridContainer.offsetWidth - gridLeftPadding;
var currentColumnsCount = Math.floor(containerWidth / _columnWidth);
setGridContainerWidth(containerWidth);
setColumnsCount(currentColumnsCount || 1);
}
};
handleResize(); // Initial resize calculation
window.addEventListener('resize', handleResize);
return function () {
window.removeEventListener('resize', handleResize);
};
}, [gridContainer]);
var rows = React.useMemo(function () {
return getGridRows({
items: items,
groups: groups,
isFetching: isFetching,
title: title,
columnsCount: columnsCount,
groupTitleFallback: I18n.t('core.fileExplorer.ungroupedThumbnailGridGroup')
});
}, [items, groups, title, isFetching, columnsCount]);
var isTitleRow = function isTitleRow(rowCells) {
return 'title' in rowCells[0];
};
var isFetchingRow = function isFetchingRow(rowCells) {
return 'isFetching' in rowCells[0];
};
var isNonNavigableRow = function isNonNavigableRow(rowCells) {
return isTitleRow(rowCells) || isFetchingRow(rowCells);
};
var rowHeights = React.useMemo(function () {
return rows.map(function (rowCells, index) {
var titleRow = isTitleRow(rowCells);
var titleRowIsNotFirstGridRow = titleRow && index > 0;
var rowPadding = (titleRowIsNotFirstGridRow ? titleTopPadding : 0) + gutterSize;
if (titleRow) {
return titleHeight + rowPadding;
} else {
return thumbnailHeight + rowPadding;
}
});
}, [rows]);
var nonNavigableRowIndices = React.useMemo(function () {
return rows.map(function (rowCells, index) {
return {
index: index,
isNonNavigableRow: isNonNavigableRow(rowCells)
};
}).filter(function (_ref8) {
var isNonNavigableRow = _ref8.isNonNavigableRow;
return isNonNavigableRow;
}).map(function (_ref9) {
var index = _ref9.index;
return index;
});
}, [rows]);
var navigationIndicesRows = React.useMemo(function () {
return rows.filter(function (rowCells) {
return !isNonNavigableRow(rowCells);
}).map(function (rowCells) {
return rowCells.map(function (cell) {
return items.findIndex(function (item) {
return item.id === cell.id;
});
});
});
}, [rows, items]);
var getNumberOfNonNavigableRowsBefore = React.useCallback(function (rowIndex) {
return nonNavigableRowIndices.filter(function (index) {
return rowIndex > index;
}).length;
}, [nonNavigableRowIndices]);
var getThumbnailNavigationIndex = React.useCallback(function (rowIndex, cellIndex) {
return navigationIndicesRows[rowIndex - getNumberOfNonNavigableRowsBefore(rowIndex)][cellIndex];
}, [navigationIndicesRows, getNumberOfNonNavigableRowsBefore]);
var thumbnailNavigationIndexToRowIndexMap = React.useMemo(function () {
return rows.reduce(function (acc, rowCells, rowIndex) {
if (isNonNavigableRow(rowCells)) return acc;
var mappedRowCells = rowCells.reduce(function (acc, _, cellIndex) {
var navIndex = String(getThumbnailNavigationIndex(rowIndex, cellIndex));
acc[navIndex] = rowIndex;
return acc;
}, {});
return _objectSpread(_objectSpread({}, acc), mappedRowCells);
}, {});
}, [rows, getThumbnailNavigationIndex]);
var _React$useState5 = React.useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
isGridFocused = _React$useState6[0],
setIsGridFocused = _React$useState6[1];
var navigation = useGridNavigation({
indicesRows: navigationIndicesRows
});
var isThumbnailSelected = function isThumbnailSelected(thumbnail) {
return selected.some(function (_ref0) {
var id = _ref0.id;
return thumbnail.id === id;
});
};
var toggle = function toggle(thumbnail) {
if (isThumbnailSelected(thumbnail)) {
onDeselect(thumbnail);
} else if (!disableSelection.value) {
onSelect(thumbnail);
}
};
var itemsIds = React.useMemo(function () {
return items.map(getId);
}, [items]);
var selectedIds = React.useMemo(function () {
return selected.map(getId);
}, [selected]);
var isFullySelected = React.useMemo(function () {
return itemsIds.length > 0 && itemsIds.every(function (id) {
return selectedIds.includes(id);
});
}, [selected, items]);
var isPartiallySelected = React.useMemo(function () {
return selectedIds.length > 0 && !isFullySelected && itemsIds.some(function (id) {
return selectedIds.includes(id);
});
}, [selected, isFullySelected]);
var isGroupFullySelected = function isGroupFullySelected(groupId) {
var currentGroupItems = items.filter(function (item) {
return filterByGroupId(item, groupId);
});
var selectedGroupItems = selected.filter(function (item) {
return filterByGroupId(item, groupId);
});
return currentGroupItems.length > 0 && currentGroupItems.map(getId).every(function (id) {
return selectedGroupItems.map(getId).includes(id);
});
};
var isGroupPartiallySelected = function isGroupPartiallySelected(groupId) {
var currentGroupItems = items.filter(function (item) {
return filterByGroupId(item, groupId);
});
var selectedGroupItems = selected.filter(function (item) {
return filterByGroupId(item, groupId);
});
return selectedGroupItems.length > 0 && !isGroupFullySelected(groupId) && selectedGroupItems.map(getId).some(function (id) {
return currentGroupItems.map(getId).includes(id);
});
};
var onSelectAllChange = function onSelectAllChange(e) {
e.stopPropagation();
if (!isFullySelected) {
onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll();
} else {
onDeselectAll === null || onDeselectAll === void 0 ? void 0 : onDeselectAll();
}
};
var onSelectAllGroupChange = function onSelectAllGroupChange(e, groupId) {
e.stopPropagation();
if (!isGroupFullySelected(groupId)) {
onSelectAllGroup === null || onSelectAllGroup === void 0 ? void 0 : onSelectAllGroup(groupId);
} else {
onDeselectAllGroup === null || onDeselectAllGroup === void 0 ? void 0 : onDeselectAllGroup(groupId);
}
};
var onMouseDown = function onMouseDown(e) {
e.preventDefault();
};
var updateNavigationPosition = function updateNavigationPosition(e) {
if (e.key === 'Tab' && e.nativeEvent.shiftKey) {
e.preventDefault();
return navigation.left(e);
}
switch (e.key) {
case 'ArrowDown':
case 'Down':
e.preventDefault();
return navigation.down(e);
case 'ArrowUp':
case 'Up':
e.preventDefault();
return navigation.up(e);
case 'ArrowLeft':
case 'Left':
e.preventDefault();
return navigation.left(e);
case 'Tab':
case 'ArrowRight':
case 'Right':
e.preventDefault();
return navigation.right(e);
default:
return -1;
}
};
var onKeyDown = function onKeyDown(e) {
if (!isGridFocused) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggle(items[navigation.index]);
} else {
var newPosition = updateNavigationPosition(e);
if (newPosition !== -1) {
gridInstance === null || gridInstance === void 0 ? void 0 : gridInstance.scrollToItem({
rowIndex: thumbnailNavigationIndexToRowIndexMap[newPosition]
});
}
}
};
React.useEffect(function () {
navigation.setIndicesRows(navigationIndicesRows);
}, [navigationIndicesRows, navigation]);
React.useEffect(function () {
// VariableSizeGrid caches offsets and measurements for each row index for performance purposes.
// Method below clears cached data and triggers recalucation when a new value of search filter recomposites grid structure.
gridInstance === null || gridInstance === void 0 ? void 0 : gridInstance.resetAfterRowIndex(0);
}, [items, gridInstance]);
return /*#__PURE__*/React.createElement(StyledThumbnailGrid, _extends({}, props, focusWithinProps, {
ref: mergeRefs(forwardRef, gridContainerRef),
"data-qa": qa === null || qa === void 0 ? void 0 : qa.grid,
tabIndex: 0,
onMouseDown: onMouseDown
}), /*#__PURE__*/React.createElement(InfiniteLoader, {
loadMoreItems: isFetching ? asyncNoop : loadMoreItems,
itemCount: rows.length,
isItemLoaded: function isItemLoaded(index) {
return index < rows.length - 1;
},
threshold: 0
}, function (_ref1) {
var _onItemsRendered = _ref1.onItemsRendered,
infiniteLoaderRef = _ref1.ref;
return /*#__PURE__*/React.createElement(StyledVariableSizeGrid, {
width: gridContainerWidth,
height: gridHeight,
rowCount: rows.length,
rowHeight: function rowHeight(index) {
return rowHeights[index];
},
columnCount: columnsCount,
columnWidth: function columnWidth() {
return _columnWidth;
},
innerElementType: GridInnerContainer,
overscanRowCount: 2,
onItemsRendered: function onItemsRendered(_ref10) {
var visibleRowStartIndex = _ref10.visibleRowStartIndex,
visibleRowStopIndex = _ref10.visibleRowStopIndex,
overscanRowStopIndex = _ref10.overscanRowStopIndex,
overscanRowStartIndex = _ref10.overscanRowStartIndex;
_onItemsRendered({
overscanStartIndex: overscanRowStartIndex,
overscanStopIndex: overscanRowStopIndex,
visibleStartIndex: visibleRowStartIndex,
visibleStopIndex: visibleRowStopIndex
});
},
ref: mergeRefs(gridRef, infiniteLoaderRef),
style: {
overflow: 'hidden'
}
}, function (_ref11) {
var _qa$thumbnail;
var columnIndex = _ref11.columnIndex,
rowIndex = _ref11.rowIndex,
style = _ref11.style;
var cellData = rows[rowIndex][columnIndex];
if (!cellData) return null;
if ('title' in cellData) {
var isGlobalTitle = rowIndex === 0;
var groupId = String(cellData === null || cellData === void 0 ? void 0 : cellData.groupId);
var dataQa = isGlobalTitle ? 'global-select-all' : "group-".concat(groupId, "-select-all");
var onChangeCallback = isGlobalTitle ? onSelectAllChange : function (e) {
return onSelectAllGroupChange(e, groupId);
};
var isChecked = isGlobalTitle ? isFullySelected || isPartiallySelected : isGroupPartiallySelected(groupId) || isGroupFullySelected(groupId);
var isIndeterminate = isGlobalTitle ? isPartiallySelected : isGroupPartiallySelected(groupId);
return /*#__PURE__*/React.createElement(GroupCell, {
style: style,
columnsCount: columnsCount
}, allowSelectAll ? /*#__PURE__*/React.createElement(StyledCheckbox, {
"data-qa": dataQa,
onChange: onChangeCallback,
checked: isChecked,
indeterminate: isIndeterminate
}, /*#__PURE__*/React.createElement(StyledGroupTitle, {
weight: "bold",
color: "gray15"
}, cellData.title)) : /*#__PURE__*/React.createElement(StyledGroupTitle, {
weight: "bold",
color: "gray15"
}, cellData.title));
}
if ('isFetching' in cellData) {
return /*#__PURE__*/React.createElement(GroupCell, {
style: style,
columnsCount: columnsCount
}, /*#__PURE__*/React.createElement(StyledSpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, null)));
}
var thumbnailNavigationIndex = getThumbnailNavigationIndex(rowIndex, columnIndex);
var isNavigationTarget = navigation.index === thumbnailNavigationIndex;
var isFocused = isGridFocused && isNavigationTarget;
var isSelected = isThumbnailSelected(cellData);
var isDisabled = disableSelection.value && !isSelected;
return /*#__PURE__*/React.createElement(ThumbnailCell, {
style: style
}, /*#__PURE__*/React.createElement(Tooltip, {
key: cellData.id,
trigger: isDisabled ? 'hover' : 'none',
overlay: disableSelection.tooltip,
showKeys: []
}, /*#__PURE__*/React.createElement(StyledThumbnail, {
"data-thumbnail": true,
"data-qa": qa === null || qa === void 0 ? void 0 : (_qa$thumbnail = qa.thumbnail) === null || _qa$thumbnail === void 0 ? void 0 : _qa$thumbnail.call(qa, cellData.id),
focused: isFocused,
selected: isSelected,
disabled: isDisabled,
caption: cellData.name,
src: cellData.src,
label: cellData.label,
hasCaptionPlaceholder: true,
role: 'checkbox',
value: String(thumbnailNavigationIndex),
onKeyDown: onKeyDown,
onChange: function onChange() {
toggle(cellData);
},
onClick: function onClick(_ref12) {
var _dataset;
var target = _ref12.target;
var isCaptionTooltipClick = (_dataset = target.dataset) === null || _dataset === void 0 ? void 0 : _dataset.captionTooltip;
if (isCaptionTooltipClick) return;
navigation.setIndex(thumbnailNavigationIndex);
toggle(cellData);
gridContainer === null || gridContainer === void 0 ? void 0 : gridContainer.focus();
}
})));
});
}));
});
//# sourceMappingURL=ThumbnailGrid.js.map