react-misc-toolbox/dist/CheckboxV2.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  border: 0;\n  clip: rect(0 0 0 0);\n  clippath: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n'], ['\n  border: 0;\n  clip: rect(0 0 0 0);\n  clippath: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  fill: none;\n  stroke: white;\n  stroke-width: 2px;\n'], ['\n  fill: none;\n  stroke: white;\n  stroke-width: 2px;\n']),
    _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  background: ', ';\n  border-radius: 3px;\n  transition: all 0ms;\n  ', ':focus + & {\n    box-shadow: 0 0 0 3px pink;\n  }\n  ', ' {\n    visibility: ', ';\n  }\n'], ['\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  background: ', ';\n  border-radius: 3px;\n  transition: all 0ms;\n  ', ':focus + & {\n    box-shadow: 0 0 0 3px pink;\n  }\n  ', ' {\n    visibility: ', ';\n  }\n']),
    _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n'], ['\n  display: flex;\n  justify-content: center;\n  align-items: center;\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 HiddenCheckbox = _styledComponents2.default.input.attrs({ type: 'checkbox' })(_templateObject);

var Icon = _styledComponents2.default.svg(_templateObject2);

var StyledCheckbox = _styledComponents2.default.div(_templateObject3, function (props) {
  return props.checked ? props.theme.primary : props.theme.secondary;
}, HiddenCheckbox, Icon, function (props) {
  return props.checked ? 'visible' : 'hidden';
});

var CheckboxContainer = _styledComponents2.default.div(_templateObject4);

var Checkbox = function Checkbox(_ref) {
  var className = _ref.className,
      _ref$theme = _ref.theme,
      theme = _ref$theme === undefined ? {
    primary: 'salmon',
    secondary: 'papayawhip'
  } : _ref$theme,
      checked = _ref.checked,
      props = (0, _objectWithoutProperties3.default)(_ref, ['className', 'theme', 'checked']);
  return _react2.default.createElement(
    CheckboxContainer,
    { className: className },
    _react2.default.createElement(HiddenCheckbox, (0, _extends3.default)({ checked: checked }, props)),
    _react2.default.createElement(
      StyledCheckbox,
      { checked: checked },
      _react2.default.createElement(
        Icon,
        { viewBox: '0 0 24 24' },
        _react2.default.createElement('polyline', { points: '20 6 9 17 4 12' })
      )
    )
  );
};

exports.default = Checkbox;