@vtex/styleguide/lib/Conditions/StrategySelector.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _index = require("../icon/CaretDown/index.js");

var _index2 = _interopRequireDefault(_index);

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var StrategySelector = function StrategySelector(_ref) {
  var isRtl = _ref.isRtl,
      operator = _ref.operator,
      onChangeOperator = _ref.onChangeOperator,
      labels = _ref.labels;

  var handleOperatorChange = function handleOperatorChange(event) {
    var newOperator = event.target.value;

    if (operator !== newOperator) {
      onChangeOperator(newOperator);
    }
  };

  var seletorContent = [_react2.default.createElement("span", {
    key: "seletorContent-operator",
    className: "mh3 b"
  }, operator === 'all' ? labels.operatorAll || _constants.DEFAULT_LABELS.operatorAll : labels.operatorAny || _constants.DEFAULT_LABELS.operatorAny), _react2.default.createElement("select", {
    key: "seletorContent-select",
    className: "o-0 absolute top-0 left-0 w-100 bottom-0 pointer t-small",
    onChange: handleOperatorChange,
    value: operator,
    style: {
      // safari select height fix
      WebkitAppearance: 'menulist-button'
    }
  }, _react2.default.createElement("option", {
    value: "all"
  }, labels.operatorAll || _constants.DEFAULT_LABELS.operatorAll), _react2.default.createElement("option", {
    value: "any"
  }, labels.operatorAny || _constants.DEFAULT_LABELS.operatorAny)), _react2.default.createElement(_index2.default, {
    key: "seletorContent-icon",
    size: _constants.SMALL_ICON_SIZE
  })];
  return _react2.default.createElement("div", {
    className: "flex flex-row nowrap"
  }, _react2.default.createElement("span", {
    className: isRtl ? 'mr3' : ''
  }, labels.headerPrefix || _constants.DEFAULT_LABELS.headerPrefix), _react2.default.createElement("div", {
    className: "c-link relative"
  }, isRtl ? seletorContent.reverse() : seletorContent), _react2.default.createElement("span", {
    className: isRtl ? '' : 'ml3'
  }, labels.headerSufix || _constants.DEFAULT_LABELS.headerSufix));
};

exports.default = StrategySelector;