react-lightning-design-system/module/scripts/TreeNode.js

Salesforce Lightning Design System components built with React

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "label", "icon", "loading", "selected", "leaf", "opened", "level", "children", "itemRender", "onClick", "onToggle", "onLabelClick"],
  _excluded2 = ["defaultOpened", "opened", "leaf", "selected", "disabled", "children", "onClick", "onToggle", "onLabelClick"];
import React, { createContext, useContext } from 'react';
import classnames from 'classnames';
import { Button } from './Button';
import { Spinner } from './Spinner';
import { useControlledValue, useEventCallback } from './hooks';
import { TreeContext } from './Tree';

/**
 *
 */
var TreeNodeLevelContext = /*#__PURE__*/createContext(1);

/**
 *
 */

/**
 *
 */
var TreeNodeItem = function TreeNodeItem(props) {
  var className = props.className,
    label = props.label,
    _props$icon = props.icon,
    icon = _props$icon === void 0 ? 'chevronright' : _props$icon,
    loading = props.loading,
    selected = props.selected,
    leaf = props.leaf,
    opened = props.opened,
    _props$level = props.level,
    level = _props$level === void 0 ? 0 : _props$level,
    children = props.children,
    ItemRender = props.itemRender,
    onClick = props.onClick,
    onToggle = props.onToggle,
    onLabelClick = props.onLabelClick,
    rprops = _objectWithoutProperties(props, _excluded);
  var itmClassNames = classnames(className, 'slds-tree__item', {
    'slds-is-open': opened,
    'slds-is-selected': selected
  });
  var spinnerClassNames = classnames('react-slds-spinner', 'slds-m-right_x-small');
  var loadingPositionStyle = {
    left: "".concat(level, "rem")
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    className: itmClassNames,
    onClick: onClick,
    style: {
      position: 'relative'
    }
  }, rprops), loading && /*#__PURE__*/React.createElement(Spinner, {
    className: spinnerClassNames,
    container: false,
    size: "small",
    style: loadingPositionStyle
  }), !leaf ? /*#__PURE__*/React.createElement(Button, {
    className: "slds-m-right_x-small",
    "aria-controls": "",
    type: "icon",
    icon: icon,
    iconSize: "small",
    onClick: onToggle
    // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
    ,
    style: loading ? {
      opacity: 0,
      pointerEvents: 'none'
    } : undefined
  }) : null, /*#__PURE__*/React.createElement("span", {
    className: "slds-has-flexi-truncate"
  }, /*#__PURE__*/React.createElement("a", {
    className: "slds-tree__item-label slds-truncate",
    onClick: onLabelClick,
    title: typeof label === 'string' ? label : undefined
  }, ItemRender ? /*#__PURE__*/React.createElement(ItemRender, props) : label)), leaf ? children : null);
};

/**
 *
 */
export var TreeNode = function TreeNode(props) {
  var defaultOpened = props.defaultOpened,
    opened_ = props.opened,
    leaf = props.leaf,
    selected = props.selected,
    disabled = props.disabled,
    children = props.children,
    onClick_ = props.onClick,
    onToggle_ = props.onToggle,
    onLabelClick_ = props.onLabelClick,
    rprops = _objectWithoutProperties(props, _excluded2);
  var _useContext = useContext(TreeContext),
    toggleOnNodeClick = _useContext.toggleOnNodeClick,
    onNodeClick = _useContext.onNodeClick,
    onNodeLabelClick = _useContext.onNodeLabelClick,
    onNodeToggle = _useContext.onNodeToggle;
  var level = useContext(TreeNodeLevelContext);
  var _useControlledValue = useControlledValue(opened_, defaultOpened !== null && defaultOpened !== void 0 ? defaultOpened : false),
    _useControlledValue2 = _slicedToArray(_useControlledValue, 2),
    opened = _useControlledValue2[0],
    setOpened = _useControlledValue2[1];
  var onToggle = useEventCallback(function (e) {
    onToggle_ === null || onToggle_ === void 0 || onToggle_(e);
    onNodeToggle === null || onNodeToggle === void 0 || onNodeToggle(e, props);
    setOpened(function (opened) {
      return !opened;
    });
  });
  var onLabelClick = useEventCallback(function (e) {
    onLabelClick_ === null || onLabelClick_ === void 0 || onLabelClick_(e);
    onNodeLabelClick === null || onNodeLabelClick === void 0 || onNodeLabelClick(e, props);
  });
  var onClick = useEventCallback(function (e) {
    onClick_ === null || onClick_ === void 0 || onClick_(e);
    onNodeClick === null || onNodeClick === void 0 || onNodeClick(e, props);
    if (toggleOnNodeClick) {
      onToggle(e);
    }
  });
  var grpClassNames = classnames('slds-tree__group', {
    'slds-nested': !leaf,
    'is-expanded': opened,
    'slds-show': opened,
    'slds-hide': !opened
  });
  var labelText = typeof rprops.label === 'string' ? rprops.label : 'Tree Branch';
  var ariaLabel = !leaf ? labelText : undefined;
  return /*#__PURE__*/React.createElement("li", {
    role: "treeitem",
    "aria-level": level,
    "aria-expanded": !leaf ? opened : undefined,
    "aria-label": ariaLabel,
    "aria-selected": selected || undefined,
    "aria-disabled": disabled || undefined
  }, /*#__PURE__*/React.createElement(TreeNodeItem, _extends({}, rprops, {
    leaf: leaf,
    opened: opened,
    level: level,
    selected: selected,
    disabled: disabled,
    children: children,
    onClick: onClick,
    onLabelClick: onLabelClick,
    onToggle: onToggle
  })), !leaf ? /*#__PURE__*/React.createElement("ul", {
    className: grpClassNames,
    role: "group"
  }, /*#__PURE__*/React.createElement(TreeNodeLevelContext.Provider, {
    value: level + 1
  }, children)) : undefined);
};
//# sourceMappingURL=TreeNode.js.map