1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
16 |
|
17 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
18 |
|
19 | 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']),
|
20 | _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']),
|
21 | _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']),
|
22 | _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']);
|
23 |
|
24 | var _react = require('react');
|
25 |
|
26 | var _react2 = _interopRequireDefault(_react);
|
27 |
|
28 | var _styledComponents = require('styled-components');
|
29 |
|
30 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
31 |
|
32 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
33 |
|
34 | var HiddenCheckbox = _styledComponents2.default.input.attrs({ type: 'checkbox' })(_templateObject);
|
35 |
|
36 | var Icon = _styledComponents2.default.svg(_templateObject2);
|
37 |
|
38 | var StyledCheckbox = _styledComponents2.default.div(_templateObject3, function (props) {
|
39 | return props.checked ? props.theme.primary : props.theme.secondary;
|
40 | }, HiddenCheckbox, Icon, function (props) {
|
41 | return props.checked ? 'visible' : 'hidden';
|
42 | });
|
43 |
|
44 | var CheckboxContainer = _styledComponents2.default.div(_templateObject4);
|
45 |
|
46 | var Checkbox = function Checkbox(_ref) {
|
47 | var className = _ref.className,
|
48 | _ref$theme = _ref.theme,
|
49 | theme = _ref$theme === undefined ? {
|
50 | primary: 'salmon',
|
51 | secondary: 'papayawhip'
|
52 | } : _ref$theme,
|
53 | checked = _ref.checked,
|
54 | props = (0, _objectWithoutProperties3.default)(_ref, ['className', 'theme', 'checked']);
|
55 | return _react2.default.createElement(
|
56 | CheckboxContainer,
|
57 | { className: className },
|
58 | _react2.default.createElement(HiddenCheckbox, (0, _extends3.default)({ checked: checked }, props)),
|
59 | _react2.default.createElement(
|
60 | StyledCheckbox,
|
61 | { checked: checked },
|
62 | _react2.default.createElement(
|
63 | Icon,
|
64 | { viewBox: '0 0 24 24' },
|
65 | _react2.default.createElement('polyline', { points: '20 6 9 17 4 12' })
|
66 | )
|
67 | )
|
68 | );
|
69 | };
|
70 |
|
71 | exports.default = Checkbox; |
\ | No newline at end of file |