@itwin/core-react
Version:
A react component library of iTwin.js UI general purpose components
88 lines • 4.78 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Tree
*/
import "./Node.scss";
import classnames from "classnames";
import * as React from "react";
import { Checkbox, ProgressRadial } from "@itwin/itwinui-react";
import { CheckBoxState } from "../enums/CheckBoxState.js";
import { ExpansionToggle } from "./ExpansionToggle.js";
/** Number of pixels the node gets offset per each hierarchy level
* @internal
*/
export const LEVEL_OFFSET = 20;
const EXPANSION_TOGGLE_WIDTH = 24;
/** Presentation React component for a Tree node
* @public
* @deprecated in 4.15.0. Use {@link https://itwinui.bentley.com/docs/tree iTwinUI Tree} instead.
*/
export class TreeNode extends React.Component {
constructor(props) {
super(props);
this._onCheckboxChange = (checked) => {
if (this.props.checkboxProps &&
this.props.checkboxProps.onClick &&
!this.props.checkboxProps.isDisabled)
this.props.checkboxProps.onClick(checked ? CheckBoxState.On : CheckBoxState.Off);
};
this._onCheckboxClick = (e) => {
e.stopPropagation();
};
this._onClickExpansionToggle = (e) => {
e.stopPropagation();
if (this.props.onClickExpansionToggle)
this.props.onClickExpansionToggle();
};
this._onClick = (e) => {
e.stopPropagation();
this.props.onClick?.(e);
};
}
render() {
const className = classnames("core-tree-node", this.props.isFocused && "is-focused", this.props.isSelected && "is-selected", this.props.isHoverDisabled && "is-hover-disabled", this.props.className);
let offset = this.props.level * LEVEL_OFFSET;
if (!this.props.isLoading && this.props.isLeaf)
offset += EXPANSION_TOGGLE_WIDTH; // Add expansion toggle/loader width if they're not rendered
let checkbox;
if (this.props.checkboxProps) {
const props = {
label: "",
checked: this.props.checkboxProps.state === CheckBoxState.On,
indeterminate: this.props.checkboxProps.state === CheckBoxState.Partial,
disabled: this.props.checkboxProps.isDisabled,
title: this.props.checkboxProps.tooltip,
onClick: this._onCheckboxClick,
onChange: this._onCheckboxChange,
};
if (this.props.renderOverrides &&
this.props.renderOverrides.renderCheckbox) {
checkbox = this.props.renderOverrides.renderCheckbox(props);
}
else {
checkbox = (React.createElement(Checkbox, { ...props, onChange: (e) => this._onCheckboxChange(e.target.checked), "data-testid": this.createSubComponentTestId("checkbox") }));
}
}
const icon = this.props.icon ? (React.createElement("div", { className: "core-tree-node-icon" }, this.props.icon)) : undefined;
const toggle = this.props.isLoading ? undefined : this.props.isLeaf ? (React.createElement("div", null)) : (React.createElement(ExpansionToggle, { className: "expansion-toggle", "data-testid": this.createSubComponentTestId("expansion-toggle"), onClick: this._onClickExpansionToggle, isExpanded: this.props.isExpanded }));
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
React.createElement("div", { className: className, style: this.props.style, "data-testid": this.props["data-testid"], onClick: this._onClick, onContextMenu: this.props.onContextMenu, onMouseDown: this.props.onMouseDown, onMouseUp: this.props.onMouseUp, onMouseMove: this.props.onMouseMove, role: "treeitem", "aria-selected": this.props.isSelected ? "true" : "false", tabIndex: -1 },
React.createElement("div", { className: "contents", style: { marginLeft: offset }, "data-testid": this.createSubComponentTestId("contents") },
this.props.isLoading && (React.createElement(ProgressRadial, { size: "x-small", indeterminate: true, className: "core-progress-indicator" })),
toggle,
checkbox,
icon,
this.props.label),
this.props.children));
}
createSubComponentTestId(subId) {
if (!this.props["data-testid"])
return undefined;
return `${this.props["data-testid"]}-${subId}`;
}
}
//# sourceMappingURL=Node.js.map