react-misc-toolbox/dist/Checkbox.js

'use strict';

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

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

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  cursor: pointer;\n  position: relative;\n  margin: auto;\n  width: 18px;\n  height: 18px;\n  -webkit-tap-highlight-color: transparent;\n  transform: translate3d(0, 0, 0);\n  :before {\n    content: \'\';\n    position: absolute;\n    top: -15px;\n    left: -15px;\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: rgba(34, 50, 84, 0.03);\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n  svg {\n    position: relative;\n    z-index: 1;\n    fill: none;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke: #c8ccd4;\n    stroke-width: 1.5;\n    transform: translate3d(0, 0, 0);\n    transition: all 0.2s ease;\n  }\n  svg path {\n    stroke-dasharray: 60;\n    stroke-dashoffset: 0;\n  }\n  svg polyline {\n    stroke-dasharray: 22;\n    stroke-dashoffset: 66;\n  }\n  :hover:before {\n    opacity: 1;\n  }\n  :hover svg {\n    stroke: #4285f4;\n  }\n'], ['\n  cursor: pointer;\n  position: relative;\n  margin: auto;\n  width: 18px;\n  height: 18px;\n  -webkit-tap-highlight-color: transparent;\n  transform: translate3d(0, 0, 0);\n  :before {\n    content: \'\';\n    position: absolute;\n    top: -15px;\n    left: -15px;\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: rgba(34, 50, 84, 0.03);\n    opacity: 0;\n    transition: opacity 0.2s ease;\n  }\n  svg {\n    position: relative;\n    z-index: 1;\n    fill: none;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke: #c8ccd4;\n    stroke-width: 1.5;\n    transform: translate3d(0, 0, 0);\n    transition: all 0.2s ease;\n  }\n  svg path {\n    stroke-dasharray: 60;\n    stroke-dashoffset: 0;\n  }\n  svg polyline {\n    stroke-dasharray: 22;\n    stroke-dashoffset: 66;\n  }\n  :hover:before {\n    opacity: 1;\n  }\n  :hover svg {\n    stroke: #4285f4;\n  }\n']),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n  :checked + ', ' svg {\n    stroke: #333;\n  }\n  :checked + ', ' svg path {\n    stroke-dashoffset: 60;\n    transition: all 0.3s linear;\n  }\n  :checked + ', ' svg polyline {\n    stroke-dashoffset: 42;\n    transition: all 0.2s linear;\n    transition-delay: 0.15s;\n  }\n'], ['\n  :checked + ', ' svg {\n    stroke: #333;\n  }\n  :checked + ', ' svg path {\n    stroke-dashoffset: 60;\n    transition: all 0.3s linear;\n  }\n  :checked + ', ' svg polyline {\n    stroke-dashoffset: 42;\n    transition: all 0.2s linear;\n    transition-delay: 0.15s;\n  }\n']),
    _templateObject3 = (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 CHECK = _styledComponents2.default.label(_templateObject);

var CBX = _styledComponents2.default.input(_templateObject2, CHECK, CHECK, CHECK);

var BODY = _styledComponents2.default.div(_templateObject3);
var Checkbox = function Checkbox(_ref) {
  var checked = _ref.checked,
      onChange = _ref.onChange,
      id = _ref.id,
      className = _ref.className;

  return _react2.default.createElement(
    BODY,
    { className: className },
    _react2.default.createElement(CBX, {
      onChange: onChange,
      checked: checked,
      type: 'checkbox',
      style: {
        //marginRight: '3rem',
        display: 'none'
      },
      id: id
    }),
    _react2.default.createElement(
      CHECK,
      { htmlFor: id },
      _react2.default.createElement(
        'svg',
        { width: '18px', height: '18px', viewBox: '0 0 18 18' },
        _react2.default.createElement('path', { d: 'M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z' }),
        _react2.default.createElement('polyline', { points: '1 9 7 14 15 4' })
      )
    )
  );
};

exports.default = Checkbox;