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

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

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 { colorsRaw } from 'netlify-cms-ui-default';
import { NAME } from './constants';
import { getGUID } from './utils';

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

  function Option(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.id = getGUID();
    return _this;
  }

  var _proto = Option.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        name = _this$props.name,
        value = _this$props.value,
        label = _this$props.label,
        onChange = _this$props.onChange,
        selected = _this$props.selected,
        multiple = _this$props.multiple;
    var id = this.id + "_" + value;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "." + NAME + "__option:hover { filter: invert(15%); }"), /*#__PURE__*/React.createElement("span", {
      className: NAME + "__option",
      style: {
        padding: '2px 6px',
        margin: 2,
        color: selected ? 'white' : 'inherit',
        backgroundColor: selected ? colorsRaw.blue : colorsRaw.grayLight,
        border: '2px solid transparent',
        borderRadius: 5
      }
    }, /*#__PURE__*/React.createElement("label", {
      htmlFor: id,
      style: {
        cursor: 'pointer',
        paddingRight: 2,
        display: 'flex',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement("input", {
      id: id,
      style: {
        marginRight: 6
      },
      type: multiple ? 'checkbox' : 'radio',
      name: name,
      checked: selected,
      onChange: function onChange() {
        return null;
      },
      onClick: function onClick() {
        return onChange();
      }
    }), /*#__PURE__*/React.createElement("span", null, label))));
  };

  return Option;
}(React.Component);

export { Option as default };
Option.propTypes = {
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  label: PropTypes.node.isRequired,
  onChange: PropTypes.func.isRequired,
  selected: PropTypes.bool.isRequired,
  multiple: PropTypes.bool
};
//# sourceMappingURL=Option.js.map