react-misc-toolbox/dist/RadioButton.js

- [ ] diagramexample | optimize creating from blank slate

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  opacity: 0.06;\n  height: 100%;\n  width: 100%;\n  fill: ", ";\n"], ["\n  opacity: 0.06;\n  height: 100%;\n  width: 100%;\n  fill: ", ";\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  opacity: 0.55;\n  fill: none;\n  stroke: ", ";\n  stroke-width: 2;\n"], ["\n  opacity: 0.55;\n  fill: none;\n  stroke: ", ";\n  stroke-width: 2;\n"]),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n  opacity: 0;\n  position: absolute;\n  :checked + svg ", " {\n    opacity: 1;\n  }\n  :checked + svg ", " {\n    opacity: 1;\n  }\n"], ["\n  opacity: 0;\n  position: absolute;\n  :checked + svg ", " {\n    opacity: 1;\n  }\n  :checked + svg ", " {\n    opacity: 1;\n  }\n"]),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(["\n  display: grid;\n  height: 100%;\n"], ["\n  display: grid;\n  height: 100%;\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var DOT = _styledComponents2.default.circle(_templateObject, function (_ref) {
  var theme = _ref.theme;
  return theme ? theme.alpha : "#000";
});
var OUTLINE = _styledComponents2.default.circle(_templateObject2, function (_ref2) {
  var theme = _ref2.theme;
  return theme ? theme.beta : "#000";
});
var RADIO = _styledComponents2.default.input(_templateObject3, DOT, OUTLINE);
var BODY = _styledComponents2.default.div(_templateObject4);
var RadioButton = function RadioButton(_ref3) {
  var checked = _ref3.checked,
      onChange = _ref3.onChange,
      id = _ref3.id,
      className = _ref3.className,
      _ref3$dotRatio = _ref3.dotRatio,
      dotRatio = _ref3$dotRatio === undefined ? 0.45 : _ref3$dotRatio,
      _ref3$outlineRatio = _ref3.outlineRatio,
      outlineRatio = _ref3$outlineRatio === undefined ? 0.75 : _ref3$outlineRatio,
      _ref3$size = _ref3.size,
      size = _ref3$size === undefined ? 12 : _ref3$size,
      props = (0, _objectWithoutProperties3.default)(_ref3, ["checked", "onChange", "id", "className", "dotRatio", "outlineRatio", "size"]);

  return _react2.default.createElement(
    BODY,
    { className: className },
    _react2.default.createElement(RADIO, (0, _extends3.default)({
      onChange: onChange,
      checked: checked,
      type: "radio",
      id: id
    }, props)),
    _react2.default.createElement(
      "svg",
      {
        className: "svg",
        fill: "currentColor",
        preserveAspectRatio: "xMidYMid meet",
        height: size * 2,
        width: size * 2,
        viewBox: "0 0 " + size * 2 + " " + size * 2
      },
      _react2.default.createElement(OUTLINE, {
        cx: size,
        cy: size,
        r: size * outlineRatio
      }),
      _react2.default.createElement(DOT, {
        cx: size,
        cy: size,
        r: size * dotRatio
      })
    )
  );
};

exports.default = RadioButton;