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

wix-style-react

import React from 'react';
import { st, classes } from './BadgeSelectItem.st.css';
import PropTypes from 'prop-types';
import ListItemSelect from '../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.createElement("div", {
    className: st(classes.marker, {
      skin: skin
    })
  });
  return /*#__PURE__*/React.createElement(ListItemSelect, {
    className: st(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.string,

  /** A css class to be applied to the component's root element */
  className: PropTypes.string,

  /** The text to be rendered within the badge. */
  text: PropTypes.node.isRequired,

  /** The secondary text to be rendered within the badge. */
  subtitle: PropTypes.string,

  /** The badge's skin. See the <Badge/> story for the full list of available skins. */
  skin: PropTypes.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.bool,

  /** If true, the item is selected */
  selected: PropTypes.bool,

  /** If true, the item is highlighted */
  highlighted: PropTypes.bool,

  /** If true, the item is disabled */
  disabled: PropTypes.bool,

  /** Any suffix */
  suffix: PropTypes.node,

  /** Changing text size */
  size: PropTypes.oneOf(['small', 'medium'])
};
export default BadgeSelectItem;
export 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.createElement(BadgeSelectItem, {
        dataHook: dataHook,
        className: className,
        skin: skin,
        text: text,
        subtitle: subtitle,
        ellipsis: ellipsis,
        selected: selected,
        highlighted: hovered,
        disabled: disabled,
        size: size,
        suffix: suffix
      });
    }
  };
};