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

var _SubjectAtom2 = _interopRequireDefault(_SubjectAtom);

var _VerbAtom = require("./Atoms/VerbAtom");

var _VerbAtom2 = _interopRequireDefault(_VerbAtom);

var _ObjectAtom = require("./Atoms/ObjectAtom");

var _ObjectAtom2 = _interopRequireDefault(_ObjectAtom);

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 Statement = function Statement(_ref) {
  var _ref$isFullWidth = _ref.isFullWidth,
      isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
      isRtl = _ref.isRtl,
      omitSubject = _ref.omitSubject,
      omitVerbs = _ref.omitVerbs,
      onChangeStatement = _ref.onChangeStatement,
      options = _ref.options,
      _ref$statement = _ref.statement,
      statement = _ref$statement === void 0 ? {
    subject: '',
    verb: '',
    object: null,
    error: null
  } : _ref$statement,
      subjectPlaceholder = _ref.subjectPlaceholder,
      noOptionsMessage = _ref.noOptionsMessage;
  var verbOptions = statement.subject && options[statement.subject].verbs.find(function (verb) {
    return verb.value === statement.verb;
  });
  var statementAtoms = [!omitSubject && _react2.default.createElement(_SubjectAtom2.default, {
    key: "subject",
    noOptionsMessage: noOptionsMessage,
    onChange: function onChange(subject) {
      var newStatement = _extends({}, statement, {
        subject: subject,
        verb: options[subject].verbs[0].value,
        object: null,
        error: null
      });

      onChangeStatement(newStatement);
    },
    options: options,
    placeholder: subjectPlaceholder,
    subject: statement.subject
  }), !omitVerbs && ((verbOptions == null ? void 0 : verbOptions.label) ? _react2.default.createElement(_VerbAtom2.default, {
    key: "verb",
    disabled: !statement.subject,
    onChange: function onChange(verb) {
      var newStatement = _extends({}, statement, {
        verb: verb,
        object: null,
        error: null
      });

      onChangeStatement(newStatement);
    },
    verb: statement.verb,
    verbOptions: statement.subject ? options[statement.subject].verbs : []
  }) : _react2.default.createElement("span", {
    className: "mt3"
  })), _react2.default.createElement(_ObjectAtom2.default, {
    key: "object",
    disabled: !statement.verb,
    error: statement.error,
    object: statement.object,
    onChange: function onChange(object, error) {
      if (error === void 0) {
        error = null;
      }

      var newStatement = _extends({}, statement, {
        object: object,
        error: error
      });

      onChangeStatement(newStatement);
    },
    renderObject: verbOptions && verbOptions.object
  })];
  return _react2.default.createElement("div", {
    className: "flex-column w-100 mv6 mv3-ns"
  }, _react2.default.createElement("div", {
    className: "flex items-start flex-wrap " + (isFullWidth ? 'flex-column items-stretch' : '')
  }, isRtl ? statementAtoms.reverse() : statementAtoms), statement.error && _react2.default.createElement("div", {
    className: "red t-small mh3 mt2 lh-title"
  }, statement.error));
};

exports.default = Statement;