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

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

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); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { getOptions, getValue } from './utils';
import Option from './Option';

var InlineSelectControl = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(InlineSelectControl, _React$Component);

  function InlineSelectControl() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;

    _this.isMultiple = function () {
      var field = _this.props.field;
      return field.get('multiple') === true;
    };

    _this.getValue = function () {
      var _this$props = _this.props,
          value = _this$props.value,
          field = _this$props.field;
      return getValue(value, {
        field: field
      });
    };

    _this.isSelectedOption = function (itemValue) {
      var value = _this.getValue();

      var isMultiple = _this.isMultiple();

      if (isMultiple) {
        return !!(value && value.length && value.includes(itemValue));
      }

      return !!(value && value === itemValue);
    };

    _this.onToggleChange = function (itemValue) {
      var onChange = _this.props.onChange;

      var value = _this.getValue();

      var isMultiple = _this.isMultiple();

      var isCurrentlySelected = _this.isSelectedOption(itemValue);

      if (isMultiple) {
        onChange(isCurrentlySelected ? value.filter(function (item) {
          return item !== itemValue;
        }) : [].concat(value, [itemValue]));
      } else {
        onChange(isCurrentlySelected ? undefined : itemValue);
      }
    };

    return _this;
  }

  var _proto = InlineSelectControl.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _this$props2 = this.props,
        field = _this$props2.field,
        classNameWrapper = _this$props2.classNameWrapper;
    var options = getOptions({
      field: field
    });
    var name = field.get('name');

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

    var isMultiple = this.isMultiple();
    return /*#__PURE__*/React.createElement("div", {
      className: classNameWrapper
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        flexWrap: 'wrap',
        wordBreak: 'break-all'
      }
    }, options.map(function (item) {
      return /*#__PURE__*/React.createElement(Option, _extends({}, item, {
        key: item.value,
        name: name,
        selected: _this2.isSelectedOption(item.value),
        onChange: function onChange() {
          return _this2.onToggleChange(item.value);
        },
        multiple: isMultiple
      }));
    })));
  };

  return InlineSelectControl;
}(React.Component);

export { InlineSelectControl as default };
InlineSelectControl.propTypes = {
  classNameWrapper: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), ImmutablePropTypes.listOf(PropTypes.string)]),
  onChange: PropTypes.func.isRequired,
  field: PropTypes.shape({
    get: PropTypes.func.isRequired
  }).isRequired
};
//# sourceMappingURL=InlineSelectControl.js.map