UNPKG

5.12 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 { Badge } from '../Badge';
6import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
7import { flattenTree } from './treeUtils';
8import { DualListSelectorListContext } from './DualListSelectorContext';
9const DualListSelectorTreeItemBase = (_a) => {
10 var { onOptionCheck, children, className, id, text, defaultExpanded, hasBadge, isChecked, checkProps, badgeProps, itemData, isDisabled = false,
11 // eslint-disable-next-line @typescript-eslint/no-unused-vars
12 useMemo } = _a, props = __rest(_a, ["onOptionCheck", "children", "className", "id", "text", "defaultExpanded", "hasBadge", "isChecked", "checkProps", "badgeProps", "itemData", "isDisabled", "useMemo"]);
13 const ref = React.useRef(null);
14 const [isExpanded, setIsExpanded] = React.useState(defaultExpanded || false);
15 const { setFocusedOption } = React.useContext(DualListSelectorListContext);
16 React.useEffect(() => {
17 setIsExpanded(defaultExpanded);
18 }, [defaultExpanded]);
19 return (React.createElement("li", Object.assign({ className: css(styles.dualListSelectorListItem, className, children && styles.modifiers.expandable, isExpanded && styles.modifiers.expanded, isDisabled && styles.modifiers.disabled), id: id }, props, { "aria-selected": isChecked, role: "treeitem" }, (isExpanded && { 'aria-expanded': 'true' })),
20 React.createElement("div", { className: css(styles.dualListSelectorListItemRow, isChecked && styles.modifiers.selected, styles.modifiers.check) },
21 React.createElement("div", { className: css(styles.dualListSelectorItem), ref: ref, tabIndex: -1, onClick: isDisabled
22 ? undefined
23 : evt => {
24 onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
25 setFocusedOption(id);
26 } },
27 React.createElement("span", { className: css(styles.dualListSelectorItemMain) },
28 children && (React.createElement("div", { className: css(styles.dualListSelectorItemToggle), onClick: e => {
29 if (children) {
30 setIsExpanded(!isExpanded);
31 }
32 e.stopPropagation();
33 }, onKeyDown: (e) => {
34 if (e.key === ' ' || e.key === 'Enter') {
35 document.activeElement.click();
36 e.preventDefault();
37 }
38 }, tabIndex: -1 },
39 React.createElement("span", { className: css(styles.dualListSelectorItemToggleIcon) },
40 React.createElement(AngleRightIcon, { "aria-hidden": true })))),
41 React.createElement("span", { className: css(styles.dualListSelectorItemCheck) },
42 React.createElement("input", Object.assign({ type: "checkbox", onChange: (evt) => {
43 onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
44 setFocusedOption(id);
45 }, onClick: (evt) => evt.stopPropagation(), onKeyDown: (e) => {
46 if (e.key === ' ' || e.key === 'Enter') {
47 onOptionCheck && onOptionCheck(e, !isChecked, itemData);
48 setFocusedOption(id);
49 e.preventDefault();
50 }
51 }, ref: elem => elem && (elem.indeterminate = isChecked === null), checked: isChecked || false, tabIndex: -1 }, checkProps))),
52 React.createElement("span", { className: css(styles.dualListSelectorItemText) }, text),
53 hasBadge && children && (React.createElement("span", { className: css(styles.dualListSelectorItemCount) },
54 React.createElement(Badge, Object.assign({}, badgeProps), flattenTree(children.props.data).length)))))),
55 isExpanded && children));
56};
57export const DualListSelectorTreeItem = React.memo(DualListSelectorTreeItemBase, (prevProps, nextProps) => {
58 if (!nextProps.useMemo) {
59 return false;
60 }
61 if (prevProps.className !== nextProps.className ||
62 prevProps.text !== nextProps.text ||
63 prevProps.id !== nextProps.id ||
64 prevProps.defaultExpanded !== nextProps.defaultExpanded ||
65 prevProps.checkProps !== nextProps.checkProps ||
66 prevProps.hasBadge !== nextProps.hasBadge ||
67 prevProps.badgeProps !== nextProps.badgeProps ||
68 prevProps.isChecked !== nextProps.isChecked ||
69 prevProps.itemData !== nextProps.itemData) {
70 return false;
71 }
72 return true;
73});
74DualListSelectorTreeItem.displayName = 'DualListSelectorTreeItem';
75//# sourceMappingURL=DualListSelectorTreeItem.js.map
\No newline at end of file