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

wix-style-react

"use strict";

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

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

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

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

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

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

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

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

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

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

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

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

var _Text = _interopRequireDefault(require("../Text"));

var _ListItemSelectSt = require("./ListItemSelect.st.css");

var _context = require("../FontUpgrade/context");

var _Checkbox = _interopRequireDefault(require("../Checkbox"));

var _Box = _interopRequireDefault(require("../Box"));

var _HighlightContext = _interopRequireDefault(require("../InputWithOptions/HighlightContext"));

var _constants = require("./constants");

var _Highlighter = _interopRequireDefault(require("../Highlighter/Highlighter"));

var _excluded = ["selected", "hovered"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var SIZES = {
  small: 'small',
  medium: 'medium'
};
/** ListItemSelect description */

exports.SIZES = SIZES;

var ListItemSelect = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(ListItemSelect, _React$PureComponent);

  var _super = _createSuper(ListItemSelect);

  function ListItemSelect() {
    (0, _classCallCheck2["default"])(this, ListItemSelect);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(ListItemSelect, [{
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props = this.props,
          dataHook = _this$props.dataHook,
          className = _this$props.className,
          checkbox = _this$props.checkbox,
          selected = _this$props.selected,
          highlighted = _this$props.highlighted,
          disabled = _this$props.disabled,
          onClick = _this$props.onClick,
          size = _this$props.size;
      return /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref) {
        var isMadefor = _ref.active;
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.root, {
            checkbox: checkbox,
            selected: selected,
            highlighted: highlighted,
            disabled: disabled
          }, className),
          "data-hook": dataHook,
          "data-selected": selected,
          onClick: disabled ? undefined : onClick
        }, checkbox ? /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
          dataHook: _constants.dataHooks.CHECKBOX,
          className: _ListItemSelectSt.classes.fullWidthContent,
          size: size,
          checked: selected,
          disabled: disabled
        }, _this._renderContent({
          isMadefor: isMadefor
        })) : _this._renderContent({
          isMadefor: isMadefor
        }));
      });
    }
  }, {
    key: "_renderTitle",
    value: function _renderTitle(textProps) {
      var title = this.props.title;

      var titleElement = /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
        className: _ListItemSelectSt.classes.title,
        dataHook: _constants.dataHooks.TITLE
      }, textProps), title);

      return /*#__PURE__*/_react["default"].createElement(_HighlightContext["default"].Consumer, null, function (_ref2) {
        var highlight = _ref2.highlight,
            match = _ref2.match;
        return highlight ? /*#__PURE__*/_react["default"].createElement(_Highlighter["default"], {
          match: match
        }, titleElement) : titleElement;
      });
    }
  }, {
    key: "_renderContent",
    value: function _renderContent(_ref3) {
      var isMadefor = _ref3.isMadefor;
      var _this$props2 = this.props,
          checkbox = _this$props2.checkbox,
          prefix = _this$props2.prefix,
          subtitle = _this$props2.subtitle,
          suffix = _this$props2.suffix,
          selected = _this$props2.selected,
          disabled = _this$props2.disabled,
          size = _this$props2.size,
          ellipsis = _this$props2.ellipsis;
      var textProps = {
        tagName: 'div',
        size: size,
        ellipsis: ellipsis,
        showDelay: 300,
        skin: disabled ? 'disabled' : 'standard',
        weight: isMadefor || checkbox ? 'thin' : 'normal',
        light: selected && !checkbox
      };

      var secondaryTextProps = _objectSpread(_objectSpread({}, textProps), {}, {
        light: !disabled,
        secondary: !selected || checkbox
      });

      return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
        width: "100%",
        className: _ListItemSelectSt.classes.textsWrapper
      }, prefix && /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
        className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.prefix, {
          subtitle: Boolean(subtitle)
        }),
        dataHook: _constants.dataHooks.PREFIX
      }, textProps, {
        ellipsis: false
      }), prefix), /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.titleWrapper, {
          subtitle: Boolean(subtitle)
        })
      }, this._renderTitle(textProps), subtitle && /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
        className: _ListItemSelectSt.classes.subtitle,
        dataHook: _constants.dataHooks.SUBTITLE,
        secondary: true
      }, secondaryTextProps, {
        size: SIZES.small
      }), subtitle)), suffix && /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
        dataHook: _constants.dataHooks.SUFFIX,
        className: _ListItemSelectSt.classes.suffix
      }, secondaryTextProps), suffix));
    }
  }]);
  return ListItemSelect;
}(_react["default"].PureComponent);

(0, _defineProperty2["default"])(ListItemSelect, "displayName", 'ListItemSelect');
(0, _defineProperty2["default"])(ListItemSelect, "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,

  /** If true, a checkbox will be shown */
  checkbox: _propTypes["default"].bool,

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

  /** Title of the list item */
  title: _propTypes["default"].node,

  /** Text of the list item subtitle */
  subtitle: _propTypes["default"].node,

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

  /** 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,

  /** Callback function triggered when list item is clicked */
  onClick: _propTypes["default"].func,

  /** Changing text size */
  size: _propTypes["default"].oneOf(Object.keys(SIZES)),

  /** If true, long text won't break into more than one line and will be terminated with an ellipsis */
  ellipsis: _propTypes["default"].bool
});
(0, _defineProperty2["default"])(ListItemSelect, "defaultProps", {
  checkbox: false,
  selected: false,
  highlighted: false,
  ellipsis: false,
  size: SIZES.medium,
  dataHook: 'list-item-select'
});
var _default = ListItemSelect;
exports["default"] = _default;

var listItemSelectBuilder = function listItemSelectBuilder(_ref4) {
  var id = _ref4.id,
      className = _ref4.className,
      checkbox = _ref4.checkbox,
      prefix = _ref4.prefix,
      title = _ref4.title,
      label = _ref4.label,
      subtitle = _ref4.subtitle,
      suffix = _ref4.suffix,
      disabled = _ref4.disabled,
      size = _ref4.size,
      ellipsis = _ref4.ellipsis,
      dataHook = _ref4.dataHook;
  return {
    id: id,
    disabled: disabled,
    overrideOptionStyle: true,
    label: label,
    value: function value(_ref5) {
      var selected = _ref5.selected,
          hovered = _ref5.hovered,
          rest = (0, _objectWithoutProperties2["default"])(_ref5, _excluded);
      return /*#__PURE__*/_react["default"].createElement(ListItemSelect, (0, _extends2["default"])({
        dataHook: dataHook,
        className: className,
        checkbox: checkbox,
        prefix: prefix,
        title: title,
        subtitle: subtitle,
        suffix: suffix,
        size: size,
        ellipsis: ellipsis,
        selected: selected,
        highlighted: hovered
      }, rest));
    }
  };
};

exports.listItemSelectBuilder = listItemSelectBuilder;