@cratis/components 1.6.8 → 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/cjs/Common/Icon.js +22 -0
- package/dist/cjs/Common/Icon.js.map +1 -0
- package/dist/cjs/Common/index.js +2 -0
- package/dist/cjs/Common/index.js.map +1 -1
- package/dist/cjs/Toolbar/ToolbarButton.js +4 -3
- package/dist/cjs/Toolbar/ToolbarButton.js.map +1 -1
- package/dist/cjs/Toolbar/ToolbarFanOutItem.js +2 -1
- package/dist/cjs/Toolbar/ToolbarFanOutItem.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/Common/Icon.d.ts +8 -0
- package/dist/esm/Common/Icon.d.ts.map +1 -0
- package/dist/esm/Common/Icon.js +20 -0
- package/dist/esm/Common/Icon.js.map +1 -0
- package/dist/esm/Common/Icon.stories.d.ts +11 -0
- package/dist/esm/Common/Icon.stories.d.ts.map +1 -0
- package/dist/esm/Common/Icon.stories.js +26 -0
- package/dist/esm/Common/Icon.stories.js.map +1 -0
- package/dist/esm/Common/index.d.ts +1 -0
- package/dist/esm/Common/index.d.ts.map +1 -1
- package/dist/esm/Common/index.js +1 -0
- package/dist/esm/Common/index.js.map +1 -1
- package/dist/esm/Toolbar/Toolbar.stories.d.ts +1 -0
- package/dist/esm/Toolbar/Toolbar.stories.d.ts.map +1 -1
- package/dist/esm/Toolbar/Toolbar.stories.js +10 -0
- package/dist/esm/Toolbar/Toolbar.stories.js.map +1 -1
- package/dist/esm/Toolbar/ToolbarButton.d.ts +2 -1
- package/dist/esm/Toolbar/ToolbarButton.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarButton.js +4 -3
- package/dist/esm/Toolbar/ToolbarButton.js.map +1 -1
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts +2 -1
- package/dist/esm/Toolbar/ToolbarFanOutItem.d.ts.map +1 -1
- package/dist/esm/Toolbar/ToolbarFanOutItem.js +2 -1
- package/dist/esm/Toolbar/ToolbarFanOutItem.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,22 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Renders an {@link Icon} value.
|
|
7
|
+
*
|
|
8
|
+
* - When `icon` is a non-empty string it is treated as a PrimeIcons (or other icon-font)
|
|
9
|
+
* CSS class and rendered as `<i className={icon} />`.
|
|
10
|
+
* - Otherwise the value is rendered as-is, allowing any React node (SVG, component, etc.)
|
|
11
|
+
* to be used as an icon.
|
|
12
|
+
*/
|
|
13
|
+
const IconDisplay = ({ icon, className }) => {
|
|
14
|
+
if (typeof icon === 'string' && icon.length > 0) {
|
|
15
|
+
const combined = className ? `${icon} ${className}` : icon;
|
|
16
|
+
return jsxRuntime.jsx("i", { className: combined });
|
|
17
|
+
}
|
|
18
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: icon });
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
exports.IconDisplay = IconDisplay;
|
|
22
|
+
//# sourceMappingURL=Icon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../Common/Icon.tsx"],"sourcesContent":[null],"names":["_jsx","_Fragment"],"mappings":";;;;AAoBA;;;;;;;AAOG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAoB,KAAI;IACjE,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7C,QAAA,MAAM,QAAQ,GAAG,SAAS,GAAG,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,GAAG,IAAI;AAC1D,QAAA,OAAOA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,QAAQ,GAAI;IACrC;IACA,OAAOA,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAG,IAAI,EAAA,CAAI;AACtB;;;;"}
|
package/dist/cjs/Common/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var ErrorBoundary = require('./ErrorBoundary.js');
|
|
4
|
+
var Icon = require('./Icon.js');
|
|
4
5
|
var Page = require('./Page.js');
|
|
5
6
|
var FormElement = require('./FormElement.js');
|
|
6
7
|
var Tooltip = require('./Tooltip.js');
|
|
@@ -9,6 +10,7 @@ var Tooltip = require('./Tooltip.js');
|
|
|
9
10
|
// Licensed under the MIT license. See LICENSE file in the project root for full license information.
|
|
10
11
|
|
|
11
12
|
exports.ErrorBoundary = ErrorBoundary.ErrorBoundary;
|
|
13
|
+
exports.IconDisplay = Icon.IconDisplay;
|
|
12
14
|
exports.Page = Page.Page;
|
|
13
15
|
exports.FormElement = FormElement.FormElement;
|
|
14
16
|
exports.Tooltip = Tooltip.Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAAA;AACA;;;;;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Icon = require('../Common/Icon.js');
|
|
4
5
|
var Tooltip = require('../Common/Tooltip.js');
|
|
5
6
|
var ToolbarDragContext = require('./ToolbarDragContext.js');
|
|
6
7
|
|
|
@@ -20,11 +21,11 @@ const ToolbarButton = ({ icon, text, tooltip, active = false, onClick, tooltipPo
|
|
|
20
21
|
const activeClass = active ? 'toolbar-button--active' : '';
|
|
21
22
|
const draggableClass = isDraggable ? 'toolbar-button--draggable' : '';
|
|
22
23
|
const hasText = typeof text === 'string' && text.length > 0;
|
|
23
|
-
const
|
|
24
|
+
const resolvedIcon = icon !== undefined && icon !== null && (typeof icon !== 'string' || icon.length > 0) ? icon : null;
|
|
24
25
|
const buttonContent = hasText
|
|
25
26
|
? jsxRuntime.jsx("span", { className: 'toolbar-button__text', children: text })
|
|
26
|
-
:
|
|
27
|
-
? jsxRuntime.jsx(
|
|
27
|
+
: resolvedIcon !== null
|
|
28
|
+
? jsxRuntime.jsx(Icon.IconDisplay, { icon: resolvedIcon, className: 'text-lg' })
|
|
28
29
|
: null;
|
|
29
30
|
const buttonSizeClass = hasText ? 'h-10 px-3 min-w-[4rem]' : 'w-10 h-10';
|
|
30
31
|
return (jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, position: tooltipPosition, children: jsxRuntime.jsx("button", { type: 'button', "aria-label": tooltip, onClick: onClick, draggable: isDraggable, onDragStart: isDraggable ? handleDragStart : undefined, className: `toolbar-button ${buttonSizeClass} flex items-center justify-center rounded-lg cursor-pointer ${activeClass} ${draggableClass}`, children: buttonContent }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarButton.js","sources":["../../../Toolbar/ToolbarButton.tsx"],"sourcesContent":[null],"names":["useToolbarDragContext","_jsx","Tooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarButton.js","sources":["../../../Toolbar/ToolbarButton.tsx"],"sourcesContent":[null],"names":["useToolbarDragContext","_jsx","IconDisplay","Tooltip"],"mappings":";;;;;;;AAiDA;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAsB,KAAI;AAC3J,IAAA,MAAM,WAAW,GAAGA,wCAAqB,EAAE;AAC3C,IAAA,MAAM,WAAW,GAAG,SAAS,IAAI,WAAW,CAAC,SAAS;AAEtD,IAAA,MAAM,eAAe,GAAG,CAAC,KAAyC,KAAI;AAClE,QAAA,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAC5E,QAAA,KAAK,CAAC,YAAY,CAAC,aAAa,GAAG,MAAM;AACzC,QAAA,WAAW,GAAG,IAAI,EAAE,KAAK,CAAC;QAC1B,WAAW,CAAC,eAAe,GAAG,IAAI,EAAE,KAAK,CAAC;AAC9C,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAM,GAAG,wBAAwB,GAAG,EAAE;IAC1D,MAAM,cAAc,GAAG,WAAW,GAAG,2BAA2B,GAAG,EAAE;AACrE,IAAA,MAAM,OAAO,GAAG,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;AAC3D,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI;IACvH,MAAM,aAAa,GAAG;AAClB,UAAEC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAE,IAAI,EAAA;UAC5C,YAAY,KAAK;cACbA,cAAA,CAACC,gBAAW,EAAA,EAAC,IAAI,EAAE,YAAY,EAAE,SAAS,EAAC,SAAS,EAAA;cACpD,IAAI;IACd,MAAM,eAAe,GAAG,OAAO,GAAG,wBAAwB,GAAG,WAAW;IAExE,QACID,cAAA,CAACE,eAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAA,QAAA,EAChDF,2BACI,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,OAAO,EACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,EACtB,WAAW,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EACtD,SAAS,EAAE,CAAA,eAAA,EAAkB,eAAe,CAAA,4DAAA,EAA+D,WAAW,CAAA,CAAA,EAAI,cAAc,CAAA,CAAE,EAAA,QAAA,EAEzI,aAAa,EAAA,CACT,EAAA,CACH;AAElB;;;;"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
|
+
var Icon = require('../Common/Icon.js');
|
|
5
6
|
var Tooltip = require('../Common/Tooltip.js');
|
|
6
7
|
|
|
7
8
|
/**
|
|
@@ -37,7 +38,7 @@ const ToolbarFanOutItem = ({ icon, tooltip, tooltipPosition = 'right', fanOutDir
|
|
|
37
38
|
const activeClass = isExpanded ? 'toolbar-button--active' : '';
|
|
38
39
|
const panelVisibleClass = isExpanded ? 'toolbar-fanout-panel--visible' : '';
|
|
39
40
|
const directionClass = `toolbar-fanout-panel--${fanOutDirection}`;
|
|
40
|
-
return (jsxRuntime.jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, position: tooltipPosition, children: jsxRuntime.jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsxRuntime.jsx(
|
|
41
|
+
return (jsxRuntime.jsxs("div", { className: 'toolbar-fanout-item', ref: containerRef, children: [jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, position: tooltipPosition, children: jsxRuntime.jsx("button", { type: 'button', "aria-label": tooltip, "aria-expanded": isExpanded, onClick: handleToggle, className: `toolbar-button w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer ${activeClass}`, children: jsxRuntime.jsx(Icon.IconDisplay, { icon: icon, className: 'text-lg' }) }) }), jsxRuntime.jsx("div", { className: `toolbar-fanout-panel ${directionClass} ${panelVisibleClass}`, children: children })] }));
|
|
41
42
|
};
|
|
42
43
|
|
|
43
44
|
exports.ToolbarFanOutItem = ToolbarFanOutItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"sourcesContent":[null],"names":["useState","useRef","useEffect","_jsxs","_jsx","Tooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarFanOutItem.js","sources":["../../../Toolbar/ToolbarFanOutItem.tsx"],"sourcesContent":[null],"names":["useState","useRef","useEffect","_jsxs","_jsx","Tooltip","IconDisplay"],"mappings":";;;;;;;AA2BA;;;;;;;;;AASG;MACU,iBAAiB,GAAG,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,eAAe,GAAG,OAAO,EACzB,eAAe,GAAG,OAAO,EACzB,QAAQ,GACa,KAAI;IACzB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;IAEjD,MAAM,YAAY,GAAG,MAAK;AACtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;AAC9B,IAAA,CAAC;;IAGDC,eAAS,CAAC,MAAK;AACX,QAAA,IAAI,CAAC,UAAU;YAAE;AAEjB,QAAA,MAAM,kBAAkB,GAAG,CAAC,KAAiB,KAAI;AAC7C,YAAA,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9E,aAAa,CAAC,KAAK,CAAC;YACxB;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC;AAC1D,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC;AACjE,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,MAAM,WAAW,GAAG,UAAU,GAAG,wBAAwB,GAAG,EAAE;IAC9D,MAAM,iBAAiB,GAAG,UAAU,GAAG,+BAA+B,GAAG,EAAE;AAC3E,IAAA,MAAM,cAAc,GAAG,CAAA,sBAAA,EAAyB,eAAe,EAAE;AAEjE,IAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,YAAY,EAAA,QAAA,EAAA,CAClDC,cAAA,CAACC,eAAO,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAA,QAAA,EAChDD,2BACI,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,OAAO,EAAA,eAAA,EACJ,UAAU,EACzB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,CAAA,oFAAA,EAAuF,WAAW,CAAA,CAAE,YAE/GA,cAAA,CAACE,gBAAW,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CAC1C,EAAA,CACH,EACVF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,wBAAwB,cAAc,CAAA,CAAA,EAAI,iBAAiB,CAAA,CAAE,EAAA,QAAA,EACxE,QAAQ,EAAA,CACP,CAAA,EAAA,CACJ;AAEd;;;;"}
|
|
@@ -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"}
|