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

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TreeNode = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Button = require("./Button");
var _Spinner = require("./Spinner");
var _hooks = require("./hooks");
var _Tree = require("./Tree");
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"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
 *
 */
var TreeNodeLevelContext = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var itmClassNames = (0, _classnames["default"])(className, 'slds-tree__item', {
    'slds-is-open': opened,
    'slds-is-selected': selected
  });
  var spinnerClassNames = (0, _classnames["default"])('react-slds-spinner', 'slds-m-right_x-small');
  var loadingPositionStyle = {
    left: "".concat(level, "rem")
  };
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    className: itmClassNames,
    onClick: onClick,
    style: {
      position: 'relative'
    }
  }, rprops), loading && /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, {
    className: spinnerClassNames,
    container: false,
    size: "small",
    style: loadingPositionStyle
  }), !leaf ? /*#__PURE__*/_react["default"].createElement(_Button.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["default"].createElement("span", {
    className: "slds-has-flexi-truncate"
  }, /*#__PURE__*/_react["default"].createElement("a", {
    className: "slds-tree__item-label slds-truncate",
    onClick: onLabelClick,
    title: typeof label === 'string' ? label : undefined
  }, ItemRender ? /*#__PURE__*/_react["default"].createElement(ItemRender, props) : label)), leaf ? children : null);
};

/**
 *
 */
var TreeNode = exports.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 = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  var _useContext = (0, _react.useContext)(_Tree.TreeContext),
    toggleOnNodeClick = _useContext.toggleOnNodeClick,
    onNodeClick = _useContext.onNodeClick,
    onNodeLabelClick = _useContext.onNodeLabelClick,
    onNodeToggle = _useContext.onNodeToggle;
  var level = (0, _react.useContext)(TreeNodeLevelContext);
  var _useControlledValue = (0, _hooks.useControlledValue)(opened_, defaultOpened !== null && defaultOpened !== void 0 ? defaultOpened : false),
    _useControlledValue2 = (0, _slicedToArray2["default"])(_useControlledValue, 2),
    opened = _useControlledValue2[0],
    setOpened = _useControlledValue2[1];
  var onToggle = (0, _hooks.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 = (0, _hooks.useEventCallback)(function (e) {
    onLabelClick_ === null || onLabelClick_ === void 0 || onLabelClick_(e);
    onNodeLabelClick === null || onNodeLabelClick === void 0 || onNodeLabelClick(e, props);
  });
  var onClick = (0, _hooks.useEventCallback)(function (e) {
    onClick_ === null || onClick_ === void 0 || onClick_(e);
    onNodeClick === null || onNodeClick === void 0 || onNodeClick(e, props);
    if (toggleOnNodeClick) {
      onToggle(e);
    }
  });
  var grpClassNames = (0, _classnames["default"])('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["default"].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["default"].createElement(TreeNodeItem, (0, _extends2["default"])({}, rprops, {
    leaf: leaf,
    opened: opened,
    level: level,
    selected: selected,
    disabled: disabled,
    children: children,
    onClick: onClick,
    onLabelClick: onLabelClick,
    onToggle: onToggle
  })), !leaf ? /*#__PURE__*/_react["default"].createElement("ul", {
    className: grpClassNames,
    role: "group"
  }, /*#__PURE__*/_react["default"].createElement(TreeNodeLevelContext.Provider, {
    value: level + 1
  }, children)) : undefined);
};
//# sourceMappingURL=TreeNode.js.map