sequential-workflow-designer-react 0.13.0 → 0.13.2
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/lib/cjs/index.cjs +32 -26
- package/lib/esm/index.js +9 -3
- package/lib/index.d.ts +3 -3
- package/package.json +4 -4
package/lib/cjs/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var ReactDOM = require('react-dom/client');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var React = require('react');
|
|
6
6
|
var sequentialWorkflowDesigner = require('sequential-workflow-designer');
|
|
7
7
|
|
|
8
8
|
var Presenter = /** @class */ (function () {
|
|
@@ -53,18 +53,18 @@ var __assign = function() {
|
|
|
53
53
|
};
|
|
54
54
|
|
|
55
55
|
if (!window.sqdGlobalEditorContext) {
|
|
56
|
-
window.sqdGlobalEditorContext =
|
|
56
|
+
window.sqdGlobalEditorContext = React.createContext(null);
|
|
57
57
|
}
|
|
58
58
|
var globalEditorContext = window.sqdGlobalEditorContext;
|
|
59
59
|
function useGlobalEditor() {
|
|
60
|
-
var wrapper =
|
|
60
|
+
var wrapper = React.useContext(globalEditorContext);
|
|
61
61
|
if (!wrapper) {
|
|
62
62
|
throw new Error('Cannot find global editor context');
|
|
63
63
|
}
|
|
64
64
|
return wrapper;
|
|
65
65
|
}
|
|
66
66
|
function GlobalEditorWrapperContext(props) {
|
|
67
|
-
var _a =
|
|
67
|
+
var _a = React.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
|
|
68
68
|
function createWrapper() {
|
|
69
69
|
return {
|
|
70
70
|
properties: props.definition.properties,
|
|
@@ -83,18 +83,18 @@ function GlobalEditorWrapperContext(props) {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
if (!window.sqdStepEditorContext) {
|
|
86
|
-
window.sqdStepEditorContext =
|
|
86
|
+
window.sqdStepEditorContext = React.createContext(null);
|
|
87
87
|
}
|
|
88
88
|
var stepEditorContext = window.sqdStepEditorContext;
|
|
89
89
|
function useStepEditor() {
|
|
90
|
-
var wrapper =
|
|
90
|
+
var wrapper = React.useContext(stepEditorContext);
|
|
91
91
|
if (!wrapper) {
|
|
92
92
|
throw new Error('Cannot find step editor context');
|
|
93
93
|
}
|
|
94
94
|
return wrapper;
|
|
95
95
|
}
|
|
96
96
|
function StepEditorWrapperContext(props) {
|
|
97
|
-
var _a =
|
|
97
|
+
var _a = React.useState(function () { return createWrapper(); }), wrapper = _a[0], setWrapper = _a[1];
|
|
98
98
|
function createWrapper() {
|
|
99
99
|
return {
|
|
100
100
|
id: props.step.id,
|
|
@@ -144,15 +144,15 @@ function wrapDefinition(value, isValid) {
|
|
|
144
144
|
|
|
145
145
|
var externalEditorClassName = 'sqd-editor-react';
|
|
146
146
|
function SequentialWorkflowDesigner(props) {
|
|
147
|
-
var _a =
|
|
148
|
-
var onDefinitionChangeRef =
|
|
149
|
-
var onSelectedStepIdChangedRef =
|
|
150
|
-
var globalEditorRef =
|
|
151
|
-
var stepEditorRef =
|
|
152
|
-
var controllerRef =
|
|
153
|
-
var customActionHandlerRef =
|
|
154
|
-
var designerRef =
|
|
155
|
-
var editorRootRef =
|
|
147
|
+
var _a = React.useState(null), placeholder = _a[0], setPlaceholder = _a[1];
|
|
148
|
+
var onDefinitionChangeRef = React.useRef(props.onDefinitionChange);
|
|
149
|
+
var onSelectedStepIdChangedRef = React.useRef(props.onSelectedStepIdChanged);
|
|
150
|
+
var globalEditorRef = React.useRef(props.globalEditor);
|
|
151
|
+
var stepEditorRef = React.useRef(props.stepEditor);
|
|
152
|
+
var controllerRef = React.useRef(props.controller);
|
|
153
|
+
var customActionHandlerRef = React.useRef(props.customActionHandler);
|
|
154
|
+
var designerRef = React.useRef(null);
|
|
155
|
+
var editorRootRef = React.useRef(null);
|
|
156
156
|
var definition = props.definition;
|
|
157
157
|
var selectedStepId = props.selectedStepId;
|
|
158
158
|
var isReadonly = props.isReadonly;
|
|
@@ -176,13 +176,19 @@ function SequentialWorkflowDesigner(props) {
|
|
|
176
176
|
if (!globalEditorRef.current) {
|
|
177
177
|
throw new Error('Global editor is not provided');
|
|
178
178
|
}
|
|
179
|
-
|
|
179
|
+
if (React.isValidElement(globalEditorRef.current)) {
|
|
180
|
+
return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
|
|
181
|
+
}
|
|
182
|
+
return globalEditorRef.current(def, context);
|
|
180
183
|
}
|
|
181
184
|
function stepEditorProvider(step, context) {
|
|
182
185
|
if (!stepEditorRef.current) {
|
|
183
186
|
throw new Error('Step editor is not provided');
|
|
184
187
|
}
|
|
185
|
-
|
|
188
|
+
if (React.isValidElement(stepEditorRef.current)) {
|
|
189
|
+
return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
|
|
190
|
+
}
|
|
191
|
+
return stepEditorRef.current(step, context);
|
|
186
192
|
}
|
|
187
193
|
function customActionHandler(action, step, sequence, context) {
|
|
188
194
|
if (customActionHandlerRef.current) {
|
|
@@ -200,22 +206,22 @@ function SequentialWorkflowDesigner(props) {
|
|
|
200
206
|
// console.log('sqd: designer destroyed');
|
|
201
207
|
}
|
|
202
208
|
}
|
|
203
|
-
|
|
209
|
+
React.useEffect(function () {
|
|
204
210
|
onDefinitionChangeRef.current = props.onDefinitionChange;
|
|
205
211
|
}, [props.onDefinitionChange]);
|
|
206
|
-
|
|
212
|
+
React.useEffect(function () {
|
|
207
213
|
onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
|
|
208
214
|
}, [props.onSelectedStepIdChanged]);
|
|
209
|
-
|
|
215
|
+
React.useEffect(function () {
|
|
210
216
|
globalEditorRef.current = props.globalEditor;
|
|
211
217
|
}, [props.globalEditor]);
|
|
212
|
-
|
|
218
|
+
React.useEffect(function () {
|
|
213
219
|
stepEditorRef.current = props.stepEditor;
|
|
214
220
|
}, [props.stepEditor]);
|
|
215
|
-
|
|
221
|
+
React.useEffect(function () {
|
|
216
222
|
customActionHandlerRef.current = props.customActionHandler;
|
|
217
223
|
}, [props.customActionHandler]);
|
|
218
|
-
|
|
224
|
+
React.useEffect(function () {
|
|
219
225
|
if (!placeholder) {
|
|
220
226
|
return;
|
|
221
227
|
}
|
|
@@ -274,7 +280,7 @@ function SequentialWorkflowDesigner(props) {
|
|
|
274
280
|
});
|
|
275
281
|
designerRef.current = designer;
|
|
276
282
|
}, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, validator, extensions]);
|
|
277
|
-
|
|
283
|
+
React.useEffect(function () {
|
|
278
284
|
return tryDestroy;
|
|
279
285
|
}, []);
|
|
280
286
|
return jsxRuntime.jsx("div", { ref: setPlaceholder, "data-testid": "designer", className: "sqd-designer-react" });
|
|
@@ -328,7 +334,7 @@ var SequentialWorkflowDesignerController = /** @class */ (function () {
|
|
|
328
334
|
return SequentialWorkflowDesignerController;
|
|
329
335
|
}());
|
|
330
336
|
function useSequentialWorkflowDesignerController(deps) {
|
|
331
|
-
return
|
|
337
|
+
return React.useMemo(function () { return SequentialWorkflowDesignerController.create(); }, deps || []);
|
|
332
338
|
}
|
|
333
339
|
|
|
334
340
|
exports.GlobalEditorWrapperContext = GlobalEditorWrapperContext;
|
package/lib/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import ReactDOM from 'react-dom/client';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
|
|
3
|
+
import React, { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
|
|
4
4
|
import { Designer } from 'sequential-workflow-designer';
|
|
5
5
|
|
|
6
6
|
var Presenter = /** @class */ (function () {
|
|
@@ -174,13 +174,19 @@ function SequentialWorkflowDesigner(props) {
|
|
|
174
174
|
if (!globalEditorRef.current) {
|
|
175
175
|
throw new Error('Global editor is not provided');
|
|
176
176
|
}
|
|
177
|
-
|
|
177
|
+
if (React.isValidElement(globalEditorRef.current)) {
|
|
178
|
+
return Presenter.render(externalEditorClassName, editorRootRef, jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
|
|
179
|
+
}
|
|
180
|
+
return globalEditorRef.current(def, context);
|
|
178
181
|
}
|
|
179
182
|
function stepEditorProvider(step, context) {
|
|
180
183
|
if (!stepEditorRef.current) {
|
|
181
184
|
throw new Error('Step editor is not provided');
|
|
182
185
|
}
|
|
183
|
-
|
|
186
|
+
if (React.isValidElement(stepEditorRef.current)) {
|
|
187
|
+
return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
|
|
188
|
+
}
|
|
189
|
+
return stepEditorRef.current(step, context);
|
|
184
190
|
}
|
|
185
191
|
function customActionHandler(action, step, sequence, context) {
|
|
186
192
|
if (customActionHandlerRef.current) {
|
package/lib/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { MutableRefObject, Context, DependencyList } from 'react';
|
|
3
3
|
import ReactDOM from 'react-dom/client';
|
|
4
|
-
import { Definition, GlobalEditorContext, Designer, StepsConfiguration, ValidatorConfiguration, ToolboxConfiguration, CustomActionHandler, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
|
|
4
|
+
import { Definition, GlobalEditorContext, Designer, GlobalEditorProvider, StepEditorProvider, StepsConfiguration, ValidatorConfiguration, ToolboxConfiguration, CustomActionHandler, DesignerExtension, Step, StepEditorContext } from 'sequential-workflow-designer';
|
|
5
5
|
|
|
6
6
|
declare class Presenter {
|
|
7
7
|
static render(className: string, rootRef: MutableRefObject<ReactDOM.Root | null>, element: JSX.Element): HTMLElement;
|
|
@@ -61,8 +61,8 @@ interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
|
|
|
61
61
|
selectedStepId?: string | null;
|
|
62
62
|
onSelectedStepIdChanged?: (stepId: string | null) => void;
|
|
63
63
|
isReadonly?: boolean;
|
|
64
|
-
globalEditor: false | JSX.Element;
|
|
65
|
-
stepEditor: false | JSX.Element;
|
|
64
|
+
globalEditor: false | JSX.Element | GlobalEditorProvider;
|
|
65
|
+
stepEditor: false | JSX.Element | StepEditorProvider;
|
|
66
66
|
theme?: string;
|
|
67
67
|
undoStackSize?: number;
|
|
68
68
|
stepsConfiguration: StepsConfiguration;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sequential-workflow-designer-react",
|
|
3
3
|
"description": "React wrapper for Sequential Workflow Designer component.",
|
|
4
|
-
"version": "0.13.
|
|
4
|
+
"version": "0.13.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./lib/esm/index.js",
|
|
7
7
|
"types": "./lib/index.d.ts",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"prepare": "cp ../LICENSE LICENSE",
|
|
38
|
-
"clean": "rm -rf lib",
|
|
38
|
+
"clean": "rm -rf lib && rm -rf build && rm -rf node_modules/.cache/rollup-plugin-typescript2",
|
|
39
39
|
"start": "rollup -c --watch",
|
|
40
40
|
"build": "yarn clean && rollup -c",
|
|
41
41
|
"prettier": "prettier --check ./src",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": "^18.2.0",
|
|
49
49
|
"react-dom": "^18.2.0",
|
|
50
|
-
"sequential-workflow-designer": "^0.13.
|
|
50
|
+
"sequential-workflow-designer": "^0.13.2"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"prettier": "^2.8.2",
|
|
64
64
|
"react": "^18.2.0",
|
|
65
65
|
"react-dom": "^18.2.0",
|
|
66
|
-
"sequential-workflow-designer": "^0.13.
|
|
66
|
+
"sequential-workflow-designer": "^0.13.2",
|
|
67
67
|
"rollup": "^3.18.0",
|
|
68
68
|
"rollup-plugin-dts": "^5.2.0",
|
|
69
69
|
"rollup-plugin-typescript2": "^0.34.1",
|