dibk-design 0.3.24

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.
Files changed (101) hide show
  1. package/LICENSE +674 -0
  2. package/README.md +3 -0
  3. package/dist/components/Accordion.js +120 -0
  4. package/dist/components/Accordion.md +15 -0
  5. package/dist/components/Accordion.module.scss +180 -0
  6. package/dist/components/Button.js +104 -0
  7. package/dist/components/Button.md +48 -0
  8. package/dist/components/Button.module.scss +141 -0
  9. package/dist/components/CheckBoxIcon.js +97 -0
  10. package/dist/components/CheckBoxIcon.md +23 -0
  11. package/dist/components/CheckBoxIcon.module.scss +39 -0
  12. package/dist/components/CheckBoxInput.js +91 -0
  13. package/dist/components/CheckBoxInput.md +39 -0
  14. package/dist/components/CheckBoxInput.module.scss +18 -0
  15. package/dist/components/CheckBoxListItem.js +85 -0
  16. package/dist/components/CheckBoxListItem.md +35 -0
  17. package/dist/components/CheckBoxListItem.module.scss +59 -0
  18. package/dist/components/ContentBox.js +106 -0
  19. package/dist/components/ContentBox.md +46 -0
  20. package/dist/components/ContentBox.module.scss +105 -0
  21. package/dist/components/DragAndDropFileInput.js +196 -0
  22. package/dist/components/DragAndDropFileInput.md +7 -0
  23. package/dist/components/DragAndDropFileInput.module.scss +36 -0
  24. package/dist/components/Footer.js +62 -0
  25. package/dist/components/Footer.md +7 -0
  26. package/dist/components/Footer.module.scss +11 -0
  27. package/dist/components/Header.js +75 -0
  28. package/dist/components/Header.md +7 -0
  29. package/dist/components/Header.module.scss +30 -0
  30. package/dist/components/InputField.js +201 -0
  31. package/dist/components/InputField.md +36 -0
  32. package/dist/components/InputField.module.scss +91 -0
  33. package/dist/components/List.js +106 -0
  34. package/dist/components/List.md +10 -0
  35. package/dist/components/List.module.scss +19 -0
  36. package/dist/components/LoadingAnimation.js +74 -0
  37. package/dist/components/LoadingAnimation.md +5 -0
  38. package/dist/components/LoadingAnimation.module.scss +26 -0
  39. package/dist/components/NavigationBar.js +229 -0
  40. package/dist/components/NavigationBar.md +31 -0
  41. package/dist/components/NavigationBar.module.scss +176 -0
  42. package/dist/components/NavigationBarListItem.js +85 -0
  43. package/dist/components/NavigationBarListItem.md +16 -0
  44. package/dist/components/Paper.js +71 -0
  45. package/dist/components/Paper.md +9 -0
  46. package/dist/components/Paper.module.scss +17 -0
  47. package/dist/components/RadioButtonIcon.js +92 -0
  48. package/dist/components/RadioButtonIcon.md +23 -0
  49. package/dist/components/RadioButtonIcon.module.scss +21 -0
  50. package/dist/components/RadioButtonInput.js +89 -0
  51. package/dist/components/RadioButtonInput.md +22 -0
  52. package/dist/components/RadioButtonInput.module.scss +15 -0
  53. package/dist/components/RadioButtonListItem.js +86 -0
  54. package/dist/components/RadioButtonListItem.md +24 -0
  55. package/dist/components/RadioButtonListItem.module.scss +59 -0
  56. package/dist/components/Select.js +188 -0
  57. package/dist/components/Select.md +26 -0
  58. package/dist/components/Select.module.scss +84 -0
  59. package/dist/components/Theme.js +131 -0
  60. package/dist/components/Theme.md +12 -0
  61. package/dist/components/Theme.module.scss +76 -0
  62. package/dist/components/WizardNavigation/Step.js +104 -0
  63. package/dist/components/WizardNavigation/Step.module.scss +75 -0
  64. package/dist/components/WizardNavigation.js +95 -0
  65. package/dist/components/WizardNavigation.md +84 -0
  66. package/dist/components/WizardNavigation.module.scss +4 -0
  67. package/dist/fonts/Altis-Light.eot +0 -0
  68. package/dist/fonts/Altis-Light.svg +326 -0
  69. package/dist/fonts/Altis-Light.ttf +0 -0
  70. package/dist/fonts/Altis-Light.woff +0 -0
  71. package/dist/functions/theme.js +60 -0
  72. package/dist/images/dibk-logo-mobile.svg +91 -0
  73. package/dist/images/dibk-logo.svg +991 -0
  74. package/dist/images/spinner.svg +57 -0
  75. package/dist/index.js +185 -0
  76. package/dist/style/abstracts/_all.scss +2 -0
  77. package/dist/style/abstracts/mixins/_all.scss +12 -0
  78. package/dist/style/abstracts/mixins/_animation.scss +6 -0
  79. package/dist/style/abstracts/mixins/_appearance.scss +5 -0
  80. package/dist/style/abstracts/mixins/_border-radius.scss +31 -0
  81. package/dist/style/abstracts/mixins/_box-shadow.scss +5 -0
  82. package/dist/style/abstracts/mixins/_box-sizing.scss +5 -0
  83. package/dist/style/abstracts/mixins/_calc.scss +5 -0
  84. package/dist/style/abstracts/mixins/_keyframes.scss +14 -0
  85. package/dist/style/abstracts/mixins/_opacity.scss +5 -0
  86. package/dist/style/abstracts/mixins/_placeholder.scss +17 -0
  87. package/dist/style/abstracts/mixins/_scrollbar.scss +26 -0
  88. package/dist/style/abstracts/mixins/_transform.scss +6 -0
  89. package/dist/style/abstracts/mixins/_transition.scss +34 -0
  90. package/dist/style/abstracts/variables/_all.scss +3 -0
  91. package/dist/style/abstracts/variables/_colors.scss +35 -0
  92. package/dist/style/abstracts/variables/_typography.scss +1 -0
  93. package/dist/style/abstracts/variables/_viewports.scss +11 -0
  94. package/dist/style/base/_all.scss +2 -0
  95. package/dist/style/base/_reset.scss +15 -0
  96. package/dist/style/base/_typography.scss +6 -0
  97. package/dist/style/base/fonts.css +6 -0
  98. package/dist/style/global.scss +3 -0
  99. package/dist/style/layout/_all.scss +1 -0
  100. package/dist/style/layout/_containers.scss +9 -0
  101. package/package.json +43 -0
