1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _templateObject = _taggedTemplateLiteral(['\n height: ', ';\n padding: ', ';\n vertical-align: middle;\n width: 100%;\n margin-bottom: ', ';\n\n /* Hide base elements */\n input[type="checkbox"] {\n position: absolute;\n left: -9999px;\n }\n\n /* Position the <label> */\n input[type="checkbox"] + label {\n position: relative;\n display: inline-block;\n height: 17px;\n line-height: 17px;\n padding-left: 30px;\n cursor: pointer;\n }\n\n /* SHARED STYLES - Radio & Checkbox - Unchecked */\n input[type="checkbox"] + label:before {\n content: \'\';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n border: 2px solid ', ';\n background-color: ', ';\n }\n\n /* CHECKBOX - Unchecked */\n input[type="checkbox"]:not(:checked) + label:before {\n /* Add styles if needed */\n }\n\n /* CHECKBOX - Checked ( CSS Tick ) */\n input[type="checkbox"]:checked + label:after {\n position: absolute;\n content: "";\n left: 7px;\n top: 0px;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n /* Short Arm */\n width: 5px;\n border-bottom: 3px solid ', ';\n /* Long Arm */\n height: 11px;\n border-right: 3px solid ', ';\n }\n\n /* SHARED STYLES - Radio & Checkbox - Disabled */\n input[type="checkbox"]:disabled + label:before {\n border-color: #bbb;\n background-color: #ddd;\n }\n\n input[type="checkbox"]:disabled + label {\n color: #999;\n }\n'], ['\n height: ', ';\n padding: ', ';\n vertical-align: middle;\n width: 100%;\n margin-bottom: ', ';\n\n /* Hide base elements */\n input[type="checkbox"] {\n position: absolute;\n left: -9999px;\n }\n\n /* Position the <label> */\n input[type="checkbox"] + label {\n position: relative;\n display: inline-block;\n height: 17px;\n line-height: 17px;\n padding-left: 30px;\n cursor: pointer;\n }\n\n /* SHARED STYLES - Radio & Checkbox - Unchecked */\n input[type="checkbox"] + label:before {\n content: \'\';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n border: 2px solid ', ';\n background-color: ', ';\n }\n\n /* CHECKBOX - Unchecked */\n input[type="checkbox"]:not(:checked) + label:before {\n /* Add styles if needed */\n }\n\n /* CHECKBOX - Checked ( CSS Tick ) */\n input[type="checkbox"]:checked + label:after {\n position: absolute;\n content: "";\n left: 7px;\n top: 0px;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n /* Short Arm */\n width: 5px;\n border-bottom: 3px solid ', ';\n /* Long Arm */\n height: 11px;\n border-right: 3px solid ', ';\n }\n\n /* SHARED STYLES - Radio & Checkbox - Disabled */\n input[type="checkbox"]:disabled + label:before {\n border-color: #bbb;\n background-color: #ddd;\n }\n\n input[type="checkbox"]:disabled + label {\n color: #999;\n }\n']);
|
8 |
|
9 | var _react = require('react');
|
10 |
|
11 | var _react2 = _interopRequireDefault(_react);
|
12 |
|
13 | var _propTypes = require('prop-types');
|
14 |
|
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
16 |
|
17 | var _styledComponents = require('styled-components');
|
18 |
|
19 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
20 |
|
21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
22 |
|
23 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
24 |
|
25 |
|
26 | var CheckboxStyled = _styledComponents2.default.div(_templateObject, function (props) {
|
27 | return props.theme.bahFormInputDefaultHeight;
|
28 | }, function (props) {
|
29 | return props.theme.bahFormInputRadioCheckDefaultPadding;
|
30 | }, function (props) {
|
31 | return props.theme.bahFormFieldsDefaultMarginBottom;
|
32 | }, function (props) {
|
33 | return props.theme.bahFormInputBorderColor;
|
34 | }, function (props) {
|
35 | return props.theme.bahFormInputBackgroundColor;
|
36 | }, function (props) {
|
37 | return props.theme.bahFormInputBorderColor;
|
38 | }, function (props) {
|
39 | return props.theme.bahFormInputBorderColor;
|
40 | });
|
41 |
|
42 | var Checkbox = function Checkbox(_ref) {
|
43 | var children = _ref.children,
|
44 | disabled = _ref.disabled,
|
45 | name = _ref.name,
|
46 | id = _ref.id;
|
47 | return _react2.default.createElement(
|
48 | CheckboxStyled,
|
49 | null,
|
50 | _react2.default.createElement('input', { type: 'checkbox', disabled: disabled, name: name, id: id }),
|
51 | _react2.default.createElement(
|
52 | 'label',
|
53 | { htmlFor: id },
|
54 | children
|
55 | )
|
56 | );
|
57 | };
|
58 |
|
59 | Checkbox.defaultProps = {
|
60 | children: '',
|
61 | name: '',
|
62 | id: '',
|
63 | disabled: false
|
64 | };
|
65 |
|
66 | Checkbox.propTypes = {
|
67 | children: _propTypes2.default.string,
|
68 | name: _propTypes2.default.string,
|
69 | id: _propTypes2.default.string,
|
70 | disabled: _propTypes2.default.bool
|
71 | };
|
72 |
|
73 | exports.default = Checkbox; |
\ | No newline at end of file |