|
1 | | -import { useEffect, useState } from 'react'; |
2 | | -import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer'; |
3 | | -import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react'; |
4 | | -import { GlobalEditor } from './GlobalEditor'; |
5 | | -import { StepEditor } from './StepEditor'; |
6 | | -import { createSwitchStep, createTaskStep } from './StepUtils'; |
7 | | -import { WorkflowDefinition } from './model'; |
8 | | -import { useSequentialWorkflowDesignerController } from 'sequential-workflow-designer-react'; |
| 1 | +import { useState } from 'react'; |
| 2 | +import { Playground } from './playground/Playground'; |
| 3 | +import { NativeEditors } from './nativeEditors/NativeEditors'; |
9 | 4 |
|
10 | | -const startDefinition: WorkflowDefinition = { |
11 | | - properties: { |
12 | | - alfa: 'bravo' |
13 | | - }, |
14 | | - sequence: [createTaskStep(), createSwitchStep()] |
15 | | -}; |
16 | | - |
17 | | -const toolboxConfiguration: ToolboxConfiguration = { |
18 | | - groups: [{ name: 'Steps', steps: [createTaskStep(), createSwitchStep()] }] |
19 | | -}; |
20 | | - |
21 | | -const stepsConfiguration: StepsConfiguration = { |
22 | | - iconUrlProvider: () => null |
23 | | -}; |
24 | | - |
25 | | -const validatorConfiguration: ValidatorConfiguration = { |
26 | | - step: (step: Step) => Boolean(step.name), |
27 | | - root: (definition: WorkflowDefinition) => Boolean(definition.properties.alfa) |
28 | | -}; |
| 5 | +const pathKey = 'swdReactPath'; |
| 6 | +type AppPath = 'playground' | 'nativeEditors'; |
29 | 7 |
|
30 | 8 | export function App() { |
31 | | - const controller = useSequentialWorkflowDesignerController(); |
32 | | - const [isVisible, setIsVisible] = useState(true); |
33 | | - const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition)); |
34 | | - const [selectedStepId, setSelectedStepId] = useState<string | null>(null); |
35 | | - const [isReadonly, setIsReadonly] = useState(false); |
36 | | - const definitionJson = JSON.stringify(definition.value, null, 2); |
37 | | - |
38 | | - useEffect(() => { |
39 | | - console.log(`definition updated, isValid=${definition.isValid}`); |
40 | | - }, [definition]); |
41 | | - |
42 | | - function toggleVisibilityClicked() { |
43 | | - setIsVisible(!isVisible); |
44 | | - } |
45 | | - |
46 | | - function toggleSelectionClicked() { |
47 | | - const id = definition.value.sequence[0].id; |
48 | | - setSelectedStepId(selectedStepId ? null : id); |
49 | | - } |
| 9 | + const [path, setPath] = useState<AppPath>((localStorage[pathKey] as AppPath) || 'playground'); |
50 | 10 |
|
51 | | - function toggleIsReadonlyClicked() { |
52 | | - setIsReadonly(!isReadonly); |
53 | | - } |
54 | | - |
55 | | - function moveViewportToFirstStepClicked() { |
56 | | - const fistStep = definition.value.sequence[0]; |
57 | | - if (fistStep) { |
58 | | - controller.moveViewportToStep(fistStep.id); |
59 | | - } |
60 | | - } |
61 | | - |
62 | | - function reloadDefinitionClicked() { |
63 | | - const newDefinition = ObjectCloner.deepClone(startDefinition); |
64 | | - setDefinition(wrapDefinition(newDefinition)); |
| 11 | + function changePath(path: AppPath) { |
| 12 | + localStorage[pathKey] = path; |
| 13 | + setPath(path); |
65 | 14 | } |
66 | 15 |
|
67 | 16 | return ( |
68 | 17 | <> |
69 | | - {isVisible && ( |
70 | | - <SequentialWorkflowDesigner |
71 | | - undoStackSize={10} |
72 | | - definition={definition} |
73 | | - onDefinitionChange={setDefinition} |
74 | | - selectedStepId={selectedStepId} |
75 | | - isReadonly={isReadonly} |
76 | | - onSelectedStepIdChanged={setSelectedStepId} |
77 | | - toolboxConfiguration={toolboxConfiguration} |
78 | | - stepsConfiguration={stepsConfiguration} |
79 | | - validatorConfiguration={validatorConfiguration} |
80 | | - controlBar={true} |
81 | | - globalEditor={<GlobalEditor />} |
82 | | - stepEditor={<StepEditor />} |
83 | | - controller={controller} |
84 | | - /> |
85 | | - )} |
86 | | - |
87 | | - <ul> |
88 | | - <li>Definition: {definitionJson.length} bytes</li> |
89 | | - <li>Selected step: {selectedStepId}</li> |
90 | | - <li>Is readonly: {isReadonly ? '✅ Yes' : 'No'}</li> |
91 | | - <li>Is valid: {definition.isValid === undefined ? '?' : definition.isValid ? '✅ Yes' : '⛔ No'}</li> |
92 | | - </ul> |
93 | | - |
94 | | - <div> |
95 | | - <button onClick={toggleVisibilityClicked}>Toggle visibility</button> |
96 | | - <button onClick={reloadDefinitionClicked}>Reload definition</button> |
97 | | - <button onClick={toggleSelectionClicked}>Toggle selection</button> |
98 | | - <button onClick={toggleIsReadonlyClicked}>Toggle readonly</button> |
99 | | - <button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button> |
100 | | - </div> |
101 | | - |
102 | | - <div> |
103 | | - <textarea value={definitionJson} readOnly={true} cols={100} rows={15} /> |
104 | | - </div> |
| 18 | + <nav> |
| 19 | + <h1>SWD for React Demo</h1> |
| 20 | + <button onClick={() => changePath('playground')} className={path === 'playground' ? 'selected' : ''}> |
| 21 | + Playground |
| 22 | + </button> |
| 23 | + <button onClick={() => changePath('nativeEditors')} className={path === 'nativeEditors' ? 'selected' : ''}> |
| 24 | + Native editors |
| 25 | + </button> |
| 26 | + </nav> |
| 27 | + {path === 'playground' && <Playground />} |
| 28 | + {path === 'nativeEditors' && <NativeEditors />} |
105 | 29 | </> |
106 | 30 | ); |
107 | 31 | } |
0 commit comments