dibk-design 3.4.0 → 3.5.0
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 +14 -23
- package/dist/components/Button.js +15 -20
- package/dist/components/CheckBoxIcon.js +8 -11
- package/dist/components/CheckBoxInput.js +4 -4
- package/dist/components/CheckBoxList.js +7 -7
- package/dist/components/CheckBoxListItem.js +4 -4
- package/dist/components/Container.js +1 -1
- package/dist/components/ContentBox.js +7 -7
- package/dist/components/Dialog.js +8 -9
- package/dist/components/DragAndDropFileInput.js +21 -33
- package/dist/components/ErrorBox.js +2 -2
- package/dist/components/ErrorMessage.js +3 -3
- package/dist/components/Footer.js +1 -1
- package/dist/components/Header.js +7 -7
- package/dist/components/InputField.js +31 -27
- package/dist/components/Label.js +10 -13
- package/dist/components/List.js +9 -11
- package/dist/components/ListItem.js +2 -2
- package/dist/components/LoadingAnimation.js +1 -1
- package/dist/components/NavigationBar.js +27 -39
- package/dist/components/NavigationBarListItem.js +4 -5
- package/dist/components/Paper.js +1 -1
- package/dist/components/ProgressBar.js +5 -7
- package/dist/components/RadioButtonIcon.js +8 -11
- package/dist/components/RadioButtonInput.js +4 -4
- package/dist/components/RadioButtonList.js +7 -7
- package/dist/components/RadioButtonListItem.js +4 -4
- package/dist/components/Select.js +61 -64
- package/dist/components/Table.js +7 -7
- package/dist/components/Textarea.js +28 -23
- package/dist/components/Theme.js +15 -15
- package/dist/components/WizardNavigation/Step.js +12 -11
- package/dist/components/WizardNavigation.js +8 -8
- package/dist/functions/generators.js +7 -6
- package/dist/functions/helpers.js +24 -25
- package/dist/functions/theme.js +21 -11
- package/dist/index.js +32 -32
- package/package.json +1 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -9,31 +8,22 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
9
|
var _AccordionModule = _interopRequireDefault(require("./Accordion.module.scss"));
|
|
11
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
function _getRequireWildcardCache(
|
|
13
|
-
function _interopRequireWildcard(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
19
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
-
var Accordion = function Accordion(props) {
|
|
21
|
-
var _useState = (0, _react.useState)(props.expanded),
|
|
22
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
-
expanded = _useState2[0],
|
|
24
|
-
setExpanded = _useState2[1];
|
|
25
|
-
var _useState3 = (0, _react.useState)(props.initialized),
|
|
26
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
27
|
-
initialized = _useState4[0],
|
|
28
|
-
setInitialized = _useState4[1];
|
|
29
|
-
var handleToggleExpand = function handleToggleExpand() {
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
const Accordion = props => {
|
|
14
|
+
const [expanded, setExpanded] = (0, _react.useState)(props.expanded);
|
|
15
|
+
const [initialized, setInitialized] = (0, _react.useState)(props.initialized);
|
|
16
|
+
const handleToggleExpand = () => {
|
|
30
17
|
setExpanded(!expanded);
|
|
31
18
|
setInitialized(true);
|
|
19
|
+
if (props.onToggleExpand) {
|
|
20
|
+
props.onToggleExpand();
|
|
21
|
+
}
|
|
32
22
|
};
|
|
33
|
-
(0, _react.useEffect)(
|
|
23
|
+
(0, _react.useEffect)(() => {
|
|
34
24
|
setExpanded(props.expanded);
|
|
35
25
|
}, [props.expanded]);
|
|
36
|
-
|
|
26
|
+
const renderPanel = () => {
|
|
37
27
|
return _react.default.createElement("button", {
|
|
38
28
|
className: _AccordionModule.default.panel,
|
|
39
29
|
onClick: handleToggleExpand,
|
|
@@ -44,7 +34,7 @@ var Accordion = function Accordion(props) {
|
|
|
44
34
|
className: "".concat(_AccordionModule.default.panelChevron, " ").concat(expanded ? _AccordionModule.default.expanded : "")
|
|
45
35
|
}));
|
|
46
36
|
};
|
|
47
|
-
|
|
37
|
+
const className = "".concat(_AccordionModule.default.accordion, " ").concat(props.color ? _AccordionModule.default[props.color] : "");
|
|
48
38
|
return _react.default.createElement("div", {
|
|
49
39
|
className: className
|
|
50
40
|
}, renderPanel(), _react.default.createElement("div", {
|
|
@@ -56,7 +46,8 @@ Accordion.propTypes = {
|
|
|
56
46
|
titleSize: _propTypes.default.oneOf(["regular", "large"]),
|
|
57
47
|
content: _propTypes.default.string,
|
|
58
48
|
color: _propTypes.default.oneOf(["default", "primary", "success", "warning", "info", "lightCyan", "orange", "lightOrange", "lime", "lightLime"]),
|
|
59
|
-
expanded: _propTypes.default.bool
|
|
49
|
+
expanded: _propTypes.default.bool,
|
|
50
|
+
onToggleExpand: _propTypes.default.func
|
|
60
51
|
};
|
|
61
52
|
Accordion.defaultProps = {
|
|
62
53
|
title: null,
|
|
@@ -11,18 +11,12 @@ var _helpers = require("../functions/helpers");
|
|
|
11
11
|
var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
|
|
12
12
|
var _reactRouterDom = require("react-router-dom");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
function _getRequireWildcardCache(
|
|
15
|
-
function _interopRequireWildcard(
|
|
16
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
16
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
|
|
18
|
-
|
|
19
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
22
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
23
|
-
var Button = function Button(props) {
|
|
17
|
+
const Button = props => {
|
|
24
18
|
var _props$href, _props$href2, _props$children;
|
|
25
|
-
|
|
19
|
+
const getArrowClass = arrow => {
|
|
26
20
|
switch (arrow) {
|
|
27
21
|
case "left":
|
|
28
22
|
return _ButtonModule.default.hasArrowLeft;
|
|
@@ -32,7 +26,7 @@ var Button = function Button(props) {
|
|
|
32
26
|
return "";
|
|
33
27
|
}
|
|
34
28
|
};
|
|
35
|
-
|
|
29
|
+
const getThemeStyle = (theme, color) => {
|
|
36
30
|
return {
|
|
37
31
|
backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
|
|
38
32
|
color: (0, _theme.getThemePaletteTextColor)(theme, color),
|
|
@@ -40,10 +34,11 @@ var Button = function Button(props) {
|
|
|
40
34
|
borderWidth: (0, _theme.getThemePaletteBorderColor)(theme, color) ? "1px" : "0"
|
|
41
35
|
};
|
|
42
36
|
};
|
|
43
|
-
|
|
37
|
+
let buttonProps = {
|
|
38
|
+
...props,
|
|
44
39
|
"aria-invalid": props.hasErrors || null,
|
|
45
40
|
href: !props.disabled && (_props$href = props.href) !== null && _props$href !== void 0 && _props$href.length ? props.href : null
|
|
46
|
-
}
|
|
41
|
+
};
|
|
47
42
|
delete buttonProps.noHover;
|
|
48
43
|
delete buttonProps.hasErrors;
|
|
49
44
|
delete buttonProps.rounded;
|
|
@@ -51,16 +46,16 @@ var Button = function Button(props) {
|
|
|
51
46
|
delete buttonProps.color;
|
|
52
47
|
delete buttonProps.content;
|
|
53
48
|
delete buttonProps.arrow;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return childElementsthroughFragments.map(
|
|
49
|
+
const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "default" : props.color;
|
|
50
|
+
const themeStyle = props.theme ? getThemeStyle(props.theme, buttonColor) : null;
|
|
51
|
+
const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.theme && _ButtonModule.default.hasTheme, props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled]);
|
|
52
|
+
const renderReactLinkElements = childElements => {
|
|
53
|
+
const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
|
|
54
|
+
return childElementsthroughFragments.map((childElement, index) => {
|
|
60
55
|
var _childElement$props;
|
|
61
56
|
if (!buttonProps.disabled && !!(childElement !== null && childElement !== void 0 && (_childElement$props = childElement.props) !== null && _childElement$props !== void 0 && _childElement$props.to)) {
|
|
62
57
|
var _childElement$props2, _childElement$props3;
|
|
63
|
-
|
|
58
|
+
const childElementCopy = _react.default.cloneElement(childElement, {
|
|
64
59
|
className: className,
|
|
65
60
|
style: themeStyle,
|
|
66
61
|
key: "button-".concat(index),
|
|
@@ -9,23 +9,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _theme = require("../functions/theme");
|
|
10
10
|
var _CheckBoxIconModule = _interopRequireDefault(require("./CheckBoxIcon.module.scss"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
16
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
17
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
18
|
-
var CheckBoxIcon = function CheckBoxIcon(props) {
|
|
19
|
-
var inlineStyle = {
|
|
12
|
+
const CheckBoxIcon = props => {
|
|
13
|
+
let inlineStyle = {
|
|
20
14
|
height: props.size,
|
|
21
15
|
width: props.size,
|
|
22
16
|
fontSize: props.size
|
|
23
17
|
};
|
|
24
18
|
if (props.theme && props.checked) {
|
|
25
|
-
|
|
26
|
-
|
|
19
|
+
inlineStyle = {
|
|
20
|
+
...inlineStyle,
|
|
21
|
+
[!props.hasErrors && "color"]: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"),
|
|
22
|
+
[!props.hasErrors && props.showBox && "boxShadow"]: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"))
|
|
23
|
+
};
|
|
27
24
|
}
|
|
28
|
-
|
|
25
|
+
const checkBoxIconProps = {
|
|
29
26
|
className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(props.checked ? _CheckBoxIconModule.default.checked : "", " ").concat(props.disabled ? _CheckBoxIconModule.default.disabled : "", " ").concat(props.showBox ? _CheckBoxIconModule.default.showBox : "", " ").concat(props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ""),
|
|
30
27
|
style: inlineStyle
|
|
31
28
|
};
|
|
@@ -10,12 +10,12 @@ var _CheckBoxIcon = _interopRequireDefault(require("./CheckBoxIcon"));
|
|
|
10
10
|
var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
|
|
11
11
|
var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.module.scss"));
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const CheckBoxInput = props => {
|
|
14
|
+
const labelProps = {
|
|
15
15
|
className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(props.contentOnly ? _CheckBoxInputModule.default.contentOnly : "", " ").concat(props.disabled ? _CheckBoxInputModule.default.disabled : "", " ").concat(props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ""),
|
|
16
16
|
htmlFor: props.id
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
const iconProps = {
|
|
19
19
|
checked: props.checked,
|
|
20
20
|
disabled: props.disabled,
|
|
21
21
|
theme: props.theme,
|
|
@@ -23,7 +23,7 @@ var CheckBoxInput = function CheckBoxInput(props) {
|
|
|
23
23
|
hasErrors: props.contentOnly && props.hasErrors,
|
|
24
24
|
checkmarkCharacter: props.checkmarkCharacter
|
|
25
25
|
};
|
|
26
|
-
|
|
26
|
+
const inputProps = {
|
|
27
27
|
id: props.id,
|
|
28
28
|
name: props.name || null,
|
|
29
29
|
type: "checkbox",
|
|
@@ -10,19 +10,19 @@ var _helpers = require("../functions/helpers");
|
|
|
10
10
|
var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
|
|
11
11
|
var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
13
|
+
const CheckBoxList = props => {
|
|
14
14
|
var _props$legend;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return childElementsthroughFragments.map(
|
|
15
|
+
const renderChildElements = childElements => {
|
|
16
|
+
const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
|
|
17
|
+
return childElementsthroughFragments.map((childElement, index) => {
|
|
18
18
|
var _childElement$type;
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const isCheckBoxListItem = (childElement === null || childElement === void 0 || (_childElement$type = childElement.type) === null || _childElement$type === void 0 ? void 0 : _childElement$type.name) === "CheckBoxListItem";
|
|
20
|
+
const childElementProps = isCheckBoxListItem ? {
|
|
21
21
|
requiredGroup: props.required,
|
|
22
22
|
compact: props.compact,
|
|
23
23
|
key: "checkboxListItem-".concat(index)
|
|
24
24
|
} : null;
|
|
25
|
-
|
|
25
|
+
const childElementCopy = _react.default.cloneElement(childElement, childElementProps);
|
|
26
26
|
return childElementCopy;
|
|
27
27
|
});
|
|
28
28
|
};
|
|
@@ -10,10 +10,10 @@ var _CheckBoxInput = _interopRequireDefault(require("./CheckBoxInput"));
|
|
|
10
10
|
var _helpers = require("../functions/helpers");
|
|
11
11
|
var _CheckBoxListItemModule = _interopRequireDefault(require("./CheckBoxListItem.module.scss"));
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
const CheckBoxListItem = props => {
|
|
14
|
+
const listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null];
|
|
15
|
+
const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);
|
|
16
|
+
const inputProps = {
|
|
17
17
|
onChange: props.onChange,
|
|
18
18
|
checked: props.checked,
|
|
19
19
|
disabled: props.disabled,
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _ContainerModule = _interopRequireDefault(require("./Container.module.scss"));
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
10
|
+
const Container = props => {
|
|
11
11
|
return _react.default.createElement("div", {
|
|
12
12
|
className: _ContainerModule.default.container
|
|
13
13
|
}, props.children);
|
|
@@ -8,10 +8,10 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _ContentBoxModule = _interopRequireDefault(require("./ContentBox.module.scss"));
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
11
|
+
const ContentBox = props => {
|
|
12
12
|
var _props$content;
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const renderTitle = () => {
|
|
14
|
+
let className = _ContentBoxModule.default.title + " " + _ContentBoxModule.default[props.titleSize];
|
|
15
15
|
if (props.title) {
|
|
16
16
|
return _react.default.createElement("h2", {
|
|
17
17
|
className: className
|
|
@@ -20,10 +20,10 @@ var ContentBox = function ContentBox(props) {
|
|
|
20
20
|
return;
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
let colorClass = " " + _ContentBoxModule.default[props.color];
|
|
24
|
+
let linkClass = props.href ? " " + _ContentBoxModule.default.link : "";
|
|
25
|
+
let className = _ContentBoxModule.default.contentBox + colorClass + linkClass;
|
|
26
|
+
const bodyContent = (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? props.content : props.children;
|
|
27
27
|
if (props.href) {
|
|
28
28
|
return _react.default.createElement("a", {
|
|
29
29
|
href: props.href,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -11,17 +10,17 @@ var _xSymbol = _interopRequireDefault(require("../assets/svg/x-symbol.svg?url"))
|
|
|
11
10
|
var _DialogModule = _interopRequireDefault(require("./Dialog.module.scss"));
|
|
12
11
|
var _helpers = require("../functions/helpers");
|
|
13
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
-
function _getRequireWildcardCache(
|
|
15
|
-
function _interopRequireWildcard(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
const Dialog = props => {
|
|
16
|
+
const dialogRef = (0, _react.useRef)();
|
|
17
|
+
const wrapperRef = (0, _react.useCallback)(element => {
|
|
19
18
|
if (!!element) {
|
|
20
19
|
(0, _helpers.addFocusTrapInsideElement)(element);
|
|
21
20
|
}
|
|
22
21
|
}, []);
|
|
23
|
-
(0, _react.useEffect)(
|
|
24
|
-
|
|
22
|
+
(0, _react.useEffect)(() => {
|
|
23
|
+
const keyDownFunction = event => {
|
|
25
24
|
switch (event.keyCode) {
|
|
26
25
|
case 27:
|
|
27
26
|
if (props.onClickOutside) props.onClickOutside();
|
|
@@ -30,7 +29,7 @@ var Dialog = function Dialog(props) {
|
|
|
30
29
|
return null;
|
|
31
30
|
}
|
|
32
31
|
};
|
|
33
|
-
|
|
32
|
+
const handleClickOutside = event => {
|
|
34
33
|
if (dialogRef !== null && dialogRef !== void 0 && dialogRef.current && !dialogRef.current.contains(event.target)) {
|
|
35
34
|
props.onClickOutside();
|
|
36
35
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -13,53 +12,44 @@ var _Label = _interopRequireDefault(require("./Label"));
|
|
|
13
12
|
var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
|
|
14
13
|
var _DragAndDropFileInputModule = _interopRequireDefault(require("./DragAndDropFileInput.module.scss"));
|
|
15
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
function _getRequireWildcardCache(
|
|
17
|
-
function _interopRequireWildcard(
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
17
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
|
|
19
|
-
|
|
20
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
21
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
22
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
23
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
24
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
25
|
-
var DragAndDropFileInput = function DragAndDropFileInput(props) {
|
|
18
|
+
const DragAndDropFileInput = props => {
|
|
26
19
|
var _props$errorMessage, _props$ariaDescribed;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var containerElementRef = (0, _react.useRef)();
|
|
32
|
-
var fileInputElementRef = (0, _react.useRef)();
|
|
33
|
-
var preventDefaults = function preventDefaults(e) {
|
|
20
|
+
const [highlight, setHighlight] = (0, _react.useState)(false);
|
|
21
|
+
const containerElementRef = (0, _react.useRef)();
|
|
22
|
+
const fileInputElementRef = (0, _react.useRef)();
|
|
23
|
+
const preventDefaults = e => {
|
|
34
24
|
e.preventDefault();
|
|
35
25
|
e.stopPropagation();
|
|
36
26
|
};
|
|
37
|
-
|
|
27
|
+
const renderValueAsText = (value, defaultContent) => {
|
|
38
28
|
return value ? value : defaultContent;
|
|
39
29
|
};
|
|
40
|
-
|
|
30
|
+
const handleAddButtonOnClick = () => {
|
|
41
31
|
fileInputElementRef.current.click();
|
|
42
32
|
};
|
|
43
|
-
|
|
33
|
+
const getErrorElementId = () => {
|
|
44
34
|
return "".concat(props.id, "-errorMessage");
|
|
45
35
|
};
|
|
46
|
-
|
|
36
|
+
const inputElementProps = {
|
|
47
37
|
"aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
|
|
48
38
|
"aria-invalid": props.hasErrors ? "true" : null,
|
|
49
39
|
required: props.required
|
|
50
40
|
};
|
|
51
|
-
|
|
41
|
+
let buttonContent;
|
|
52
42
|
if (props.selectedFileName) {
|
|
53
43
|
buttonContent = props.buttonContentWhenSelectedFile ? props.buttonContentWhenSelectedFile : props.buttonContent;
|
|
54
44
|
} else {
|
|
55
45
|
buttonContent = props.buttonContent;
|
|
56
46
|
}
|
|
57
|
-
(0, _react.useEffect)(
|
|
58
|
-
|
|
47
|
+
(0, _react.useEffect)(() => {
|
|
48
|
+
const handleFiles = files => {
|
|
59
49
|
props.onDragAndDropChange(files);
|
|
60
50
|
};
|
|
61
|
-
|
|
62
|
-
|
|
51
|
+
const handleDrop = e => {
|
|
52
|
+
const files = e.dataTransfer.files;
|
|
63
53
|
handleFiles(files);
|
|
64
54
|
};
|
|
65
55
|
if (containerElementRef !== null && containerElementRef !== void 0 && containerElementRef.current) {
|
|
@@ -67,16 +57,16 @@ var DragAndDropFileInput = function DragAndDropFileInput(props) {
|
|
|
67
57
|
containerElementRef.current.addEventListener("dragover", preventDefaults, false);
|
|
68
58
|
containerElementRef.current.addEventListener("dragleave", preventDefaults, false);
|
|
69
59
|
containerElementRef.current.addEventListener("drop", preventDefaults, false);
|
|
70
|
-
containerElementRef.current.addEventListener("dragenter",
|
|
60
|
+
containerElementRef.current.addEventListener("dragenter", () => {
|
|
71
61
|
setHighlight(true);
|
|
72
62
|
}, false);
|
|
73
|
-
containerElementRef.current.addEventListener("dragover",
|
|
63
|
+
containerElementRef.current.addEventListener("dragover", () => {
|
|
74
64
|
setHighlight(true);
|
|
75
65
|
}, false);
|
|
76
|
-
containerElementRef.current.addEventListener("dragleave",
|
|
66
|
+
containerElementRef.current.addEventListener("dragleave", () => {
|
|
77
67
|
setHighlight(false);
|
|
78
68
|
}, false);
|
|
79
|
-
containerElementRef.current.addEventListener("drop",
|
|
69
|
+
containerElementRef.current.addEventListener("drop", () => {
|
|
80
70
|
setHighlight(false);
|
|
81
71
|
}, false);
|
|
82
72
|
containerElementRef.current.addEventListener("drop", handleDrop, false);
|
|
@@ -101,9 +91,7 @@ var DragAndDropFileInput = function DragAndDropFileInput(props) {
|
|
|
101
91
|
size: "small",
|
|
102
92
|
type: "button",
|
|
103
93
|
color: props.buttonColor,
|
|
104
|
-
onClick:
|
|
105
|
-
return handleAddButtonOnClick();
|
|
106
|
-
},
|
|
94
|
+
onClick: () => handleAddButtonOnClick(),
|
|
107
95
|
content: buttonContent,
|
|
108
96
|
hasErrors: props.hasErrors
|
|
109
97
|
})) : null) : null, props.contentOnly ? _react.default.createElement("span", null, renderValueAsText(props.selectedFileName, props.defaultContent)) : "", _react.default.createElement(_ErrorMessage.default, {
|
|
@@ -9,8 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _theme = require("../functions/theme");
|
|
10
10
|
var _ErrorBoxModule = _interopRequireDefault(require("./ErrorBox.module.scss"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
const ErrorBox = props => {
|
|
13
|
+
const getThemeErrorBoxStyle = () => {
|
|
14
14
|
return {
|
|
15
15
|
borderColor: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "warning")
|
|
16
16
|
};
|
|
@@ -10,13 +10,13 @@ var _theme = require("../functions/theme");
|
|
|
10
10
|
var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.scss"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const ErrorMessage = props => {
|
|
14
|
+
const getThemeErrorMessageStyle = theme => {
|
|
15
15
|
return {
|
|
16
16
|
color: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
const getErrorElementProps = () => {
|
|
20
20
|
var _props$id;
|
|
21
21
|
return {
|
|
22
22
|
id: !!((_props$id = props.id) !== null && _props$id !== void 0 && _props$id.length) ? props.id : null,
|
|
@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _Container = _interopRequireDefault(require("./Container"));
|
|
9
9
|
var _FooterModule = _interopRequireDefault(require("./Footer.module.scss"));
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
11
|
+
const Footer = props => {
|
|
12
12
|
return _react.default.createElement("footer", {
|
|
13
13
|
className: _FooterModule.default.footer
|
|
14
14
|
}, _react.default.createElement(_Container.default, null, props.children));
|
|
@@ -8,14 +8,14 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _HeaderModule = _interopRequireDefault(require("./Header.module.scss"));
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
11
|
+
const Header = props => {
|
|
12
12
|
var _props$htmlTag, _props$content;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
const bigClass = props.big ? _HeaderModule.default.bigHeader : "";
|
|
14
|
+
const themeClass = props.theme ? _HeaderModule.default.hasTheme : "";
|
|
15
|
+
const htmlTag = (_props$htmlTag = props.htmlTag) !== null && _props$htmlTag !== void 0 && _props$htmlTag.length ? props.htmlTag : "h".concat(props.size);
|
|
16
|
+
const headerClass = _HeaderModule.default.header;
|
|
17
|
+
const headerSizeClass = _HeaderModule.default["size-".concat(props.size)];
|
|
18
|
+
let headerElement = _react.default.createElement(htmlTag, {
|
|
19
19
|
className: "".concat(headerClass, " ").concat(headerSizeClass, " ").concat(bigClass, " ").concat(themeClass),
|
|
20
20
|
id: props.id || null
|
|
21
21
|
}, !!((_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length) ? props.content : props.children);
|