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="radio"] {\n position: absolute;\n left: -9999px;\n }\n\n /* Position the <label> */\n input[type="radio"] + 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="radio"] + 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 /* RADIO - Unchecked */\n input[type="radio"]:checked + label:before,\n input[type="radio"]:not(:checked) + label:before {\n border-radius: 50%;\n }\n\n /* RADIO - Checked */\n input[type="radio"]:checked + label:after {\n position: absolute;\n content: \'\';\n top: 50%;\n transform: translateY(-50%);\n left: 6px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ', ';\n }\n\n /* SHARED STYLES - Radio & Checkbox - Disabled */\n input[type="radio"]:disabled + label:before {\n border-color: #bbb;\n background-color: #ddd;\n }\n\n input[type="radio"]: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="radio"] {\n position: absolute;\n left: -9999px;\n }\n\n /* Position the <label> */\n input[type="radio"] + 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="radio"] + 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 /* RADIO - Unchecked */\n input[type="radio"]:checked + label:before,\n input[type="radio"]:not(:checked) + label:before {\n border-radius: 50%;\n }\n\n /* RADIO - Checked */\n input[type="radio"]:checked + label:after {\n position: absolute;\n content: \'\';\n top: 50%;\n transform: translateY(-50%);\n left: 6px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ', ';\n }\n\n /* SHARED STYLES - Radio & Checkbox - Disabled */\n input[type="radio"]:disabled + label:before {\n border-color: #bbb;\n background-color: #ddd;\n }\n\n input[type="radio"]: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 RadioStyled = _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 | });
|
39 |
|
40 | var Radio = function Radio(_ref) {
|
41 | var children = _ref.children,
|
42 | id = _ref.id,
|
43 | disabled = _ref.disabled,
|
44 | name = _ref.name;
|
45 | return _react2.default.createElement(
|
46 | RadioStyled,
|
47 | null,
|
48 | _react2.default.createElement('input', { type: 'radio', disabled: disabled, name: name, id: id }),
|
49 | _react2.default.createElement(
|
50 | 'label',
|
51 | { htmlFor: id },
|
52 | children
|
53 | )
|
54 | );
|
55 | };
|
56 |
|
57 | Radio.defaultProps = {
|
58 | children: '',
|
59 | id: '',
|
60 | disabled: false,
|
61 | name: ''
|
62 | };
|
63 |
|
64 | Radio.propTypes = {
|
65 | children: _propTypes2.default.string,
|
66 | id: _propTypes2.default.string,
|
67 | disabled: _propTypes2.default.bool,
|
68 | name: _propTypes2.default.string
|
69 | };
|
70 |
|
71 | exports.default = Radio; |
\ | No newline at end of file |