@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
151 lines (150 loc) • 9.53 kB
JavaScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeViewTextItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const checkbox_1 = require("../checkbox");
const clean_icon_button_1 = require("../clean-icon-button");
const conditional_wrap_1 = require("../conditional-wrap");
const icons_1 = require("../icons");
const skeleton_1 = require("../skeleton");
const typography_1 = require("../typography");
const TreeItemWrapper_1 = require("./TreeItemWrapper");
/**
* checks if any parent is checked
* @param item
* @param items
* @returns
*/
const parentIsCheckedRecursively = (item, items) => {
const parent = items.find((i) => i.id === item.parentId);
if (parent) {
if (parent.isSelected) {
return true;
}
return parentIsCheckedRecursively(parent, items);
}
return false;
};
/**
* checks if any children are checked
* @param item
* @param items
* @returns
*/
const childrenCheckedRecursively = (item, items) => {
const children = items.filter((i) => i.parentId === item.id);
if (children.length === 0) {
return false;
}
return children.some((i) => i.isSelected || childrenCheckedRecursively(i, items));
};
const TreeViewTextItem = (_a) => {
var { depth, shouldDisableInteraction, shouldDisableSorting, isGhost, indentationWidth, isIndicator, isCollapsed, onCollapse, item, parent, isOver, isOverParent, setNodeRef, setActivatorNodeRef, dragHandleProps, style, trails, onItemsChanged, items, tabIndex, ref } = _a, restProps = __rest(_a, ["depth", "shouldDisableInteraction", "shouldDisableSorting", "isGhost", "indentationWidth", "isIndicator", "isCollapsed", "onCollapse", "item", "parent", "isOver", "isOverParent", "setNodeRef", "setActivatorNodeRef", "dragHandleProps", "style", "trails", "onItemsChanged", "items", "tabIndex", "ref"]);
const isAnyParentChecked = parentIsCheckedRecursively(item, items);
const isAnyChildChecked = childrenCheckedRecursively(item, items);
const isIndeterminate = isAnyChildChecked === true &&
isAnyParentChecked === false &&
item.isSelected === false
? true
: false;
return ((0, jsx_runtime_1.jsxs)(TreeItemWrapper_1.TreeItemWrapper, Object.assign({ depth: depth, shouldDisableInteraction: shouldDisableInteraction, shouldDisableSorting: shouldDisableSorting, isGhost: isGhost, indentationWidth: indentationWidth, isIndicator: isIndicator, isCollapsed: isCollapsed, onCollapse: onCollapse, item: item, parent: parent, isOver: isOver, isOverParent: isOverParent, setNodeRef: setNodeRef, setActivatorNodeRef: setActivatorNodeRef, dragHandleProps: dragHandleProps, style: style, trails: trails,
// eslint-disable-next-line @typescript-eslint/no-empty-function
onItemsChanged: () => { }, ref: ref, items: items, tabIndex: tabIndex }, restProps, { children: [item.canHaveSubItems && onCollapse && ((0, jsx_runtime_1.jsxs)("button", { className: "ndl-tree-view-collapse-button", onClick: () => onCollapse(), "aria-label": item.isCollapsed ? 'Expand' : 'Collapse', "aria-expanded": item.isCollapsed ? 'false' : 'true', "aria-pressed": !item.isCollapsed,
/**
* Tab index is set to -1 to prevent the item from being focused when the tree is navigated with tab
* since we use the arrow keys instead
*/
tabIndex: tabIndex, children: [item.isCollapsed && (0, jsx_runtime_1.jsx)(icons_1.ChevronRightIconOutline, { className: "ndl-icon" }), !item.isCollapsed && (0, jsx_runtime_1.jsx)(icons_1.ChevronDownIconOutline, { className: "ndl-icon" })] })), item.isSelected !== undefined && ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular" }, item.skeletonProps, { isLoading: item.isSkeletonLoading, children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { isIndeterminate: isIndeterminate, isChecked: item.isSelected, ariaLabel: item.data.text, htmlAttributes: {
tabIndex,
}, onChange: (event) => {
const newItems = items.map((i) => {
if (i.id === item.id) {
return Object.assign(Object.assign({}, i), { isSelected: event.target.checked });
}
return i;
});
// Uncheck parents if a child is unchecked
if (!event.target.checked) {
let parentId = item.parentId;
while (parentId !== null) {
const parent = newItems.find((newItem) => newItem.id === parentId);
if (parent) {
newItems.forEach((newItem) => {
if (newItem.id === parent.id) {
newItem.isSelected = false;
}
});
parentId = parent.parentId;
}
else {
parentId = null;
}
}
}
// Check children if a parent is checked
if (item.canHaveSubItems) {
const childIdsToUncheck = items
.filter((i) => i.parentId === item.id)
.map((i) => i.id);
while (childIdsToUncheck.length > 0) {
const childId = childIdsToUncheck.pop();
const child = items.find((i) => i.id === childId);
if (child) {
newItems.forEach((newItem) => {
if (newItem.id === child.id) {
newItem.isSelected = event.target.checked;
}
});
newItems
.filter((i) => i.parentId === child.id)
.forEach((i) => {
childIdsToUncheck.push(i.id);
});
}
}
}
onItemsChanged(newItems, { item, reason: 'selected' });
}, "aria-label": item.data.text }) }))), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, Object.assign({ onBackground: "weak", shape: "rectangular", height: "20px" }, item.skeletonProps, { isLoading: item.isSkeletonLoading, children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: item.data.onTextClick !== undefined, wrap: (children) => ((0, jsx_runtime_1.jsx)("button", { onClick: item.data.onTextClick, className: "ndl-tree-view-text-clickable", tabIndex: tabIndex, children: children })), children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: item.canHaveSubItems ? 'subheading-small' : 'body-medium', htmlAttributes: {
style: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
}, children: item.data.text }) }) })), (0, jsx_runtime_1.jsx)("div", { className: "ndl-tree-view-actions", children: item.data.actions &&
item.data.actions.map((action, index) => {
return ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, Object.assign({ className: "ndl-tree-view-action", size: "small" }, action.buttonProps, { htmlAttributes: Object.assign({ tabIndex }, action.buttonProps.htmlAttributes), children: action.icon }), index));
}) })] })));
};
exports.TreeViewTextItem = TreeViewTextItem;
//# sourceMappingURL=TreeViewTextItem.js.map