@procore/core-react/dist/FileSelect/SourceItem/SourceItem.js

React library of Procore Design Guidelines

var _excluded = ["icon", "count", "countTruncationThreshold", "loading", "error", "selected", "disabled", "focused", "children", "tabIndex"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { Error } from '@procore/core-icons/dist';
import React from 'react';
import { Spinner } from '../../Spinner';
import { Tooltip } from '../../Tooltip';
import { OverflowObserver } from '../../_hooks/OverflowObserver';
import { StyledIcon, StyledLabel, StyledSourceItem } from './SourceItem.styles';
function formatCount(count, truncationThreshold) {
  if (count === 0) {
    return '';
  } else if (count > truncationThreshold) {
    return "(".concat(truncationThreshold, "+)");
  } else {
    return "(".concat(count, ")");
  }
}
export var SourceItem = /*#__PURE__*/React.forwardRef(function SourceItem(_ref, ref) {
  var _ref$icon = _ref.icon,
    icon = _ref$icon === void 0 ? '' : _ref$icon,
    _ref$count = _ref.count,
    count = _ref$count === void 0 ? 0 : _ref$count,
    _ref$countTruncationT = _ref.countTruncationThreshold,
    countTruncationThreshold = _ref$countTruncationT === void 0 ? 99 : _ref$countTruncationT,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$error = _ref.error,
    error = _ref$error === void 0 ? false : _ref$error,
    _ref$selected = _ref.selected,
    selected = _ref$selected === void 0 ? false : _ref$selected,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$focused = _ref.focused,
    focused = _ref$focused === void 0 ? false : _ref$focused,
    children = _ref.children,
    _ref$tabIndex = _ref.tabIndex,
    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
    props = _objectWithoutProperties(_ref, _excluded);
  var tabIndexAttribute = disabled ? {
    tabIndex: -1
  } : {
    tabIndex: tabIndex
  };
  var tooltipId = React.useId();
  var iconElement = /*#__PURE__*/React.createElement(StyledIcon, null, function () {
    if (error) {
      return /*#__PURE__*/React.createElement(Error, null);
    }
    if (loading) {
      return /*#__PURE__*/React.createElement(Spinner, {
        size: "xs"
      });
    }
    return icon;
  }());
  var countElement = /*#__PURE__*/React.createElement("div", null, "\xA0", formatCount(count, countTruncationThreshold));
  return /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref2) {
    var isOverflowing = _ref2.isOverflowing,
      labelRef = _ref2.ref;
    var sourceItem = /*#__PURE__*/React.createElement(StyledSourceItem, _extends({
      ref: ref,
      role: "option",
      "aria-selected": selected,
      "aria-disabled": disabled
    }, tabIndexAttribute, props, {
      error: error,
      selected: selected,
      disabled: disabled,
      focused: focused,
      "aria-describedby": isOverflowing ? tooltipId : undefined
    }), iconElement, /*#__PURE__*/React.createElement(StyledLabel, {
      ref: labelRef
    }, children), countElement);
    return isOverflowing ? /*#__PURE__*/React.createElement(Tooltip, {
      showDelay: 500,
      trigger: ['hover', 'focus'],
      overlay: /*#__PURE__*/React.createElement(Tooltip.Content, {
        id: tooltipId
      }, children)
    }, sourceItem) : sourceItem;
  });
});
//# sourceMappingURL=SourceItem.js.map