azure-devops-ui/Components/TreeEx/TreeExpand.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 { Icon, IconSize } from '../../Icon';
import { css } from '../../Util';
const defaultCollapsedProps = { iconName: "ChevronRightMed" };
const defaultExpandedProps = { iconName: "ChevronDownMed" };
export class TreeExpand extends React.Component {
    constructor() {
        super(...arguments);
        this.onClick = (event) => {
            var _a, _b;
            if (!event.defaultPrevented) {
                // Only toggle on a lone left button, not when mixed with others.
                // IPhone doesnt pass buttons so we will take 0 as a click.
                if (event.buttons === 1 || event.buttons === 0) {
                    if (this.props.onToggle) {
                        this.props.onToggle(event);
                        event.preventDefault();
                    }
                }
            }
            (_b = (_a = this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
        };
    }
    render() {
        const { children, className, depth, expanded, iconCollapsedProps = defaultCollapsedProps, iconExpandedProps = defaultExpandedProps, indentationSize = 16 } = this.props;
        const iconProps = expanded ? iconExpandedProps : iconCollapsedProps;
        return (React.createElement(React.Fragment, null,
            React.createElement(Icon, Object.assign({}, iconProps, { className: css(className, "bolt-tree-expand-button font-size cursor-pointer", !this.props.onToggle && "invisible"), onClick: this.onClick, role: "presentation", size: IconSize.small, style: { marginLeft: depth > 0 ? depth * indentationSize + "px" : undefined } })),
            children));
    }
}