@pega/cosmos-react-demos 2.2.4 → 2.2.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/jsx/core/MultiStep/MultiStep.stories.d.ts.map +1 -1
- package/jsx/core/MultiStep/MultiStep.stories.jsx +64 -25
- package/jsx/core/MultiStep/MultiStep.stories.jsx.map +1 -1
- package/lib/core/MultiStep/MultiStep.stories.d.ts.map +1 -1
- package/lib/core/MultiStep/MultiStep.stories.js +55 -21
- package/lib/core/MultiStep/MultiStep.stories.js.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStep.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAKxC,wBAGU;AAEV,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"MultiStep.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAKxC,wBAGU;AAEV,eAAO,MAAM,aAAa,mBA0HzB,CAAC"}
|
|
@@ -1,46 +1,85 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { Button, Flex, MultiStep, Text } from '@pega/cosmos-react-core';
|
|
1
|
+
import { useMemo, useState } from 'react';
|
|
2
|
+
import { Button, Checkbox, Flex, MultiStep, Text } from '@pega/cosmos-react-core';
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Core/MultiStep',
|
|
5
5
|
component: MultiStep
|
|
6
6
|
};
|
|
7
7
|
export const MultiStepDemo = () => {
|
|
8
|
-
const [
|
|
8
|
+
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
|
9
9
|
const [cancelled, setCancelled] = useState(false);
|
|
10
|
+
const [isChecked, setIsChecked] = useState(false);
|
|
11
|
+
const [hasAdditionalStep, setHasAdditionalStep] = useState(false);
|
|
10
12
|
const [finished, setFinished] = useState(false);
|
|
11
|
-
const numSteps = 6;
|
|
13
|
+
const [numSteps, setNumSteps] = useState(6);
|
|
12
14
|
const restart = () => {
|
|
13
15
|
setCancelled(false);
|
|
14
16
|
setFinished(false);
|
|
15
|
-
|
|
17
|
+
setCurrentStepIndex(0);
|
|
18
|
+
setIsChecked(false);
|
|
19
|
+
setHasAdditionalStep(false);
|
|
20
|
+
setNumSteps(6);
|
|
16
21
|
};
|
|
17
|
-
const
|
|
18
|
-
|
|
22
|
+
const manageAdditionalStep = () => {
|
|
23
|
+
if (isChecked && numSteps === 6) {
|
|
24
|
+
setHasAdditionalStep(true);
|
|
25
|
+
setNumSteps(7);
|
|
26
|
+
}
|
|
27
|
+
else if (!isChecked && numSteps === 7) {
|
|
28
|
+
setHasAdditionalStep(false);
|
|
29
|
+
setNumSteps(6);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
const stepData = useMemo(() => {
|
|
33
|
+
const stepActions = (<>
|
|
19
34
|
<Button onClick={() => setCancelled(true)}>Cancel</Button>
|
|
20
35
|
<div>
|
|
21
|
-
{
|
|
22
|
-
|
|
36
|
+
{currentStepIndex > 0 && (<Button onClick={() => {
|
|
37
|
+
if (currentStepIndex === 1)
|
|
38
|
+
manageAdditionalStep();
|
|
39
|
+
setCurrentStepIndex(curr => curr - 1);
|
|
40
|
+
}}>
|
|
41
|
+
Previous
|
|
42
|
+
</Button>)}
|
|
43
|
+
{currentStepIndex !== numSteps - 1 && (<Button variant='primary' onClick={() => {
|
|
44
|
+
if (currentStepIndex === 1)
|
|
45
|
+
manageAdditionalStep();
|
|
46
|
+
setCurrentStepIndex(curr => curr + 1);
|
|
47
|
+
}}>
|
|
23
48
|
Next
|
|
24
49
|
</Button>)}
|
|
25
|
-
{
|
|
50
|
+
{currentStepIndex === numSteps - 1 && (<Button type='submit' variant='primary' onClick={() => setFinished(true)}>
|
|
26
51
|
Finish
|
|
27
52
|
</Button>)}
|
|
28
53
|
</div>
|
|
29
54
|
</>);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
55
|
+
const defaultSteps = Array.from({ length: numSteps }).map((_, index) => {
|
|
56
|
+
const depth = ((index / 1) % 2);
|
|
57
|
+
const id = `Step-${index + 1}`;
|
|
58
|
+
const step = {
|
|
59
|
+
name: `Label for ${id}`,
|
|
60
|
+
id,
|
|
61
|
+
depth,
|
|
62
|
+
actions: stepActions
|
|
63
|
+
};
|
|
64
|
+
step.content = <Text>Content for {id}</Text>;
|
|
65
|
+
if (index === 1)
|
|
66
|
+
step.content = (<>
|
|
67
|
+
<Text>Content for {id}</Text>
|
|
68
|
+
<Checkbox name='additionalStep' label='Additional step' defaultChecked={hasAdditionalStep} onChange={(e) => setIsChecked(e.target.checked)}/>
|
|
69
|
+
</>);
|
|
70
|
+
return step;
|
|
71
|
+
});
|
|
72
|
+
if (hasAdditionalStep) {
|
|
73
|
+
defaultSteps.splice(2, 0, {
|
|
74
|
+
name: 'Additional step',
|
|
75
|
+
id: 'Additional step',
|
|
76
|
+
depth: 0,
|
|
77
|
+
actions: stepActions,
|
|
78
|
+
content: <Text>Additional step</Text>
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
return defaultSteps;
|
|
82
|
+
}, [currentStepIndex, hasAdditionalStep, isChecked, numSteps]);
|
|
44
83
|
return (<>
|
|
45
84
|
{cancelled && (<Flex container={{ gap: 2 }}>
|
|
46
85
|
<Text variant='h1'>MultiStep cancelled</Text>
|
|
@@ -50,7 +89,7 @@ export const MultiStepDemo = () => {
|
|
|
50
89
|
<Text variant='h1'>MultiStep finished</Text>
|
|
51
90
|
<Button onClick={restart}>Restart</Button>
|
|
52
91
|
</Flex>)}
|
|
53
|
-
{!cancelled && !finished && <MultiStep steps={stepData} currentId={
|
|
92
|
+
{!cancelled && !finished && (<MultiStep steps={stepData} currentId={stepData[currentStepIndex].id}/>)}
|
|
54
93
|
</>);
|
|
55
94
|
};
|
|
56
95
|
//# sourceMappingURL=MultiStep.stories.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStep.stories.jsx","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"MultiStep.stories.jsx","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAQ,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,mBAAmB,CAAC,CAAC,CAAC,CAAC;QACvB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC5B,WAAW,CAAC,CAAC,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,SAAS,IAAI,QAAQ,KAAK,CAAC,EAAE;YAC/B,oBAAoB,CAAC,IAAI,CAAC,CAAC;YAC3B,WAAW,CAAC,CAAC,CAAC,CAAC;SAChB;aAAM,IAAI,CAAC,SAAS,IAAI,QAAQ,KAAK,CAAC,EAAE;YACvC,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAC5B,WAAW,CAAC,CAAC,CAAC,CAAC;SAChB;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,WAAW,GAAG,CAClB,EACE;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CACzD;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,gBAAgB,GAAG,CAAC,IAAI,CACvB,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,IAAI,gBAAgB,KAAK,CAAC;wBAAE,oBAAoB,EAAE,CAAC;oBACnD,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBACxC,CAAC,CAAC,CAEF;;YACF,EAAE,MAAM,CAAC,CACV,CACD;UAAA,CAAC,gBAAgB,KAAK,QAAQ,GAAG,CAAC,IAAI,CACpC,CAAC,MAAM,CACL,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,IAAI,gBAAgB,KAAK,CAAC;wBAAE,oBAAoB,EAAE,CAAC;oBACnD,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBACxC,CAAC,CAAC,CAEF;;YACF,EAAE,MAAM,CAAC,CACV,CACD;UAAA,CAAC,gBAAgB,KAAK,QAAQ,GAAG,CAAC,IAAI,CACpC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CACvE;;YACF,EAAE,MAAM,CAAC,CACV,CACH;QAAA,EAAE,GAAG,CACP;MAAA,GAAG,CACJ,CAAC;QAEF,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;YACrE,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAU,CAAC;YACzC,MAAM,EAAE,GAAG,QAAQ,KAAK,GAAG,CAAC,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAS;gBACjB,IAAI,EAAE,aAAa,EAAE,EAAE;gBACvB,EAAE;gBACF,KAAK;gBACL,OAAO,EAAE,WAAW;aACrB,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;YAE7C,IAAI,KAAK,KAAK,CAAC;gBACb,IAAI,CAAC,OAAO,GAAG,CACb,EACE;YAAA,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,IAAI,CAC5B;YAAA,CAAC,QAAQ,CACP,IAAI,CAAC,gBAAgB,CACrB,KAAK,CAAC,iBAAiB,CACvB,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,QAAQ,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAEnF;UAAA,GAAG,CACJ,CAAC;YAEJ,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,IAAI,iBAAiB,EAAE;YACrB,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;gBACxB,IAAI,EAAE,iBAAiB;gBACvB,EAAE,EAAE,iBAAiB;gBACrB,KAAK,EAAE,CAAC;gBACR,OAAO,EAAE,WAAW;gBACpB,OAAO,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;aACtC,CAAC,CAAC;SACJ;QAED,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/D,OAAO,CACL,EACE;MAAA,CAAC,SAAS,IAAI,CACZ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAC5C;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAC3C;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAC3C;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAC3C;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,CAC1B,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAG,CACzE,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { ChangeEvent, useMemo, useState } from 'react';\n\nimport { Button, Checkbox, Flex, MultiStep, Step, Text } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/MultiStep',\n component: MultiStep\n} as Meta;\n\nexport const MultiStepDemo = () => {\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const [cancelled, setCancelled] = useState(false);\n const [isChecked, setIsChecked] = useState(false);\n const [hasAdditionalStep, setHasAdditionalStep] = useState(false);\n const [finished, setFinished] = useState(false);\n const [numSteps, setNumSteps] = useState(6);\n\n const restart = () => {\n setCancelled(false);\n setFinished(false);\n setCurrentStepIndex(0);\n setIsChecked(false);\n setHasAdditionalStep(false);\n setNumSteps(6);\n };\n\n const manageAdditionalStep = () => {\n if (isChecked && numSteps === 6) {\n setHasAdditionalStep(true);\n setNumSteps(7);\n } else if (!isChecked && numSteps === 7) {\n setHasAdditionalStep(false);\n setNumSteps(6);\n }\n };\n\n const stepData = useMemo(() => {\n const stepActions = (\n <>\n <Button onClick={() => setCancelled(true)}>Cancel</Button>\n <div>\n {currentStepIndex > 0 && (\n <Button\n onClick={() => {\n if (currentStepIndex === 1) manageAdditionalStep();\n setCurrentStepIndex(curr => curr - 1);\n }}\n >\n Previous\n </Button>\n )}\n {currentStepIndex !== numSteps - 1 && (\n <Button\n variant='primary'\n onClick={() => {\n if (currentStepIndex === 1) manageAdditionalStep();\n setCurrentStepIndex(curr => curr + 1);\n }}\n >\n Next\n </Button>\n )}\n {currentStepIndex === numSteps - 1 && (\n <Button type='submit' variant='primary' onClick={() => setFinished(true)}>\n Finish\n </Button>\n )}\n </div>\n </>\n );\n\n const defaultSteps = Array.from({ length: numSteps }).map((_, index) => {\n const depth = ((index / 1) % 2) as 0 | 1;\n const id = `Step-${index + 1}`;\n const step: Step = {\n name: `Label for ${id}`,\n id,\n depth,\n actions: stepActions\n };\n\n step.content = <Text>Content for {id}</Text>;\n\n if (index === 1)\n step.content = (\n <>\n <Text>Content for {id}</Text>\n <Checkbox\n name='additionalStep'\n label='Additional step'\n defaultChecked={hasAdditionalStep}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setIsChecked(e.target.checked)}\n />\n </>\n );\n\n return step;\n });\n\n if (hasAdditionalStep) {\n defaultSteps.splice(2, 0, {\n name: 'Additional step',\n id: 'Additional step',\n depth: 0,\n actions: stepActions,\n content: <Text>Additional step</Text>\n });\n }\n\n return defaultSteps;\n }, [currentStepIndex, hasAdditionalStep, isChecked, numSteps]);\n\n return (\n <>\n {cancelled && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep cancelled</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {finished && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep finished</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {!cancelled && !finished && (\n <MultiStep steps={stepData} currentId={stepData[currentStepIndex].id} />\n )}\n </>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStep.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAKxC,wBAGU;AAEV,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"MultiStep.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAKxC,wBAGU;AAEV,eAAO,MAAM,aAAa,mBA0HzB,CAAC"}
|
|
@@ -1,36 +1,70 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Button, Flex, MultiStep, Text } from '@pega/cosmos-react-core';
|
|
2
|
+
import { useMemo, useState } from 'react';
|
|
3
|
+
import { Button, Checkbox, Flex, MultiStep, Text } from '@pega/cosmos-react-core';
|
|
4
4
|
export default {
|
|
5
5
|
title: 'Core/MultiStep',
|
|
6
6
|
component: MultiStep
|
|
7
7
|
};
|
|
8
8
|
export const MultiStepDemo = () => {
|
|
9
|
-
const [
|
|
9
|
+
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
|
10
10
|
const [cancelled, setCancelled] = useState(false);
|
|
11
|
+
const [isChecked, setIsChecked] = useState(false);
|
|
12
|
+
const [hasAdditionalStep, setHasAdditionalStep] = useState(false);
|
|
11
13
|
const [finished, setFinished] = useState(false);
|
|
12
|
-
const numSteps = 6;
|
|
14
|
+
const [numSteps, setNumSteps] = useState(6);
|
|
13
15
|
const restart = () => {
|
|
14
16
|
setCancelled(false);
|
|
15
17
|
setFinished(false);
|
|
16
|
-
|
|
18
|
+
setCurrentStepIndex(0);
|
|
19
|
+
setIsChecked(false);
|
|
20
|
+
setHasAdditionalStep(false);
|
|
21
|
+
setNumSteps(6);
|
|
17
22
|
};
|
|
18
|
-
const
|
|
19
|
-
|
|
23
|
+
const manageAdditionalStep = () => {
|
|
24
|
+
if (isChecked && numSteps === 6) {
|
|
25
|
+
setHasAdditionalStep(true);
|
|
26
|
+
setNumSteps(7);
|
|
27
|
+
}
|
|
28
|
+
else if (!isChecked && numSteps === 7) {
|
|
29
|
+
setHasAdditionalStep(false);
|
|
30
|
+
setNumSteps(6);
|
|
31
|
+
}
|
|
20
32
|
};
|
|
21
|
-
const stepData =
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
const stepData = useMemo(() => {
|
|
34
|
+
const stepActions = (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setCancelled(true), children: "Cancel" }, void 0), _jsxs("div", { children: [currentStepIndex > 0 && (_jsx(Button, { onClick: () => {
|
|
35
|
+
if (currentStepIndex === 1)
|
|
36
|
+
manageAdditionalStep();
|
|
37
|
+
setCurrentStepIndex(curr => curr - 1);
|
|
38
|
+
}, children: "Previous" }, void 0)), currentStepIndex !== numSteps - 1 && (_jsx(Button, { variant: 'primary', onClick: () => {
|
|
39
|
+
if (currentStepIndex === 1)
|
|
40
|
+
manageAdditionalStep();
|
|
41
|
+
setCurrentStepIndex(curr => curr + 1);
|
|
42
|
+
}, children: "Next" }, void 0)), currentStepIndex === numSteps - 1 && (_jsx(Button, { type: 'submit', variant: 'primary', onClick: () => setFinished(true), children: "Finish" }, void 0))] }, void 0)] }, void 0));
|
|
43
|
+
const defaultSteps = Array.from({ length: numSteps }).map((_, index) => {
|
|
44
|
+
const depth = ((index / 1) % 2);
|
|
45
|
+
const id = `Step-${index + 1}`;
|
|
46
|
+
const step = {
|
|
47
|
+
name: `Label for ${id}`,
|
|
48
|
+
id,
|
|
49
|
+
depth,
|
|
50
|
+
actions: stepActions
|
|
51
|
+
};
|
|
52
|
+
step.content = _jsxs(Text, { children: ["Content for ", id] }, void 0);
|
|
53
|
+
if (index === 1)
|
|
54
|
+
step.content = (_jsxs(_Fragment, { children: [_jsxs(Text, { children: ["Content for ", id] }, void 0), _jsx(Checkbox, { name: 'additionalStep', label: 'Additional step', defaultChecked: hasAdditionalStep, onChange: (e) => setIsChecked(e.target.checked) }, void 0)] }, void 0));
|
|
55
|
+
return step;
|
|
56
|
+
});
|
|
57
|
+
if (hasAdditionalStep) {
|
|
58
|
+
defaultSteps.splice(2, 0, {
|
|
59
|
+
name: 'Additional step',
|
|
60
|
+
id: 'Additional step',
|
|
61
|
+
depth: 0,
|
|
62
|
+
actions: stepActions,
|
|
63
|
+
content: _jsx(Text, { children: "Additional step" }, void 0)
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
return defaultSteps;
|
|
67
|
+
}, [currentStepIndex, hasAdditionalStep, isChecked, numSteps]);
|
|
68
|
+
return (_jsxs(_Fragment, { children: [cancelled && (_jsxs(Flex, { container: { gap: 2 }, children: [_jsx(Text, { variant: 'h1', children: "MultiStep cancelled" }, void 0), _jsx(Button, { onClick: restart, children: "Restart" }, void 0)] }, void 0)), finished && (_jsxs(Flex, { container: { gap: 2 }, children: [_jsx(Text, { variant: 'h1', children: "MultiStep finished" }, void 0), _jsx(Button, { onClick: restart, children: "Restart" }, void 0)] }, void 0)), !cancelled && !finished && (_jsx(MultiStep, { steps: stepData, currentId: stepData[currentStepIndex].id }, void 0))] }, void 0));
|
|
35
69
|
};
|
|
36
70
|
//# sourceMappingURL=MultiStep.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStep.stories.js","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":";AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"MultiStep.stories.js","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { ChangeEvent, useMemo, useState } from 'react';\n\nimport { Button, Checkbox, Flex, MultiStep, Step, Text } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/MultiStep',\n component: MultiStep\n} as Meta;\n\nexport const MultiStepDemo = () => {\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const [cancelled, setCancelled] = useState(false);\n const [isChecked, setIsChecked] = useState(false);\n const [hasAdditionalStep, setHasAdditionalStep] = useState(false);\n const [finished, setFinished] = useState(false);\n const [numSteps, setNumSteps] = useState(6);\n\n const restart = () => {\n setCancelled(false);\n setFinished(false);\n setCurrentStepIndex(0);\n setIsChecked(false);\n setHasAdditionalStep(false);\n setNumSteps(6);\n };\n\n const manageAdditionalStep = () => {\n if (isChecked && numSteps === 6) {\n setHasAdditionalStep(true);\n setNumSteps(7);\n } else if (!isChecked && numSteps === 7) {\n setHasAdditionalStep(false);\n setNumSteps(6);\n }\n };\n\n const stepData = useMemo(() => {\n const stepActions = (\n <>\n <Button onClick={() => setCancelled(true)}>Cancel</Button>\n <div>\n {currentStepIndex > 0 && (\n <Button\n onClick={() => {\n if (currentStepIndex === 1) manageAdditionalStep();\n setCurrentStepIndex(curr => curr - 1);\n }}\n >\n Previous\n </Button>\n )}\n {currentStepIndex !== numSteps - 1 && (\n <Button\n variant='primary'\n onClick={() => {\n if (currentStepIndex === 1) manageAdditionalStep();\n setCurrentStepIndex(curr => curr + 1);\n }}\n >\n Next\n </Button>\n )}\n {currentStepIndex === numSteps - 1 && (\n <Button type='submit' variant='primary' onClick={() => setFinished(true)}>\n Finish\n </Button>\n )}\n </div>\n </>\n );\n\n const defaultSteps = Array.from({ length: numSteps }).map((_, index) => {\n const depth = ((index / 1) % 2) as 0 | 1;\n const id = `Step-${index + 1}`;\n const step: Step = {\n name: `Label for ${id}`,\n id,\n depth,\n actions: stepActions\n };\n\n step.content = <Text>Content for {id}</Text>;\n\n if (index === 1)\n step.content = (\n <>\n <Text>Content for {id}</Text>\n <Checkbox\n name='additionalStep'\n label='Additional step'\n defaultChecked={hasAdditionalStep}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setIsChecked(e.target.checked)}\n />\n </>\n );\n\n return step;\n });\n\n if (hasAdditionalStep) {\n defaultSteps.splice(2, 0, {\n name: 'Additional step',\n id: 'Additional step',\n depth: 0,\n actions: stepActions,\n content: <Text>Additional step</Text>\n });\n }\n\n return defaultSteps;\n }, [currentStepIndex, hasAdditionalStep, isChecked, numSteps]);\n\n return (\n <>\n {cancelled && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep cancelled</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {finished && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep finished</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {!cancelled && !finished && (\n <MultiStep steps={stepData} currentId={stepData[currentStepIndex].id} />\n )}\n </>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.6",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-build": "2.2.
|
|
24
|
-
"@pega/cosmos-react-condition-builder": "2.2.
|
|
25
|
-
"@pega/cosmos-react-core": "2.2.
|
|
26
|
-
"@pega/cosmos-react-cs": "2.2.
|
|
27
|
-
"@pega/cosmos-react-dnd": "2.2.
|
|
28
|
-
"@pega/cosmos-react-rte": "2.2.
|
|
29
|
-
"@pega/cosmos-react-social": "2.2.
|
|
30
|
-
"@pega/cosmos-react-work": "2.2.
|
|
23
|
+
"@pega/cosmos-react-build": "2.2.6",
|
|
24
|
+
"@pega/cosmos-react-condition-builder": "2.2.6",
|
|
25
|
+
"@pega/cosmos-react-core": "2.2.6",
|
|
26
|
+
"@pega/cosmos-react-cs": "2.2.6",
|
|
27
|
+
"@pega/cosmos-react-dnd": "2.2.6",
|
|
28
|
+
"@pega/cosmos-react-rte": "2.2.6",
|
|
29
|
+
"@pega/cosmos-react-social": "2.2.6",
|
|
30
|
+
"@pega/cosmos-react-work": "2.2.6",
|
|
31
31
|
"emoji-mart": "^3.0.1",
|
|
32
32
|
"polished": "^4.1.0",
|
|
33
33
|
"react": "^16.14.0 || ^17.0.0",
|