@flowerforce/flower-react 3.5.1-beta.2 → 4.0.4-beta.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/README.md +264 -207
- package/dist/index.cjs.js +219 -629
- package/dist/index.esm.js +189 -603
- package/dist/src/components/Flower.d.ts +7 -7
- package/dist/src/components/FlowerAction.d.ts +2 -3
- package/dist/src/components/FlowerComponent.d.ts +2 -4
- package/dist/src/components/FlowerFlow.d.ts +2 -3
- package/dist/src/components/FlowerNavigate/FlowerNavigate.d.ts +3 -0
- package/dist/src/components/FlowerNavigate/WrapperComponent.d.ts +3 -3
- package/dist/src/components/FlowerNavigate/index.d.ts +2 -4
- package/dist/src/components/FlowerNavigate/useFlowerNavigate.d.ts +1 -1
- package/dist/src/components/FlowerNode.d.ts +2 -3
- package/dist/src/components/FlowerRoute.d.ts +2 -3
- package/dist/src/components/FlowerServer.d.ts +2 -3
- package/dist/src/components/FlowerStart.d.ts +3 -4
- package/dist/src/components/index.d.ts +10 -0
- package/dist/src/components/useFlower/utils.d.ts +20 -0
- package/dist/src/components/useFlower.d.ts +2 -3
- package/dist/src/features/index.d.ts +2 -0
- package/dist/src/features/reducer/flowerReducer.d.ts +6 -0
- package/dist/src/{selectors.d.ts → features/selectors/selectors.d.ts} +494 -383
- package/dist/src/index.d.ts +5 -33
- package/dist/src/provider/index.d.ts +1 -0
- package/dist/src/provider/provider.d.ts +11 -0
- package/dist/src/types/FlowContext.d.ts +6 -0
- package/dist/src/types/FlowerHooks.d.ts +27 -0
- package/dist/src/{components/types → types}/FlowerProvider.d.ts +3 -3
- package/dist/src/types/index.d.ts +10 -0
- package/package.json +5 -2
- package/dist/src/components/FlowerField.d.ts +0 -4
- package/dist/src/components/FlowerRule.d.ts +0 -4
- package/dist/src/components/FlowerValue.d.ts +0 -4
- package/dist/src/components/types/FlowerField.d.ts +0 -124
- package/dist/src/components/types/FlowerHooks.d.ts +0 -72
- package/dist/src/components/types/FlowerRule.d.ts +0 -35
- package/dist/src/components/types/FlowerValue.d.ts +0 -33
- package/dist/src/components/useFlowerForm.d.ts +0 -26
- package/dist/src/context.d.ts +0 -10
- package/dist/src/provider.d.ts +0 -25
- package/dist/src/reducer.d.ts +0 -7
- /package/dist/src/{components/types → types}/DefaultNode.d.ts +0 -0
- /package/dist/src/{components/types → types}/FlowerComponent.d.ts +0 -0
- /package/dist/src/{components/types → types}/FlowerFlow.d.ts +0 -0
- /package/dist/src/{components/types → types}/FlowerNavigate.d.ts +0 -0
- /package/dist/src/{components/types → types}/FlowerNode.d.ts +0 -0
- /package/dist/src/{components/types → types}/FlowerRoute.d.ts +0 -0
- /package/dist/src/{components/types → types}/FlowerServer.d.ts +0 -0
package/dist/index.cjs.js
CHANGED
@@ -3,17 +3,12 @@
|
|
3
3
|
var React = require('react');
|
4
4
|
var _keyBy = require('lodash/keyBy');
|
5
5
|
var flowerCore = require('@flowerforce/flower-core');
|
6
|
+
var flowerReactContext = require('@flowerforce/flower-react-context');
|
6
7
|
var _get = require('lodash/get');
|
7
8
|
var toolkit = require('@reduxjs/toolkit');
|
8
9
|
var reselect = require('reselect');
|
9
|
-
var
|
10
|
-
var
|
11
|
-
var isEqual = require('lodash/isEqual');
|
12
|
-
|
13
|
-
const _context = React.createContext({});
|
14
|
-
const context = _context;
|
15
|
-
const Provider = _context.Provider;
|
16
|
-
const Consumer = _context.Consumer;
|
10
|
+
var flowerReactStore = require('@flowerforce/flower-react-store');
|
11
|
+
var flowerReactShared = require('@flowerforce/flower-react-shared');
|
17
12
|
|
18
13
|
// eslint-disable-next-line import/prefer-default-export
|
19
14
|
const convertElements = (nodes) => {
|
@@ -22,102 +17,80 @@ const convertElements = (nodes) => {
|
|
22
17
|
};
|
23
18
|
|
24
19
|
const flowerReducer = toolkit.createSlice({
|
25
|
-
name:
|
20
|
+
name: flowerCore.REDUCER_NAME.FLOWER_FLOW,
|
26
21
|
initialState: {},
|
27
|
-
reducers: flowerCore.
|
22
|
+
reducers: flowerCore.FlowerCoreBaseReducers
|
28
23
|
});
|
29
|
-
const
|
24
|
+
const flowerActions = flowerReducer.actions;
|
25
|
+
const flowerFlowReducer = flowerReducer.reducer;
|
30
26
|
const reducerFlower = {
|
31
|
-
|
27
|
+
[flowerCore.REDUCER_NAME.FLOWER_FLOW]: flowerFlowReducer
|
32
28
|
};
|
33
29
|
|
34
|
-
const {
|
35
|
-
const
|
36
|
-
const
|
37
|
-
const
|
38
|
-
|
39
|
-
const makeSelectNodesIds = (name) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.makeSelectNodesIds);
|
40
|
-
const makeSelectStartNodeId = (name) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.makeSelectStartNodeId);
|
41
|
-
const makeSelectCurrentNodeId = (name) => reselect.createSelector(selectFlower(name), makeSelectStartNodeId(name), flowerCore.Selectors.makeSelectCurrentNodeId);
|
42
|
-
const makeSelectPrevNodeRetain = (name) => reselect.createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), flowerCore.Selectors.makeSelectPrevNodeRetain);
|
43
|
-
const makeSelectCurrentNodeDisabled = (name) => reselect.createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), flowerCore.Selectors.makeSelectCurrentNodeDisabled);
|
44
|
-
// dati nel flow selezionato
|
45
|
-
const getDataByFlow = (name) => reselect.createSelector(selectFlower(name), flowerCore.Selectors.getDataByFlow);
|
46
|
-
// selettore per recuperare i dati di un flow specifico e id specifico
|
47
|
-
const getDataFromState = (name, id) => reselect.createSelector(getDataByFlow(name), flowerCore.Selectors.getDataFromState(id));
|
48
|
-
const makeSelectNodeErrors = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeErrors);
|
49
|
-
const makeSelectNodeFieldTouched = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldTouched(fieldId));
|
50
|
-
const makeSelectNodeFieldFocused = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldFocused(fieldId));
|
51
|
-
const makeSelectNodeFieldDirty = (name, currentNodeId, fieldId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormFieldDirty(fieldId));
|
52
|
-
const makeSelectNodeFormSubmitted = (name, currentNodeId) => reselect.createSelector(selectFlowerFormNode(name, currentNodeId), flowerCore.Selectors.makeSelectNodeFormSubmitted);
|
53
|
-
const getAllData = reselect.createSelector(selectGlobal, mapData);
|
54
|
-
const selectFlowerFormCurrentNode = (name) => reselect.createSelector(selectFlower(name), makeSelectCurrentNodeId(name), (data, current) => {
|
55
|
-
return _get(data, ['form', current]);
|
56
|
-
});
|
57
|
-
const makeSelectFieldError = (name, id, validate) => reselect.createSelector(getAllData, selectFlowerFormCurrentNode(name), flowerCore.Selectors.makeSelectFieldError(name, id, validate));
|
58
|
-
const selectorRulesDisabled = (id, rules, keys, flowName, value, currentNode) => reselect.createSelector(getAllData, makeSelectNodeErrors(flowName, currentNode), flowerCore.Selectors.selectorRulesDisabled(id, rules, keys, flowName, value));
|
59
|
-
|
60
|
-
//TODO check reduxContext type due to remove all any types
|
61
|
-
const reduxContext = React.createContext(null);
|
62
|
-
const useDispatch = reactRedux.createDispatchHook(reduxContext);
|
63
|
-
const useSelector = reactRedux.createSelectorHook(reduxContext);
|
64
|
-
const useStore = reactRedux.createStoreHook(reduxContext);
|
65
|
-
const store = ({ enableDevtool }) => toolkit.configureStore({
|
66
|
-
reducer: reducerFlower,
|
67
|
-
devTools: enableDevtool ? { name: 'flower' } : false
|
30
|
+
const { selectGlobal, selectGlobalData } = flowerCore.FlowerCoreStateSelectors;
|
31
|
+
const selectFlower = (name) => reselect.createSelector(selectGlobal, flowerCore.FlowerCoreStateSelectors.selectFlower(name));
|
32
|
+
const selectFlowerData = selectGlobalData;
|
33
|
+
const selectFlowerDataNode = (name) => reselect.createSelector(selectFlowerData, (data) => {
|
34
|
+
return data[name];
|
68
35
|
});
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
}
|
36
|
+
const selectFlowerHistory = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.selectFlowerHistory);
|
37
|
+
const makeSelectNodesIds = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.makeSelectNodesIds);
|
38
|
+
const makeSelectStartNodeId = (name) => reselect.createSelector(selectFlower(name), flowerCore.FlowerCoreStateSelectors.makeSelectStartNodeId);
|
39
|
+
const makeSelectCurrentNodeId = (name) => reselect.createSelector(selectFlower(name), makeSelectStartNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectCurrentNodeId);
|
40
|
+
const makeSelectPrevNodeRetain = (name) => reselect.createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectPrevNodeRetain);
|
41
|
+
const makeSelectCurrentNodeDisabled = (name) => reselect.createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), flowerCore.FlowerCoreStateSelectors.makeSelectCurrentNodeDisabled);
|
42
|
+
// dati nel flow selezionato
|
43
|
+
const makeSelectData = (name) => reselect.createSelector(selectFlowerDataNode(name), (data) => data?.data ?? {});
|
44
|
+
reselect.createSelector(selectGlobalData, flowerCore.FlowerStateUtils.getAllData);
|
79
45
|
|
80
46
|
/* eslint-disable no-undef */
|
81
47
|
/* eslint-disable no-underscore-dangle */
|
82
|
-
|
48
|
+
/*
|
83
49
|
* FlowerClient
|
84
50
|
*/
|
85
|
-
const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
|
51
|
+
const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialState = {}, initialData }) => {
|
86
52
|
const flowName = name;
|
87
|
-
const dispatch = useDispatch();
|
53
|
+
const dispatch = flowerReactStore.useDispatch();
|
88
54
|
const one = React.useRef(false);
|
89
55
|
const [wsDevtools, setWsDevtools] = React.useState(flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
|
90
|
-
// TODO
|
56
|
+
// TODO could make that transformation in CoreUtils.generateNodesForFlowerJson
|
91
57
|
// eslint-disable-next-line react-hooks/exhaustive-deps, max-len
|
92
|
-
const nodes = React.useMemo(
|
58
|
+
const nodes = React.useMemo(
|
59
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
60
|
+
() => convertElements(React.Children.toArray(children)), [children]);
|
93
61
|
const nodeById = React.useMemo(() => _keyBy(React.Children.toArray(children), 'props.id'), [children]);
|
94
|
-
const isInitialized = useSelector(makeSelectStartNodeId(name));
|
95
|
-
const history = useSelector(selectFlowerHistory(name));
|
96
|
-
const current = useSelector(makeSelectCurrentNodeId(flowName));
|
97
|
-
const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
|
98
|
-
const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
|
99
|
-
const store = useStore();
|
62
|
+
const isInitialized = flowerReactStore.useSelector(makeSelectStartNodeId(name));
|
63
|
+
const history = flowerReactStore.useSelector(selectFlowerHistory(name));
|
64
|
+
const current = flowerReactStore.useSelector(makeSelectCurrentNodeId(flowName));
|
65
|
+
const isDisabled = flowerReactStore.useSelector(makeSelectCurrentNodeDisabled(flowName));
|
66
|
+
const prevFlowerNodeId = flowerReactStore.useSelector(makeSelectPrevNodeRetain(flowName));
|
67
|
+
const store = flowerReactStore.useStore();
|
100
68
|
React.useEffect(() => {
|
101
69
|
if (nodes.length > 0 && one.current === false) {
|
102
70
|
one.current = true;
|
103
|
-
dispatch(
|
71
|
+
dispatch(flowerActions.initNodes({
|
104
72
|
name: flowName,
|
105
73
|
// @ts-expect-error FIX ME
|
106
74
|
nodes,
|
107
75
|
startId: startId ?? '',
|
108
76
|
persist: destroyOnUnmount === false,
|
109
|
-
initialData,
|
110
77
|
initialState
|
111
78
|
}));
|
79
|
+
if (initialData) {
|
80
|
+
dispatch(flowerReactStore.flowerDataActions.initData({
|
81
|
+
rootName: flowName,
|
82
|
+
initialData: initialData ?? {}
|
83
|
+
}));
|
84
|
+
}
|
112
85
|
}
|
113
86
|
}, [
|
114
87
|
dispatch,
|
115
88
|
flowName,
|
116
89
|
nodes,
|
117
90
|
startId,
|
118
|
-
initialData,
|
119
91
|
destroyOnUnmount,
|
120
|
-
initialState
|
92
|
+
initialState,
|
93
|
+
initialData
|
121
94
|
]);
|
122
95
|
React.useEffect(() => {
|
123
96
|
/* istanbul ignore next */
|
@@ -129,14 +102,16 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
|
|
129
102
|
setWsDevtools(true);
|
130
103
|
}
|
131
104
|
if (msg.action === 'SELECTED_NODE' && msg.name === flowName) {
|
132
|
-
dispatch(
|
133
|
-
}
|
134
|
-
if (msg.action === 'REPLACE_DATA' && msg.name === flowName) {
|
135
|
-
dispatch(actions.replaceData({ flowName: msg.name, value: msg.data }));
|
136
|
-
}
|
137
|
-
if (msg.action === 'ADD_DATA' && msg.name === flowName) {
|
138
|
-
dispatch(actions.addData({ flowName: msg.name, value: msg.data }));
|
105
|
+
dispatch(flowerActions.setCurrentNode({ name: msg.name, node: msg.id }));
|
139
106
|
}
|
107
|
+
// if (msg.action === 'REPLACE_DATA' && msg.name === flowName) {
|
108
|
+
// dispatch(
|
109
|
+
// formActions.replaceData({ flowName: msg.name, value: msg.data })
|
110
|
+
// )
|
111
|
+
// }
|
112
|
+
// if (msg.action === 'ADD_DATA' && msg.name === flowName) {
|
113
|
+
// dispatch(formActions.addData({ flowName: msg.name, value: msg.data }))
|
114
|
+
// }
|
140
115
|
};
|
141
116
|
/* istanbul ignore next */
|
142
117
|
if (flowerCore.devtoolState && _get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
|
@@ -153,7 +128,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
|
|
153
128
|
// unmount function
|
154
129
|
if (destroyOnUnmount && one.current === true) {
|
155
130
|
one.current = false;
|
156
|
-
dispatch(
|
131
|
+
dispatch(flowerActions.destroy({ name: flowName }));
|
157
132
|
}
|
158
133
|
}, [dispatch, flowName, destroyOnUnmount]);
|
159
134
|
React.useEffect(() => {
|
@@ -212,7 +187,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
|
|
212
187
|
if (!isInitialized)
|
213
188
|
return;
|
214
189
|
if (isDisabled) {
|
215
|
-
dispatch(
|
190
|
+
dispatch(flowerActions.next({ flowName }));
|
216
191
|
// eslint-disable-next-line no-underscore-dangle, no-undef
|
217
192
|
/* istanbul ignore next */
|
218
193
|
if (wsDevtools &&
|
@@ -235,7 +210,7 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
|
|
235
210
|
flowerCore.devtoolState &&
|
236
211
|
_get(flowerCore.devtoolState, '__FLOWER_DEVTOOLS__')) {
|
237
212
|
if (isInitialized === current)
|
238
|
-
return; // salto il primo
|
213
|
+
return; // salto il primo event
|
239
214
|
flowerCore.Emitter.emit('flower-devtool-from-client', {
|
240
215
|
source: 'flower-client',
|
241
216
|
action: 'SET_SELECTED',
|
@@ -255,32 +230,21 @@ const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null,
|
|
255
230
|
]);
|
256
231
|
const currentNodeId = prevFlowerNodeId || current;
|
257
232
|
const contextValues = React.useMemo(() => ({
|
258
|
-
flowName,
|
259
|
-
initialData,
|
233
|
+
name: flowName,
|
260
234
|
currentNode: current
|
261
|
-
}), [flowName,
|
235
|
+
}), [flowName, current]);
|
262
236
|
const prevContextValues = React.useMemo(() => ({
|
263
|
-
flowName,
|
264
|
-
initialData,
|
237
|
+
name: flowName,
|
265
238
|
currentNode: currentNodeId
|
266
|
-
}), [flowName,
|
239
|
+
}), [flowName, currentNodeId]);
|
267
240
|
return isInitialized ? (React.createElement(React.Fragment, null,
|
268
|
-
React.createElement(
|
269
|
-
React.createElement(
|
241
|
+
React.createElement(flowerReactContext.FlowerReactProvider, { value: prevContextValues }, nodeById[currentNodeId]),
|
242
|
+
React.createElement(flowerReactContext.FlowerReactProvider, { value: contextValues }, !isDisabled && current !== currentNodeId && nodeById[current]))) : null;
|
270
243
|
};
|
271
|
-
const component$
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
onEnter?.();
|
276
|
-
return () => {
|
277
|
-
onExit?.();
|
278
|
-
};
|
279
|
-
}, [onEnter, onExit]);
|
280
|
-
return children;
|
281
|
-
};
|
282
|
-
const component$b = React.memo(FlowerNode);
|
283
|
-
component$b.displayName = 'FlowerNode';
|
244
|
+
const component$9 = React.memo(FlowerClient);
|
245
|
+
component$9.displayName = 'Flower';
|
246
|
+
// workaround for let typescript read JSX component as a valid JSX element using react 19(?)
|
247
|
+
const Flower = component$9;
|
284
248
|
|
285
249
|
const FlowAction = ({ children, onEnter, onExit }) => {
|
286
250
|
React.useEffect(() => {
|
@@ -289,388 +253,28 @@ const FlowAction = ({ children, onEnter, onExit }) => {
|
|
289
253
|
onExit?.();
|
290
254
|
};
|
291
255
|
}, [onEnter, onExit]);
|
292
|
-
return children;
|
256
|
+
return React.createElement(React.Fragment, null, children);
|
293
257
|
};
|
294
|
-
const component$
|
295
|
-
component$
|
258
|
+
const component$8 = React.memo(FlowAction);
|
259
|
+
component$8.displayName = 'FlowerAction';
|
260
|
+
const FlowerAction = component$8;
|
296
261
|
|
297
|
-
const
|
298
|
-
|
299
|
-
|
300
|
-
const component$9 = React.memo(FlowerServer);
|
301
|
-
component$9.displayName = 'FlowerServer';
|
262
|
+
const _FlowerComponent = ({ children }) => children;
|
263
|
+
const component$7 = React.memo(_FlowerComponent);
|
264
|
+
const FlowerComponent = component$7;
|
302
265
|
|
303
|
-
const
|
266
|
+
const _FlowerFlow = ({ children, onEnter, onExit }) => {
|
304
267
|
React.useEffect(() => {
|
305
268
|
onEnter?.();
|
306
269
|
return () => {
|
307
270
|
onExit?.();
|
308
271
|
};
|
309
272
|
}, [onEnter, onExit]);
|
310
|
-
return children;
|
273
|
+
return React.createElement(React.Fragment, null, children);
|
311
274
|
};
|
312
|
-
const component$
|
313
|
-
component$
|
314
|
-
|
315
|
-
function FlowerStart() {
|
316
|
-
const dispatch = useDispatch();
|
317
|
-
const one = React.useRef(false);
|
318
|
-
const { flowName, autostart = true, currentNode } = React.useContext(context);
|
319
|
-
const startNodeId = useSelector(makeSelectStartNodeId(flowName ?? ''));
|
320
|
-
React.useEffect(() => {
|
321
|
-
if (startNodeId === currentNode && autostart && one.current === false) {
|
322
|
-
one.current = true;
|
323
|
-
dispatch({ type: 'flower/next', payload: { flowName, isStart: true } });
|
324
|
-
// if (global.window
|
325
|
-
// // eslint-disable-next-line no-underscore-dangle, no-undef
|
326
|
-
// && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
|
327
|
-
// Emitter.emit('flower-devtool-from-client', {
|
328
|
-
// source: 'flower-client',
|
329
|
-
// action: 'START_FLOWER',
|
330
|
-
// name: flowName,
|
331
|
-
// });
|
332
|
-
// }
|
333
|
-
}
|
334
|
-
}, [dispatch, autostart, startNodeId, currentNode, flowName]);
|
335
|
-
return null;
|
336
|
-
}
|
337
|
-
const component$7 = React.memo(FlowerStart);
|
338
|
-
component$7.displayName = 'FlowerStart';
|
339
|
-
|
340
|
-
const FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
|
341
|
-
const dispatch = useDispatch();
|
342
|
-
const one = React.useRef(false);
|
343
|
-
const { flowName } = React.useContext(context);
|
344
|
-
React.useEffect(() => {
|
345
|
-
onEnter?.();
|
346
|
-
return () => {
|
347
|
-
onExit?.();
|
348
|
-
};
|
349
|
-
}, [onEnter, onExit]);
|
350
|
-
React.useEffect(() => {
|
351
|
-
if (autostart && one.current === false) {
|
352
|
-
one.current = true;
|
353
|
-
dispatch({ type: 'flower/next', payload: { flowName } });
|
354
|
-
}
|
355
|
-
}, [dispatch, flowName, autostart]);
|
356
|
-
return children;
|
357
|
-
};
|
358
|
-
const component$6 = React.memo(FlowerRoute);
|
359
|
-
component$6.displayName = 'FlowerRoute';
|
360
|
-
|
361
|
-
const FlowerRule = ({ children, rules, value, alwaysDisplay, flowName, id, onUpdate }) => {
|
362
|
-
const { flowName: flowNameContext, currentNode } = React.useContext(context);
|
363
|
-
const name = flowName || flowNameContext;
|
364
|
-
const keys = flowerCore.MatchRules.utils.getKeys(rules, { prefix: name });
|
365
|
-
const hidden = useSelector(selectorRulesDisabled(id ?? '', rules, keys ?? [], name ?? '', value, currentNode ?? ''));
|
366
|
-
React.useEffect(() => {
|
367
|
-
if (onUpdate) {
|
368
|
-
onUpdate(hidden);
|
369
|
-
}
|
370
|
-
}, [hidden, onUpdate]);
|
371
|
-
if (typeof children === 'function') {
|
372
|
-
if (alwaysDisplay && hidden) {
|
373
|
-
return children({ hidden });
|
374
|
-
}
|
375
|
-
if (hidden) {
|
376
|
-
return undefined;
|
377
|
-
}
|
378
|
-
return children({});
|
379
|
-
}
|
380
|
-
if (alwaysDisplay && hidden) {
|
381
|
-
return React.Children.map(children, (child, i) => {
|
382
|
-
if (React.isValidElement(child)) {
|
383
|
-
const { props, type } = child;
|
384
|
-
const Component = type;
|
385
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
386
|
-
return Component && React.createElement(Component, { key: i, hidden: true, ...props });
|
387
|
-
}
|
388
|
-
return child;
|
389
|
-
});
|
390
|
-
}
|
391
|
-
return hidden
|
392
|
-
? undefined
|
393
|
-
: React.Children.map(children, (child, i) => {
|
394
|
-
if (React.isValidElement(child)) {
|
395
|
-
const { props, type } = child;
|
396
|
-
const Component = type;
|
397
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
398
|
-
return Component && React.createElement(Component, { key: i, ...props });
|
399
|
-
}
|
400
|
-
return child;
|
401
|
-
});
|
402
|
-
};
|
403
|
-
const component$5 = React.memo(FlowerRule);
|
404
|
-
component$5.displayName = 'FlowerRule';
|
405
|
-
|
406
|
-
/* eslint-disable */
|
407
|
-
function isIntrinsicElement$1(x) {
|
408
|
-
return typeof x === 'string';
|
409
|
-
}
|
410
|
-
//TODO make types for wrapper function props
|
411
|
-
function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, destroyOnHide, onBlur, onFocus, hidden, onUpdate, defaultValue, ...props }) {
|
412
|
-
const dispatch = useDispatch();
|
413
|
-
const [customAsyncErrors, setCustomAsyncErrors] = React.useState(asyncValidate && asyncInitialError && [asyncInitialError]);
|
414
|
-
const [isValidating, setIsValidating] = React.useState(undefined);
|
415
|
-
const { flowNameFromPath = flowName, path } = React.useMemo(() => flowerCore.CoreUtils.getPath(id), [id]);
|
416
|
-
const value = useSelector(getDataFromState(flowNameFromPath, path));
|
417
|
-
const errors = useSelector(makeSelectFieldError(flowName, id, validate), flowerCore.CoreUtils.allEqual);
|
418
|
-
const dirty = useSelector(makeSelectNodeFieldDirty(flowName, currentNode, id));
|
419
|
-
const touched = useSelector(makeSelectNodeFieldTouched(flowName, currentNode, id));
|
420
|
-
const focused = useSelector(makeSelectNodeFieldFocused(flowName, currentNode, id));
|
421
|
-
const refValue = React.useRef();
|
422
|
-
const isSubmitted = useSelector(makeSelectNodeFormSubmitted(flowName, currentNode));
|
423
|
-
const allErrors = React.useMemo(() => hidden ? [] : [...errors, ...(customAsyncErrors || []).filter(Boolean)], [errors, hidden, customAsyncErrors]);
|
424
|
-
const setTouched = React.useCallback((touched) => {
|
425
|
-
dispatch({
|
426
|
-
type: 'flower/formFieldTouch',
|
427
|
-
payload: {
|
428
|
-
name: flowName,
|
429
|
-
id,
|
430
|
-
currentNode,
|
431
|
-
touched
|
432
|
-
}
|
433
|
-
});
|
434
|
-
}, [dispatch, flowName, currentNode, id]);
|
435
|
-
const setFocus = React.useCallback((focused) => {
|
436
|
-
dispatch({
|
437
|
-
type: 'flower/formFieldFocus',
|
438
|
-
payload: {
|
439
|
-
name: flowName,
|
440
|
-
id,
|
441
|
-
currentNode,
|
442
|
-
focused
|
443
|
-
}
|
444
|
-
});
|
445
|
-
}, [dispatch, flowName, currentNode, id]);
|
446
|
-
const validateFn = React.useCallback(async (value) => {
|
447
|
-
if (asyncWaitingError) {
|
448
|
-
setCustomAsyncErrors([asyncWaitingError]);
|
449
|
-
}
|
450
|
-
setIsValidating(true);
|
451
|
-
const state = flowerCore.FlowerStateUtils.getAllData(store);
|
452
|
-
const res = await asyncValidate(value, state, errors);
|
453
|
-
setIsValidating(false);
|
454
|
-
setCustomAsyncErrors(res);
|
455
|
-
}, [asyncWaitingError, errors]);
|
456
|
-
const debouncedValidation = React.useCallback(debounce(validateFn, asyncDebounce), [
|
457
|
-
validateFn
|
458
|
-
]);
|
459
|
-
const onChange = React.useCallback((val) => {
|
460
|
-
if (asyncValidate && asyncWaitingError) {
|
461
|
-
setCustomAsyncErrors([asyncWaitingError]);
|
462
|
-
}
|
463
|
-
dispatch({
|
464
|
-
type: `flower/addDataByPath`,
|
465
|
-
payload: {
|
466
|
-
flowName: flowNameFromPath,
|
467
|
-
id,
|
468
|
-
value: val,
|
469
|
-
dirty: defaultValue ? !isEqual(val, defaultValue) : true
|
470
|
-
}
|
471
|
-
});
|
472
|
-
}, [flowNameFromPath, id, dispatch, setCustomAsyncErrors, asyncValidate, asyncWaitingError]);
|
473
|
-
const onBlurInternal = React.useCallback((e) => {
|
474
|
-
setTouched(true);
|
475
|
-
setFocus(false);
|
476
|
-
onBlur && onBlur(e);
|
477
|
-
}, [onBlur, setTouched, setFocus]);
|
478
|
-
const onFocusInternal = React.useCallback((e) => {
|
479
|
-
setFocus(true);
|
480
|
-
onFocus && onFocus(e);
|
481
|
-
}, [onFocus, setFocus]);
|
482
|
-
React.useEffect(() => {
|
483
|
-
if (hidden)
|
484
|
-
return;
|
485
|
-
if (asyncValidate) {
|
486
|
-
if (refValue.current === value)
|
487
|
-
return;
|
488
|
-
refValue.current = value;
|
489
|
-
const hasValue = !flowerCore.MatchRules.utils.isEmpty(value);
|
490
|
-
if (!hasValue) {
|
491
|
-
setCustomAsyncErrors(asyncInitialError && [asyncInitialError]);
|
492
|
-
setIsValidating(false);
|
493
|
-
return;
|
494
|
-
}
|
495
|
-
setTouched(true);
|
496
|
-
debouncedValidation(value);
|
497
|
-
}
|
498
|
-
}, [asyncValidate, asyncInitialError, value, debouncedValidation, setTouched, hidden]);
|
499
|
-
React.useEffect(() => {
|
500
|
-
if (onUpdate) {
|
501
|
-
onUpdate(value);
|
502
|
-
}
|
503
|
-
}, [value, onUpdate]);
|
504
|
-
React.useEffect(() => {
|
505
|
-
dispatch({
|
506
|
-
type: 'flower/formAddErrors',
|
507
|
-
payload: {
|
508
|
-
name: flowName,
|
509
|
-
id,
|
510
|
-
currentNode,
|
511
|
-
errors: allErrors
|
512
|
-
}
|
513
|
-
});
|
514
|
-
}, [id, flowName, allErrors, currentNode, touched]);
|
515
|
-
React.useEffect(() => {
|
516
|
-
dispatch({
|
517
|
-
type: 'flower/setFormIsValidating',
|
518
|
-
payload: {
|
519
|
-
name: flowName,
|
520
|
-
currentNode,
|
521
|
-
isValidating
|
522
|
-
}
|
523
|
-
});
|
524
|
-
}, [flowName, currentNode, isValidating]);
|
525
|
-
const resetField = React.useCallback(() => {
|
526
|
-
dispatch({
|
527
|
-
type: 'flower/formFieldTouch',
|
528
|
-
payload: {
|
529
|
-
name: flowName,
|
530
|
-
id,
|
531
|
-
currentNode,
|
532
|
-
touched: false
|
533
|
-
}
|
534
|
-
});
|
535
|
-
dispatch({
|
536
|
-
type: 'flower/formFieldDirty',
|
537
|
-
payload: {
|
538
|
-
name: flowName,
|
539
|
-
id,
|
540
|
-
currentNode,
|
541
|
-
dirty: false
|
542
|
-
}
|
543
|
-
});
|
544
|
-
dispatch({
|
545
|
-
type: 'flower/formRemoveErrors',
|
546
|
-
payload: {
|
547
|
-
name: flowName,
|
548
|
-
id,
|
549
|
-
currentNode
|
550
|
-
}
|
551
|
-
});
|
552
|
-
}, [currentNode, id, flowName]);
|
553
|
-
React.useEffect(() => {
|
554
|
-
// destroy
|
555
|
-
return () => {
|
556
|
-
if (destroyValue) {
|
557
|
-
dispatch({
|
558
|
-
type: `flower/unsetData`,
|
559
|
-
payload: { flowName: flowNameFromPath, id: path }
|
560
|
-
});
|
561
|
-
}
|
562
|
-
resetField();
|
563
|
-
};
|
564
|
-
}, [destroyValue, id, flowNameFromPath, path, resetField]);
|
565
|
-
React.useEffect(() => {
|
566
|
-
if (hidden) {
|
567
|
-
if (destroyOnHide) {
|
568
|
-
dispatch({
|
569
|
-
type: `flower/unsetData`,
|
570
|
-
payload: { flowName: flowNameFromPath, id: path }
|
571
|
-
});
|
572
|
-
resetField();
|
573
|
-
}
|
574
|
-
}
|
575
|
-
}, [destroyOnHide, hidden, flowNameFromPath, path, resetField]);
|
576
|
-
React.useEffect(() => {
|
577
|
-
if (defaultValue && !dirty && !isEqual(value, defaultValue)) {
|
578
|
-
onChange(defaultValue);
|
579
|
-
}
|
580
|
-
}, [defaultValue, value, dirty, onChange]);
|
581
|
-
const newProps = React.useMemo(() => ({
|
582
|
-
...props,
|
583
|
-
id,
|
584
|
-
value,
|
585
|
-
errors: allErrors,
|
586
|
-
hasError: !!allErrors.length,
|
587
|
-
onChange,
|
588
|
-
onBlur: onBlurInternal,
|
589
|
-
onFocus: onFocusInternal,
|
590
|
-
focused: !!focused,
|
591
|
-
touched,
|
592
|
-
dirty,
|
593
|
-
hidden,
|
594
|
-
isValidating,
|
595
|
-
isSubmitted,
|
596
|
-
}), [
|
597
|
-
props,
|
598
|
-
id,
|
599
|
-
value,
|
600
|
-
allErrors,
|
601
|
-
touched,
|
602
|
-
dirty,
|
603
|
-
onChange,
|
604
|
-
onBlurInternal,
|
605
|
-
onFocusInternal,
|
606
|
-
hidden,
|
607
|
-
isValidating,
|
608
|
-
isSubmitted,
|
609
|
-
focused
|
610
|
-
]);
|
611
|
-
if (typeof Component === 'function') {
|
612
|
-
return Component(newProps);
|
613
|
-
}
|
614
|
-
// TODO si arriva in questa condizione quando si passa un componente primitivo es. div
|
615
|
-
// in questo caso non posso props custom di flower
|
616
|
-
if (isIntrinsicElement$1(Component)) {
|
617
|
-
return React.createElement(Component, { id: id, ...props });
|
618
|
-
}
|
619
|
-
return Component && React.createElement(Component, { ...newProps });
|
620
|
-
}
|
621
|
-
const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyOnHide, destroyValue, flowName, onUpdate }) => {
|
622
|
-
const { flowName: flowNameContext, currentNode } = React.useContext(context);
|
623
|
-
const name = flowName || flowNameContext;
|
624
|
-
if (typeof children === 'function') {
|
625
|
-
return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name, id: id }, ({ hidden }) => (React.createElement(Wrapper$1, { hidden: hidden, id: id, Component: children, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue, destroyOnHide: destroyOnHide }))));
|
626
|
-
}
|
627
|
-
return React.Children.map(children, (child, i) => {
|
628
|
-
if (!React.isValidElement(child)) {
|
629
|
-
return child;
|
630
|
-
}
|
631
|
-
const { type, props } = child;
|
632
|
-
const Component = type;
|
633
|
-
return (React.createElement(component$5, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: name }, ({ hidden }) => (React.createElement(Wrapper$1, { ...props, hidden: hidden, id: id, Component: Component, flowName: name, currentNode: currentNode, validate: validate, asyncValidate: asyncValidate, asyncDebounce: asyncDebounce, asyncInitialError: asyncInitialError, asyncWaitingError: asyncWaitingError, destroyValue: destroyValue, onUpdate: onUpdate, defaultValue: defaultValue }))));
|
634
|
-
});
|
635
|
-
};
|
636
|
-
const component$4 = React.memo(FlowerField);
|
637
|
-
component$4.displayName = 'FlowerField';
|
638
|
-
|
639
|
-
/* eslint-disable */
|
640
|
-
//TODO make types for wrapper function
|
641
|
-
function Wrapper({ Component, id, flowName, spreadValue, hidden, onUpdate, ...props }) {
|
642
|
-
const { flowNameFromPath = flowName, path } = React.useMemo(() => flowerCore.CoreUtils.getPath(id), [id]);
|
643
|
-
const value = useSelector(getDataFromState(flowNameFromPath, path));
|
644
|
-
const values = spreadValue && typeof value === 'object' && !Array.isArray(value)
|
645
|
-
? value
|
646
|
-
: { value };
|
647
|
-
React.useEffect(() => {
|
648
|
-
if (onUpdate) {
|
649
|
-
onUpdate(value);
|
650
|
-
}
|
651
|
-
}, [onUpdate, value]);
|
652
|
-
return (React.createElement(Component, { id: id, ...props, flowName: flowName, hidden: hidden, ...values }));
|
653
|
-
}
|
654
|
-
const RenderRules$1 = ({ id, alwaysDisplay, rules, value, Component, spreadValue, flowName, onUpdate, ...props }) => {
|
655
|
-
return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, value: value, flowName: flowName, id: id }, ({ hidden }) => (React.createElement(Wrapper, { ...props, hidden: hidden, id: id, Component: Component, spreadValue: spreadValue, flowName: flowName, onUpdate: onUpdate }))));
|
656
|
-
};
|
657
|
-
const FlowerValue = ({ id = '*', rules, alwaysDisplay, value, children, spreadValue, flowName, onUpdate, }) => {
|
658
|
-
const { flowName: flowNameContext } = React.useContext(context);
|
659
|
-
const name = flowName || flowNameContext;
|
660
|
-
if (typeof children === 'function') {
|
661
|
-
return (React.createElement(RenderRules$1, { id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, Component: children, flowName: name, onUpdate: onUpdate }));
|
662
|
-
}
|
663
|
-
return React.Children.map(children, (child, i) => {
|
664
|
-
if (!React.isValidElement(child))
|
665
|
-
return child;
|
666
|
-
const { type, props } = child;
|
667
|
-
const Component = type;
|
668
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
669
|
-
return (React.createElement(RenderRules$1, { key: i, id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, flowName: name, Component: Component, ...props, onUpdate: onUpdate }));
|
670
|
-
});
|
671
|
-
};
|
672
|
-
const component$3 = React.memo(FlowerValue);
|
673
|
-
component$3.displayName = 'FlowerValue';
|
275
|
+
const component$6 = React.memo(_FlowerFlow);
|
276
|
+
component$6.displayName = 'FlowerFlow';
|
277
|
+
const FlowerFlow = component$6;
|
674
278
|
|
675
279
|
const ACTION_TYPES = {
|
676
280
|
back: ['prev', 'prevToNode'],
|
@@ -679,10 +283,10 @@ const ACTION_TYPES = {
|
|
679
283
|
restart: ['restart', 'restart'],
|
680
284
|
reset: ['reset', 'initializeFromNode']
|
681
285
|
};
|
682
|
-
const
|
286
|
+
const PAYLOAD_KEYS_NEEDED = {
|
683
287
|
back: ['node'],
|
684
288
|
jump: ['node', 'history'],
|
685
|
-
next: ['node', 'route', 'data'],
|
289
|
+
next: ['node', 'route', 'data', 'dataIn'],
|
686
290
|
restart: ['node'],
|
687
291
|
reset: ['node', 'initialData']
|
688
292
|
};
|
@@ -698,11 +302,11 @@ const makeActionPayload = (actions, keys) => (flowName, params) => {
|
|
698
302
|
payload
|
699
303
|
};
|
700
304
|
};
|
701
|
-
const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back,
|
702
|
-
const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset,
|
703
|
-
const makeActionPayloadOnNode = makeActionPayload(ACTION_TYPES.jump,
|
704
|
-
const makeActionPayloadOnNext = makeActionPayload(ACTION_TYPES.next,
|
705
|
-
const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart,
|
305
|
+
const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLOAD_KEYS_NEEDED.back);
|
306
|
+
const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLOAD_KEYS_NEEDED.reset);
|
307
|
+
const makeActionPayloadOnNode = makeActionPayload(ACTION_TYPES.jump, PAYLOAD_KEYS_NEEDED.jump);
|
308
|
+
const makeActionPayloadOnNext = makeActionPayload(ACTION_TYPES.next, PAYLOAD_KEYS_NEEDED.next);
|
309
|
+
const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLOAD_KEYS_NEEDED.restart);
|
706
310
|
/** This hook allows you to read flow informations, such as the flowName and ID of the current node.
|
707
311
|
*
|
708
312
|
* It also exposes all the functions to navigate within the flow:
|
@@ -722,12 +326,12 @@ const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLA
|
|
722
326
|
* @param {string} name - optional parameter, if flowName exist, name is not used
|
723
327
|
*/
|
724
328
|
const useFlower = ({ flowName: customFlowName, name } = {}) => {
|
725
|
-
const dispatch = useDispatch();
|
726
|
-
const {
|
727
|
-
const store = useStore();
|
329
|
+
const dispatch = flowerReactStore.useDispatch();
|
330
|
+
const { name: flowNameDefault, initialData } = React.useContext(flowerReactContext.FlowerReactContext);
|
331
|
+
const store = flowerReactStore.useStore();
|
728
332
|
const flowName = (customFlowName || name || flowNameDefault);
|
729
|
-
const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
|
730
|
-
const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
|
333
|
+
const nodeId = flowerReactStore.useSelector(makeSelectCurrentNodeId(flowName ?? ''));
|
334
|
+
const startId = flowerReactStore.useSelector(makeSelectStartNodeId(flowName ?? ''));
|
731
335
|
const emitNavigateEvent = React.useCallback(
|
732
336
|
//TODO check this function is needed
|
733
337
|
(params) => {
|
@@ -745,22 +349,25 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
|
|
745
349
|
}
|
746
350
|
}, [flowName, nodeId]);
|
747
351
|
const next = React.useCallback((param) => {
|
748
|
-
const params = typeof param === 'string' ? { route: param } : {
|
352
|
+
const params = typeof param === 'string' ? { route: param } : { dataIn: param };
|
749
353
|
const { type, payload } = makeActionPayloadOnNext(flowName, params);
|
750
354
|
dispatch({
|
751
|
-
type:
|
752
|
-
payload
|
355
|
+
type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`,
|
356
|
+
payload: {
|
357
|
+
...payload,
|
358
|
+
data: store.getState()
|
359
|
+
}
|
753
360
|
});
|
754
361
|
emitNavigateEvent({ type, payload });
|
755
|
-
}, [dispatch, emitNavigateEvent, flowName]);
|
362
|
+
}, [dispatch, emitNavigateEvent, flowName, store]);
|
756
363
|
const back = React.useCallback((param) => {
|
757
364
|
const { type, payload } = makeActionPayloadOnPrev(flowName, param);
|
758
|
-
dispatch({ type:
|
365
|
+
dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
|
759
366
|
emitNavigateEvent({ type, payload });
|
760
367
|
}, [dispatch, emitNavigateEvent, flowName]);
|
761
368
|
const restart = React.useCallback((param) => {
|
762
369
|
const { type, payload } = makeActionPayloadOnRestart(flowName, param);
|
763
|
-
dispatch({ type:
|
370
|
+
dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
|
764
371
|
emitNavigateEvent({ type, payload });
|
765
372
|
}, [dispatch, emitNavigateEvent, flowName]);
|
766
373
|
const reset = React.useCallback((param) => {
|
@@ -770,17 +377,17 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
|
|
770
377
|
...param,
|
771
378
|
initialData
|
772
379
|
});
|
773
|
-
dispatch({ type:
|
380
|
+
dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
|
774
381
|
emitNavigateEvent({ type, payload });
|
775
382
|
}, [dispatch, emitNavigateEvent, flowName, initialData]);
|
776
383
|
const jump = React.useCallback((param) => {
|
777
384
|
const { type, payload } = makeActionPayloadOnNode(flowName, param);
|
778
|
-
dispatch({ type:
|
385
|
+
dispatch({ type: `${flowerCore.REDUCER_NAME.FLOWER_FLOW}/${type}`, payload });
|
779
386
|
emitNavigateEvent({ type, payload });
|
780
387
|
}, [dispatch, emitNavigateEvent, flowName]);
|
781
388
|
const getCurrentNodeId = React.useCallback((customFlowName) => {
|
782
389
|
return _get(store.getState(), [
|
783
|
-
|
390
|
+
flowerCore.REDUCER_NAME.FLOWER_FLOW,
|
784
391
|
customFlowName || flowName,
|
785
392
|
'current'
|
786
393
|
]);
|
@@ -821,7 +428,7 @@ const useFlower = ({ flowName: customFlowName, name } = {}) => {
|
|
821
428
|
// }
|
822
429
|
// );
|
823
430
|
const useFlowerNavigate = ({ flowName, action, route, node }) => {
|
824
|
-
const {
|
431
|
+
const { name: flowNameContext } = React.useContext(flowerReactContext.FlowerReactContext);
|
825
432
|
const name = flowName || flowNameContext;
|
826
433
|
const { next, jump, back, reset, restart } = useFlower({ flowName: name });
|
827
434
|
const onNavigate = React.useCallback(() => {
|
@@ -857,7 +464,7 @@ function isIntrinsicElement(x) {
|
|
857
464
|
return typeof x === 'string';
|
858
465
|
}
|
859
466
|
//TODO type FlowerNavigateWrapper props
|
860
|
-
function
|
467
|
+
function _FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
|
861
468
|
const newProps = React.useMemo(() => ({
|
862
469
|
...props,
|
863
470
|
hidden,
|
@@ -876,155 +483,138 @@ function FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
|
|
876
483
|
/* istanbul ignore next */
|
877
484
|
return Component && React.createElement(Component, { ...newProps });
|
878
485
|
}
|
879
|
-
const component$
|
486
|
+
const component$5 = React.memo(_FlowerNavigateWrapper);
|
487
|
+
const FlowerNavigateWrapper = component$5;
|
880
488
|
|
881
489
|
/* eslint-disable */
|
882
490
|
//TODO type RenderRules props
|
491
|
+
// ! Probably in this scenario we must replace `FlowerRule` or refactor `FlowerNavigate`
|
883
492
|
const RenderRules = ({ alwaysDisplay, rules, Component, flowName, onNavigate, ...props }) => {
|
884
|
-
return (React.createElement(
|
493
|
+
return (React.createElement(flowerReactShared.FlowerRule, { alwaysDisplay: alwaysDisplay, rules: rules, rootName: flowName }, ({ hidden }) => (React.createElement(FlowerNavigateWrapper, { ...props, Component: Component, hidden: hidden, onNavigate: onNavigate }))));
|
885
494
|
};
|
886
|
-
const
|
887
|
-
const { onNavigate, flowName } = useFlowerNavigate({
|
495
|
+
const _FlowerNavigate = ({ children, flowName: forceFlowName, action, route, node, rules, alwaysDisplay }) => {
|
496
|
+
const { onNavigate, flowName } = useFlowerNavigate({
|
497
|
+
flowName: forceFlowName,
|
498
|
+
action,
|
499
|
+
route,
|
500
|
+
node
|
501
|
+
});
|
888
502
|
if (typeof children === 'function') {
|
889
|
-
return React.createElement(RenderRules, { alwaysDisplay: alwaysDisplay, rules: rules, Component: children, flowName: flowName, onNavigate: onNavigate });
|
503
|
+
return (React.createElement(RenderRules, { alwaysDisplay: alwaysDisplay, rules: rules, Component: children, flowName: flowName, onNavigate: onNavigate }));
|
890
504
|
}
|
891
|
-
return React.Children.map(children, (child, i) => {
|
505
|
+
return (React.createElement(React.Fragment, null, React.Children.map(children, (child, i) => {
|
892
506
|
if (!React.isValidElement(child))
|
893
507
|
return child;
|
894
508
|
const { type, props } = child;
|
895
509
|
const Component = type;
|
896
|
-
|
897
|
-
|
898
|
-
|
510
|
+
return (React.createElement(RenderRules, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, Component: Component, flowName: flowName, onNavigate: onNavigate, ...props }));
|
511
|
+
})));
|
512
|
+
};
|
513
|
+
const component$4 = React.memo(_FlowerNavigate);
|
514
|
+
component$4.displayName = 'FlowerNavigate';
|
515
|
+
const FlowerNavigate = component$4;
|
516
|
+
|
517
|
+
const _FlowerNode = ({ children, onEnter, onExit }) => {
|
518
|
+
React.useEffect(() => {
|
519
|
+
onEnter?.();
|
520
|
+
return () => {
|
521
|
+
onExit?.();
|
522
|
+
};
|
523
|
+
}, [onEnter, onExit]);
|
524
|
+
return React.createElement(React.Fragment, null, children);
|
899
525
|
};
|
900
|
-
const component$
|
901
|
-
component$
|
526
|
+
const component$3 = React.memo(_FlowerNode);
|
527
|
+
component$3.displayName = 'FlowerNode';
|
528
|
+
const FlowerNode = component$3;
|
902
529
|
|
903
|
-
const
|
904
|
-
const
|
530
|
+
const _FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
|
531
|
+
const dispatch = flowerReactStore.useDispatch();
|
532
|
+
const one = React.useRef(false);
|
533
|
+
const { name } = React.useContext(flowerReactContext.FlowerReactContext);
|
534
|
+
React.useEffect(() => {
|
535
|
+
onEnter?.();
|
536
|
+
return () => {
|
537
|
+
onExit?.();
|
538
|
+
};
|
539
|
+
}, [onEnter, onExit]);
|
540
|
+
React.useEffect(() => {
|
541
|
+
if (autostart && one.current === false) {
|
542
|
+
one.current = true;
|
543
|
+
dispatch(flowerActions.next({ flowName: name }));
|
544
|
+
}
|
545
|
+
}, [dispatch, name, autostart]);
|
546
|
+
return React.createElement(React.Fragment, null, children);
|
547
|
+
};
|
548
|
+
const component$2 = React.memo(_FlowerRoute);
|
549
|
+
component$2.displayName = 'FlowerRoute';
|
550
|
+
const FlowerRoute = component$2;
|
905
551
|
|
906
|
-
|
907
|
-
|
908
|
-
|
909
|
-
|
910
|
-
|
911
|
-
|
912
|
-
|
913
|
-
|
914
|
-
|
915
|
-
|
916
|
-
|
917
|
-
|
918
|
-
|
919
|
-
|
920
|
-
|
921
|
-
|
922
|
-
|
923
|
-
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
|
928
|
-
|
929
|
-
|
930
|
-
|
931
|
-
const dispatch = useDispatch();
|
932
|
-
const store = useStore();
|
933
|
-
const flowName = customFlowName || name || flowNameDefault || '';
|
934
|
-
const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
|
935
|
-
const { errors, customErrors, isValid, isSubmitted, isDirty, hasFocus, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
|
936
|
-
const getData = React.useCallback((path) => {
|
937
|
-
const { flowNameFromPath = flowName, path: newpath } = flowerCore.CoreUtils.getPath(path);
|
938
|
-
return _get(store.getState(), [
|
939
|
-
'flower',
|
940
|
-
flowNameFromPath,
|
941
|
-
'data',
|
942
|
-
...newpath
|
943
|
-
]);
|
944
|
-
}, [store, flowName]);
|
945
|
-
const getFormStatus = React.useCallback((path) => {
|
946
|
-
const { flowNameFromPath = flowName, path: newpath } = flowerCore.CoreUtils.getPath(path);
|
947
|
-
return _get(store.getState(), [
|
948
|
-
'flower',
|
949
|
-
flowNameFromPath,
|
950
|
-
'form',
|
951
|
-
...newpath
|
952
|
-
]);
|
953
|
-
}, [store, flowName]);
|
954
|
-
const setDataField = React.useCallback((id, val, dirty = true) => {
|
955
|
-
const { flowNameFromPath = flowName } = flowerCore.CoreUtils.getPath(id);
|
956
|
-
dispatch(actions.addDataByPath({
|
957
|
-
flowName: flowNameFromPath,
|
958
|
-
id,
|
959
|
-
value: val,
|
960
|
-
dirty
|
961
|
-
}));
|
962
|
-
return;
|
963
|
-
}, [flowName, dispatch]);
|
964
|
-
const setData = React.useCallback((val, id) => {
|
965
|
-
if (id) {
|
966
|
-
setDataField(id, val);
|
967
|
-
return;
|
552
|
+
const _FlowerServer = ({ children }) => {
|
553
|
+
return React.createElement(React.Fragment, null, children);
|
554
|
+
};
|
555
|
+
const component$1 = React.memo(_FlowerServer);
|
556
|
+
component$1.displayName = 'FlowerServer';
|
557
|
+
const FlowerServer = component$1;
|
558
|
+
|
559
|
+
function _FlowerStart() {
|
560
|
+
const dispatch = flowerReactStore.useDispatch();
|
561
|
+
const one = React.useRef(false);
|
562
|
+
const { name, autostart = true, currentNode } = React.useContext(flowerReactContext.FlowerReactContext);
|
563
|
+
const startNodeId = flowerReactStore.useSelector(makeSelectStartNodeId(name ?? ''));
|
564
|
+
React.useEffect(() => {
|
565
|
+
if (startNodeId === currentNode && autostart && one.current === false) {
|
566
|
+
one.current = true;
|
567
|
+
dispatch(flowerActions.next({ flowName: name, isStart: true }));
|
568
|
+
// if (global.window
|
569
|
+
// // eslint-disable-next-line no-underscore-dangle, no-undef
|
570
|
+
// && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
|
571
|
+
// Emitter.emit('flower-devtool-from-client', {
|
572
|
+
// source: 'flower-client',
|
573
|
+
// action: 'START_FLOWER',
|
574
|
+
// name: flowName,
|
575
|
+
// });
|
576
|
+
// }
|
968
577
|
}
|
969
|
-
|
970
|
-
|
971
|
-
|
972
|
-
|
973
|
-
|
974
|
-
|
975
|
-
|
976
|
-
|
977
|
-
|
978
|
-
|
979
|
-
dispatch(actions.resetForm({ flowName, id: nodeId || currentNode }));
|
980
|
-
}, [flowName, currentNode, dispatch]);
|
981
|
-
const setCustomErrors = React.useCallback((field, errors, nodeId) => {
|
982
|
-
dispatch({
|
983
|
-
type: 'flower/formAddCustomErrors',
|
984
|
-
payload: {
|
985
|
-
name: flowName,
|
986
|
-
id: field,
|
987
|
-
currentNode: nodeId || currentNode,
|
988
|
-
errors
|
989
|
-
}
|
990
|
-
});
|
991
|
-
}, [flowName, currentNode, dispatch]);
|
992
|
-
return {
|
993
|
-
isSubmitted,
|
994
|
-
isDirty,
|
995
|
-
hasFocus,
|
996
|
-
errors,
|
997
|
-
customErrors,
|
998
|
-
isValid,
|
999
|
-
isValidating,
|
1000
|
-
getData,
|
1001
|
-
setData,
|
1002
|
-
setDataField,
|
1003
|
-
unsetData,
|
1004
|
-
replaceData,
|
1005
|
-
reset,
|
1006
|
-
setCustomErrors,
|
1007
|
-
getFormStatus
|
578
|
+
}, [dispatch, autostart, startNodeId, currentNode, name]);
|
579
|
+
return null;
|
580
|
+
}
|
581
|
+
const component = React.memo(_FlowerStart);
|
582
|
+
component.displayName = 'FlowerStart';
|
583
|
+
const FlowerStart = component;
|
584
|
+
|
585
|
+
const FlowerProvider = ({ children, enableReduxDevtool, configureStore }) => {
|
586
|
+
const { reducer, ...rest } = configureStore ?? {
|
587
|
+
devTools: enableReduxDevtool
|
1008
588
|
};
|
589
|
+
return (React.createElement(flowerReactStore.ReduxFlowerProvider, { configureStore: {
|
590
|
+
reducer: { ...reducerFlower, ...(reducer ?? {}) },
|
591
|
+
...rest,
|
592
|
+
devTools: enableReduxDevtool ?? rest?.devTools
|
593
|
+
} }, children));
|
1009
594
|
};
|
1010
595
|
|
1011
|
-
exports
|
1012
|
-
|
1013
|
-
|
1014
|
-
|
1015
|
-
exports
|
1016
|
-
|
1017
|
-
|
1018
|
-
|
1019
|
-
exports
|
1020
|
-
|
596
|
+
Object.defineProperty(exports, "useDispatch", {
|
597
|
+
enumerable: true,
|
598
|
+
get: function () { return flowerReactStore.useDispatch; }
|
599
|
+
});
|
600
|
+
Object.defineProperty(exports, "useSelector", {
|
601
|
+
enumerable: true,
|
602
|
+
get: function () { return flowerReactStore.useSelector; }
|
603
|
+
});
|
604
|
+
Object.defineProperty(exports, "useStore", {
|
605
|
+
enumerable: true,
|
606
|
+
get: function () { return flowerReactStore.useStore; }
|
607
|
+
});
|
608
|
+
exports.Flower = Flower;
|
609
|
+
exports.FlowerAction = FlowerAction;
|
610
|
+
exports.FlowerComponent = FlowerComponent;
|
611
|
+
exports.FlowerFlow = FlowerFlow;
|
612
|
+
exports.FlowerNavigate = FlowerNavigate;
|
613
|
+
exports.FlowerNode = FlowerNode;
|
1021
614
|
exports.FlowerProvider = FlowerProvider;
|
1022
|
-
exports.FlowerRoute =
|
1023
|
-
exports.
|
1024
|
-
exports.
|
1025
|
-
exports.
|
1026
|
-
exports.FlowerValue = component$3;
|
1027
|
-
exports.getDataByFlow = getDataByFlow;
|
615
|
+
exports.FlowerRoute = FlowerRoute;
|
616
|
+
exports.FlowerServer = FlowerServer;
|
617
|
+
exports.FlowerStart = FlowerStart;
|
618
|
+
exports.makeSelectData = makeSelectData;
|
1028
619
|
exports.useFlower = useFlower;
|
1029
|
-
exports.
|
1030
|
-
exports.useSelector = useSelector;
|
620
|
+
exports.useFlowerNavigate = useFlowerNavigate;
|