azure-devops-ui/Components/TreeEx/FixedHeightTree.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import "./Tree.css";
import "./TreeExpand.css";
import * as React from "react";
import { FixedHeightList } from '../../List';
import { UncheckedObserver } from '../../Observer';
export class FixedHeightTree extends React.Component {
    constructor() {
        super(...arguments);
        this.list = React.createRef();
        this.onActivateExpand = (event, tableRow) => {
            if (!event.defaultPrevented && tableRow.data.underlyingItem.childItems) {
                this.props.onToggle && this.props.onToggle(event, tableRow.data);
                event.preventDefault();
            }
        };
        this.renderRow = (rowIndex, item, details) => {
            if (!this.props.renderRow || !details.data) {
                return React.createElement("div", null);
            }
            const rowDetails = {
                ariaRowOffset: details.ariaRowOffset,
                eventDispatch: details.eventDispatch,
                data: details.data,
                itemProvider: this.props.itemProvider,
                listProps: details.listProps,
                onFocusItem: details.onFocusItem
            };
            return (React.createElement(UncheckedObserver, { data: item.underlyingItem.data }, (props) => {
                if (props.data) {
                    // We need to forward the onToggle handler to the treeItemEx before it is rendered.
                    item.onToggle = item.underlyingItem.childItems ? this.props.onToggle : undefined;
                    // First determine if the item supplied a custom row rendering function, if not
                    // attempt to use the global row rendering function.
                    const renderRow = item.underlyingItem.data.renderRow || this.props.renderRow;
                    return renderRow(rowIndex, item, rowDetails);
                }
                else {
                    const { renderLoadingRow } = this.props;
                    // If a custom row loading animation is available use it.
                    if (renderLoadingRow) {
                        return renderLoadingRow(rowIndex, rowDetails);
                    }
                    // Return the default row loading animation.
                    return (React.createElement("div", { className: "bolt-list-row-loading" },
                        React.createElement("div", { className: "shimmer shimmer-line", style: { width: Math.random() * 80 + 20 + "%" } }, "\u00A0")));
                }
            }));
        };
    }
    render() {
        const { role = "tree" } = this.props;
        return (React.createElement(FixedHeightList, { className: this.props.className, eventDispatch: this.props.eventDispatch, focuszoneProps: this.props.focuszoneProps, id: this.props.id, itemProvider: this.props.itemProvider, maxHeight: this.props.maxHeight, onActivate: this.onActivateExpand, onFocus: this.props.onFocus, onSelect: this.props.onSelect, pageSize: this.props.pageSize, renderRow: this.renderRow, role: role, rowHeight: this.props.rowHeight, ref: this.list, selection: this.props.selection, singleClickActivation: this.props.singleClickActivation || true, width: this.props.width || "100%" }));
    }
    getFocusIndex() {
        if (this.list.current) {
            return this.list.current.getFocusIndex();
        }
        return -1;
    }
    getStats() {
        if (this.list.current) {
            return this.list.current.getStats();
        }
        return {
            firstMaterialized: -1,
            lastMaterialized: -1
        };
    }
    scrollIntoView(rowIndex, options) {
        if (this.list.current) {
            return this.list.current.scrollIntoView(rowIndex, options);
        }
    }
}