@vtex/styleguide/lib/Statement/Atoms/SubjectAtom.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("../../EXPERIMENTAL_Select/index");

var _index2 = _interopRequireDefault(_index);

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var ATOM_COMPONENT_MIN_WIDTH = '20%';

var groupOptions = function groupOptions(options) {
  var groupedOptions = Object.keys(options).reduce(function (optionsGroup, subject) {
    var _extends2;

    var option = options[subject];
    return _extends({}, optionsGroup, (_extends2 = {}, _extends2[option.group] = [].concat(optionsGroup[option.group] || [], [{
      value: subject,
      label: option.label || subject
    }]), _extends2));
  }, {});
  return Object.keys(groupedOptions).map(function (group) {
    return {
      label: group,
      options: groupedOptions[group]
    };
  });
};

var SubjectAtom = function SubjectAtom(_ref) {
  var _onChange = _ref.onChange,
      options = _ref.options,
      placeholder = _ref.placeholder,
      subject = _ref.subject,
      noOptionsMessage = _ref.noOptionsMessage;
  var optionsGroup = groupOptions(options);
  var subjectOptions = optionsGroup.length === 1 && optionsGroup[0].label === 'undefined' ? optionsGroup[0].options : optionsGroup;
  var selected = optionsGroup.reduce(function (selected, group) {
    if (selected) {
      return selected;
    }

    var option = group.options.find(function (option) {
      return option.value === subject;
    });

    if (option) {
      return {
        group: group.label !== 'undefined' ? group.label : undefined,
        option: option
      };
    }
  }, undefined);
  return _react2.default.createElement("div", {
    className: "mh3 pb3",
    style: {
      minWidth: ATOM_COMPONENT_MIN_WIDTH
    }
  }, _react2.default.createElement(_index2.default, {
    clearable: false,
    noOptionsMessage: noOptionsMessage,
    multi: false,
    onChange: function onChange(option) {
      return _onChange(option && option.value);
    },
    options: subjectOptions,
    placeholder: placeholder,
    value: selected && selected.option
  }));
};

exports.default = SubjectAtom;