@data-driven-forms/carbon-component-mapper 4.1.4 → 4.1.6
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/CHANGELOG.md +6 -0
- package/checkbox/checkbox.js +31 -56
- package/checkbox/index.js +1 -7
- package/component-mapper/component-mapper.js +4 -26
- package/component-mapper/index.js +1 -7
- package/date-picker/date-picker.js +10 -23
- package/date-picker/index.js +1 -7
- package/dual-list-select/dual-list-select.js +112 -139
- package/dual-list-select/index.js +1 -7
- package/esm/checkbox/checkbox.js +29 -40
- package/esm/component-mapper/component-mapper.js +1 -3
- package/esm/date-picker/date-picker.js +9 -12
- package/esm/dual-list-select/dual-list-select.js +111 -127
- package/esm/field-array/field-array.js +43 -55
- package/esm/form-template/form-template.js +15 -25
- package/esm/helper-text-block/helper-text-block.js +3 -10
- package/esm/is-required/is-required.js +1 -5
- package/esm/plain-text/plain-text.js +6 -12
- package/esm/prepare-props/prepare-props.js +8 -14
- package/esm/radio/radio.js +11 -15
- package/esm/select/select.js +92 -112
- package/esm/slider/slider.js +7 -10
- package/esm/sub-form/sub-form.js +12 -17
- package/esm/switch/switch.js +16 -24
- package/esm/tabs/tabs.js +11 -17
- package/esm/text-field/text-field.js +5 -10
- package/esm/textarea/textarea.js +5 -8
- package/esm/time-picker/time-picker.js +1 -4
- package/esm/time-picker-base/time-picker-base.js +16 -20
- package/esm/time-picker-date/time-picker-date.js +34 -52
- package/esm/time-picker-string/time-picker-string.js +21 -30
- package/esm/with-description/with-description.js +2 -6
- package/esm/wizard/wizard.js +41 -62
- package/field-array/field-array.js +45 -75
- package/field-array/index.js +1 -7
- package/form-template/form-template.js +22 -57
- package/form-template/index.js +1 -7
- package/helper-text-block/helper-text-block.js +4 -16
- package/helper-text-block/index.js +1 -7
- package/index.js +1 -23
- package/is-required/index.js +1 -7
- package/is-required/is-required.js +2 -11
- package/package.json +3 -3
- package/plain-text/index.js +1 -7
- package/plain-text/plain-text.js +7 -17
- package/prepare-props/index.js +1 -7
- package/prepare-props/prepare-props.js +10 -25
- package/radio/index.js +1 -7
- package/radio/radio.js +12 -26
- package/select/index.js +1 -7
- package/select/select.js +95 -130
- package/slider/index.js +1 -7
- package/slider/slider.js +8 -21
- package/sub-form/index.js +1 -7
- package/sub-form/sub-form.js +13 -26
- package/switch/index.js +1 -7
- package/switch/switch.js +17 -33
- package/tabs/index.js +1 -7
- package/tabs/tabs.js +12 -26
- package/text-field/index.js +1 -7
- package/text-field/text-field.js +6 -20
- package/textarea/index.js +1 -7
- package/textarea/textarea.js +6 -18
- package/time-picker/index.js +1 -7
- package/time-picker/time-picker.js +2 -11
- package/time-picker-base/index.js +1 -7
- package/time-picker-base/time-picker-base.js +17 -27
- package/time-picker-date/index.js +1 -7
- package/time-picker-date/time-picker-date.js +36 -68
- package/time-picker-string/index.js +1 -7
- package/time-picker-string/time-picker-string.js +23 -46
- package/with-description/index.js +1 -7
- package/with-description/with-description.js +3 -14
- package/wizard/index.js +1 -7
- package/wizard/wizard.js +43 -81
package/esm/textarea/textarea.js
CHANGED
|
@@ -5,15 +5,13 @@ import React from 'react';
|
|
|
5
5
|
import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
|
|
6
6
|
import { TextArea } from '@carbon/react';
|
|
7
7
|
import prepareProps from '../prepare-props';
|
|
8
|
-
|
|
9
8
|
var Textarea = function Textarea(props) {
|
|
10
9
|
var _useFieldApi = useFieldApi(prepareProps(props)),
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
input = _useFieldApi.input,
|
|
11
|
+
meta = _useFieldApi.meta,
|
|
12
|
+
validateOnMount = _useFieldApi.validateOnMount,
|
|
13
|
+
helperText = _useFieldApi.helperText,
|
|
14
|
+
rest = _objectWithoutProperties(_useFieldApi, _excluded);
|
|
17
15
|
var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
|
|
18
16
|
var text = (meta.touched || validateOnMount) && meta.warning || helperText;
|
|
19
17
|
return /*#__PURE__*/React.createElement(TextArea, _extends({}, input, {
|
|
@@ -24,5 +22,4 @@ var Textarea = function Textarea(props) {
|
|
|
24
22
|
helperText: text
|
|
25
23
|
}, rest));
|
|
26
24
|
};
|
|
27
|
-
|
|
28
25
|
export default Textarea;
|
|
@@ -3,12 +3,9 @@ var _excluded = ["useStringFormat"];
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import TimePickerString from '../time-picker-string/time-picker-string';
|
|
5
5
|
import TimePickerDate from '../time-picker-date';
|
|
6
|
-
|
|
7
6
|
var TimePicker = function TimePicker(_ref) {
|
|
8
7
|
var useStringFormat = _ref.useStringFormat,
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
11
9
|
return useStringFormat ? /*#__PURE__*/React.createElement(TimePickerString, props) : /*#__PURE__*/React.createElement(TimePickerDate, props);
|
|
12
10
|
};
|
|
13
|
-
|
|
14
11
|
export default TimePicker;
|
|
@@ -1,28 +1,26 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["WrapperProps", "input", "enhnancedOnBlur", "enhancedOnChange", "finalValue", "invalid", "twelveHoursFormat", "timezones", "helperText", "warnText", "selectFormat", "selectTimezone", "format", "timezone"],
|
|
4
|
-
|
|
4
|
+
_excluded2 = ["showAs"];
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { TimePicker as CarbonTimePicker, TimePickerSelect, SelectItem } from '@carbon/react';
|
|
7
7
|
import HelperTextBlock from '../helper-text-block/helper-text-block';
|
|
8
|
-
|
|
9
8
|
var TimePickerBase = function TimePickerBase(_ref) {
|
|
10
9
|
var WrapperProps = _ref.WrapperProps,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
10
|
+
input = _ref.input,
|
|
11
|
+
enhnancedOnBlur = _ref.enhnancedOnBlur,
|
|
12
|
+
enhancedOnChange = _ref.enhancedOnChange,
|
|
13
|
+
finalValue = _ref.finalValue,
|
|
14
|
+
invalid = _ref.invalid,
|
|
15
|
+
twelveHoursFormat = _ref.twelveHoursFormat,
|
|
16
|
+
timezones = _ref.timezones,
|
|
17
|
+
helperText = _ref.helperText,
|
|
18
|
+
warnText = _ref.warnText,
|
|
19
|
+
selectFormat = _ref.selectFormat,
|
|
20
|
+
selectTimezone = _ref.selectTimezone,
|
|
21
|
+
format = _ref.format,
|
|
22
|
+
timezone = _ref.timezone,
|
|
23
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
26
24
|
return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(CarbonTimePicker, _extends({}, input, enhnancedOnBlur && {
|
|
27
25
|
onBlur: enhnancedOnBlur
|
|
28
26
|
}, enhancedOnChange && {
|
|
@@ -60,8 +58,7 @@ var TimePickerBase = function TimePickerBase(_ref) {
|
|
|
60
58
|
}
|
|
61
59
|
}, timezones.map(function (_ref4) {
|
|
62
60
|
var showAs = _ref4.showAs,
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
tz = _objectWithoutProperties(_ref4, _excluded2);
|
|
65
62
|
return /*#__PURE__*/React.createElement(SelectItem, _extends({
|
|
66
63
|
key: tz.value,
|
|
67
64
|
text: tz.label
|
|
@@ -71,5 +68,4 @@ var TimePickerBase = function TimePickerBase(_ref) {
|
|
|
71
68
|
warnText: warnText
|
|
72
69
|
}));
|
|
73
70
|
};
|
|
74
|
-
|
|
75
71
|
export default TimePickerBase;
|
|
@@ -6,93 +6,76 @@ import React, { useState, useEffect, useRef } from 'react';
|
|
|
6
6
|
import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
|
|
7
7
|
import prepareProps from '../prepare-props';
|
|
8
8
|
import TimePickerBase from '../time-picker-base';
|
|
9
|
-
|
|
10
9
|
var TimePickerDate = function TimePickerDate(props) {
|
|
11
10
|
var _timezones$;
|
|
12
|
-
|
|
13
11
|
var _useFieldApi = useFieldApi(prepareProps(props)),
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
12
|
+
input = _useFieldApi.input,
|
|
13
|
+
meta = _useFieldApi.meta,
|
|
14
|
+
twelveHoursFormat = _useFieldApi.twelveHoursFormat,
|
|
15
|
+
timezones = _useFieldApi.timezones,
|
|
16
|
+
validateOnMount = _useFieldApi.validateOnMount,
|
|
17
|
+
helperText = _useFieldApi.helperText,
|
|
18
|
+
WrapperProps = _useFieldApi.WrapperProps,
|
|
19
|
+
defaultTimezone = _useFieldApi.defaultTimezone,
|
|
20
|
+
rest = _objectWithoutProperties(_useFieldApi, _excluded);
|
|
24
21
|
var _useState = useState(defaultTimezone || timezones ? (_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value : ''),
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
timezone = _useState2[0],
|
|
24
|
+
selectTimezone = _useState2[1];
|
|
29
25
|
var _useState3 = useState(function () {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
selectFormat = _useState4[1];
|
|
37
|
-
|
|
26
|
+
var _input$value, _input$value$getHours;
|
|
27
|
+
return ((_input$value = input.value) === null || _input$value === void 0 || (_input$value$getHours = _input$value.getHours) === null || _input$value$getHours === void 0 ? void 0 : _input$value$getHours.call(_input$value)) >= 12 ? 'PM' : 'AM';
|
|
28
|
+
}),
|
|
29
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
30
|
+
format = _useState4[0],
|
|
31
|
+
selectFormat = _useState4[1];
|
|
38
32
|
var isMounted = useRef(false);
|
|
39
33
|
var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
|
|
40
34
|
var warnText = (meta.touched || validateOnMount) && meta.warning;
|
|
41
35
|
var finalValue = input.value;
|
|
42
|
-
|
|
43
36
|
if (input.value instanceof Date) {
|
|
44
37
|
var _timezones$find;
|
|
45
|
-
|
|
46
38
|
var _input$value$toLocale = input.value.toLocaleTimeString('en-us', {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
39
|
+
hour12: !!twelveHoursFormat,
|
|
40
|
+
timeZone: timezones === null || timezones === void 0 || (_timezones$find = timezones.find(function (_ref) {
|
|
41
|
+
var value = _ref.value;
|
|
42
|
+
return value === timezone;
|
|
43
|
+
})) === null || _timezones$find === void 0 ? void 0 : _timezones$find.showAs
|
|
44
|
+
}).split(':'),
|
|
45
|
+
_input$value$toLocale2 = _slicedToArray(_input$value$toLocale, 2),
|
|
46
|
+
_input$value$toLocale3 = _input$value$toLocale2[0],
|
|
47
|
+
hours = _input$value$toLocale3 === void 0 ? '00' : _input$value$toLocale3,
|
|
48
|
+
_input$value$toLocale4 = _input$value$toLocale2[1],
|
|
49
|
+
minutes = _input$value$toLocale4 === void 0 ? '00' : _input$value$toLocale4;
|
|
59
50
|
finalValue = "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
|
|
60
51
|
}
|
|
61
|
-
|
|
62
52
|
var enhnancedOnBlur = function enhnancedOnBlur() {
|
|
63
53
|
var _finalValue;
|
|
64
|
-
|
|
65
54
|
var _ref2 = ((_finalValue = finalValue) === null || _finalValue === void 0 ? void 0 : _finalValue.split(':')) || [],
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
55
|
+
_ref3 = _slicedToArray(_ref2, 2),
|
|
56
|
+
_ref3$ = _ref3[0],
|
|
57
|
+
hours = _ref3$ === void 0 ? '00' : _ref3$,
|
|
58
|
+
_ref3$2 = _ref3[1],
|
|
59
|
+
minutes = _ref3$2 === void 0 ? '00' : _ref3$2;
|
|
72
60
|
if (!hours || isNaN(hours)) {
|
|
73
61
|
hours = '00';
|
|
74
62
|
}
|
|
75
|
-
|
|
76
63
|
if (!minutes || isNaN(minutes)) {
|
|
77
64
|
minutes = '00';
|
|
78
65
|
}
|
|
79
|
-
|
|
80
66
|
if (twelveHoursFormat) {
|
|
81
67
|
hours = hours % 12;
|
|
82
|
-
|
|
83
68
|
if (format === 'PM') {
|
|
84
69
|
hours = hours + 12;
|
|
85
70
|
}
|
|
86
71
|
} else {
|
|
87
72
|
hours = hours % 24;
|
|
88
73
|
}
|
|
89
|
-
|
|
90
74
|
minutes = minutes % 60;
|
|
91
75
|
var enhancedValue = new Date("Jan 1 2000 ".concat(hours, ":").concat(minutes, ":00 ").concat(timezone));
|
|
92
76
|
input.onChange(enhancedValue);
|
|
93
77
|
input.onBlur();
|
|
94
78
|
};
|
|
95
|
-
|
|
96
79
|
useEffect(function () {
|
|
97
80
|
if (isMounted.current === true) {
|
|
98
81
|
enhnancedOnBlur();
|
|
@@ -116,5 +99,4 @@ var TimePickerDate = function TimePickerDate(props) {
|
|
|
116
99
|
timezone: timezone
|
|
117
100
|
}, rest));
|
|
118
101
|
};
|
|
119
|
-
|
|
120
102
|
export default TimePickerDate;
|
|
@@ -6,46 +6,38 @@ import React, { useState, useEffect, useRef } from 'react';
|
|
|
6
6
|
import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
|
|
7
7
|
import prepareProps from '../prepare-props';
|
|
8
8
|
import TimePickerBase from '../time-picker-base';
|
|
9
|
-
|
|
10
9
|
var TimePickerString = function TimePickerString(props) {
|
|
11
10
|
var _useFieldApi = useFieldApi(prepareProps(props)),
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
input = _useFieldApi.input,
|
|
12
|
+
meta = _useFieldApi.meta,
|
|
13
|
+
twelveHoursFormat = _useFieldApi.twelveHoursFormat,
|
|
14
|
+
timezones = _useFieldApi.timezones,
|
|
15
|
+
validateOnMount = _useFieldApi.validateOnMount,
|
|
16
|
+
helperText = _useFieldApi.helperText,
|
|
17
|
+
WrapperProps = _useFieldApi.WrapperProps,
|
|
18
|
+
useStringFormat = _useFieldApi.useStringFormat,
|
|
19
|
+
rest = _objectWithoutProperties(_useFieldApi, _excluded);
|
|
22
20
|
var _useState = useState(function () {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
selectTimezone = _useState2[1];
|
|
30
|
-
|
|
21
|
+
var _input$value$match, _timezones$;
|
|
22
|
+
return timezones ? ((_input$value$match = input.value.match(/ \w+$/)) === null || _input$value$match === void 0 ? void 0 : _input$value$match[0].trim()) || ((_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value) : '';
|
|
23
|
+
}),
|
|
24
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
25
|
+
timezone = _useState2[0],
|
|
26
|
+
selectTimezone = _useState2[1];
|
|
31
27
|
var _useState3 = useState(function () {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
selectFormat = _useState4[1];
|
|
39
|
-
|
|
28
|
+
var _input$value$match2;
|
|
29
|
+
return ((_input$value$match2 = input.value.match(/ \w+ /)) === null || _input$value$match2 === void 0 ? void 0 : _input$value$match2[0].trim()) || 'AM';
|
|
30
|
+
}),
|
|
31
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
32
|
+
format = _useState4[0],
|
|
33
|
+
selectFormat = _useState4[1];
|
|
40
34
|
var isMounted = useRef(false);
|
|
41
35
|
var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
|
|
42
36
|
var warnText = (meta.touched || validateOnMount) && meta.warning;
|
|
43
37
|
var finalValue = input.value.replace(/ .*/, '');
|
|
44
|
-
|
|
45
38
|
var enhancedOnChange = function enhancedOnChange(value) {
|
|
46
39
|
return input.onChange("".concat(value, " ").concat(twelveHoursFormat ? format : '', " ").concat(timezones ? timezone : '').replace(/ {2}/, ' ').trim());
|
|
47
40
|
};
|
|
48
|
-
|
|
49
41
|
useEffect(function () {
|
|
50
42
|
if (isMounted.current === true) {
|
|
51
43
|
enhancedOnChange(finalValue);
|
|
@@ -69,5 +61,4 @@ var TimePickerString = function TimePickerString(props) {
|
|
|
69
61
|
timezone: timezone
|
|
70
62
|
}, rest));
|
|
71
63
|
};
|
|
72
|
-
|
|
73
64
|
export default TimePickerString;
|
|
@@ -9,14 +9,11 @@ var useStyles = createUseStyles({
|
|
|
9
9
|
gap: '0.5rem'
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
12
|
var WithDescription = function WithDescription(_ref) {
|
|
14
13
|
var labelText = _ref.labelText,
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
description = _ref.description;
|
|
17
15
|
var _useStyles = useStyles(),
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
container = _useStyles.container;
|
|
20
17
|
return /*#__PURE__*/React.createElement("div", {
|
|
21
18
|
className: container
|
|
22
19
|
}, /*#__PURE__*/React.createElement("span", null, labelText), /*#__PURE__*/React.createElement(Toggletip, {
|
|
@@ -25,5 +22,4 @@ var WithDescription = function WithDescription(_ref) {
|
|
|
25
22
|
label: "Show information"
|
|
26
23
|
}, /*#__PURE__*/React.createElement(Information, null)), /*#__PURE__*/React.createElement(ToggletipContent, null, /*#__PURE__*/React.createElement("p", null, description))));
|
|
27
24
|
};
|
|
28
|
-
|
|
29
25
|
export default WithDescription;
|
package/esm/wizard/wizard.js
CHANGED
|
@@ -2,13 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["stepsInfo", "jumpToStep"],
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
11
|
-
|
|
5
|
+
_excluded2 = ["title"],
|
|
6
|
+
_excluded3 = ["stepsInfo", "buttonLabels", "ButtonSetProps", "BackButtonProps", "NextButtonProps", "SubmitButtonProps", "ProgressIndicatorProps", "vertical", "WizardBodyProps", "conditionalSubmitFlag"];
|
|
7
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
8
|
+
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; }
|
|
12
9
|
import React, { useContext } from 'react';
|
|
13
10
|
import clsx from 'clsx';
|
|
14
11
|
import { createUseStyles } from "react-jss/dist/react-jss.esm.js";
|
|
@@ -31,15 +28,12 @@ var useStyles = createUseStyles({
|
|
|
31
28
|
}
|
|
32
29
|
}
|
|
33
30
|
});
|
|
34
|
-
|
|
35
31
|
var WizardNav = function WizardNav(_ref) {
|
|
36
32
|
var stepsInfo = _ref.stepsInfo,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
jumpToStep = _ref.jumpToStep,
|
|
34
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
40
35
|
var _useStyles = useStyles(),
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
horizontalNav = _useStyles.horizontalNav;
|
|
43
37
|
return /*#__PURE__*/React.createElement(ProgressIndicator, _extends({
|
|
44
38
|
onChange: function onChange(index) {
|
|
45
39
|
return props.currentIndex > index ? jumpToStep(index, true) : undefined;
|
|
@@ -48,8 +42,7 @@ var WizardNav = function WizardNav(_ref) {
|
|
|
48
42
|
className: clsx(horizontalNav, props.className)
|
|
49
43
|
}), stepsInfo.map(function (_ref2, index) {
|
|
50
44
|
var title = _ref2.title,
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
step = _objectWithoutProperties(_ref2, _excluded2);
|
|
53
46
|
return /*#__PURE__*/React.createElement(ProgressStep, _extends({
|
|
54
47
|
key: index,
|
|
55
48
|
label: title,
|
|
@@ -57,34 +50,27 @@ var WizardNav = function WizardNav(_ref) {
|
|
|
57
50
|
}, step));
|
|
58
51
|
}));
|
|
59
52
|
};
|
|
60
|
-
|
|
61
53
|
var defaultLabels = {
|
|
62
54
|
submit: 'Submit',
|
|
63
55
|
back: 'Back',
|
|
64
56
|
next: 'Next'
|
|
65
57
|
};
|
|
66
|
-
|
|
67
58
|
var Layout = function Layout(_ref3) {
|
|
68
59
|
var nav = _ref3.nav,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
60
|
+
fields = _ref3.fields,
|
|
61
|
+
WizardBodyProps = _ref3.WizardBodyProps;
|
|
72
62
|
var _useStyles2 = useStyles(),
|
|
73
|
-
|
|
74
|
-
|
|
63
|
+
body = _useStyles2.body;
|
|
75
64
|
return /*#__PURE__*/React.createElement(React.Fragment, null, nav, /*#__PURE__*/React.createElement("div", _extends({}, WizardBodyProps, {
|
|
76
65
|
className: clsx(body, WizardBodyProps === null || WizardBodyProps === void 0 ? void 0 : WizardBodyProps.className)
|
|
77
66
|
}), fields));
|
|
78
67
|
};
|
|
79
|
-
|
|
80
68
|
var VerticalLayout = function VerticalLayout(_ref4) {
|
|
81
69
|
var nav = _ref4.nav,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
70
|
+
fields = _ref4.fields,
|
|
71
|
+
WizardBodyProps = _ref4.WizardBodyProps;
|
|
85
72
|
var _useStyles3 = useStyles(),
|
|
86
|
-
|
|
87
|
-
|
|
73
|
+
body = _useStyles3.body;
|
|
88
74
|
return /*#__PURE__*/React.createElement(Grid, {
|
|
89
75
|
narrow: true
|
|
90
76
|
}, /*#__PURE__*/React.createElement(Column, {
|
|
@@ -99,41 +85,36 @@ var VerticalLayout = function VerticalLayout(_ref4) {
|
|
|
99
85
|
className: clsx(body, WizardBodyProps === null || WizardBodyProps === void 0 ? void 0 : WizardBodyProps.className)
|
|
100
86
|
}), fields));
|
|
101
87
|
};
|
|
102
|
-
|
|
103
88
|
var WizardInternal = function WizardInternal(_ref5) {
|
|
104
89
|
var stepsInfo = _ref5.stepsInfo,
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
90
|
+
buttonLabels = _ref5.buttonLabels,
|
|
91
|
+
_ref5$ButtonSetProps = _ref5.ButtonSetProps,
|
|
92
|
+
ButtonSetProps = _ref5$ButtonSetProps === void 0 ? {} : _ref5$ButtonSetProps,
|
|
93
|
+
_ref5$BackButtonProps = _ref5.BackButtonProps,
|
|
94
|
+
BackButtonProps = _ref5$BackButtonProps === void 0 ? {} : _ref5$BackButtonProps,
|
|
95
|
+
_ref5$NextButtonProps = _ref5.NextButtonProps,
|
|
96
|
+
NextButtonProps = _ref5$NextButtonProps === void 0 ? {} : _ref5$NextButtonProps,
|
|
97
|
+
_ref5$SubmitButtonPro = _ref5.SubmitButtonProps,
|
|
98
|
+
SubmitButtonProps = _ref5$SubmitButtonPro === void 0 ? {} : _ref5$SubmitButtonPro,
|
|
99
|
+
_ref5$ProgressIndicat = _ref5.ProgressIndicatorProps,
|
|
100
|
+
ProgressIndicatorProps = _ref5$ProgressIndicat === void 0 ? {} : _ref5$ProgressIndicat,
|
|
101
|
+
vertical = _ref5.vertical,
|
|
102
|
+
_ref5$WizardBodyProps = _ref5.WizardBodyProps,
|
|
103
|
+
WizardBodyProps = _ref5$WizardBodyProps === void 0 ? {} : _ref5$WizardBodyProps,
|
|
104
|
+
conditionalSubmitFlag = _ref5.conditionalSubmitFlag,
|
|
105
|
+
props = _objectWithoutProperties(_ref5, _excluded3);
|
|
122
106
|
var _useContext = useContext(WizardContext),
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
107
|
+
formOptions = _useContext.formOptions,
|
|
108
|
+
currentStep = _useContext.currentStep,
|
|
109
|
+
handlePrev = _useContext.handlePrev,
|
|
110
|
+
onKeyDown = _useContext.onKeyDown,
|
|
111
|
+
handleNext = _useContext.handleNext,
|
|
112
|
+
activeStepIndex = _useContext.activeStepIndex,
|
|
113
|
+
selectNext = _useContext.selectNext,
|
|
114
|
+
jumpToStep = _useContext.jumpToStep;
|
|
132
115
|
var _useStyles4 = useStyles(),
|
|
133
|
-
|
|
134
|
-
|
|
116
|
+
buttonSet = _useStyles4.buttonSet;
|
|
135
117
|
var finalButtoLabels = _objectSpread(_objectSpread({}, defaultLabels), buttonLabels);
|
|
136
|
-
|
|
137
118
|
var nav = stepsInfo && /*#__PURE__*/React.createElement(WizardNav, _extends({
|
|
138
119
|
vertical: vertical,
|
|
139
120
|
stepsInfo: stepsInfo,
|
|
@@ -152,8 +133,8 @@ var WizardInternal = function WizardInternal(_ref5) {
|
|
|
152
133
|
WizardBodyProps: WizardBodyProps
|
|
153
134
|
}), /*#__PURE__*/React.createElement(FormSpy, null, function (_ref6) {
|
|
154
135
|
var invalid = _ref6.invalid,
|
|
155
|
-
|
|
156
|
-
|
|
136
|
+
validating = _ref6.validating,
|
|
137
|
+
submitting = _ref6.submitting;
|
|
157
138
|
var nextResult = currentStep.nextStep ? selectNext(currentStep.nextStep, formOptions.getState) : currentStep.nextStep;
|
|
158
139
|
var progressNext = nextResult !== conditionalSubmitFlag && currentStep.nextStep;
|
|
159
140
|
return /*#__PURE__*/React.createElement("div", _extends({}, ButtonSetProps, {
|
|
@@ -175,11 +156,9 @@ var WizardInternal = function WizardInternal(_ref5) {
|
|
|
175
156
|
}, BackButtonProps), finalButtoLabels.back));
|
|
176
157
|
}));
|
|
177
158
|
};
|
|
178
|
-
|
|
179
159
|
var Wizard = function Wizard(props) {
|
|
180
160
|
return /*#__PURE__*/React.createElement(WizardCommon, _extends({
|
|
181
161
|
Wizard: WizardInternal
|
|
182
162
|
}, props));
|
|
183
163
|
};
|
|
184
|
-
|
|
185
164
|
export default Wizard;
|