netlify-cms-widget-inline-select/lib/cjs/InlineSelectPreview.js

Widget for radios and inline multi-checkboxes in Netlify CMS.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = InlineSelectPreview;

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

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

var _netlifyCmsUiDefault = require("netlify-cms-ui-default");

var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));

var _utils = require("./utils");

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

function InlineSelectPreview(_ref) {
  var rawValue = _ref.value,
      field = _ref.field;
  var options = (0, _utils.getOptions)({
    field: field
  });
  var value = (0, _utils.getValue)(rawValue, {
    field: field
  });
  var values = Array.isArray(value) ? value : [value];
  var items = options.filter(function (optionsItem) {
    return values.find(function (item) {
      return item === optionsItem.value;
    });
  });
  var name = field.get('name');

  if (options.length === 0) {
    return /*#__PURE__*/_react["default"].createElement("div", null, "Error rendering inline-select control for ", name, ": No options");
  }

  return /*#__PURE__*/_react["default"].createElement(_netlifyCmsUiDefault.WidgetPreviewContainer, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "netlify-cms-widget-inline-select-preview",
    style: {
      fontFamily: _netlifyCmsUiDefault.fonts.primary,
      margin: '0 -2px',
      display: 'flex',
      flexWrap: 'wrap'
    }
  }, items.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement("span", {
      key: item.value,
      className: "netlify-cms-widget-inline-select-preview__badge",
      style: {
        padding: '4px 8px',
        margin: '2px',
        background: _netlifyCmsUiDefault.colorsRaw.grayLight,
        borderRadius: '5px',
        color: _netlifyCmsUiDefault.colorsRaw.grayDark
      }
    }, item.label);
  })));
}

InlineSelectPreview.propTypes = {
  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string), _reactImmutableProptypes["default"].listOf(_propTypes["default"].string)]),
  field: _propTypes["default"].shape({
    get: _propTypes["default"].func.isRequired
  }).isRequired
};
//# sourceMappingURL=InlineSelectPreview.js.map