dibk-design 0.4.22 → 0.4.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Accordion.js +39 -77
- package/dist/components/Button.js +31 -75
- package/dist/components/Button.module.scss +25 -2
- package/dist/components/CheckBoxIcon.js +24 -64
- package/dist/components/CheckBoxIcon.md +6 -0
- package/dist/components/CheckBoxInput.js +26 -59
- package/dist/components/CheckBoxInput.md +6 -0
- package/dist/components/CheckBoxListItem.js +18 -51
- package/dist/components/CheckBoxListItem.md +9 -0
- package/dist/components/ContentBox.js +30 -67
- package/dist/components/Dialog.js +57 -98
- package/dist/components/DragAndDropFileInput.js +91 -132
- package/dist/components/DragAndDropFileInput.md +5 -1
- package/dist/components/Footer.js +8 -44
- package/dist/components/Header.js +11 -47
- package/dist/components/InputField.js +92 -141
- package/dist/components/Label.js +11 -53
- package/dist/components/List.js +21 -72
- package/dist/components/LoadingAnimation.js +6 -42
- package/dist/components/NavigationBar.js +126 -179
- package/dist/components/NavigationBarListItem.js +22 -59
- package/dist/components/Paper.js +6 -42
- package/dist/components/RadioButtonIcon.js +18 -60
- package/dist/components/RadioButtonInput.js +17 -53
- package/dist/components/RadioButtonListItem.js +13 -49
- package/dist/components/Select.js +100 -142
- package/dist/components/Textarea.js +52 -91
- package/dist/components/Theme.js +55 -98
- package/dist/components/WizardNavigation/Step.js +35 -72
- package/dist/components/WizardNavigation.js +25 -59
- package/dist/functions/theme.js +10 -10
- package/dist/index.js +24 -24
- package/package.json +1 -1
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
@@ -17,59 +15,25 @@ var _RadioButtonInputModule = _interopRequireDefault(require("./RadioButtonInput
|
|
|
17
15
|
|
|
18
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
37
|
-
|
|
38
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
39
|
-
|
|
40
|
-
var RadioButtonInput = /*#__PURE__*/function (_React$Component) {
|
|
41
|
-
_inherits(RadioButtonInput, _React$Component);
|
|
42
|
-
|
|
43
|
-
var _super = _createSuper(RadioButtonInput);
|
|
44
|
-
|
|
45
|
-
function RadioButtonInput() {
|
|
46
|
-
_classCallCheck(this, RadioButtonInput);
|
|
47
|
-
|
|
48
|
-
return _super.apply(this, arguments);
|
|
18
|
+
class RadioButtonInput extends _react.default.Component {
|
|
19
|
+
render() {
|
|
20
|
+
return /*#__PURE__*/_react.default.createElement("label", {
|
|
21
|
+
htmlFor: this.props.id,
|
|
22
|
+
className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(this.props.checked ? _RadioButtonInputModule.default.checked : '')
|
|
23
|
+
}, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_RadioButtonIcon.default, {
|
|
24
|
+
checked: this.props.checked,
|
|
25
|
+
theme: this.props.theme
|
|
26
|
+
}), /*#__PURE__*/_react.default.createElement("input", {
|
|
27
|
+
type: "radio",
|
|
28
|
+
onChange: this.props.onChange,
|
|
29
|
+
id: this.props.id,
|
|
30
|
+
name: this.props.name,
|
|
31
|
+
value: this.props.inputValue,
|
|
32
|
+
checked: this.props.checked
|
|
33
|
+
})) : '', /*#__PURE__*/_react.default.createElement("span", null, this.props.children));
|
|
49
34
|
}
|
|
50
35
|
|
|
51
|
-
|
|
52
|
-
key: "render",
|
|
53
|
-
value: function render() {
|
|
54
|
-
return /*#__PURE__*/_react.default.createElement("label", {
|
|
55
|
-
htmlFor: this.props.id,
|
|
56
|
-
className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(this.props.checked ? _RadioButtonInputModule.default.checked : '')
|
|
57
|
-
}, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_RadioButtonIcon.default, {
|
|
58
|
-
checked: this.props.checked,
|
|
59
|
-
theme: this.props.theme
|
|
60
|
-
}), /*#__PURE__*/_react.default.createElement("input", {
|
|
61
|
-
type: "radio",
|
|
62
|
-
onChange: this.props.onChange,
|
|
63
|
-
id: this.props.id,
|
|
64
|
-
name: this.props.name,
|
|
65
|
-
value: this.props.inputValue,
|
|
66
|
-
checked: this.props.checked
|
|
67
|
-
})) : '', /*#__PURE__*/_react.default.createElement("span", null, this.props.children));
|
|
68
|
-
}
|
|
69
|
-
}]);
|
|
70
|
-
|
|
71
|
-
return RadioButtonInput;
|
|
72
|
-
}(_react.default.Component);
|
|
36
|
+
}
|
|
73
37
|
|
|
74
38
|
RadioButtonInput.propTypes = {
|
|
75
39
|
checked: _propTypes.default.bool,
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
@@ -17,55 +15,21 @@ var _RadioButtonListItemModule = _interopRequireDefault(require("./RadioButtonLi
|
|
|
17
15
|
|
|
18
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
33
|
-
|
|
34
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
35
|
-
|
|
36
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
37
|
-
|
|
38
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
39
|
-
|
|
40
|
-
var RadioButtonListItem = /*#__PURE__*/function (_React$Component) {
|
|
41
|
-
_inherits(RadioButtonListItem, _React$Component);
|
|
42
|
-
|
|
43
|
-
var _super = _createSuper(RadioButtonListItem);
|
|
44
|
-
|
|
45
|
-
function RadioButtonListItem() {
|
|
46
|
-
_classCallCheck(this, RadioButtonListItem);
|
|
47
|
-
|
|
48
|
-
return _super.apply(this, arguments);
|
|
18
|
+
class RadioButtonListItem extends _react.default.Component {
|
|
19
|
+
render() {
|
|
20
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
21
|
+
className: "".concat(_RadioButtonListItemModule.default.radioButtonListItem, " ").concat(this.props.compact ? _RadioButtonListItemModule.default.compact : '')
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement(_RadioButtonInput.default, {
|
|
23
|
+
onChange: this.props.onChange,
|
|
24
|
+
inputValue: this.props.inputValue,
|
|
25
|
+
checked: this.props.checked,
|
|
26
|
+
contentOnly: this.props.contentOnly,
|
|
27
|
+
id: this.props.id,
|
|
28
|
+
theme: this.props.theme
|
|
29
|
+
}, this.props.children));
|
|
49
30
|
}
|
|
50
31
|
|
|
51
|
-
|
|
52
|
-
key: "render",
|
|
53
|
-
value: function render() {
|
|
54
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
-
className: "".concat(_RadioButtonListItemModule.default.radioButtonListItem, " ").concat(this.props.compact ? _RadioButtonListItemModule.default.compact : '')
|
|
56
|
-
}, /*#__PURE__*/_react.default.createElement(_RadioButtonInput.default, {
|
|
57
|
-
onChange: this.props.onChange,
|
|
58
|
-
inputValue: this.props.inputValue,
|
|
59
|
-
checked: this.props.checked,
|
|
60
|
-
contentOnly: this.props.contentOnly,
|
|
61
|
-
id: this.props.id,
|
|
62
|
-
theme: this.props.theme
|
|
63
|
-
}, this.props.children));
|
|
64
|
-
}
|
|
65
|
-
}]);
|
|
66
|
-
|
|
67
|
-
return RadioButtonListItem;
|
|
68
|
-
}(_react.default.Component);
|
|
32
|
+
}
|
|
69
33
|
|
|
70
34
|
RadioButtonListItem.propTypes = {
|
|
71
35
|
/** Text content inside list item */
|
|
@@ -17,163 +17,121 @@ var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
29
|
-
|
|
30
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
31
|
-
|
|
32
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
33
|
-
|
|
34
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
35
|
-
|
|
36
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
37
|
-
|
|
38
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
39
|
-
|
|
40
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
41
|
-
|
|
42
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
43
|
-
|
|
44
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
45
|
-
|
|
46
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
47
|
-
|
|
48
|
-
var Select = /*#__PURE__*/function (_React$Component) {
|
|
49
|
-
_inherits(Select, _React$Component);
|
|
50
|
-
|
|
51
|
-
var _super = _createSuper(Select);
|
|
52
|
-
|
|
53
|
-
function Select() {
|
|
54
|
-
_classCallCheck(this, Select);
|
|
20
|
+
class Select extends _react.default.Component {
|
|
21
|
+
getThemeErrorInputStyle(theme) {
|
|
22
|
+
return {
|
|
23
|
+
boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')),
|
|
24
|
+
borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
25
|
+
};
|
|
26
|
+
}
|
|
55
27
|
|
|
56
|
-
|
|
28
|
+
getThemeErrorMessageStyle(theme) {
|
|
29
|
+
return {
|
|
30
|
+
color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
31
|
+
};
|
|
57
32
|
}
|
|
58
33
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
}, {
|
|
68
|
-
key: "getThemeErrorMessageStyle",
|
|
69
|
-
value: function getThemeErrorMessageStyle(theme) {
|
|
70
|
-
return {
|
|
71
|
-
color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
}, {
|
|
75
|
-
key: "getThemeArrowStyle",
|
|
76
|
-
value: function getThemeArrowStyle(theme) {
|
|
77
|
-
return {
|
|
78
|
-
borderTopColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'primary')
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
}, {
|
|
82
|
-
key: "getKeyByValue",
|
|
83
|
-
value: function getKeyByValue(value, options) {
|
|
84
|
-
var selectedOption = options && options.length ? options.find(function (option) {
|
|
85
|
-
if (_typeof(option) === 'object') {
|
|
86
|
-
return option.value === value;
|
|
87
|
-
} else {
|
|
88
|
-
return option === value;
|
|
89
|
-
}
|
|
90
|
-
}) : null;
|
|
34
|
+
getThemeArrowStyle(theme) {
|
|
35
|
+
return {
|
|
36
|
+
borderTopColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'primary')
|
|
37
|
+
};
|
|
38
|
+
}
|
|
91
39
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
return
|
|
40
|
+
getKeyByValue(value, options) {
|
|
41
|
+
const selectedOption = options && options.length ? options.find(option => {
|
|
42
|
+
if (typeof option === 'object') {
|
|
43
|
+
return option.value === value;
|
|
96
44
|
} else {
|
|
97
|
-
return
|
|
45
|
+
return option === value;
|
|
98
46
|
}
|
|
47
|
+
}) : null;
|
|
48
|
+
|
|
49
|
+
if (selectedOption && selectedOption.key) {
|
|
50
|
+
return selectedOption.key;
|
|
51
|
+
} else if (selectedOption && selectedOption.value) {
|
|
52
|
+
return selectedOption.value;
|
|
53
|
+
} else {
|
|
54
|
+
return selectedOption;
|
|
99
55
|
}
|
|
100
|
-
}
|
|
101
|
-
key: "renderOptionElements",
|
|
102
|
-
value: function renderOptionElements(options) {
|
|
103
|
-
return options.map(function (option, key) {
|
|
104
|
-
var optionObject = null;
|
|
105
|
-
|
|
106
|
-
if (_typeof(option) === 'object') {
|
|
107
|
-
optionObject = {
|
|
108
|
-
key: option.key ? option.key : '',
|
|
109
|
-
value: option.value ? option.value : ''
|
|
110
|
-
};
|
|
111
|
-
} else {
|
|
112
|
-
optionObject = {
|
|
113
|
-
key: option,
|
|
114
|
-
value: option
|
|
115
|
-
};
|
|
116
|
-
}
|
|
56
|
+
}
|
|
117
57
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
return placeholder ? /*#__PURE__*/_react.default.createElement("option", {
|
|
128
|
-
value: placeholderValue,
|
|
129
|
-
disabled: true
|
|
130
|
-
}, placeholder) : '';
|
|
131
|
-
}
|
|
132
|
-
}, {
|
|
133
|
-
key: "render",
|
|
134
|
-
value: function render() {
|
|
135
|
-
if (this.props.contentOnly) {
|
|
136
|
-
var value = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
|
|
137
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
138
|
-
className: _SelectModule.default.select
|
|
139
|
-
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
140
|
-
htmlFor: this.props.id
|
|
141
|
-
}, this.props.label), /*#__PURE__*/_react.default.createElement("span", null, value ? this.props.keyAsContent ? this.getKeyByValue(value, this.props.options) : value : this.props.defaultContent));
|
|
58
|
+
renderOptionElements(options) {
|
|
59
|
+
return options.map((option, key) => {
|
|
60
|
+
let optionObject = null;
|
|
61
|
+
|
|
62
|
+
if (typeof option === 'object') {
|
|
63
|
+
optionObject = {
|
|
64
|
+
key: option.key ? option.key : '',
|
|
65
|
+
value: option.value ? option.value : ''
|
|
66
|
+
};
|
|
142
67
|
} else {
|
|
143
|
-
|
|
68
|
+
optionObject = {
|
|
69
|
+
key: option,
|
|
70
|
+
value: option
|
|
71
|
+
};
|
|
72
|
+
}
|
|
144
73
|
|
|
145
|
-
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement("option", {
|
|
75
|
+
value: optionObject.value,
|
|
76
|
+
key: key
|
|
77
|
+
}, optionObject.key);
|
|
78
|
+
});
|
|
79
|
+
}
|
|
146
80
|
|
|
147
|
-
|
|
81
|
+
renderPlaceholderOption(placeholder, placeholderValue) {
|
|
82
|
+
return placeholder ? /*#__PURE__*/_react.default.createElement("option", {
|
|
83
|
+
value: placeholderValue,
|
|
84
|
+
disabled: true
|
|
85
|
+
}, placeholder) : '';
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
render() {
|
|
89
|
+
if (this.props.contentOnly) {
|
|
90
|
+
const value = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
|
|
91
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
92
|
+
className: _SelectModule.default.select
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
94
|
+
htmlFor: this.props.id
|
|
95
|
+
}, this.props.label), /*#__PURE__*/_react.default.createElement("span", null, value ? this.props.keyAsContent ? this.getKeyByValue(value, this.props.options) : value : this.props.defaultContent));
|
|
96
|
+
} else {
|
|
97
|
+
var _this$props$width, _this$props$width2;
|
|
98
|
+
|
|
99
|
+
const defaultValue = !this.props.value && this.props.defaultValue ? this.props.defaultValue : false;
|
|
100
|
+
const styleRules = { ...(this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null),
|
|
101
|
+
...(((_this$props$width = this.props.width) === null || _this$props$width === void 0 ? void 0 : _this$props$width.length) && {
|
|
148
102
|
maxWidth: this.props.width
|
|
149
|
-
})
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
103
|
+
})
|
|
104
|
+
};
|
|
105
|
+
const props = {
|
|
106
|
+
name: this.props.name,
|
|
107
|
+
multiple: this.props.multiple,
|
|
108
|
+
[defaultValue ? 'defaultValue' : 'value']: defaultValue || this.props.value,
|
|
109
|
+
onChange: this.props.onChange,
|
|
110
|
+
id: this.props.id,
|
|
111
|
+
className: this.props.hasErrors ? _SelectModule.default.hasErrors : '',
|
|
112
|
+
style: styleRules
|
|
113
|
+
};
|
|
114
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
115
|
+
className: _SelectModule.default.select
|
|
116
|
+
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
117
|
+
htmlFor: this.props.id
|
|
118
|
+
}, this.props.label), /*#__PURE__*/_react.default.createElement("div", {
|
|
119
|
+
className: _SelectModule.default.selectContainer,
|
|
120
|
+
style: { ...(((_this$props$width2 = this.props.width) === null || _this$props$width2 === void 0 ? void 0 : _this$props$width2.length) && {
|
|
162
121
|
maxWidth: this.props.width
|
|
163
122
|
})
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
}
|
|
123
|
+
}
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
125
|
+
className: _SelectModule.default.selectListArrow,
|
|
126
|
+
style: this.getThemeArrowStyle(this.props.theme)
|
|
127
|
+
}), /*#__PURE__*/_react.default.createElement("select", props, this.renderPlaceholderOption(this.props.placeholder, this.props.placeholderValue), this.renderOptionElements(this.props.options))), /*#__PURE__*/_react.default.createElement("span", {
|
|
128
|
+
className: _SelectModule.default.errorMessage,
|
|
129
|
+
style: this.getThemeErrorMessageStyle(this.props.theme)
|
|
130
|
+
}, this.props.errorMessage ? this.props.errorMessage : ''));
|
|
172
131
|
}
|
|
173
|
-
}
|
|
132
|
+
}
|
|
174
133
|
|
|
175
|
-
|
|
176
|
-
}(_react.default.Component);
|
|
134
|
+
}
|
|
177
135
|
|
|
178
136
|
Select.propTypes = {
|
|
179
137
|
id: _propTypes.default.string.isRequired,
|
|
@@ -208,7 +166,7 @@ Select.defaultProps = {
|
|
|
208
166
|
defaultContent: null,
|
|
209
167
|
hasErrors: false,
|
|
210
168
|
errorMessage: '',
|
|
211
|
-
onChange:
|
|
169
|
+
onChange: () => {
|
|
212
170
|
return false;
|
|
213
171
|
}
|
|
214
172
|
};
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
@@ -19,103 +17,66 @@ var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
|
|
|
19
17
|
|
|
20
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
19
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
31
|
-
|
|
32
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
33
|
-
|
|
34
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
35
|
-
|
|
36
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
37
|
-
|
|
38
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
39
|
-
|
|
40
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
41
|
-
|
|
42
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
43
|
-
|
|
44
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
45
|
-
|
|
46
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
47
|
-
|
|
48
|
-
var Textarea = /*#__PURE__*/function (_React$Component) {
|
|
49
|
-
_inherits(Textarea, _React$Component);
|
|
50
|
-
|
|
51
|
-
var _super = _createSuper(Textarea);
|
|
52
|
-
|
|
53
|
-
function Textarea() {
|
|
54
|
-
_classCallCheck(this, Textarea);
|
|
20
|
+
class Textarea extends _react.default.Component {
|
|
21
|
+
getThemeErrorInputStyle(theme) {
|
|
22
|
+
return {
|
|
23
|
+
boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')),
|
|
24
|
+
borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
25
|
+
};
|
|
26
|
+
}
|
|
55
27
|
|
|
56
|
-
|
|
28
|
+
getThemeErrorMessageStyle(theme) {
|
|
29
|
+
return {
|
|
30
|
+
color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
31
|
+
};
|
|
57
32
|
}
|
|
58
33
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
return {
|
|
63
|
-
boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')),
|
|
64
|
-
borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
65
|
-
};
|
|
66
|
-
}
|
|
67
|
-
}, {
|
|
68
|
-
key: "getThemeErrorMessageStyle",
|
|
69
|
-
value: function getThemeErrorMessageStyle(theme) {
|
|
70
|
-
return {
|
|
71
|
-
color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
}, {
|
|
75
|
-
key: "renderValueAsText",
|
|
76
|
-
value: function renderValueAsText(value, defaultContent) {
|
|
77
|
-
return value ? value : defaultContent;
|
|
78
|
-
}
|
|
79
|
-
}, {
|
|
80
|
-
key: "renderInputField",
|
|
81
|
-
value: function renderInputField() {
|
|
82
|
-
var _this$props$width, _this$props$resize, _props;
|
|
34
|
+
renderValueAsText(value, defaultContent) {
|
|
35
|
+
return value ? value : defaultContent;
|
|
36
|
+
}
|
|
83
37
|
|
|
84
|
-
|
|
38
|
+
renderInputField() {
|
|
39
|
+
var _this$props$width, _this$props$resize;
|
|
85
40
|
|
|
86
|
-
|
|
41
|
+
const defaultValue = !this.props.value && this.props.defaultValue ? this.props.defaultValue : false;
|
|
42
|
+
const styleRules = { ...(this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null),
|
|
43
|
+
...(((_this$props$width = this.props.width) === null || _this$props$width === void 0 ? void 0 : _this$props$width.length) && {
|
|
87
44
|
maxWidth: this.props.width
|
|
88
|
-
}),
|
|
45
|
+
}),
|
|
46
|
+
...(((_this$props$resize = this.props.resize) === null || _this$props$resize === void 0 ? void 0 : _this$props$resize.length) && {
|
|
89
47
|
resize: this.props.resize
|
|
90
|
-
})
|
|
48
|
+
})
|
|
49
|
+
};
|
|
50
|
+
const props = {
|
|
51
|
+
name: this.props.name,
|
|
52
|
+
readOnly: this.props.readOnly,
|
|
53
|
+
disabled: this.props.disabled,
|
|
54
|
+
type: this.props.type,
|
|
55
|
+
id: this.props.id,
|
|
56
|
+
onChange: this.props.onChange,
|
|
57
|
+
onBlur: this.props.onBlur,
|
|
58
|
+
[defaultValue ? 'defaultValue' : 'value']: defaultValue || this.props.value,
|
|
59
|
+
placeholder: this.props.placeholder,
|
|
60
|
+
rows: this.props.rows,
|
|
61
|
+
className: this.props.hasErrors ? _TextareaModule.default.hasErrors : '',
|
|
62
|
+
'aria-required': this.props.mandatory,
|
|
63
|
+
style: styleRules
|
|
64
|
+
};
|
|
65
|
+
return /*#__PURE__*/_react.default.createElement("textarea", props);
|
|
66
|
+
}
|
|
91
67
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
}, {
|
|
104
|
-
key: "render",
|
|
105
|
-
value: function render() {
|
|
106
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
107
|
-
className: _TextareaModule.default.textarea
|
|
108
|
-
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
109
|
-
htmlFor: this.props.id
|
|
110
|
-
}, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
|
|
111
|
-
className: _TextareaModule.default.errorMessage,
|
|
112
|
-
style: this.getThemeErrorMessageStyle(this.props.theme)
|
|
113
|
-
}, this.props.errorMessage ? this.props.errorMessage : ''));
|
|
114
|
-
}
|
|
115
|
-
}]);
|
|
68
|
+
render() {
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
70
|
+
className: _TextareaModule.default.textarea
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
|
|
72
|
+
htmlFor: this.props.id
|
|
73
|
+
}, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
|
|
74
|
+
className: _TextareaModule.default.errorMessage,
|
|
75
|
+
style: this.getThemeErrorMessageStyle(this.props.theme)
|
|
76
|
+
}, this.props.errorMessage ? this.props.errorMessage : ''));
|
|
77
|
+
}
|
|
116
78
|
|
|
117
|
-
|
|
118
|
-
}(_react.default.Component);
|
|
79
|
+
}
|
|
119
80
|
|
|
120
81
|
Textarea.propTypes = {
|
|
121
82
|
/** Text content inside list item */
|
|
@@ -148,7 +109,7 @@ Textarea.defaultProps = {
|
|
|
148
109
|
hasErrors: false,
|
|
149
110
|
errorMessage: '',
|
|
150
111
|
mandatory: false,
|
|
151
|
-
onChange:
|
|
112
|
+
onChange: () => {
|
|
152
113
|
return false;
|
|
153
114
|
}
|
|
154
115
|
};
|