1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.InputRedux = undefined;
|
7 |
|
8 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
9 |
|
10 | var _templateObject = _taggedTemplateLiteral(['\n input {\n appearance: none;\n background-color: ', ';\n border: 2px solid ', ';\n border-radius: ', ';\n color: inherit;\n font-size: 1rem;\n height: ', ';\n padding: ', ';\n vertical-align: middle;\n box-shadow: inset 0 2px 3px ', ';\n width: 100%;\n margin-bottom: ', ';\n\n &:disabled {\n background-color: ', ';\n }\n\n &:focus {\n box-shadow: inset 0 2px 3px ', ';\n border-color: ', ';\n outline: 0;\n }\n\n ', ' ', ';\n }\n'], ['\n input {\n appearance: none;\n background-color: ', ';\n border: 2px solid ', ';\n border-radius: ', ';\n color: inherit;\n font-size: 1rem;\n height: ', ';\n padding: ', ';\n vertical-align: middle;\n box-shadow: inset 0 2px 3px ', ';\n width: 100%;\n margin-bottom: ', ';\n\n &:disabled {\n background-color: ', ';\n }\n\n &:focus {\n box-shadow: inset 0 2px 3px ', ';\n border-color: ', ';\n outline: 0;\n }\n\n ', ' ', ';\n }\n']);
|
11 |
|
12 | var _react = require('react');
|
13 |
|
14 | var _react2 = _interopRequireDefault(_react);
|
15 |
|
16 | var _propTypes = require('prop-types');
|
17 |
|
18 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
19 |
|
20 | var _styledComponents = require('styled-components');
|
21 |
|
22 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
23 |
|
24 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
25 |
|
26 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
27 |
|
28 | function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
29 |
|
30 | var InputStyled = _styledComponents2.default.div(_templateObject, function (props) {
|
31 | return props.theme.bahFormInputBackgroundColor;
|
32 | }, function (props) {
|
33 | return props.theme.bahFormInputBorderColor;
|
34 | }, function (props) {
|
35 | return props.theme.bahFormFieldsDefaultBorder;
|
36 | }, function (props) {
|
37 | return props.theme.bahFormInputDefaultHeight;
|
38 | }, function (props) {
|
39 | return props.theme.bahFormInputDefaultPadding;
|
40 | }, function (props) {
|
41 | return props.theme.bahFormInputBoxShadowColor;
|
42 | }, function (props) {
|
43 | return props.theme.bahFormFieldsDefaultMarginBottom;
|
44 | }, function (props) {
|
45 | return props.theme.bahFormInputDisabledColor;
|
46 | }, function (props) {
|
47 | return props.theme.bahFormInputFocusShadowColor;
|
48 | }, function (props) {
|
49 | return props.theme.bahFormInputFocusBorderColor;
|
50 | }, function (props) {
|
51 | return props.isValid && '\n box-shadow:inset 0 2px 3px ' + props.theme.bahColors.green100 + ';\n border-color: ' + props.theme.bahColors.green300 + ';\n outline: 0;\n &:focus {\n box-shadow:inset 0 2px 3px ' + props.theme.bahColors.green200 + ';\n border-color: ' + props.theme.bahColors.green400 + ';\n outline: 0;\n }\n ';
|
52 | }, function (props) {
|
53 | return props.isInvalid && '\n box-shadow:inset 0 2px 3px ' + props.theme.bahColors.red100 + ';\n border-color: ' + props.theme.bahColors.red300 + ';\n outline: 0;\n &:focus {\n box-shadow:inset 0 2px 3px ' + props.theme.bahColors.red200 + ';\n border-color: ' + props.theme.bahColors.red400 + ';\n outline: 0;\n }\n ';
|
54 | });
|
55 |
|
56 | var Input = function Input(_ref) {
|
57 | var children = _ref.children,
|
58 | name = _ref.name,
|
59 | type = _ref.type,
|
60 | disabled = _ref.disabled,
|
61 | isValid = _ref.isValid,
|
62 | isInvalid = _ref.isInvalid,
|
63 | props = _objectWithoutProperties(_ref, ['children', 'name', 'type', 'disabled', 'isValid', 'isInvalid']);
|
64 |
|
65 | return _react2.default.createElement(
|
66 | InputStyled,
|
67 | { isValid: isValid, isInvalid: isInvalid },
|
68 | _react2.default.createElement(
|
69 | 'label',
|
70 | { htmlFor: name },
|
71 | children
|
72 | ),
|
73 | _react2.default.createElement('input', _extends({}, props, { disabled: disabled, type: type, name: name }))
|
74 | );
|
75 | };
|
76 |
|
77 | var InputRedux = function InputRedux(_ref2) {
|
78 | var disabled = _ref2.disabled,
|
79 | isValid = _ref2.isValid,
|
80 | isInvalid = _ref2.isInvalid,
|
81 | props = _objectWithoutProperties(_ref2, ['disabled', 'isValid', 'isInvalid']);
|
82 |
|
83 | return _react2.default.createElement(
|
84 | InputStyled,
|
85 | { isValid: isValid, isInvalid: isInvalid },
|
86 | _react2.default.createElement(
|
87 | 'label',
|
88 | { htmlFor: props.input.name },
|
89 | props.label
|
90 | ),
|
91 | _react2.default.createElement('input', _extends({}, props.input, {
|
92 | placeholder: props.placeholder,
|
93 | readOnly: props.readOnly,
|
94 | type: props.type,
|
95 | disabled: disabled
|
96 | }))
|
97 | );
|
98 | };
|
99 |
|
100 | exports.InputRedux = InputRedux;
|
101 | Input.defaultProps = {
|
102 | children: '',
|
103 | name: '',
|
104 | type: 'text',
|
105 | disabled: false,
|
106 | isValid: false,
|
107 | isInvalid: false
|
108 | };
|
109 |
|
110 | Input.propTypes = {
|
111 | children: _propTypes2.default.node.isRequired,
|
112 | name: _propTypes2.default.string,
|
113 | type: _propTypes2.default.string,
|
114 | disabled: _propTypes2.default.bool,
|
115 | isValid: _propTypes2.default.bool,
|
116 | isInvalid: _propTypes2.default.bool
|
117 | };
|
118 |
|
119 | InputRedux.defaultProps = {
|
120 | name: '',
|
121 | label: '',
|
122 | input: {},
|
123 | placeholder: '',
|
124 | type: 'text',
|
125 | readOnly: false,
|
126 | disabled: false,
|
127 | isValid: false,
|
128 | isInvalid: false
|
129 | };
|
130 |
|
131 | InputRedux.propTypes = {
|
132 | name: _propTypes2.default.string,
|
133 | label: _propTypes2.default.string,
|
134 | input: _propTypes2.default.object,
|
135 | placeholder: _propTypes2.default.string,
|
136 | type: _propTypes2.default.string,
|
137 | readOnly: _propTypes2.default.bool,
|
138 | disabled: _propTypes2.default.bool,
|
139 | isValid: _propTypes2.default.bool,
|
140 | isInvalid: _propTypes2.default.bool
|
141 | };
|
142 |
|
143 | exports.default = Input; |
\ | No newline at end of file |