wix-style-react/dist/src/BadgeSelectItem/BadgeSelectItem.js

wix-style-react

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.badgeSelectItemBuilder = exports["default"] = void 0;

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

var _BadgeSelectItemSt = require("./BadgeSelectItem.st.css");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ListItemSelect = _interopRequireDefault(require("../ListItemSelect"));

var BadgeSelectItem = function BadgeSelectItem(props) {
  var dataHook = props.dataHook,
      skin = props.skin,
      text = props.text,
      subtitle = props.subtitle,
      ellipsis = props.ellipsis,
      selected = props.selected,
      highlighted = props.highlighted,
      disabled = props.disabled,
      className = props.className,
      size = props.size,
      suffix = props.suffix;

  var prefix = /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _BadgeSelectItemSt.st)(_BadgeSelectItemSt.classes.marker, {
      skin: skin
    })
  });

  return /*#__PURE__*/_react["default"].createElement(_ListItemSelect["default"], {
    className: (0, _BadgeSelectItemSt.st)(_BadgeSelectItemSt.classes.root, className),
    title: text,
    ellipsis: ellipsis,
    dataHook: dataHook,
    prefix: prefix,
    selected: selected,
    highlighted: highlighted,
    disabled: disabled,
    subtitle: subtitle,
    size: size,
    suffix: suffix
  });
};

BadgeSelectItem.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes["default"].string,

  /** A css class to be applied to the component's root element */
  className: _propTypes["default"].string,

  /** The text to be rendered within the badge. */
  text: _propTypes["default"].node.isRequired,

  /** The secondary text to be rendered within the badge. */
  subtitle: _propTypes["default"].string,

  /** The badge's skin. See the <Badge/> story for the full list of available skins. */
  skin: _propTypes["default"].string.isRequired,

  /** Should the text and subtitle get ellipsis with tooltip, or should it get broken into lines when it reaches the end of its container */
  ellipsis: _propTypes["default"].bool,

  /** If true, the item is selected */
  selected: _propTypes["default"].bool,

  /** If true, the item is highlighted */
  highlighted: _propTypes["default"].bool,

  /** If true, the item is disabled */
  disabled: _propTypes["default"].bool,

  /** Any suffix */
  suffix: _propTypes["default"].node,

  /** Changing text size */
  size: _propTypes["default"].oneOf(['small', 'medium'])
};
var _default = BadgeSelectItem;
exports["default"] = _default;

var badgeSelectItemBuilder = function badgeSelectItemBuilder(_ref) {
  var id = _ref.id,
      className = _ref.className,
      text = _ref.text,
      skin = _ref.skin,
      subtitle = _ref.subtitle,
      ellipsis = _ref.ellipsis,
      disabled = _ref.disabled,
      dataHook = _ref.dataHook,
      size = _ref.size,
      suffix = _ref.suffix;
  return {
    id: id,
    disabled: disabled,
    overrideOptionStyle: true,
    value: function value(_ref2) {
      var selected = _ref2.selected,
          hovered = _ref2.hovered,
          disabled = _ref2.disabled;
      return /*#__PURE__*/_react["default"].createElement(BadgeSelectItem, {
        dataHook: dataHook,
        className: className,
        skin: skin,
        text: text,
        subtitle: subtitle,
        ellipsis: ellipsis,
        selected: selected,
        highlighted: hovered,
        disabled: disabled,
        size: size,
        suffix: suffix
      });
    }
  };
};

exports.badgeSelectItemBuilder = badgeSelectItemBuilder;