@helpscout/hsds-react/components/DropList/DropList.ListItem.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.getListItemText = getListItemText;
exports.generateListItemKey = generateListItemKey;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = _interopRequireDefault(require("lodash.isfunction"));

var _lodash2 = _interopRequireDefault(require("lodash.isnil"));

var _lodash3 = _interopRequireDefault(require("lodash.isplainobject"));

var _lodash4 = _interopRequireDefault(require("lodash.isstring"));

var _DropList = require("./DropList.utils");

var _DropList2 = require("./DropList.css");

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var item = _ref.item,
      index = _ref.index,
      highlightedIndex = _ref.highlightedIndex,
      withMultipleSelection = _ref.withMultipleSelection,
      isSelected = _ref.isSelected,
      renderCustomListItem = _ref.renderCustomListItem,
      isDisabled = _ref.isDisabled,
      inputValue = _ref.inputValue,
      itemProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["item", "index", "highlightedIndex", "withMultipleSelection", "isSelected", "renderCustomListItem", "isDisabled", "inputValue"]);

  if (!inputValue && item.hideOnEmptyInputValue) {
    return null;
  }

  if ((0, _DropList.isItemADivider)(item)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.DividerUI, {
      className: "DropListItem--divider"
    }, "divider_" + index);
  }

  var contentKey = (0, _DropList.getItemContentKeyName)(item);

  if ((0, _DropList.isItemAGroupLabel)(item)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.GroupLabelUI, {
      className: "DropListItem--groupLabel",
      children: item[contentKey]
    }, "group_label_" + index);
  }

  function getListItemClassNames(extraClassNames) {
    return (0, _classnames.default)('DropListItem', isSelected && 'is-selected', isDisabled && 'is-disabled', (0, _DropList.objectHasKey)(item, 'type') && "is-type-" + item.type, highlightedIndex === index && 'is-highlighted', withMultipleSelection && 'with-multiple-selection', (0, _lodash4.default)(extraClassNames) && extraClassNames, (0, _DropList.objectHasKey)(item, 'className') && item.className);
  }

  if (!(0, _lodash2.default)(renderCustomListItem) && (0, _lodash.default)(renderCustomListItem)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _extends2.default)({
      className: getListItemClassNames('DropListItem--custom'),
      ref: ref
    }, itemProps, {
      children: renderCustomListItem({
        item: item,
        isSelected: isSelected,
        isHighlighted: highlightedIndex === index,
        withMultipleSelection: withMultipleSelection,
        isDisabled: isDisabled
      })
    }));
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropList2.ListItemUI, (0, _extends2.default)({
    className: getListItemClassNames(),
    highlighted: highlightedIndex === index,
    ref: ref,
    selected: isSelected,
    withMultipleSelection: withMultipleSelection
  }, itemProps, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.ListItemTextUI, {
      dangerouslySetInnerHTML: getListItemText({
        label: (0, _lodash3.default)(item) ? item[contentKey] : item,
        emphasize: inputValue && !(0, _DropList.isItemAction)(item),
        substr: inputValue
      })
    }), withMultipleSelection && !(0, _DropList.isItemAction)(item) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.SelectedBadge, {
      isSelected: isSelected
    }) : null]
  }));
});
/**
 * If `substr` is passed, we want to emphasize that with html's <strong />
 */

function getListItemText(_ref2) {
  var label = _ref2.label,
      emphasize = _ref2.emphasize,
      substr = _ref2.substr;

  var __html = emphasize ? (0, _DropList.emphasizeSubstring)(label, substr) : label;

  return {
    __html: __html
  };
}

function generateListItemKey(item, index) {
  var contentKey = (0, _DropList.getItemContentKeyName)(item);
  return (0, _lodash3.default)(item) ? item.id || item[contentKey] + "_" + index : item + "_" + index;
}

var _default = ListItem;
exports.default = _default;