@@ -0,0 +1,23 @@
1
+ Regular radio button icons example:
2
+
3
+ ```js
4
+ <RadioButtonIcon />
5
+ <RadioButtonIcon checked={true} />
6
+ ```
7
+
8
+ Themed Regular radio button icons example:
9
+
10
+ ```js
11
+ import customTheme from 'data/customTheme';
12
+ <React.Fragment>
13
+ <RadioButtonIcon theme={customTheme}/>
14
+ <RadioButtonIcon checked={true} theme={customTheme}/>
15
+ </React.Fragment>
16
+ ```
17
+
18
+ Radio button icons with custom size example:
19
+
20
+ ```js
21
+ <RadioButtonIcon size='36px' />
22
+ <RadioButtonIcon size='36px' checked={true} />
23
+ ```
@@ -0,0 +1,21 @@
1
+ @import "../style/global.scss";
2
+
3
+ :local(.radioButtonIcon) {
4
+ @include border-radius(50%);
5
+ @include box-shadow(0 0 0 1px #afaba8);
6
+ @include transition(all 0.1s ease-in-out);
7
+ @include box-sizing(content-box);
8
+ display: inline-block;
9
+ vertical-align: middle;
10
+ min-width: 10px;
11
+ width: 10px;
12
+ height: 10px;
13
+ background: white;
14
+ margin-right: .4em;
15
+ border: 0.3em solid white;
16
+
17
+ &:local(.checked) {
18
+ @include box-shadow(0 0 0 1px $color-dark-blue);
19
+ background: $color-primary;
20
+ }
21
+ }
@@ -0,0 +1,89 @@
1
+ "use strict";
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
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
15
+
16
+ var _RadioButtonInputModule = _interopRequireDefault(require("./RadioButtonInput.module.scss"));
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
21
+
22
+ 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); } }
23
+
24
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
25
+
26
+ 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); }
27
+
28
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
+
30
+ 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); }; }
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 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);
49
+ }
50
+
51
+ _createClass(RadioButtonInput, [{
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);
73
+
74
+ RadioButtonInput.propTypes = {
75
+ checked: _propTypes.default.bool,
76
+ inputValue: _propTypes.default.string.isRequired,
77
+ name: _propTypes.default.string,
78
+ id: _propTypes.default.string.isRequired,
79
+ onChange: _propTypes.default.func,
80
+ contentOnly: _propTypes.default.bool,
81
+ theme: _propTypes.default.object
82
+ };
83
+ RadioButtonInput.defaultProps = {
84
+ name: '',
85
+ checked: false,
86
+ contentOnly: false
87
+ };
88
+ var _default = RadioButtonInput;
89
+ exports.default = _default;
@@ -0,0 +1,22 @@
1
+ Radio button input example:
2
+
3
+ ```js
4
+ <div className="flex">
5
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-1" checked={true}><span>Checked radio button</span></RadioButtonInput>
6
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2"><span>Unchecked radio button</span></RadioButtonInput>
7
+ </div>
8
+ ```
9
+
10
+ Themed Radio button input example:
11
+
12
+ ```js
13
+ import customTheme from 'data/customTheme';
14
+ <div className="flex">
15
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-input" id="themed-radio-button-input-1" checked={true} theme={customTheme}>
16
+ <span>Checked radio button</span>
17
+ </RadioButtonInput>
18
+ <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-input" id="themed-radio-button-input-2" theme={customTheme}>
19
+ <span>Unchecked radio button</span>
20
+ </RadioButtonInput>
21
+ </div>
22
+ ```
@@ -0,0 +1,15 @@
1
+ @import "../style/global.scss";
2
+
3
+ :local(.radioButtonInput) {
4
+ display: flex;
5
+ cursor: pointer;
6
+
7
+ input[type="radio"] {
8
+ opacity: 0;
9
+ position: absolute;
10
+ }
11
+ span {
12
+ font-weight: 300;
13
+ }
14
+ margin-right: 1em;
15
+ }
@@ -0,0 +1,86 @@
1
+ "use strict";
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
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _RadioButtonInput = _interopRequireDefault(require("./RadioButtonInput"));
15
+
16
+ var _RadioButtonListItemModule = _interopRequireDefault(require("./RadioButtonListItem.module.scss"));
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
21
+
22
+ 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); } }
23
+
24
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
25
+
26
+ 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); }
27
+
28
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
+
30
+ 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); }; }
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);
49
+ }
50
+
51
+ _createClass(RadioButtonListItem, [{
52
+ key: "render",
53
+ value: function render() {
54
+ return /*#__PURE__*/_react.default.createElement("div", {
55
+ className: _RadioButtonListItemModule.default.radioButtonListItem
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);
69
+
70
+ RadioButtonListItem.propTypes = {
71
+ /** Text content inside list item */
72
+ inputValue: _propTypes.default.string.isRequired,
73
+ checked: _propTypes.default.bool,
74
+ name: _propTypes.default.string,
75
+ id: _propTypes.default.string.isRequired,
76
+ onChange: _propTypes.default.func,
77
+ contentOnly: _propTypes.default.bool,
78
+ theme: _propTypes.default.object
79
+ };
80
+ RadioButtonListItem.defaultProps = {
81
+ name: '',
82
+ checked: false,
83
+ contentOnly: false
84
+ };
85
+ var _default = RadioButtonListItem;
86
+ exports.default = _default;
@@ -0,0 +1,24 @@
1
+ Radio button list item example:
2
+
3
+ ```js
4
+ <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-1" checked={true}>
5
+ Checked radio button
6
+ </RadioButtonListItem>
7
+ <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-2">
8
+ Checked radio button
9
+ </RadioButtonListItem>
10
+ ```
11
+
12
+ Themed Radio button list item example:
13
+
14
+ ```js
15
+ import customTheme from 'data/customTheme';
16
+ <React.Fragment>
17
+ <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-1" checked={true} theme={customTheme}>
18
+ Checked radio button
19
+ </RadioButtonListItem>
20
+ <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-2" theme={customTheme}>
21
+ Checked radio button
22
+ </RadioButtonListItem>
23
+ </React.Fragment>
24
+ ```
@@ -0,0 +1,59 @@
1
+ @import "../style/global.scss";
2
+
3
+ :local(.radioButtonListItem) {
4
+ @include box-sizing(content-box);
5
+ @include box-shadow(0 0 2px $color-dark-blue);
6
+ @include border-radius(5px);
7
+ @include transition(all 0.1s ease-in-out);
8
+ display: -webkit-box;
9
+ display: -webkit-flex;
10
+ display: -ms-flexbox;
11
+ display: flex;
12
+ -webkit-align-items: flex-start;
13
+ -webkit-box-align: flex-start;
14
+ -ms-flex-align: flex-start;
15
+ align-items: flex-start;
16
+ cursor: pointer;
17
+ font-family: $default-font;
18
+ position: relative;
19
+ font-size: 1rem;
20
+ color: #000;
21
+
22
+ &:not(:local(.contentOnly)) {
23
+ background: white;
24
+ margin-bottom: 10px;
25
+ }
26
+
27
+ &:local(.contentOnly) {
28
+ @include box-shadow(none);
29
+ cursor: auto;
30
+ label {
31
+ cursor: auto;
32
+ padding: 5px 10px;
33
+ }
34
+ }
35
+
36
+ &:local(.checked):not(:local(.contentOnly)) {
37
+ @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
38
+ }
39
+
40
+ &:not(:local(.checked)):not(:local(.contentOnly)):hover {
41
+ @include box-shadow(0 0 6px $color-dark-blue);
42
+ }
43
+
44
+ &:focus {
45
+ outline-color: #54acb8;
46
+ }
47
+
48
+ label {
49
+ width: 100%;
50
+ padding: 10px;
51
+ margin: 0;
52
+ cursor: pointer;
53
+ }
54
+
55
+ input[type="radio"] {
56
+ opacity: 0;
57
+ position: absolute;
58
+ }
59
+ }
@@ -0,0 +1,188 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _theme = require("../functions/theme");
13
+
14
+ var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ 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); }
19
+
20
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
21
+
22
+ 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); } }
23
+
24
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
25
+
26
+ 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); }
27
+
28
+ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
+
30
+ 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); }; }
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 Select = /*#__PURE__*/function (_React$Component) {
41
+ _inherits(Select, _React$Component);
42
+
43
+ var _super = _createSuper(Select);
44
+
45
+ function Select() {
46
+ _classCallCheck(this, Select);
47
+
48
+ return _super.apply(this, arguments);
49
+ }
50
+
51
+ _createClass(Select, [{
52
+ key: "getThemeErrorInputStyle",
53
+ value: function getThemeErrorInputStyle(theme) {
54
+ return {
55
+ boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')),
56
+ borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
57
+ };
58
+ }
59
+ }, {
60
+ key: "getThemeErrorMessageStyle",
61
+ value: function getThemeErrorMessageStyle(theme) {
62
+ return {
63
+ color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
64
+ };
65
+ }
66
+ }, {
67
+ key: "getThemeArrowStyle",
68
+ value: function getThemeArrowStyle(theme) {
69
+ return {
70
+ borderTopColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'primary')
71
+ };
72
+ }
73
+ }, {
74
+ key: "getKeyByValue",
75
+ value: function getKeyByValue(value, options) {
76
+ var selectedOption = options && options.length ? options.find(function (option) {
77
+ if (_typeof(option) === 'object') {
78
+ return option.value === value;
79
+ } else {
80
+ return option === value;
81
+ }
82
+ }) : null;
83
+
84
+ if (selectedOption && selectedOption.key) {
85
+ return selectedOption.key;
86
+ } else if (selectedOption && selectedOption.value) {
87
+ return selectedOption.value;
88
+ } else {
89
+ return selectedOption;
90
+ }
91
+ }
92
+ }, {
93
+ key: "renderOptionElements",
94
+ value: function renderOptionElements(options) {
95
+ return options.map(function (option, key) {
96
+ var optionObject = null;
97
+
98
+ if (_typeof(option) === 'object') {
99
+ optionObject = {
100
+ key: option.key ? option.key : '',
101
+ value: option.value ? option.value : ''
102
+ };
103
+ } else {
104
+ optionObject = {
105
+ key: option,
106
+ value: option
107
+ };
108
+ }
109
+
110
+ return /*#__PURE__*/_react.default.createElement("option", {
111
+ value: optionObject.value,
112
+ key: key
113
+ }, optionObject.key);
114
+ });
115
+ }
116
+ }, {
117
+ key: "renderPlaceholderOption",
118
+ value: function renderPlaceholderOption(placeholder, placeholderValue) {
119
+ return placeholder ? /*#__PURE__*/_react.default.createElement("option", {
120
+ value: placeholderValue,
121
+ disabled: true
122
+ }, placeholder) : '';
123
+ }
124
+ }, {
125
+ key: "render",
126
+ value: function render() {
127
+ var value = this.props.value ? this.props.value : "";
128
+ return /*#__PURE__*/_react.default.createElement("div", {
129
+ className: _SelectModule.default.select
130
+ }, /*#__PURE__*/_react.default.createElement("label", {
131
+ htmlFor: this.props.id
132
+ }, this.props.label), !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
133
+ className: _SelectModule.default.selectContainer
134
+ }, /*#__PURE__*/_react.default.createElement("span", {
135
+ className: _SelectModule.default.selectListArrow,
136
+ style: this.getThemeArrowStyle(this.props.theme)
137
+ }), /*#__PURE__*/_react.default.createElement("select", {
138
+ name: this.props.name,
139
+ multiple: this.props.multiple,
140
+ value: value,
141
+ onChange: this.props.onChange,
142
+ id: this.props.id,
143
+ className: this.props.hasErrors ? _SelectModule.default.hasErrors : '',
144
+ style: this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null
145
+ }, this.renderPlaceholderOption(this.props.placeholder, this.props.placeholderValue), this.renderOptionElements(this.props.options))), /*#__PURE__*/_react.default.createElement("span", {
146
+ className: _SelectModule.default.errorMessage,
147
+ style: this.getThemeErrorMessageStyle(this.props.theme)
148
+ }, this.props.errorMessage ? this.props.errorMessage : '')) : /*#__PURE__*/_react.default.createElement("span", null, this.props.value ? this.props.keyAsContent ? this.getKeyByValue(this.props.value, this.props.options) : this.props.value : this.props.defaultContent));
149
+ }
150
+ }]);
151
+
152
+ return Select;
153
+ }(_react.default.Component);
154
+
155
+ Select.propTypes = {
156
+ id: _propTypes.default.string.isRequired,
157
+ onChange: _propTypes.default.func.isRequired,
158
+ name: _propTypes.default.string,
159
+ multiple: _propTypes.default.bool,
160
+ options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
161
+ key: _propTypes.default.string,
162
+ value: _propTypes.default.string
163
+ })])),
164
+ value: _propTypes.default.any,
165
+ label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
166
+ contentOnly: _propTypes.default.bool,
167
+ keyAsContent: _propTypes.default.bool,
168
+ placeholder: _propTypes.default.string,
169
+ placeholderValue: _propTypes.default.string,
170
+ defaultContent: _propTypes.default.string,
171
+ hasErrors: _propTypes.default.bool,
172
+ errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
173
+ theme: _propTypes.default.object
174
+ };
175
+ Select.defaultProps = {
176
+ name: '',
177
+ options: [],
178
+ label: '',
179
+ contentOnly: false,
180
+ keyAsContent: false,
181
+ placeholder: null,
182
+ placeholderValue: '',
183
+ defaultContent: null,
184
+ hasErrors: false,
185
+ errorMessage: ''
186
+ };
187
+ var _default = Select;
188
+ exports.default = _default;