sequential-workflow-designer-react 0.13.1 → 0.13.3

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.
Files changed (4) hide show
  1. package/lib/cjs/index.cjs +55 -5
  2. package/lib/esm/index.js +56 -6
  3. package/lib/index.d.ts +10 -5
  4. package/package.json +4 -4
package/lib/cjs/index.cjs CHANGED
@@ -147,6 +147,8 @@ function SequentialWorkflowDesigner(props) {
147
147
  var _a = react.useState(null), placeholder = _a[0], setPlaceholder = _a[1];
148
148
  var onDefinitionChangeRef = react.useRef(props.onDefinitionChange);
149
149
  var onSelectedStepIdChangedRef = react.useRef(props.onSelectedStepIdChanged);
150
+ var onIsEditorCollapsedChangedRef = react.useRef(props.onIsEditorCollapsedChanged);
151
+ var onIsToolboxCollapsedChangedRef = react.useRef(props.onIsToolboxCollapsedChanged);
150
152
  var globalEditorRef = react.useRef(props.globalEditor);
151
153
  var stepEditorRef = react.useRef(props.stepEditor);
152
154
  var controllerRef = react.useRef(props.controller);
@@ -161,6 +163,8 @@ function SequentialWorkflowDesigner(props) {
161
163
  var steps = props.stepsConfiguration;
162
164
  var validator = props.validatorConfiguration;
163
165
  var toolbox = props.toolboxConfiguration;
166
+ var isEditorCollapsed = props.isEditorCollapsed;
167
+ var isToolboxCollapsed = props.isToolboxCollapsed;
164
168
  var controlBar = props.controlBar;
165
169
  var extensions = props.extensions;
166
170
  if (props.controlBar === undefined) {
@@ -176,13 +180,19 @@ function SequentialWorkflowDesigner(props) {
176
180
  if (!globalEditorRef.current) {
177
181
  throw new Error('Global editor is not provided');
178
182
  }
179
- return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
183
+ if (react.isValidElement(globalEditorRef.current)) {
184
+ return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
185
+ }
186
+ return globalEditorRef.current(def, context);
180
187
  }
181
188
  function stepEditorProvider(step, context) {
182
189
  if (!stepEditorRef.current) {
183
190
  throw new Error('Step editor is not provided');
184
191
  }
185
- return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
192
+ if (react.isValidElement(stepEditorRef.current)) {
193
+ return Presenter.render(externalEditorClassName, editorRootRef, jsxRuntime.jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
194
+ }
195
+ return stepEditorRef.current(step, context);
186
196
  }
187
197
  function customActionHandler(action, step, sequence, context) {
188
198
  if (customActionHandlerRef.current) {
@@ -206,6 +216,12 @@ function SequentialWorkflowDesigner(props) {
206
216
  react.useEffect(function () {
207
217
  onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
208
218
  }, [props.onSelectedStepIdChanged]);
219
+ react.useEffect(function () {
220
+ onIsEditorCollapsedChangedRef.current = props.onIsEditorCollapsedChanged;
221
+ }, [props.onIsEditorCollapsedChanged]);
222
+ react.useEffect(function () {
223
+ onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
224
+ }, [props.onIsToolboxCollapsedChanged]);
209
225
  react.useEffect(function () {
210
226
  globalEditorRef.current = props.globalEditor;
211
227
  }, [props.globalEditor]);
@@ -233,7 +249,15 @@ function SequentialWorkflowDesigner(props) {
233
249
  }
234
250
  if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
235
251
  designerRef.current.setIsReadonly(isReadonly);
236
- // console.log('sqd: readonly updated');
252
+ // console.log('sqd: isReadonly updated');
253
+ }
254
+ if (isToolboxCollapsed !== undefined && isToolboxCollapsed !== designerRef.current.isToolboxCollapsed()) {
255
+ designerRef.current.setIsToolboxCollapsed(isToolboxCollapsed);
256
+ // console.log('sqd: isToolboxCollapsed updated');
257
+ }
258
+ if (isEditorCollapsed !== undefined && isEditorCollapsed !== designerRef.current.isEditorCollapsed()) {
259
+ designerRef.current.setIsEditorCollapsed(isEditorCollapsed);
260
+ // console.log('sqd: isEditorCollapsed updated');
237
261
  }
238
262
  return;
239
263
  }
@@ -242,12 +266,14 @@ function SequentialWorkflowDesigner(props) {
242
266
  var designer = sequentialWorkflowDesigner.Designer.create(placeholder, definition.value, {
243
267
  theme: theme,
244
268
  undoStackSize: undoStackSize,
245
- toolbox: toolbox,
269
+ toolbox: toolbox
270
+ ? __assign(__assign({}, toolbox), { isCollapsed: isToolboxCollapsed }) : false,
246
271
  steps: steps,
247
272
  validator: validator,
248
273
  controlBar: controlBar,
249
274
  editors: globalEditorRef.current && stepEditorRef.current
250
275
  ? {
276
+ isCollapsed: isEditorCollapsed,
251
277
  globalEditorProvider: globalEditorProvider,
252
278
  stepEditorProvider: stepEditorProvider
253
279
  }
@@ -272,8 +298,32 @@ function SequentialWorkflowDesigner(props) {
272
298
  onSelectedStepIdChangedRef.current(stepId);
273
299
  }
274
300
  });
301
+ designer.onIsToolboxCollapsedChanged.subscribe(function (isCollapsed) {
302
+ if (onIsToolboxCollapsedChangedRef.current) {
303
+ onIsToolboxCollapsedChangedRef.current(isCollapsed);
304
+ }
305
+ });
306
+ designer.onIsEditorCollapsedChanged.subscribe(function (isCollapsed) {
307
+ if (onIsEditorCollapsedChangedRef.current) {
308
+ onIsEditorCollapsedChangedRef.current(isCollapsed);
309
+ }
310
+ });
275
311
  designerRef.current = designer;
276
- }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, validator, extensions]);
312
+ }, [
313
+ placeholder,
314
+ definition,
315
+ selectedStepId,
316
+ isReadonly,
317
+ theme,
318
+ undoStackSize,
319
+ toolbox,
320
+ isToolboxCollapsed,
321
+ isEditorCollapsed,
322
+ controlBar,
323
+ steps,
324
+ validator,
325
+ extensions
326
+ ]);
277
327
  react.useEffect(function () {
278
328
  return tryDestroy;
279
329
  }, []);
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 { createContext, useContext, useState, useRef, useEffect, isValidElement, useMemo } from 'react';
4
4
  import { Designer } from 'sequential-workflow-designer';
5
5
 
6
6
  var Presenter = /** @class */ (function () {
@@ -145,6 +145,8 @@ function SequentialWorkflowDesigner(props) {
145
145
  var _a = useState(null), placeholder = _a[0], setPlaceholder = _a[1];
146
146
  var onDefinitionChangeRef = useRef(props.onDefinitionChange);
147
147
  var onSelectedStepIdChangedRef = useRef(props.onSelectedStepIdChanged);
148
+ var onIsEditorCollapsedChangedRef = useRef(props.onIsEditorCollapsedChanged);
149
+ var onIsToolboxCollapsedChangedRef = useRef(props.onIsToolboxCollapsedChanged);
148
150
  var globalEditorRef = useRef(props.globalEditor);
149
151
  var stepEditorRef = useRef(props.stepEditor);
150
152
  var controllerRef = useRef(props.controller);
@@ -159,6 +161,8 @@ function SequentialWorkflowDesigner(props) {
159
161
  var steps = props.stepsConfiguration;
160
162
  var validator = props.validatorConfiguration;
161
163
  var toolbox = props.toolboxConfiguration;
164
+ var isEditorCollapsed = props.isEditorCollapsed;
165
+ var isToolboxCollapsed = props.isToolboxCollapsed;
162
166
  var controlBar = props.controlBar;
163
167
  var extensions = props.extensions;
164
168
  if (props.controlBar === undefined) {
@@ -174,13 +178,19 @@ function SequentialWorkflowDesigner(props) {
174
178
  if (!globalEditorRef.current) {
175
179
  throw new Error('Global editor is not provided');
176
180
  }
177
- return Presenter.render(externalEditorClassName, editorRootRef, jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
181
+ if (isValidElement(globalEditorRef.current)) {
182
+ return Presenter.render(externalEditorClassName, editorRootRef, jsx(GlobalEditorWrapperContext, __assign({ definition: def, context: context }, { children: globalEditorRef.current })));
183
+ }
184
+ return globalEditorRef.current(def, context);
178
185
  }
179
186
  function stepEditorProvider(step, context) {
180
187
  if (!stepEditorRef.current) {
181
188
  throw new Error('Step editor is not provided');
182
189
  }
183
- return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
190
+ if (isValidElement(stepEditorRef.current)) {
191
+ return Presenter.render(externalEditorClassName, editorRootRef, jsx(StepEditorWrapperContext, __assign({ step: step, context: context }, { children: stepEditorRef.current })));
192
+ }
193
+ return stepEditorRef.current(step, context);
184
194
  }
185
195
  function customActionHandler(action, step, sequence, context) {
186
196
  if (customActionHandlerRef.current) {
@@ -204,6 +214,12 @@ function SequentialWorkflowDesigner(props) {
204
214
  useEffect(function () {
205
215
  onSelectedStepIdChangedRef.current = props.onSelectedStepIdChanged;
206
216
  }, [props.onSelectedStepIdChanged]);
217
+ useEffect(function () {
218
+ onIsEditorCollapsedChangedRef.current = props.onIsEditorCollapsedChanged;
219
+ }, [props.onIsEditorCollapsedChanged]);
220
+ useEffect(function () {
221
+ onIsToolboxCollapsedChangedRef.current = props.onIsToolboxCollapsedChanged;
222
+ }, [props.onIsToolboxCollapsedChanged]);
207
223
  useEffect(function () {
208
224
  globalEditorRef.current = props.globalEditor;
209
225
  }, [props.globalEditor]);
@@ -231,7 +247,15 @@ function SequentialWorkflowDesigner(props) {
231
247
  }
232
248
  if (isReadonly !== undefined && isReadonly !== designerRef.current.isReadonly()) {
233
249
  designerRef.current.setIsReadonly(isReadonly);
234
- // console.log('sqd: readonly updated');
250
+ // console.log('sqd: isReadonly updated');
251
+ }
252
+ if (isToolboxCollapsed !== undefined && isToolboxCollapsed !== designerRef.current.isToolboxCollapsed()) {
253
+ designerRef.current.setIsToolboxCollapsed(isToolboxCollapsed);
254
+ // console.log('sqd: isToolboxCollapsed updated');
255
+ }
256
+ if (isEditorCollapsed !== undefined && isEditorCollapsed !== designerRef.current.isEditorCollapsed()) {
257
+ designerRef.current.setIsEditorCollapsed(isEditorCollapsed);
258
+ // console.log('sqd: isEditorCollapsed updated');
235
259
  }
236
260
  return;
237
261
  }
@@ -240,12 +264,14 @@ function SequentialWorkflowDesigner(props) {
240
264
  var designer = Designer.create(placeholder, definition.value, {
241
265
  theme: theme,
242
266
  undoStackSize: undoStackSize,
243
- toolbox: toolbox,
267
+ toolbox: toolbox
268
+ ? __assign(__assign({}, toolbox), { isCollapsed: isToolboxCollapsed }) : false,
244
269
  steps: steps,
245
270
  validator: validator,
246
271
  controlBar: controlBar,
247
272
  editors: globalEditorRef.current && stepEditorRef.current
248
273
  ? {
274
+ isCollapsed: isEditorCollapsed,
249
275
  globalEditorProvider: globalEditorProvider,
250
276
  stepEditorProvider: stepEditorProvider
251
277
  }
@@ -270,8 +296,32 @@ function SequentialWorkflowDesigner(props) {
270
296
  onSelectedStepIdChangedRef.current(stepId);
271
297
  }
272
298
  });
299
+ designer.onIsToolboxCollapsedChanged.subscribe(function (isCollapsed) {
300
+ if (onIsToolboxCollapsedChangedRef.current) {
301
+ onIsToolboxCollapsedChangedRef.current(isCollapsed);
302
+ }
303
+ });
304
+ designer.onIsEditorCollapsedChanged.subscribe(function (isCollapsed) {
305
+ if (onIsEditorCollapsedChangedRef.current) {
306
+ onIsEditorCollapsedChangedRef.current(isCollapsed);
307
+ }
308
+ });
273
309
  designerRef.current = designer;
274
- }, [placeholder, definition, selectedStepId, isReadonly, theme, undoStackSize, toolbox, controlBar, steps, validator, extensions]);
310
+ }, [
311
+ placeholder,
312
+ definition,
313
+ selectedStepId,
314
+ isReadonly,
315
+ theme,
316
+ undoStackSize,
317
+ toolbox,
318
+ isToolboxCollapsed,
319
+ isEditorCollapsed,
320
+ controlBar,
321
+ steps,
322
+ validator,
323
+ extensions
324
+ ]);
275
325
  useEffect(function () {
276
326
  return tryDestroy;
277
327
  }, []);
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, ToolboxConfiguration, GlobalEditorProvider, StepEditorProvider, StepsConfiguration, ValidatorConfiguration, 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;
@@ -55,19 +55,24 @@ declare class SequentialWorkflowDesignerController {
55
55
  }
56
56
  declare function useSequentialWorkflowDesignerController(deps?: DependencyList): SequentialWorkflowDesignerController;
57
57
 
58
+ type ReactToolboxConfiguration = Omit<ToolboxConfiguration, 'isCollapsed'>;
58
59
  interface SequentialWorkflowDesignerProps<TDefinition extends Definition> {
59
60
  definition: WrappedDefinition<TDefinition>;
60
61
  onDefinitionChange: (state: WrappedDefinition<TDefinition>) => void;
61
62
  selectedStepId?: string | null;
62
63
  onSelectedStepIdChanged?: (stepId: string | null) => void;
63
64
  isReadonly?: boolean;
64
- globalEditor: false | JSX.Element;
65
- stepEditor: false | JSX.Element;
65
+ globalEditor: false | JSX.Element | GlobalEditorProvider;
66
+ stepEditor: false | JSX.Element | StepEditorProvider;
67
+ isEditorCollapsed?: boolean;
68
+ onIsEditorCollapsedChanged?: (isCollapsed: boolean) => void;
66
69
  theme?: string;
67
70
  undoStackSize?: number;
68
71
  stepsConfiguration: StepsConfiguration;
69
72
  validatorConfiguration?: ValidatorConfiguration;
70
- toolboxConfiguration: false | ToolboxConfiguration;
73
+ toolboxConfiguration: false | ReactToolboxConfiguration;
74
+ isToolboxCollapsed?: boolean;
75
+ onIsToolboxCollapsedChanged?: (isCollapsed: boolean) => void;
71
76
  /**
72
77
  * @description If true, the control bar will be displayed.
73
78
  */
@@ -102,4 +107,4 @@ declare function StepEditorWrapperContext(props: {
102
107
  context: StepEditorContext;
103
108
  }): JSX.Element;
104
109
 
105
- export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };
110
+ export { GlobalEditorWrapper, GlobalEditorWrapperContext, Presenter, ReactToolboxConfiguration, SequentialWorkflowDesigner, SequentialWorkflowDesignerController, SequentialWorkflowDesignerProps, StepEditorWrapper, StepEditorWrapperContext, WrappedDefinition, useGlobalEditor, useSequentialWorkflowDesignerController, useStepEditor, wrapDefinition };
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.1",
4
+ "version": "0.13.3",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",
@@ -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.1"
50
+ "sequential-workflow-designer": "^0.13.3"
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.1",
66
+ "sequential-workflow-designer": "^0.13.3",
67
67
  "rollup": "^3.18.0",
68
68
  "rollup-plugin-dts": "^5.2.0",
69
69
  "rollup-plugin-typescript2": "^0.34.1",
@@ -80,4 +80,4 @@
80
80
  "react",
81
81
  "reactjs"
82
82
  ]
83
- }
83
+ }