@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
175 lines (174 loc) • 8.21 kB
JavaScript
var _a, _b, _c;
import { __spreadArrays } from "tslib";
import { useState } from 'react';
import { fireNonCancelableEvent } from '../internal/events';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { findUpUntil } from '../internal/utils/dom';
import { getTrackableValue } from './utils';
import selectionStyles from './selection-control/styles.css.js';
var SELECTION_ITEM = 'selection-item';
var SELECTION_ROOT = 'selection-root';
function findSelectionControlByIndex(rootContainer, index) {
if (index === -1) {
return rootContainer.querySelector("[data-" + SELECTION_ITEM + "=\"all\"] ." + selectionStyles.root + " input");
}
return rootContainer.querySelectorAll("[data-" + SELECTION_ITEM + "=\"item\"] ." + selectionStyles.root + " input")[index];
}
function findRootContainer(element) {
return findUpUntil(element, function (node) { return node.dataset.selectionRoot === 'true'; });
}
export function useFocusMove(selectionType, totalItems) {
if (selectionType !== 'multi') {
return {};
}
function moveFocus(sourceElement, fromIndex, direction) {
var index = fromIndex;
var rootContainer = findRootContainer(sourceElement);
while (index >= -1 && index < totalItems) {
index += direction;
var control = findSelectionControlByIndex(rootContainer, index);
if (control && !control.disabled) {
control.focus();
break;
}
}
}
var _a = [1, -1].map(function (direction) {
return function (event) {
var target = event.currentTarget;
var itemNode = findUpUntil(target, function (node) { return node.dataset.selectionItem === 'item'; });
var fromIndex = Array.prototype.indexOf.call(itemNode.parentElement.children, itemNode);
moveFocus(target, fromIndex, direction);
};
}), moveFocusDown = _a[0], moveFocusUp = _a[1];
return {
moveFocusDown: moveFocusDown,
moveFocusUp: moveFocusUp,
moveFocus: moveFocus
};
}
var ItemSet = (function () {
function ItemSet(trackBy, items) {
var _this = this;
this.map = new Map();
this.put = function (item) { return _this.map.set.call(_this.map, getTrackableValue(_this.trackBy, item), item); };
this.has = function (item) { return _this.map.has.call(_this.map, getTrackableValue(_this.trackBy, item)); };
this.forEach = this.map.forEach.bind(this.map);
this.trackBy = trackBy;
items.forEach(this.put);
}
return ItemSet;
}());
export var focusMarkers = {
item: (_a = {}, _a['data-' + SELECTION_ITEM] = 'item', _a),
all: (_b = {}, _b['data-' + SELECTION_ITEM] = 'all', _b),
root: (_c = {}, _c['data-' + SELECTION_ROOT] = 'true', _c)
};
export function useSelection(_a) {
var items = _a.items, _b = _a.selectedItems, selectedItems = _b === void 0 ? [] : _b, selectionType = _a.selectionType, _c = _a.isItemDisabled, isItemDisabled = _c === void 0 ? function () { return false; } : _c, trackBy = _a.trackBy, onSelectionChange = _a.onSelectionChange, ariaLabels = _a.ariaLabels;
var _d = useState(false), shiftPressed = _d[0], setShiftPressed = _d[1];
var _e = useState(null), lastClickedItem = _e[0], setLastClickedItem = _e[1];
var selectionName = useUniqueId();
var finalSelectedItems = selectionType === 'single' ? selectedItems.slice(0, 1) : selectedItems;
var selectedSet = new ItemSet(trackBy, finalSelectedItems);
var itemIndexesMap = new Map(items.map(function (item, i) { return [getTrackableValue(trackBy, item), i]; }));
var isItemSelected = selectedSet.has.bind(selectedSet);
var getItemState = function (item) { return ({
disabled: isItemDisabled(item),
selected: isItemSelected(item)
}); };
var _f = selectionType
? items.reduce(function (_a, item) {
var allDisabled = _a[0], allEnabledSelected = _a[1], hasSelected = _a[2];
var _b = getItemState(item), disabled = _b.disabled, selected = _b.selected;
return [
allDisabled && disabled,
allEnabledSelected && (selected || disabled),
hasSelected || selected
];
}, [true, true, false])
: [true, true, false], allDisabled = _f[0], allEnabledSelected = _f[1], hasSelected = _f[2];
var handleToggleAll = function () {
var requestedItems = new ItemSet(trackBy, items);
var newSelectedItems = allEnabledSelected ? deselectItems(requestedItems) : selectItems(requestedItems);
fireNonCancelableEvent(onSelectionChange, { selectedItems: newSelectedItems });
};
var getRequestedItems = function (item) {
var requestedItems = new ItemSet(trackBy, [item]);
var lastClickedItemIndex = lastClickedItem ? itemIndexesMap.get(getTrackableValue(trackBy, lastClickedItem)) : -1;
if (lastClickedItemIndex === undefined) {
lastClickedItemIndex = -1;
}
if (shiftPressed && lastClickedItemIndex !== -1) {
var currentItemIndex = itemIndexesMap.get(getTrackableValue(trackBy, item));
var start = Math.min(currentItemIndex, lastClickedItemIndex);
var end = Math.max(currentItemIndex, lastClickedItemIndex);
items.slice(start, end + 1).forEach(function (item) { return requestedItems.put(item); });
}
return requestedItems;
};
var deselectItems = function (requestedItems) {
var newSelectedItems = [];
selectedItems.forEach(function (selectedItem) {
var toUnselect = requestedItems.has(selectedItem);
if (!toUnselect || isItemDisabled(selectedItem)) {
newSelectedItems.push(selectedItem);
}
});
return newSelectedItems;
};
var selectItems = function (requestedItems) {
var newSelectedItems = __spreadArrays(selectedItems);
requestedItems.forEach(function (newItem) {
var _a = getItemState(newItem), selected = _a.selected, disabled = _a.disabled;
if (!selected && !disabled) {
newSelectedItems.push(newItem);
}
});
return newSelectedItems;
};
var handleToggleItem = function (item) { return function () {
var _a = getItemState(item), disabled = _a.disabled, selected = _a.selected;
if (disabled || (selectionType === 'single' && selected)) {
return;
}
if (selectionType === 'single') {
fireNonCancelableEvent(onSelectionChange, { selectedItems: [item] });
}
else {
var requestedItems = getRequestedItems(item);
var selectedItems_1 = selected ? deselectItems(requestedItems) : selectItems(requestedItems);
fireNonCancelableEvent(onSelectionChange, { selectedItems: selectedItems_1 });
setLastClickedItem(item);
}
}; };
var getRowLabel = function (item) {
return ariaLabels && ariaLabels.selectionGroupLabel + ' ' + ariaLabels.itemSelectionLabel({ selectedItems: selectedItems }, item);
};
return {
isItemSelected: isItemSelected,
selectAllProps: {
name: selectionName,
disabled: allDisabled,
selectionType: selectionType,
indeterminate: hasSelected && !allEnabledSelected,
checked: hasSelected && allEnabledSelected,
onChange: handleToggleAll,
ariaLabel: ariaLabels &&
ariaLabels.selectionGroupLabel +
' ' +
(ariaLabels.allItemsSelectionLabel && ariaLabels.allItemsSelectionLabel({ selectedItems: selectedItems }))
},
getItemSelectionProps: function (item) { return ({
name: selectionName,
selectionType: selectionType,
ariaLabel: getRowLabel(item),
onChange: handleToggleItem(item),
checked: isItemSelected(item),
disabled: isItemDisabled(item)
}); },
updateShiftToggle: function (value) {
setShiftPressed(value);
}
};
}