@cratis/components 1.6.9 → 1.7.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/cjs/CommandDialog/CommandStepper.css +24 -0
- package/dist/cjs/CommandDialog/CommandStepper.js +161 -0
- package/dist/cjs/CommandDialog/CommandStepper.js.map +1 -0
- package/dist/cjs/CommandDialog/StepperCommandDialog.js +5 -97
- package/dist/cjs/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/cjs/CommandDialog/index.js +3 -0
- package/dist/cjs/CommandDialog/index.js.map +1 -1
- package/dist/esm/CommandDialog/CommandStepper.css +24 -0
- package/dist/esm/CommandDialog/CommandStepper.d.ts +29 -0
- package/dist/esm/CommandDialog/CommandStepper.d.ts.map +1 -0
- package/dist/esm/CommandDialog/CommandStepper.js +158 -0
- package/dist/esm/CommandDialog/CommandStepper.js.map +1 -0
- package/dist/esm/CommandDialog/CommandStepper.stories.d.ts +9 -0
- package/dist/esm/CommandDialog/CommandStepper.stories.d.ts.map +1 -0
- package/dist/esm/CommandDialog/CommandStepper.stories.js +72 -0
- package/dist/esm/CommandDialog/CommandStepper.stories.js.map +1 -0
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts +1 -4
- package/dist/esm/CommandDialog/StepperCommandDialog.d.ts.map +1 -1
- package/dist/esm/CommandDialog/StepperCommandDialog.js +7 -99
- package/dist/esm/CommandDialog/StepperCommandDialog.js.map +1 -1
- package/dist/esm/CommandDialog/index.d.ts +1 -0
- package/dist/esm/CommandDialog/index.d.ts.map +1 -1
- package/dist/esm/CommandDialog/index.js +1 -0
- package/dist/esm/CommandDialog/index.js.map +1 -1
- package/dist/esm/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/dist/cjs/CommandDialog/StepperCommandDialog.css +0 -14
- package/dist/esm/CommandDialog/StepperCommandDialog.css +0 -14
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* Copyright (c) Cratis. All rights reserved. */
|
|
2
|
+
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
|
|
3
|
+
|
|
4
|
+
.p-stepper [data-pc-section="header"][data-p-active="false"] {
|
|
5
|
+
opacity: 0.5;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Make stepper and its panels fill available width */
|
|
9
|
+
.cratis-command-stepper {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 0.75rem;
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.cratis-command-stepper .p-stepper {
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.cratis-command-stepper .p-stepperpanel-content {
|
|
21
|
+
width: 100%;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
}
|
|
24
|
+
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var stepper = require('primereact/stepper');
|
|
6
|
+
var button = require('primereact/button');
|
|
7
|
+
var commands = require('@cratis/arc.react/commands');
|
|
8
|
+
require('./CommandStepper.css');
|
|
9
|
+
|
|
10
|
+
/** Extracts the property name from an accessor function like `c => c.name`. */
|
|
11
|
+
const getPropertyName = (accessor) => {
|
|
12
|
+
if (typeof accessor !== 'function')
|
|
13
|
+
return '';
|
|
14
|
+
const fnStr = accessor.toString();
|
|
15
|
+
const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
|
|
16
|
+
return match ? match[1] : '';
|
|
17
|
+
};
|
|
18
|
+
/** Recursively collects all CommandFormField property names from a React node tree. */
|
|
19
|
+
const extractFieldNamesFromNode = (nodes) => {
|
|
20
|
+
const names = [];
|
|
21
|
+
React.Children.forEach(nodes, (child) => {
|
|
22
|
+
if (!React.isValidElement(child))
|
|
23
|
+
return;
|
|
24
|
+
const component = child.type;
|
|
25
|
+
if (component.displayName === 'CommandFormField') {
|
|
26
|
+
const fieldProps = child.props;
|
|
27
|
+
const name = getPropertyName(fieldProps.value);
|
|
28
|
+
if (name)
|
|
29
|
+
names.push(name);
|
|
30
|
+
}
|
|
31
|
+
const childProps = child.props;
|
|
32
|
+
if (childProps.children != null) {
|
|
33
|
+
names.push(...extractFieldNamesFromNode(childProps.children));
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
return names;
|
|
37
|
+
};
|
|
38
|
+
const processChildren = (nodes) => {
|
|
39
|
+
return React.Children.map(nodes, (child) => {
|
|
40
|
+
if (!React.isValidElement(child))
|
|
41
|
+
return child;
|
|
42
|
+
const component = child.type;
|
|
43
|
+
if (component.displayName === 'CommandFormField') {
|
|
44
|
+
return jsxRuntime.jsx(commands.CommandFormFieldWrapper, { field: child });
|
|
45
|
+
}
|
|
46
|
+
const childProps = child.props;
|
|
47
|
+
if (childProps.children != null) {
|
|
48
|
+
return React.cloneElement(child, {
|
|
49
|
+
children: processChildren(childProps.children)
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
return child;
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveStepChange, onVisitedStepsChange, onStepErrorsChange, getFieldError, showNavigation = true, showSubmit = true, nextLabel = 'Next', previousLabel = 'Previous', okLabel = 'Submit', isBusy = false, isSubmitting = false, isSubmitDisabled = false, onSubmit, orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, }) => {
|
|
56
|
+
const stepCount = React.Children.count(children);
|
|
57
|
+
const isLastStep = activeStep >= stepCount - 1;
|
|
58
|
+
const isFirstStep = activeStep <= 0;
|
|
59
|
+
const stepFieldNames = React.useMemo(() => React.Children.toArray(children).map((step) => {
|
|
60
|
+
if (!React.isValidElement(step))
|
|
61
|
+
return [];
|
|
62
|
+
const stepProps = step.props;
|
|
63
|
+
return extractFieldNamesFromNode(stepProps.children);
|
|
64
|
+
}), [children]);
|
|
65
|
+
const stepErrors = React.useMemo(() => stepFieldNames.map(fields => fields.some(fieldName => !!getFieldError?.(fieldName))), [stepFieldNames, getFieldError]);
|
|
66
|
+
React.useEffect(() => {
|
|
67
|
+
onStepErrorsChange?.(stepErrors);
|
|
68
|
+
}, [onStepErrorsChange, stepErrors]);
|
|
69
|
+
const isCurrentStepInvalid = stepErrors[activeStep] ?? false;
|
|
70
|
+
const hasAnyStepErrors = stepErrors.some(hasError => hasError);
|
|
71
|
+
const stepperPt = React.useMemo(() => {
|
|
72
|
+
const userPt = pt;
|
|
73
|
+
const userStepperPanelPt = userPt?.stepperpanel;
|
|
74
|
+
const userNumberPt = userStepperPanelPt?.number;
|
|
75
|
+
return {
|
|
76
|
+
...userPt,
|
|
77
|
+
stepperpanel: {
|
|
78
|
+
...userStepperPanelPt,
|
|
79
|
+
number: (opts) => {
|
|
80
|
+
const existing = typeof userNumberPt === 'function'
|
|
81
|
+
? userNumberPt(opts)
|
|
82
|
+
: userNumberPt ?? {};
|
|
83
|
+
const idx = opts.context.index;
|
|
84
|
+
const hasError = stepErrors[idx] ?? false;
|
|
85
|
+
const isVisited = visitedSteps.has(idx);
|
|
86
|
+
const bgColor = hasError
|
|
87
|
+
? 'var(--red-500, #ef4444)'
|
|
88
|
+
: isVisited
|
|
89
|
+
? 'var(--green-500, #22c55e)'
|
|
90
|
+
: null;
|
|
91
|
+
if (!bgColor)
|
|
92
|
+
return existing;
|
|
93
|
+
const existingStyle = existing.style;
|
|
94
|
+
return {
|
|
95
|
+
...existing,
|
|
96
|
+
style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
}, [pt, stepErrors, visitedSteps]);
|
|
102
|
+
const handleChangeStep = event => {
|
|
103
|
+
onChangeStep?.(event);
|
|
104
|
+
const index = event.index;
|
|
105
|
+
if (typeof index === 'number') {
|
|
106
|
+
if (index > activeStep) {
|
|
107
|
+
onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
|
|
108
|
+
}
|
|
109
|
+
onActiveStepChange?.(index);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
const handlePrevious = () => {
|
|
113
|
+
onActiveStepChange?.(Math.max(0, activeStep - 1));
|
|
114
|
+
};
|
|
115
|
+
const handleNext = () => {
|
|
116
|
+
onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
|
|
117
|
+
onActiveStepChange?.(Math.min(stepCount - 1, activeStep + 1));
|
|
118
|
+
};
|
|
119
|
+
return (jsxRuntime.jsxs("div", { className: "cratis-command-stepper", children: [jsxRuntime.jsx(stepper.Stepper, { activeStep: activeStep, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: handleChangeStep, start: start, end: end, pt: stepperPt, ptOptions: ptOptions, unstyled: unstyled, children: processChildren(children) }), showNavigation && (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }, children: [!isFirstStep && (jsxRuntime.jsx(button.Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: handlePrevious, disabled: isBusy, outlined: true, style: { width: 'auto' } })), jsxRuntime.jsx("div", { style: { flex: 1 } }), !isLastStep && (jsxRuntime.jsx(button.Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: handleNext, disabled: isBusy || isSubmitting || isCurrentStepInvalid, style: { width: 'auto' } })), isLastStep && showSubmit && (jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: () => void onSubmit?.(), loading: isSubmitting, disabled: isBusy || isSubmitting || isSubmitDisabled || hasAnyStepErrors, autoFocus: true, style: { width: 'auto' } }))] }))] }));
|
|
120
|
+
};
|
|
121
|
+
const CommandStepperWrapper = ({ children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, onSuccess, onValidationFailure, onFailed, onBeforeExecute, }) => {
|
|
122
|
+
const { getFieldError, isValid: isCommandFormValid, setCommandValues, setCommandResult } = commands.useCommandFormContext();
|
|
123
|
+
const commandInstance = commands.useCommandInstance();
|
|
124
|
+
const [activeStep, setActiveStep] = React.useState(0);
|
|
125
|
+
const [visitedSteps, setVisitedSteps] = React.useState(new Set([0]));
|
|
126
|
+
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
127
|
+
const handleSubmit = async () => {
|
|
128
|
+
if (onBeforeExecute) {
|
|
129
|
+
const transformedValues = onBeforeExecute(commandInstance);
|
|
130
|
+
setCommandValues(transformedValues);
|
|
131
|
+
}
|
|
132
|
+
setIsSubmitting(true);
|
|
133
|
+
let result;
|
|
134
|
+
try {
|
|
135
|
+
result = await commandInstance.execute();
|
|
136
|
+
}
|
|
137
|
+
finally {
|
|
138
|
+
setIsSubmitting(false);
|
|
139
|
+
}
|
|
140
|
+
if (!result.isSuccess) {
|
|
141
|
+
if (!result.isValid) {
|
|
142
|
+
await onValidationFailure?.(result.validationResults);
|
|
143
|
+
}
|
|
144
|
+
else {
|
|
145
|
+
await onFailed?.(result);
|
|
146
|
+
}
|
|
147
|
+
setCommandResult(result);
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
await onSuccess?.(result.response);
|
|
151
|
+
};
|
|
152
|
+
return (jsxRuntime.jsx(CommandStepperContent, { activeStep: activeStep, visitedSteps: visitedSteps, onActiveStepChange: setActiveStep, onVisitedStepsChange: setVisitedSteps, onStepErrorsChange: onStepErrorsChange, getFieldError: getFieldError, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, isSubmitting: isSubmitting, isSubmitDisabled: !isCommandFormValid, onSubmit: handleSubmit, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }));
|
|
153
|
+
};
|
|
154
|
+
const CommandStepper = (props) => {
|
|
155
|
+
const { children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, ...commandFormProps } = props;
|
|
156
|
+
return (jsxRuntime.jsx(commands.CommandForm, { ...commandFormProps, children: jsxRuntime.jsx(CommandStepperWrapper, { onStepErrorsChange: onStepErrorsChange, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: commandFormProps.onBeforeExecute, children: children }) }));
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
exports.CommandStepper = CommandStepper;
|
|
160
|
+
exports.CommandStepperContent = CommandStepperContent;
|
|
161
|
+
//# sourceMappingURL=CommandStepper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandStepper.js","sources":["../../../CommandDialog/CommandStepper.tsx"],"sourcesContent":[null],"names":["_jsx","CommandFormFieldWrapper","useMemo","useEffect","_jsxs","PrimeStepper","Button","useCommandFormContext","useCommandInstance","useState","CommandForm"],"mappings":"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"}
|
|
@@ -3,46 +3,18 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var dialogs = require('@cratis/arc.react/dialogs');
|
|
5
5
|
var dialog = require('primereact/dialog');
|
|
6
|
-
var stepper = require('primereact/stepper');
|
|
7
6
|
var button = require('primereact/button');
|
|
8
7
|
var React = require('react');
|
|
9
8
|
var commands = require('@cratis/arc.react/commands');
|
|
10
|
-
require('./
|
|
9
|
+
var CommandStepper = require('./CommandStepper.js');
|
|
11
10
|
|
|
12
|
-
/** Extracts the property name from an accessor function like `c => c.name`. */
|
|
13
|
-
const getPropertyName = (accessor) => {
|
|
14
|
-
if (typeof accessor !== 'function')
|
|
15
|
-
return '';
|
|
16
|
-
const fnStr = accessor.toString();
|
|
17
|
-
const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
|
|
18
|
-
return match ? match[1] : '';
|
|
19
|
-
};
|
|
20
|
-
/** Recursively collects all CommandFormField property names from a React node tree. */
|
|
21
|
-
const extractFieldNamesFromNode = (nodes) => {
|
|
22
|
-
const names = [];
|
|
23
|
-
React.Children.forEach(nodes, (child) => {
|
|
24
|
-
if (!React.isValidElement(child))
|
|
25
|
-
return;
|
|
26
|
-
const component = child.type;
|
|
27
|
-
if (component.displayName === 'CommandFormField') {
|
|
28
|
-
const fieldProps = child.props;
|
|
29
|
-
const name = getPropertyName(fieldProps.value);
|
|
30
|
-
if (name)
|
|
31
|
-
names.push(name);
|
|
32
|
-
}
|
|
33
|
-
const childProps = child.props;
|
|
34
|
-
if (childProps.children != null) {
|
|
35
|
-
names.push(...extractFieldNamesFromNode(childProps.children));
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
return names;
|
|
39
|
-
};
|
|
40
11
|
const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', style, contentStyle, resizable = false, isValid, onClose, onConfirm, onCancel, onSuccess, onValidationFailure, onFailed, onBeforeExecute, okLabel = 'Submit', nextLabel = 'Next', previousLabel = 'Previous', orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, children }) => {
|
|
41
12
|
const { setCommandValues, setCommandResult, isValid: isCommandFormValid, getFieldError } = commands.useCommandFormContext();
|
|
42
13
|
const commandInstance = commands.useCommandInstance();
|
|
43
14
|
const [isBusy, setIsBusy] = React.useState(false);
|
|
44
15
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
45
16
|
const [visitedSteps, setVisitedSteps] = React.useState(new Set([0]));
|
|
17
|
+
const [stepErrors, setStepErrors] = React.useState([]);
|
|
46
18
|
let contextCloseDialog;
|
|
47
19
|
try {
|
|
48
20
|
const context = dialogs.useDialogContext();
|
|
@@ -55,15 +27,7 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
55
27
|
const isLastStep = activeStep === stepCount - 1;
|
|
56
28
|
const isFirstStep = activeStep === 0;
|
|
57
29
|
const isDialogValid = isValid !== false && isCommandFormValid;
|
|
58
|
-
|
|
59
|
-
// Used to determine whether a step has validation errors for the indicator badge.
|
|
60
|
-
const stepFieldNames = React.useMemo(() => React.Children.toArray(children).map((step) => {
|
|
61
|
-
if (!React.isValidElement(step))
|
|
62
|
-
return [];
|
|
63
|
-
const stepProps = step.props;
|
|
64
|
-
return extractFieldNamesFromNode(stepProps.children);
|
|
65
|
-
}), [children]);
|
|
66
|
-
const stepHasError = (stepIndex) => stepFieldNames[stepIndex]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;
|
|
30
|
+
const isCurrentStepInvalid = stepErrors[activeStep] ?? false;
|
|
67
31
|
const handleClose = async (result) => {
|
|
68
32
|
let shouldCloseThroughContext = true;
|
|
69
33
|
if (result === dialogs.DialogResult.Ok || result === dialogs.DialogResult.Yes) {
|
|
@@ -116,68 +80,12 @@ const StepperCommandDialogWrapper = ({ title, visible = true, width = '600px', s
|
|
|
116
80
|
await onSuccess?.(result.response);
|
|
117
81
|
await handleClose(dialogs.DialogResult.Ok);
|
|
118
82
|
};
|
|
119
|
-
const processChildren = (nodes) => {
|
|
120
|
-
return React.Children.map(nodes, (child) => {
|
|
121
|
-
if (!React.isValidElement(child))
|
|
122
|
-
return child;
|
|
123
|
-
const component = child.type;
|
|
124
|
-
if (component.displayName === 'CommandFormField') {
|
|
125
|
-
return jsxRuntime.jsx(commands.CommandFormFieldWrapper, { field: child });
|
|
126
|
-
}
|
|
127
|
-
const childProps = child.props;
|
|
128
|
-
if (childProps.children != null) {
|
|
129
|
-
return React.cloneElement(child, {
|
|
130
|
-
children: processChildren(childProps.children)
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
return child;
|
|
134
|
-
});
|
|
135
|
-
};
|
|
136
|
-
/**
|
|
137
|
-
* Builds the passthrough `pt` object for PrimeStepper, injecting an inline
|
|
138
|
-
* style onto the step *number* span to colour it red (errors) or green (visited
|
|
139
|
-
* and valid). Targeting the number span — rather than the header `<li>` — means
|
|
140
|
-
* PrimeReact's default `p-stepper-header` class and all its layout/separator
|
|
141
|
-
* CSS are never disturbed.
|
|
142
|
-
* Merges with any user-supplied `pt` prop.
|
|
143
|
-
*/
|
|
144
|
-
const stepperPt = React.useMemo(() => {
|
|
145
|
-
const userPt = pt;
|
|
146
|
-
const userStepperPanelPt = userPt?.stepperpanel;
|
|
147
|
-
const userNumberPt = userStepperPanelPt?.number;
|
|
148
|
-
return {
|
|
149
|
-
...userPt,
|
|
150
|
-
stepperpanel: {
|
|
151
|
-
...userStepperPanelPt,
|
|
152
|
-
number: (opts) => {
|
|
153
|
-
const existing = typeof userNumberPt === 'function'
|
|
154
|
-
? userNumberPt(opts)
|
|
155
|
-
: userNumberPt ?? {};
|
|
156
|
-
const idx = opts.context.index;
|
|
157
|
-
const hasError = stepFieldNames[idx]?.some(fieldName => !!(getFieldError?.(fieldName))) ?? false;
|
|
158
|
-
const isVisited = visitedSteps.has(idx);
|
|
159
|
-
const bgColor = hasError
|
|
160
|
-
? 'var(--red-500, #ef4444)'
|
|
161
|
-
: isVisited
|
|
162
|
-
? 'var(--green-500, #22c55e)'
|
|
163
|
-
: null;
|
|
164
|
-
if (!bgColor)
|
|
165
|
-
return existing;
|
|
166
|
-
const existingStyle = existing.style;
|
|
167
|
-
return {
|
|
168
|
-
...existing,
|
|
169
|
-
style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }
|
|
170
|
-
};
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
};
|
|
174
|
-
}, [pt, stepFieldNames, getFieldError, visitedSteps]);
|
|
175
83
|
const headerElement = (jsxRuntime.jsx("div", { className: "inline-flex align-items-center justify-content-center gap-2", children: jsxRuntime.jsx("span", { className: "font-bold white-space-nowrap", children: title }) }));
|
|
176
84
|
const footer = (jsxRuntime.jsxs("div", { className: "flex align-items-center w-full gap-3", children: [!isFirstStep && (jsxRuntime.jsx(button.Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: () => setActiveStep(s => s - 1), disabled: isBusy, outlined: true })), jsxRuntime.jsx("div", { className: "flex-1" }), !isLastStep && (jsxRuntime.jsx(button.Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: () => {
|
|
177
85
|
setVisitedSteps(prev => new Set(prev).add(activeStep));
|
|
178
86
|
setActiveStep(s => s + 1);
|
|
179
|
-
}, disabled: isBusy ||
|
|
180
|
-
return (jsxRuntime.jsx(dialog.Dialog, { header: headerElement, modal: true, footer: footer, onHide: () => handleClose(dialogs.DialogResult.Cancelled), visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: true, children: jsxRuntime.jsx(
|
|
87
|
+
}, disabled: isBusy || isCurrentStepInvalid })), isLastStep && isDialogValid && (jsxRuntime.jsx(button.Button, { label: okLabel, icon: "pi pi-check", onClick: handleSubmit, loading: isBusy, disabled: isBusy, autoFocus: true }))] }));
|
|
88
|
+
return (jsxRuntime.jsx(dialog.Dialog, { header: headerElement, modal: true, footer: footer, onHide: () => handleClose(dialogs.DialogResult.Cancelled), visible: visible, style: { width, ...style }, contentStyle: contentStyle, resizable: resizable, closable: true, children: jsxRuntime.jsx(CommandStepper.CommandStepperContent, { activeStep: activeStep, visitedSteps: visitedSteps, getFieldError: getFieldError, onActiveStepChange: setActiveStep, onVisitedStepsChange: setVisitedSteps, onStepErrorsChange: setStepErrors, showNavigation: false, showSubmit: false, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }) }));
|
|
181
89
|
};
|
|
182
90
|
const StepperCommandDialogComponent = (props) => {
|
|
183
91
|
const { title, visible, width, style, contentStyle, resizable, isValid, onClose, onConfirm, onCancel, okLabel, nextLabel, previousLabel, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, children, ...commandFormProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","useDialogContext","
|
|
1
|
+
{"version":3,"file":"StepperCommandDialog.js","sources":["../../../CommandDialog/StepperCommandDialog.tsx"],"sourcesContent":[null],"names":["useCommandFormContext","useCommandInstance","useState","useDialogContext","DialogResult","_jsx","_jsxs","Button","PrimeDialog","CommandStepperContent","CommandForm"],"mappings":"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"}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var CommandDialog = require('./CommandDialog.js');
|
|
4
|
+
var CommandStepper = require('./CommandStepper.js');
|
|
4
5
|
var StepperCommandDialog = require('./StepperCommandDialog.js');
|
|
5
6
|
|
|
6
7
|
// Copyright (c) Cratis. All rights reserved.
|
|
7
8
|
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
|
|
8
9
|
|
|
9
10
|
exports.CommandDialog = CommandDialog.CommandDialog;
|
|
11
|
+
exports.CommandStepper = CommandStepper.CommandStepper;
|
|
12
|
+
exports.CommandStepperContent = CommandStepper.CommandStepperContent;
|
|
10
13
|
exports.StepperCommandDialog = StepperCommandDialog.StepperCommandDialog;
|
|
11
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../CommandDialog/index.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../CommandDialog/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAAA;AACA;;;;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* Copyright (c) Cratis. All rights reserved. */
|
|
2
|
+
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
|
|
3
|
+
|
|
4
|
+
.p-stepper [data-pc-section="header"][data-p-active="false"] {
|
|
5
|
+
opacity: 0.5;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Make stepper and its panels fill available width */
|
|
9
|
+
.cratis-command-stepper {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 0.75rem;
|
|
13
|
+
width: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.cratis-command-stepper .p-stepper {
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.cratis-command-stepper .p-stepperpanel-content {
|
|
21
|
+
width: 100%;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
}
|
|
24
|
+
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type StepperProps } from 'primereact/stepper';
|
|
3
|
+
import { type CommandFormProps } from '@cratis/arc.react/commands';
|
|
4
|
+
import './CommandStepper.css';
|
|
5
|
+
export type StepperCustomizationProps = Pick<StepperProps, 'orientation' | 'headerPosition' | 'linear' | 'onChangeStep' | 'start' | 'end' | 'pt' | 'ptOptions' | 'unstyled'>;
|
|
6
|
+
export interface CommandStepperContentProps extends StepperCustomizationProps {
|
|
7
|
+
activeStep: number;
|
|
8
|
+
visitedSteps: Set<number>;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
onActiveStepChange?: (stepIndex: number) => void;
|
|
11
|
+
onVisitedStepsChange?: (visitedSteps: Set<number>) => void;
|
|
12
|
+
onStepErrorsChange?: (stepErrors: boolean[]) => void;
|
|
13
|
+
getFieldError?: (fieldName: string) => unknown;
|
|
14
|
+
showNavigation?: boolean;
|
|
15
|
+
showSubmit?: boolean;
|
|
16
|
+
nextLabel?: string;
|
|
17
|
+
previousLabel?: string;
|
|
18
|
+
okLabel?: string;
|
|
19
|
+
isBusy?: boolean;
|
|
20
|
+
isSubmitting?: boolean;
|
|
21
|
+
isSubmitDisabled?: boolean;
|
|
22
|
+
onSubmit?: () => void | Promise<void>;
|
|
23
|
+
}
|
|
24
|
+
export interface CommandStepperProps<TCommand extends object, TResponse = object> extends Omit<CommandFormProps<TCommand, TResponse>, 'children'>, Omit<CommandStepperContentProps, 'activeStep' | 'visitedSteps' | 'onActiveStepChange' | 'onVisitedStepsChange' | 'getFieldError' | 'isSubmitting' | 'isSubmitDisabled' | 'onSubmit'> {
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
}
|
|
27
|
+
export declare const CommandStepperContent: ({ activeStep, visitedSteps, children, onActiveStepChange, onVisitedStepsChange, onStepErrorsChange, getFieldError, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, isSubmitting, isSubmitDisabled, onSubmit, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, }: CommandStepperContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare const CommandStepper: <TCommand extends object = object, TResponse = object>(props: CommandStepperProps<TCommand, TResponse>) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
//# sourceMappingURL=CommandStepper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandStepper.d.ts","sourceRoot":"","sources":["../../../CommandDialog/CommandStepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAA2B,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EAKH,KAAK,gBAAgB,EACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAM9B,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,YAAY,EACrD,aAAa,GAAG,gBAAgB,GAAG,QAAQ,GAAG,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,WAAW,GAAG,UAAU,CACnH,CAAC;AAEF,MAAM,WAAW,0BAA2B,SAAQ,yBAAyB;IAEzE,UAAU,EAAE,MAAM,CAAC;IAEnB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAE3D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IAErD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAE/C,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBAAmB,CAAC,QAAQ,SAAS,MAAM,EAAE,SAAS,GAAG,MAAM,CAC5E,SAAQ,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,UAAU,CAAC,EAC3D,IAAI,CAAC,0BAA0B,EAAE,YAAY,GAAG,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,GAAG,eAAe,GAAG,cAAc,GAAG,kBAAkB,GAAG,UAAU,CAAC;IAExL,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmDD,eAAO,MAAM,qBAAqB,GAAI,+TA0BnC,0BAA0B,4CA2I5B,CAAC;AAuGF,eAAO,MAAM,cAAc,GAAI,QAAQ,SAAS,MAAM,GAAG,MAAM,EAAE,SAAS,GAAG,MAAM,EAC/E,OAAO,mBAAmB,CAAC,QAAQ,EAAE,SAAS,CAAC,4CAmDlD,CAAC"}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import React, { useMemo, useEffect, useState } from 'react';
|
|
3
|
+
import { Stepper } from 'primereact/stepper';
|
|
4
|
+
import { Button } from 'primereact/button';
|
|
5
|
+
import { CommandForm, useCommandFormContext, useCommandInstance, CommandFormFieldWrapper } from '@cratis/arc.react/commands';
|
|
6
|
+
import './CommandStepper.css';
|
|
7
|
+
|
|
8
|
+
/** Extracts the property name from an accessor function like `c => c.name`. */
|
|
9
|
+
const getPropertyName = (accessor) => {
|
|
10
|
+
if (typeof accessor !== 'function')
|
|
11
|
+
return '';
|
|
12
|
+
const fnStr = accessor.toString();
|
|
13
|
+
const match = fnStr.match(/\.([a-zA-Z_$][a-zA-Z0-9_$]*)/);
|
|
14
|
+
return match ? match[1] : '';
|
|
15
|
+
};
|
|
16
|
+
/** Recursively collects all CommandFormField property names from a React node tree. */
|
|
17
|
+
const extractFieldNamesFromNode = (nodes) => {
|
|
18
|
+
const names = [];
|
|
19
|
+
React.Children.forEach(nodes, (child) => {
|
|
20
|
+
if (!React.isValidElement(child))
|
|
21
|
+
return;
|
|
22
|
+
const component = child.type;
|
|
23
|
+
if (component.displayName === 'CommandFormField') {
|
|
24
|
+
const fieldProps = child.props;
|
|
25
|
+
const name = getPropertyName(fieldProps.value);
|
|
26
|
+
if (name)
|
|
27
|
+
names.push(name);
|
|
28
|
+
}
|
|
29
|
+
const childProps = child.props;
|
|
30
|
+
if (childProps.children != null) {
|
|
31
|
+
names.push(...extractFieldNamesFromNode(childProps.children));
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
return names;
|
|
35
|
+
};
|
|
36
|
+
const processChildren = (nodes) => {
|
|
37
|
+
return React.Children.map(nodes, (child) => {
|
|
38
|
+
if (!React.isValidElement(child))
|
|
39
|
+
return child;
|
|
40
|
+
const component = child.type;
|
|
41
|
+
if (component.displayName === 'CommandFormField') {
|
|
42
|
+
return jsx(CommandFormFieldWrapper, { field: child });
|
|
43
|
+
}
|
|
44
|
+
const childProps = child.props;
|
|
45
|
+
if (childProps.children != null) {
|
|
46
|
+
return React.cloneElement(child, {
|
|
47
|
+
children: processChildren(childProps.children)
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
return child;
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
const CommandStepperContent = ({ activeStep, visitedSteps, children, onActiveStepChange, onVisitedStepsChange, onStepErrorsChange, getFieldError, showNavigation = true, showSubmit = true, nextLabel = 'Next', previousLabel = 'Previous', okLabel = 'Submit', isBusy = false, isSubmitting = false, isSubmitDisabled = false, onSubmit, orientation = 'horizontal', headerPosition, linear = true, onChangeStep, start, end, pt, ptOptions, unstyled, }) => {
|
|
54
|
+
const stepCount = React.Children.count(children);
|
|
55
|
+
const isLastStep = activeStep >= stepCount - 1;
|
|
56
|
+
const isFirstStep = activeStep <= 0;
|
|
57
|
+
const stepFieldNames = useMemo(() => React.Children.toArray(children).map((step) => {
|
|
58
|
+
if (!React.isValidElement(step))
|
|
59
|
+
return [];
|
|
60
|
+
const stepProps = step.props;
|
|
61
|
+
return extractFieldNamesFromNode(stepProps.children);
|
|
62
|
+
}), [children]);
|
|
63
|
+
const stepErrors = useMemo(() => stepFieldNames.map(fields => fields.some(fieldName => !!getFieldError?.(fieldName))), [stepFieldNames, getFieldError]);
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
onStepErrorsChange?.(stepErrors);
|
|
66
|
+
}, [onStepErrorsChange, stepErrors]);
|
|
67
|
+
const isCurrentStepInvalid = stepErrors[activeStep] ?? false;
|
|
68
|
+
const hasAnyStepErrors = stepErrors.some(hasError => hasError);
|
|
69
|
+
const stepperPt = useMemo(() => {
|
|
70
|
+
const userPt = pt;
|
|
71
|
+
const userStepperPanelPt = userPt?.stepperpanel;
|
|
72
|
+
const userNumberPt = userStepperPanelPt?.number;
|
|
73
|
+
return {
|
|
74
|
+
...userPt,
|
|
75
|
+
stepperpanel: {
|
|
76
|
+
...userStepperPanelPt,
|
|
77
|
+
number: (opts) => {
|
|
78
|
+
const existing = typeof userNumberPt === 'function'
|
|
79
|
+
? userNumberPt(opts)
|
|
80
|
+
: userNumberPt ?? {};
|
|
81
|
+
const idx = opts.context.index;
|
|
82
|
+
const hasError = stepErrors[idx] ?? false;
|
|
83
|
+
const isVisited = visitedSteps.has(idx);
|
|
84
|
+
const bgColor = hasError
|
|
85
|
+
? 'var(--red-500, #ef4444)'
|
|
86
|
+
: isVisited
|
|
87
|
+
? 'var(--green-500, #22c55e)'
|
|
88
|
+
: null;
|
|
89
|
+
if (!bgColor)
|
|
90
|
+
return existing;
|
|
91
|
+
const existingStyle = existing.style;
|
|
92
|
+
return {
|
|
93
|
+
...existing,
|
|
94
|
+
style: { ...existingStyle, backgroundColor: bgColor, color: '#fff' }
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
}, [pt, stepErrors, visitedSteps]);
|
|
100
|
+
const handleChangeStep = event => {
|
|
101
|
+
onChangeStep?.(event);
|
|
102
|
+
const index = event.index;
|
|
103
|
+
if (typeof index === 'number') {
|
|
104
|
+
if (index > activeStep) {
|
|
105
|
+
onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
|
|
106
|
+
}
|
|
107
|
+
onActiveStepChange?.(index);
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
const handlePrevious = () => {
|
|
111
|
+
onActiveStepChange?.(Math.max(0, activeStep - 1));
|
|
112
|
+
};
|
|
113
|
+
const handleNext = () => {
|
|
114
|
+
onVisitedStepsChange?.(new Set(visitedSteps).add(activeStep));
|
|
115
|
+
onActiveStepChange?.(Math.min(stepCount - 1, activeStep + 1));
|
|
116
|
+
};
|
|
117
|
+
return (jsxs("div", { className: "cratis-command-stepper", children: [jsx(Stepper, { activeStep: activeStep, linear: linear, orientation: orientation, headerPosition: headerPosition, onChangeStep: handleChangeStep, start: start, end: end, pt: stepperPt, ptOptions: ptOptions, unstyled: unstyled, children: processChildren(children) }), showNavigation && (jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', gap: '0.75rem' }, children: [!isFirstStep && (jsx(Button, { label: previousLabel, icon: "pi pi-arrow-left", onClick: handlePrevious, disabled: isBusy, outlined: true, style: { width: 'auto' } })), jsx("div", { style: { flex: 1 } }), !isLastStep && (jsx(Button, { label: nextLabel, icon: "pi pi-arrow-right", iconPos: "right", onClick: handleNext, disabled: isBusy || isSubmitting || isCurrentStepInvalid, style: { width: 'auto' } })), isLastStep && showSubmit && (jsx(Button, { label: okLabel, icon: "pi pi-check", onClick: () => void onSubmit?.(), loading: isSubmitting, disabled: isBusy || isSubmitting || isSubmitDisabled || hasAnyStepErrors, autoFocus: true, style: { width: 'auto' } }))] }))] }));
|
|
118
|
+
};
|
|
119
|
+
const CommandStepperWrapper = ({ children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, onSuccess, onValidationFailure, onFailed, onBeforeExecute, }) => {
|
|
120
|
+
const { getFieldError, isValid: isCommandFormValid, setCommandValues, setCommandResult } = useCommandFormContext();
|
|
121
|
+
const commandInstance = useCommandInstance();
|
|
122
|
+
const [activeStep, setActiveStep] = useState(0);
|
|
123
|
+
const [visitedSteps, setVisitedSteps] = useState(new Set([0]));
|
|
124
|
+
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
125
|
+
const handleSubmit = async () => {
|
|
126
|
+
if (onBeforeExecute) {
|
|
127
|
+
const transformedValues = onBeforeExecute(commandInstance);
|
|
128
|
+
setCommandValues(transformedValues);
|
|
129
|
+
}
|
|
130
|
+
setIsSubmitting(true);
|
|
131
|
+
let result;
|
|
132
|
+
try {
|
|
133
|
+
result = await commandInstance.execute();
|
|
134
|
+
}
|
|
135
|
+
finally {
|
|
136
|
+
setIsSubmitting(false);
|
|
137
|
+
}
|
|
138
|
+
if (!result.isSuccess) {
|
|
139
|
+
if (!result.isValid) {
|
|
140
|
+
await onValidationFailure?.(result.validationResults);
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
await onFailed?.(result);
|
|
144
|
+
}
|
|
145
|
+
setCommandResult(result);
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
await onSuccess?.(result.response);
|
|
149
|
+
};
|
|
150
|
+
return (jsx(CommandStepperContent, { activeStep: activeStep, visitedSteps: visitedSteps, onActiveStepChange: setActiveStep, onVisitedStepsChange: setVisitedSteps, onStepErrorsChange: onStepErrorsChange, getFieldError: getFieldError, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, isSubmitting: isSubmitting, isSubmitDisabled: !isCommandFormValid, onSubmit: handleSubmit, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, children: children }));
|
|
151
|
+
};
|
|
152
|
+
const CommandStepper = (props) => {
|
|
153
|
+
const { children, onStepErrorsChange, showNavigation, showSubmit, nextLabel, previousLabel, okLabel, isBusy, orientation, headerPosition, linear, onChangeStep, start, end, pt, ptOptions, unstyled, ...commandFormProps } = props;
|
|
154
|
+
return (jsx(CommandForm, { ...commandFormProps, children: jsx(CommandStepperWrapper, { onStepErrorsChange: onStepErrorsChange, showNavigation: showNavigation, showSubmit: showSubmit, nextLabel: nextLabel, previousLabel: previousLabel, okLabel: okLabel, isBusy: isBusy, orientation: orientation, headerPosition: headerPosition, linear: linear, onChangeStep: onChangeStep, start: start, end: end, pt: pt, ptOptions: ptOptions, unstyled: unstyled, onSuccess: props.onSuccess, onValidationFailure: props.onValidationFailure, onFailed: props.onFailed, onBeforeExecute: commandFormProps.onBeforeExecute, children: children }) }));
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
export { CommandStepper, CommandStepperContent };
|
|
158
|
+
//# sourceMappingURL=CommandStepper.js.map
|