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

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

import React from 'react';
import PropTypes from 'prop-types';
import { fonts, colorsRaw, WidgetPreviewContainer } from 'netlify-cms-ui-default';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { getOptions, getValue } from './utils';
export default function InlineSelectPreview(_ref) {
  var rawValue = _ref.value,
      field = _ref.field;
  var options = getOptions({
    field: field
  });
  var value = 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.createElement("div", null, "Error rendering inline-select control for ", name, ": No options");
  }

  return /*#__PURE__*/React.createElement(WidgetPreviewContainer, null, /*#__PURE__*/React.createElement("div", {
    className: "netlify-cms-widget-inline-select-preview",
    style: {
      fontFamily: fonts.primary,
      margin: '0 -2px',
      display: 'flex',
      flexWrap: 'wrap'
    }
  }, items.map(function (item) {
    return /*#__PURE__*/React.createElement("span", {
      key: item.value,
      className: "netlify-cms-widget-inline-select-preview__badge",
      style: {
        padding: '4px 8px',
        margin: '2px',
        background: colorsRaw.grayLight,
        borderRadius: '5px',
        color: colorsRaw.grayDark
      }
    }, item.label);
  })));
}
InlineSelectPreview.propTypes = {
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), ImmutablePropTypes.listOf(PropTypes.string)]),
  field: PropTypes.shape({
    get: PropTypes.func.isRequired
  }).isRequired
};
//# sourceMappingURL=InlineSelectPreview.js.map