UNPKG

2.83 kBJavaScriptView Raw
1import { __rest } from "tslib";
2import * as React from 'react';
3import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
4import { css } from '@patternfly/react-styles';
5import { getUniqueId } from '../../helpers';
6import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
7import { Button, ButtonVariant } from '../Button';
8import { DualListSelectorListContext } from './DualListSelectorContext';
9export const DualListSelectorListItemBase = (_a) => {
10 var { onOptionSelect, orderIndex, children, className, id = getUniqueId('dual-list-selector-list-item'), isSelected, innerRef, isDraggable = false, isDisabled,
11 // eslint-disable-next-line @typescript-eslint/no-unused-vars
12 draggableButtonAriaLabel = 'Reorder option' } = _a, props = __rest(_a, ["onOptionSelect", "orderIndex", "children", "className", "id", "isSelected", "innerRef", "isDraggable", "isDisabled", "draggableButtonAriaLabel"]);
13 const ref = innerRef || React.useRef(null);
14 const { setFocusedOption } = React.useContext(DualListSelectorListContext);
15 return (React.createElement("li", Object.assign({ className: css(styles.dualListSelectorListItem, className, isDisabled && styles.modifiers.disabled), key: orderIndex, onClick: isDisabled
16 ? undefined
17 : (e) => {
18 setFocusedOption(id);
19 onOptionSelect(e, id);
20 }, onKeyDown: (e) => {
21 if (e.key === ' ' || e.key === 'Enter') {
22 document.activeElement.click();
23 e.preventDefault();
24 }
25 }, "aria-selected": isSelected, id: id, ref: ref, role: "option", tabIndex: -1 }, props),
26 React.createElement("div", { className: css(styles.dualListSelectorListItemRow, isSelected && styles.modifiers.selected) },
27 isDraggable && !isDisabled && (React.createElement("div", { className: css(styles.dualListSelectorDraggable) },
28 React.createElement(Button, { variant: ButtonVariant.plain, component: "span" },
29 React.createElement(GripVerticalIcon, { style: { verticalAlign: '-0.3em' } })))),
30 React.createElement("span", { className: css(styles.dualListSelectorItem) },
31 React.createElement("span", { className: css(styles.dualListSelectorItemMain) },
32 React.createElement("span", { className: css(styles.dualListSelectorItemText) }, children))))));
33};
34DualListSelectorListItemBase.displayName = 'DualListSelectorListItemBase';
35export const DualListSelectorListItem = React.forwardRef((props, ref) => (React.createElement(DualListSelectorListItemBase, Object.assign({ innerRef: ref }, props))));
36DualListSelectorListItem.displayName = 'DualListSelectorListItem';
37//# sourceMappingURL=DualListSelectorListItem.js.map
\No newline at end of file