@fluentui/react-northstar/dist/es/components/Tree/TreeTitle.js

A themable React component library.

import _invoke from "lodash/invoke";
import { treeTitleBehavior } from '@fluentui/accessibility';
import { getElementType, useUnhandledProps, useAccessibility, useStyles, useFluentContext, useTelemetry } from '@fluentui/react-bindings';
import { Box } from '../Box/Box';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, createShorthandFactory, commonPropTypes, rtlTextContainer, shouldPreventDefaultOnKeyDown } from '../../utils';
import { TreeContext } from './context';
export var treeTitleClassName = 'ui-tree__title';
export var treeTitleSlotClassNames = {
  indicator: treeTitleClassName + "__selection-indicator"
};

/**
 * A TreeTitle renders a title of TreeItem.
 */
export var TreeTitle = /*#__PURE__*/function () {
  var TreeTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(TreeTitle.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var _React$useContext = React.useContext(TreeContext),
      focusItemById = _React$useContext.focusItemById,
      toggleItemActive = _React$useContext.toggleItemActive,
      toggleItemSelect = _React$useContext.toggleItemSelect;
    var accessibility = props.accessibility,
      id = props.id,
      children = props.children,
      className = props.className,
      content = props.content,
      design = props.design,
      hasSubtree = props.hasSubtree,
      level = props.level,
      index = props.index,
      styles = props.styles,
      treeSize = props.treeSize,
      variables = props.variables,
      selectionIndicator = props.selectionIndicator,
      disabled = props.disabled,
      selected = props.selected,
      selectable = props.selectable,
      expanded = props.expanded,
      indeterminate = props.indeterminate;
    var getA11Props = useAccessibility(accessibility, {
      debugName: TreeTitle.displayName,
      actionHandlers: {
        performClick: function performClick(e) {
          if (shouldPreventDefaultOnKeyDown(e)) {
            e.preventDefault();
          }
          e.stopPropagation();
          handleClick(e);
        },
        focusParent: function focusParent(e) {
          // allow bubbling up to parent treeItem
          focusItemById(props.parent);
        }
      },
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          hasSubtree: hasSubtree,
          level: level,
          index: index,
          treeSize: treeSize,
          selected: selected,
          selectable: selectable
        };
      },
      rtl: context.rtl
    });
    var _useStyles = useStyles(TreeTitle.displayName, {
        className: treeTitleClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            selected: selected,
            disabled: disabled,
            selectable: selectable,
            indeterminate: indeterminate,
            level: level,
            showIndicator: selectable && (hasSubtree && expanded || selected || indeterminate)
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl,
        unstyled: props.unstyled
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(TreeTitle.handledProps, props);
    var handleClick = function handleClick(e) {
      if (hasSubtree) {
        toggleItemActive(e, id);
      } else {
        toggleItemSelect(e, id);
      }
      _invoke(props, 'onClick', e, props);
    };
    var selectionIndicatorOverrideProps = function selectionIndicatorOverrideProps(predefinedProps) {
      return {
        onClick: function onClick(e) {
          e.stopPropagation(); // otherwise onClick on title will also be executed
          if (selectable) {
            toggleItemSelect(e, id);
          }
          _invoke(predefinedProps, 'onClick', e);
        }
      };
    };
    var selectionIndicatorElement = selectable && Box.create(selectionIndicator, {
      defaultProps: function defaultProps() {
        return Object.assign({
          as: 'span',
          selected: selected
        }, getA11Props('indicator', {
          className: treeTitleSlotClassNames.indicator,
          styles: resolvedStyles.selectionIndicator
        }));
      },
      overrideProps: selectionIndicatorOverrideProps
    });
    var element = /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
      className: classes.root,
      onClick: handleClick,
      selected: selected,
      ref: ref
    }, rtlTextContainer.getAttributes({
      forElements: [children, content]
    }), unhandledProps)), childrenExist(children) ? children : content, selectionIndicatorElement);
    setEnd();
    return element;
  });
  TreeTitle.displayName = 'TreeTitle';
  TreeTitle.propTypes = Object.assign({}, commonPropTypes.createCommon(), {
    id: PropTypes.string,
    hasSubtree: PropTypes.bool,
    index: PropTypes.number,
    level: PropTypes.number,
    onClick: PropTypes.func,
    expanded: PropTypes.bool,
    selected: PropTypes.bool,
    selectable: PropTypes.bool,
    treeSize: PropTypes.number,
    selectionIndicator: customPropTypes.shorthandAllowingChildren,
    unstyled: PropTypes.bool,
    indeterminate: PropTypes.bool,
    parent: PropTypes.string
  });
  TreeTitle.defaultProps = {
    as: 'a',
    selectionIndicator: {},
    accessibility: treeTitleBehavior
  };
  TreeTitle.handledProps = Object.keys(TreeTitle.propTypes);
  TreeTitle.create = createShorthandFactory({
    Component: TreeTitle,
    mappedProp: 'content'
  });
  return TreeTitle;
}();
//# sourceMappingURL=TreeTitle.js.map