@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
47 lines (46 loc) • 2.78 kB
JavaScript
import { __assign, __rest } from "tslib";
import clsx from 'clsx';
import React from 'react';
import { KeyCode } from '../../internal/keycode';
import { useUniqueId } from '../../internal/hooks/use-unique-id';
import Checkbox from '../../checkbox/internal';
import RadioButton from '../../radio-group/radio-button';
import styles from './styles.css.js';
export default function SelectionControl(_a) {
var selectionType = _a.selectionType, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, className = _a.className, onShiftToggle = _a.onShiftToggle, onFocusUp = _a.onFocusUp, onFocusDown = _a.onFocusDown, name = _a.name, scope = _a.scope, ariaLabel = _a.ariaLabel, _c = _a.rootTag, RootTag = _c === void 0 ? 'td' : _c, sharedProps = __rest(_a, ["selectionType", "indeterminate", "className", "onShiftToggle", "onFocusUp", "onFocusDown", "name", "scope", "ariaLabel", "rootTag"]);
var controlId = useUniqueId();
var isMultiSelection = selectionType === 'multi';
var setShiftState = function (event) {
if (isMultiSelection) {
onShiftToggle && onShiftToggle(event.shiftKey);
}
};
var onMouseDownHandler = function (event) {
setShiftState(event);
if (isMultiSelection) {
event.preventDefault();
}
};
var handleKeyDown = function (event) {
setShiftState(event);
if (isMultiSelection) {
if (event.keyCode === KeyCode.up) {
event.preventDefault();
onFocusUp && onFocusUp(event);
}
if (event.keyCode === KeyCode.down) {
event.preventDefault();
onFocusDown && onFocusDown(event);
}
}
};
var handleClick = function (event) {
var target = event.currentTarget;
var nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input'));
nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.focus();
};
var selector = isMultiSelection ? (React.createElement(Checkbox, __assign({}, sharedProps, { controlId: controlId, withoutLabel: true, indeterminate: indeterminate }))) : (React.createElement(RadioButton, __assign({}, sharedProps, { controlId: controlId, withoutLabel: true, name: name, value: '', label: '' })));
return (React.createElement(RootTag, { className: clsx(styles.root, className), onKeyDown: handleKeyDown, onKeyUp: setShiftState, onMouseDown: onMouseDownHandler, onMouseUp: setShiftState, onClick: handleClick, scope: scope },
React.createElement("label", { htmlFor: controlId, className: styles.label, "aria-label": ariaLabel }, selector),
React.createElement("span", { className: clsx(styles.stud), "aria-hidden": true }, "\u00A0")));
}