@flowerforce/flower-react 3.1.2-beta.0 → 3.1.2-beta.1
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 +11 -1
- package/dist/index.cjs.js +691 -1079
- package/dist/index.esm.js +691 -1079
- package/dist/src/components/Flower.d.ts +7 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
@@ -7,45 +7,39 @@ import { createSelector } from 'reselect';
|
|
7
7
|
import { createDispatchHook, createSelectorHook, createStoreHook, Provider as Provider$1 } from 'react-redux';
|
8
8
|
import debounce from 'lodash/debounce';
|
9
9
|
|
10
|
-
const _context =
|
10
|
+
const _context = createContext({});
|
11
11
|
const context = _context;
|
12
12
|
const Provider = _context.Provider;
|
13
13
|
const Consumer = _context.Consumer;
|
14
14
|
|
15
15
|
// eslint-disable-next-line import/prefer-default-export
|
16
|
-
const convertElements = nodes => {
|
17
|
-
|
18
|
-
|
16
|
+
const convertElements = (nodes) => {
|
17
|
+
const res = CoreUtils.generateNodesForFlowerJson(nodes);
|
18
|
+
return res;
|
19
19
|
};
|
20
20
|
|
21
21
|
const flowerReducer = createSlice({
|
22
|
-
|
23
|
-
|
24
|
-
|
22
|
+
name: 'flower',
|
23
|
+
initialState: {},
|
24
|
+
reducers: FlowerCoreReducers
|
25
25
|
});
|
26
|
-
const {
|
27
|
-
actions
|
28
|
-
} = flowerReducer;
|
26
|
+
const { actions } = flowerReducer;
|
29
27
|
const reducerFlower = {
|
30
|
-
|
28
|
+
flower: flowerReducer.reducer
|
31
29
|
};
|
32
30
|
|
33
|
-
const {
|
34
|
-
|
35
|
-
|
36
|
-
const {
|
37
|
-
selectGlobal
|
38
|
-
} = Selectors;
|
39
|
-
const selectFlower = name => createSelector(selectGlobal, Selectors.selectFlower(name));
|
31
|
+
const { getAllData: mapData } = FlowerStateUtils;
|
32
|
+
const { selectGlobal } = Selectors;
|
33
|
+
const selectFlower = (name) => createSelector(selectGlobal, Selectors.selectFlower(name));
|
40
34
|
const selectFlowerFormNode = (name, id) => createSelector(selectFlower(name), Selectors.selectFlowerFormNode(id));
|
41
|
-
const selectFlowerHistory = name => createSelector(selectFlower(name), Selectors.selectFlowerHistory);
|
42
|
-
const makeSelectNodesIds = name => createSelector(selectFlower(name), Selectors.makeSelectNodesIds);
|
43
|
-
const makeSelectStartNodeId = name => createSelector(selectFlower(name), Selectors.makeSelectStartNodeId);
|
44
|
-
const makeSelectCurrentNodeId = name => createSelector(selectFlower(name), makeSelectStartNodeId(name), Selectors.makeSelectCurrentNodeId);
|
45
|
-
const makeSelectPrevNodeRetain = name => createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), Selectors.makeSelectPrevNodeRetain);
|
46
|
-
const makeSelectCurrentNodeDisabled = name => createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), Selectors.makeSelectCurrentNodeDisabled);
|
35
|
+
const selectFlowerHistory = (name) => createSelector(selectFlower(name), Selectors.selectFlowerHistory);
|
36
|
+
const makeSelectNodesIds = (name) => createSelector(selectFlower(name), Selectors.makeSelectNodesIds);
|
37
|
+
const makeSelectStartNodeId = (name) => createSelector(selectFlower(name), Selectors.makeSelectStartNodeId);
|
38
|
+
const makeSelectCurrentNodeId = (name) => createSelector(selectFlower(name), makeSelectStartNodeId(name), Selectors.makeSelectCurrentNodeId);
|
39
|
+
const makeSelectPrevNodeRetain = (name) => createSelector(makeSelectNodesIds(name), selectFlowerHistory(name), makeSelectCurrentNodeId(name), Selectors.makeSelectPrevNodeRetain);
|
40
|
+
const makeSelectCurrentNodeDisabled = (name) => createSelector(makeSelectNodesIds(name), makeSelectCurrentNodeId(name), Selectors.makeSelectCurrentNodeDisabled);
|
47
41
|
// dati nel flow selezionato
|
48
|
-
const getDataByFlow = name => createSelector(selectFlower(name), Selectors.getDataByFlow);
|
42
|
+
const getDataByFlow = (name) => createSelector(selectFlower(name), Selectors.getDataByFlow);
|
49
43
|
// selettore per recuperare i dati di un flow specifico e id specifico
|
50
44
|
const getDataFromState = (name, id) => createSelector(getDataByFlow(name), Selectors.getDataFromState(id));
|
51
45
|
const makeSelectNodeErrors = (name, currentNodeId) => createSelector(selectFlowerFormNode(name, currentNodeId), Selectors.makeSelectNodeErrors);
|
@@ -55,34 +49,23 @@ const makeSelectFieldError = (name, id, validate) => createSelector(getAllData,
|
|
55
49
|
const selectorRulesDisabled = (id, rules, keys, flowName, value, currentNode) => createSelector(getAllData, makeSelectNodeErrors(flowName, currentNode), Selectors.selectorRulesDisabled(id, rules, keys, flowName, value));
|
56
50
|
|
57
51
|
//TODO check reduxContext type due to remove all any types
|
58
|
-
const reduxContext =
|
52
|
+
const reduxContext = createContext(null);
|
59
53
|
const useDispatch = createDispatchHook(reduxContext);
|
60
54
|
const useSelector = createSelectorHook(reduxContext);
|
61
55
|
const useStore = createStoreHook(reduxContext);
|
62
|
-
const store = ({
|
63
|
-
|
64
|
-
}
|
65
|
-
reducer: reducerFlower,
|
66
|
-
devTools: enableDevtool ? {
|
67
|
-
name: 'flower'
|
68
|
-
} : false
|
56
|
+
const store = ({ enableDevtool }) => configureStore({
|
57
|
+
reducer: reducerFlower,
|
58
|
+
devTools: enableDevtool ? { name: 'flower' } : false
|
69
59
|
});
|
70
60
|
class FlowerProvider extends PureComponent {
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
children
|
80
|
-
} = this.props;
|
81
|
-
return /*#__PURE__*/React.createElement(Provider$1, {
|
82
|
-
context: reduxContext,
|
83
|
-
store: this.store
|
84
|
-
}, children);
|
85
|
-
}
|
61
|
+
constructor(props) {
|
62
|
+
super(props);
|
63
|
+
this.store = store({ enableDevtool: props.enableReduxDevtool });
|
64
|
+
}
|
65
|
+
render() {
|
66
|
+
const { children } = this.props;
|
67
|
+
return (React.createElement(Provider$1, { context: reduxContext, store: this.store }, children));
|
68
|
+
}
|
86
69
|
}
|
87
70
|
|
88
71
|
/* eslint-disable no-undef */
|
@@ -90,768 +73,545 @@ class FlowerProvider extends PureComponent {
|
|
90
73
|
/**
|
91
74
|
* FlowerClient
|
92
75
|
*/
|
93
|
-
const FlowerClient = ({
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
76
|
+
const FlowerClient = ({ children, name, destroyOnUnmount = true, startId = null, initialData = {}, initialState = {} }) => {
|
77
|
+
const flowName = name;
|
78
|
+
const dispatch = useDispatch();
|
79
|
+
const one = useRef(false);
|
80
|
+
const [wsDevtools, setWsDevtools] = useState(devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS_INITIALIZED__', false));
|
81
|
+
// TODO rivedere il giro, potremmo fare le trasformazioni in CoreUtils.generateNodesForFlowerJson
|
82
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps, max-len
|
83
|
+
const nodes = useMemo(() => convertElements(Children.toArray(children)), [children]);
|
84
|
+
const nodeById = useMemo(() => _keyBy(Children.toArray(children), 'props.id'), [children]);
|
85
|
+
const isInitialized = useSelector(makeSelectStartNodeId(name));
|
86
|
+
const history = useSelector(selectFlowerHistory(name));
|
87
|
+
const current = useSelector(makeSelectCurrentNodeId(flowName));
|
88
|
+
const isDisabled = useSelector(makeSelectCurrentNodeDisabled(flowName));
|
89
|
+
const prevFlowerNodeId = useSelector(makeSelectPrevNodeRetain(flowName));
|
90
|
+
const store = useStore();
|
91
|
+
useEffect(() => {
|
92
|
+
if (nodes.length > 0 && one.current === false) {
|
93
|
+
one.current = true;
|
94
|
+
dispatch(actions.initNodes({
|
95
|
+
name: flowName,
|
96
|
+
// @ts-expect-error FIX ME
|
97
|
+
nodes,
|
98
|
+
startId: startId ?? '',
|
99
|
+
persist: destroyOnUnmount === false,
|
100
|
+
initialData,
|
101
|
+
initialState
|
102
|
+
}));
|
103
|
+
}
|
104
|
+
}, [
|
105
|
+
dispatch,
|
106
|
+
flowName,
|
120
107
|
nodes,
|
121
|
-
startId
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
}
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
flowName: msg.name,
|
149
|
-
value: msg.data
|
150
|
-
}));
|
151
|
-
}
|
152
|
-
};
|
153
|
-
/* istanbul ignore next */
|
154
|
-
if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
155
|
-
Emitter.on('flower-devtool-to-client', eventCb);
|
156
|
-
}
|
157
|
-
return () => {
|
158
|
-
/* istanbul ignore next */
|
159
|
-
if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
160
|
-
Emitter.off('flower-devtool-to-client', eventCb);
|
161
|
-
}
|
162
|
-
};
|
163
|
-
}, [dispatch, flowName]);
|
164
|
-
useEffect(() => () => {
|
165
|
-
// unmount function
|
166
|
-
if (_destroyOnUnmount && one.current === true) {
|
167
|
-
one.current = false;
|
168
|
-
dispatch(actions.destroy({
|
169
|
-
name: flowName
|
170
|
-
}));
|
171
|
-
}
|
172
|
-
}, [dispatch, flowName, _destroyOnUnmount]);
|
173
|
-
useEffect(() => {
|
174
|
-
/* istanbul ignore next */
|
175
|
-
if (isInitialized && wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
176
|
-
Emitter.emit('flower-devtool-from-client', {
|
177
|
-
source: 'flower-client',
|
178
|
-
action: 'FLOWER_CLIENT_INIT',
|
179
|
-
name: flowName,
|
180
|
-
time: new Date(),
|
181
|
-
nodeId: isInitialized,
|
182
|
-
getState: store.getState
|
183
|
-
});
|
184
|
-
}
|
185
|
-
}, [dispatch, flowName, wsDevtools, isInitialized, store]);
|
186
|
-
useEffect(() => {
|
187
|
-
/* istanbul ignore next */
|
188
|
-
if (isInitialized && wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
189
|
-
Emitter.emit('flower-devtool-from-client', {
|
190
|
-
source: 'flower-client',
|
191
|
-
action: 'SET_HISTORY',
|
192
|
-
name: flowName,
|
193
|
-
history
|
194
|
-
});
|
195
|
-
}
|
196
|
-
}, [dispatch, flowName, history, wsDevtools, isInitialized]);
|
197
|
-
useEffect(() => {
|
198
|
-
if (!current) return;
|
199
|
-
/* istanbul ignore next */
|
200
|
-
if (!isInitialized) return;
|
201
|
-
/* istanbul ignore next */
|
202
|
-
if (isInitialized && wsDevtools && devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
203
|
-
Emitter.emit('flower-devtool-from-client', {
|
204
|
-
source: 'flower-client',
|
205
|
-
action: 'SET_CURRENT',
|
206
|
-
name: flowName,
|
207
|
-
current
|
208
|
-
});
|
209
|
-
}
|
210
|
-
}, [flowName, current, wsDevtools, isInitialized]);
|
211
|
-
useEffect(() => {
|
212
|
-
if (!current) return;
|
213
|
-
/* istanbul ignore next */
|
214
|
-
if (!isInitialized) return;
|
215
|
-
if (isDisabled) {
|
216
|
-
dispatch({
|
217
|
-
type: 'flower/next',
|
218
|
-
payload: {
|
219
|
-
flowName,
|
220
|
-
disabled: true
|
108
|
+
startId,
|
109
|
+
initialData,
|
110
|
+
destroyOnUnmount,
|
111
|
+
initialState
|
112
|
+
]);
|
113
|
+
useEffect(() => {
|
114
|
+
/* istanbul ignore next */
|
115
|
+
const eventCb = (msg) => {
|
116
|
+
if (msg.source !== 'flower-devtool')
|
117
|
+
return;
|
118
|
+
if (msg.action === 'FLOWER_EXTENSION_INIT' ||
|
119
|
+
msg.action === 'FLOWER_DEVTOOL_WEB_INIT') {
|
120
|
+
setWsDevtools(true);
|
121
|
+
}
|
122
|
+
if (msg.action === 'SELECTED_NODE' && msg.name === flowName) {
|
123
|
+
dispatch(actions.setCurrentNode({ name: msg.name, node: msg.id }));
|
124
|
+
}
|
125
|
+
if (msg.action === 'REPLACE_DATA' && msg.name === flowName) {
|
126
|
+
dispatch(actions.replaceData({ flowName: msg.name, value: msg.data }));
|
127
|
+
}
|
128
|
+
if (msg.action === 'ADD_DATA' && msg.name === flowName) {
|
129
|
+
dispatch(actions.addData({ flowName: msg.name, value: msg.data }));
|
130
|
+
}
|
131
|
+
};
|
132
|
+
/* istanbul ignore next */
|
133
|
+
if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
134
|
+
Emitter.on('flower-devtool-to-client', eventCb);
|
221
135
|
}
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
Emitter.emit('flower-devtool-from-client', {
|
227
|
-
source: 'flower-client',
|
228
|
-
action: 'FLOWER_NAVIGATE',
|
229
|
-
nodeId: current,
|
230
|
-
name: flowName,
|
231
|
-
time: new Date(),
|
232
|
-
params: {
|
233
|
-
action: 'next',
|
234
|
-
payload: {
|
235
|
-
flowName,
|
236
|
-
disabled: true
|
136
|
+
return () => {
|
137
|
+
/* istanbul ignore next */
|
138
|
+
if (devtoolState && _get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
139
|
+
Emitter.off('flower-devtool-to-client', eventCb);
|
237
140
|
}
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
141
|
+
};
|
142
|
+
}, [dispatch, flowName]);
|
143
|
+
useEffect(() => () => {
|
144
|
+
// unmount function
|
145
|
+
if (destroyOnUnmount && one.current === true) {
|
146
|
+
one.current = false;
|
147
|
+
dispatch(actions.destroy({ name: flowName }));
|
148
|
+
}
|
149
|
+
}, [dispatch, flowName, destroyOnUnmount]);
|
150
|
+
useEffect(() => {
|
151
|
+
/* istanbul ignore next */
|
152
|
+
if (isInitialized &&
|
153
|
+
wsDevtools &&
|
154
|
+
devtoolState &&
|
155
|
+
_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
156
|
+
Emitter.emit('flower-devtool-from-client', {
|
157
|
+
source: 'flower-client',
|
158
|
+
action: 'FLOWER_CLIENT_INIT',
|
159
|
+
name: flowName,
|
160
|
+
time: new Date(),
|
161
|
+
nodeId: isInitialized,
|
162
|
+
getState: store.getState
|
163
|
+
});
|
164
|
+
}
|
165
|
+
}, [dispatch, flowName, wsDevtools, isInitialized, store]);
|
166
|
+
useEffect(() => {
|
167
|
+
/* istanbul ignore next */
|
168
|
+
if (isInitialized &&
|
169
|
+
wsDevtools &&
|
170
|
+
devtoolState &&
|
171
|
+
_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
172
|
+
Emitter.emit('flower-devtool-from-client', {
|
173
|
+
source: 'flower-client',
|
174
|
+
action: 'SET_HISTORY',
|
175
|
+
name: flowName,
|
176
|
+
history
|
177
|
+
});
|
178
|
+
}
|
179
|
+
}, [dispatch, flowName, history, wsDevtools, isInitialized]);
|
180
|
+
useEffect(() => {
|
181
|
+
if (!current)
|
182
|
+
return;
|
183
|
+
/* istanbul ignore next */
|
184
|
+
if (!isInitialized)
|
185
|
+
return;
|
186
|
+
/* istanbul ignore next */
|
187
|
+
if (isInitialized &&
|
188
|
+
wsDevtools &&
|
189
|
+
devtoolState &&
|
190
|
+
_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
191
|
+
Emitter.emit('flower-devtool-from-client', {
|
192
|
+
source: 'flower-client',
|
193
|
+
action: 'SET_CURRENT',
|
194
|
+
name: flowName,
|
195
|
+
current
|
196
|
+
});
|
197
|
+
}
|
198
|
+
}, [flowName, current, wsDevtools, isInitialized]);
|
199
|
+
useEffect(() => {
|
200
|
+
if (!current)
|
201
|
+
return;
|
202
|
+
/* istanbul ignore next */
|
203
|
+
if (!isInitialized)
|
204
|
+
return;
|
205
|
+
if (isDisabled) {
|
206
|
+
dispatch({ type: 'flower/next', payload: { flowName, disabled: true } });
|
207
|
+
// eslint-disable-next-line no-underscore-dangle, no-undef
|
208
|
+
/* istanbul ignore next */
|
209
|
+
if (wsDevtools &&
|
210
|
+
devtoolState &&
|
211
|
+
_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
212
|
+
Emitter.emit('flower-devtool-from-client', {
|
213
|
+
source: 'flower-client',
|
214
|
+
action: 'FLOWER_NAVIGATE',
|
215
|
+
nodeId: current,
|
216
|
+
name: flowName,
|
217
|
+
time: new Date(),
|
218
|
+
params: { action: 'next', payload: { flowName, disabled: true } }
|
219
|
+
});
|
220
|
+
}
|
221
|
+
return;
|
222
|
+
}
|
223
|
+
// eslint-disable-next-line no-underscore-dangle, no-undef
|
224
|
+
/* istanbul ignore next */
|
225
|
+
if (wsDevtools &&
|
226
|
+
devtoolState &&
|
227
|
+
_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
228
|
+
if (isInitialized === current)
|
229
|
+
return; // salto il primo evento
|
230
|
+
Emitter.emit('flower-devtool-from-client', {
|
231
|
+
source: 'flower-client',
|
232
|
+
action: 'SET_SELECTED',
|
233
|
+
nodeId: current,
|
234
|
+
name: flowName,
|
235
|
+
time: new Date()
|
236
|
+
});
|
237
|
+
}
|
238
|
+
}, [
|
239
|
+
dispatch,
|
240
|
+
flowName,
|
241
|
+
current,
|
242
|
+
isDisabled,
|
243
|
+
store,
|
244
|
+
wsDevtools,
|
245
|
+
isInitialized
|
246
|
+
]);
|
247
|
+
const contextValues = useMemo(() => ({
|
248
|
+
flowName,
|
249
|
+
initialData,
|
250
|
+
currentNode: current
|
251
|
+
}), [flowName, initialData, current]);
|
252
|
+
return isInitialized ? (React.createElement(Provider, { value: contextValues },
|
253
|
+
prevFlowerNodeId !== current &&
|
254
|
+
typeof prevFlowerNodeId === 'string' &&
|
255
|
+
nodeById[prevFlowerNodeId],
|
256
|
+
!isDisabled && nodeById[current])) : null;
|
264
257
|
};
|
265
|
-
const component$c =
|
258
|
+
const component$c = memo(FlowerClient);
|
266
259
|
|
267
|
-
const FlowerNode = ({
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
onEnter
|
274
|
-
return
|
275
|
-
onExit == null || onExit();
|
276
|
-
};
|
277
|
-
}, [onEnter, onExit]);
|
278
|
-
return children;
|
260
|
+
const FlowerNode = ({ children, onEnter, onExit }) => {
|
261
|
+
useEffect(() => {
|
262
|
+
onEnter?.();
|
263
|
+
return () => {
|
264
|
+
onExit?.();
|
265
|
+
};
|
266
|
+
}, [onEnter, onExit]);
|
267
|
+
return children;
|
279
268
|
};
|
280
|
-
const component$b =
|
269
|
+
const component$b = memo(FlowerNode);
|
281
270
|
component$b.displayName = 'FlowerNode';
|
282
271
|
|
283
|
-
const FlowAction = ({
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
onEnter
|
290
|
-
return
|
291
|
-
onExit == null || onExit();
|
292
|
-
};
|
293
|
-
}, [onEnter, onExit]);
|
294
|
-
return children;
|
272
|
+
const FlowAction = ({ children, onEnter, onExit }) => {
|
273
|
+
useEffect(() => {
|
274
|
+
onEnter?.();
|
275
|
+
return () => {
|
276
|
+
onExit?.();
|
277
|
+
};
|
278
|
+
}, [onEnter, onExit]);
|
279
|
+
return children;
|
295
280
|
};
|
296
|
-
const component$a =
|
281
|
+
const component$a = React.memo(FlowAction);
|
297
282
|
component$a.displayName = 'FlowerAction';
|
298
283
|
|
299
|
-
const FlowerServer = ({
|
300
|
-
|
301
|
-
}) => {
|
302
|
-
return children;
|
284
|
+
const FlowerServer = ({ children }) => {
|
285
|
+
return children;
|
303
286
|
};
|
304
|
-
const component$9 =
|
287
|
+
const component$9 = React.memo(FlowerServer);
|
305
288
|
component$9.displayName = 'FlowerServer';
|
306
289
|
|
307
|
-
const FlowerFlow = ({
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
onEnter
|
314
|
-
return
|
315
|
-
onExit == null || onExit();
|
316
|
-
};
|
317
|
-
}, [onEnter, onExit]);
|
318
|
-
return children;
|
290
|
+
const FlowerFlow = ({ children, onEnter, onExit }) => {
|
291
|
+
useEffect(() => {
|
292
|
+
onEnter?.();
|
293
|
+
return () => {
|
294
|
+
onExit?.();
|
295
|
+
};
|
296
|
+
}, [onEnter, onExit]);
|
297
|
+
return children;
|
319
298
|
};
|
320
|
-
const component$8 =
|
299
|
+
const component$8 = React.memo(FlowerFlow);
|
321
300
|
component$8.displayName = 'FlowerFlow';
|
322
301
|
|
323
302
|
function FlowerStart() {
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
flowName
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
303
|
+
const dispatch = useDispatch();
|
304
|
+
const one = useRef(false);
|
305
|
+
const { flowName, autostart = true, currentNode } = useContext(context);
|
306
|
+
const startNodeId = useSelector(makeSelectStartNodeId(flowName ?? ''));
|
307
|
+
useEffect(() => {
|
308
|
+
if (startNodeId === currentNode && autostart && one.current === false) {
|
309
|
+
one.current = true;
|
310
|
+
dispatch({ type: 'flower/next', payload: { flowName, isStart: true } });
|
311
|
+
// if (global.window
|
312
|
+
// // eslint-disable-next-line no-underscore-dangle, no-undef
|
313
|
+
// && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
|
314
|
+
// Emitter.emit('flower-devtool-from-client', {
|
315
|
+
// source: 'flower-client',
|
316
|
+
// action: 'START_FLOWER',
|
317
|
+
// name: flowName,
|
318
|
+
// });
|
319
|
+
// }
|
340
320
|
}
|
341
|
-
|
342
|
-
|
343
|
-
// // eslint-disable-next-line no-underscore-dangle, no-undef
|
344
|
-
// && global.window.__FLOWER_DEVTOOLS__ && global.window.__FLOWER_DEVTOOLS__AUTO) {
|
345
|
-
// Emitter.emit('flower-devtool-from-client', {
|
346
|
-
// source: 'flower-client',
|
347
|
-
// action: 'START_FLOWER',
|
348
|
-
// name: flowName,
|
349
|
-
// });
|
350
|
-
// }
|
351
|
-
}
|
352
|
-
}, [dispatch, autostart, startNodeId, currentNode, flowName]);
|
353
|
-
return null;
|
321
|
+
}, [dispatch, autostart, startNodeId, currentNode, flowName]);
|
322
|
+
return null;
|
354
323
|
}
|
355
|
-
const component$7 =
|
324
|
+
const component$7 = React.memo(FlowerStart);
|
356
325
|
component$7.displayName = 'FlowerStart';
|
357
326
|
|
358
|
-
const FlowerRoute = ({
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
onExit == null || onExit();
|
373
|
-
};
|
374
|
-
}, [onEnter, onExit]);
|
375
|
-
useEffect(() => {
|
376
|
-
if (_autostart && one.current === false) {
|
377
|
-
one.current = true;
|
378
|
-
dispatch({
|
379
|
-
type: 'flower/next',
|
380
|
-
payload: {
|
381
|
-
flowName
|
327
|
+
const FlowerRoute = ({ autostart = true, children, onEnter, onExit }) => {
|
328
|
+
const dispatch = useDispatch();
|
329
|
+
const one = useRef(false);
|
330
|
+
const { flowName } = useContext(context);
|
331
|
+
useEffect(() => {
|
332
|
+
onEnter?.();
|
333
|
+
return () => {
|
334
|
+
onExit?.();
|
335
|
+
};
|
336
|
+
}, [onEnter, onExit]);
|
337
|
+
useEffect(() => {
|
338
|
+
if (autostart && one.current === false) {
|
339
|
+
one.current = true;
|
340
|
+
dispatch({ type: 'flower/next', payload: { flowName } });
|
382
341
|
}
|
383
|
-
|
384
|
-
|
385
|
-
}, [dispatch, flowName, _autostart]);
|
386
|
-
return children;
|
342
|
+
}, [dispatch, flowName, autostart]);
|
343
|
+
return children;
|
387
344
|
};
|
388
|
-
const component$6 =
|
345
|
+
const component$6 = React.memo(FlowerRoute);
|
389
346
|
component$6.displayName = 'FlowerRoute';
|
390
347
|
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
}
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
}
|
409
|
-
|
410
|
-
const FlowerRule = ({
|
411
|
-
children,
|
412
|
-
rules,
|
413
|
-
value,
|
414
|
-
alwaysDisplay,
|
415
|
-
flowName,
|
416
|
-
id,
|
417
|
-
onUpdate
|
418
|
-
}) => {
|
419
|
-
const {
|
420
|
-
flowName: flowNameContext,
|
421
|
-
currentNode
|
422
|
-
} = useContext(context);
|
423
|
-
const name = flowName || flowNameContext;
|
424
|
-
const keys = MatchRules.utils.getKeys(rules, {
|
425
|
-
prefix: name
|
426
|
-
});
|
427
|
-
const hidden = useSelector(selectorRulesDisabled(id != null ? id : '', rules, keys != null ? keys : [], name != null ? name : '', value, currentNode != null ? currentNode : ''));
|
428
|
-
useEffect(() => {
|
429
|
-
if (onUpdate) {
|
430
|
-
onUpdate(hidden);
|
348
|
+
const FlowerRule = ({ children, rules, value, alwaysDisplay, flowName, id, onUpdate }) => {
|
349
|
+
const { flowName: flowNameContext, currentNode } = useContext(context);
|
350
|
+
const name = flowName || flowNameContext;
|
351
|
+
const keys = MatchRules.utils.getKeys(rules, { prefix: name });
|
352
|
+
const hidden = useSelector(selectorRulesDisabled(id ?? '', rules, keys ?? [], name ?? '', value, currentNode ?? ''));
|
353
|
+
useEffect(() => {
|
354
|
+
if (onUpdate) {
|
355
|
+
onUpdate(hidden);
|
356
|
+
}
|
357
|
+
}, [hidden, onUpdate]);
|
358
|
+
if (typeof children === 'function') {
|
359
|
+
if (alwaysDisplay && hidden) {
|
360
|
+
return children({ hidden });
|
361
|
+
}
|
362
|
+
if (hidden) {
|
363
|
+
return undefined;
|
364
|
+
}
|
365
|
+
return children({});
|
431
366
|
}
|
432
|
-
}, [hidden, onUpdate]);
|
433
|
-
if (typeof children === 'function') {
|
434
367
|
if (alwaysDisplay && hidden) {
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
if (alwaysDisplay && hidden) {
|
445
|
-
return React.Children.map(children, (child, i) => {
|
446
|
-
if ( /*#__PURE__*/React.isValidElement(child)) {
|
447
|
-
const {
|
448
|
-
props,
|
449
|
-
type
|
450
|
-
} = child;
|
451
|
-
const Component = type;
|
452
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
453
|
-
return Component && /*#__PURE__*/React.createElement(Component, _extends({
|
454
|
-
key: i,
|
455
|
-
hidden: true
|
456
|
-
}, props));
|
457
|
-
}
|
458
|
-
return child;
|
459
|
-
});
|
460
|
-
}
|
461
|
-
return hidden ? undefined : React.Children.map(children, (child, i) => {
|
462
|
-
if ( /*#__PURE__*/React.isValidElement(child)) {
|
463
|
-
const {
|
464
|
-
props,
|
465
|
-
type
|
466
|
-
} = child;
|
467
|
-
const Component = type;
|
468
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
469
|
-
return Component && /*#__PURE__*/React.createElement(Component, _extends({
|
470
|
-
key: i
|
471
|
-
}, props));
|
368
|
+
return React.Children.map(children, (child, i) => {
|
369
|
+
if (React.isValidElement(child)) {
|
370
|
+
const { props, type } = child;
|
371
|
+
const Component = type;
|
372
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
373
|
+
return Component && React.createElement(Component, { key: i, hidden: true, ...props });
|
374
|
+
}
|
375
|
+
return child;
|
376
|
+
});
|
472
377
|
}
|
473
|
-
return
|
474
|
-
|
378
|
+
return hidden
|
379
|
+
? undefined
|
380
|
+
: React.Children.map(children, (child, i) => {
|
381
|
+
if (React.isValidElement(child)) {
|
382
|
+
const { props, type } = child;
|
383
|
+
const Component = type;
|
384
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
385
|
+
return Component && React.createElement(Component, { key: i, ...props });
|
386
|
+
}
|
387
|
+
return child;
|
388
|
+
});
|
475
389
|
};
|
476
|
-
const component$5 =
|
390
|
+
const component$5 = React.memo(FlowerRule);
|
477
391
|
component$5.displayName = 'FlowerRule';
|
478
392
|
|
479
|
-
|
393
|
+
/* eslint-disable */
|
480
394
|
function isIntrinsicElement$1(x) {
|
481
|
-
|
395
|
+
return typeof x === 'string';
|
482
396
|
}
|
483
397
|
//TODO make types for wrapper function props
|
484
|
-
function Wrapper$1(
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
502
|
-
const dispatch = useDispatch();
|
503
|
-
const [touched, setTouched] = useState();
|
504
|
-
const [customErrors, setCustomErrors] = useState(asyncValidate && [asyncInitialError]);
|
505
|
-
const [isValidating, setIsValidating] = useState(undefined);
|
506
|
-
const {
|
507
|
-
flowNameFromPath = flowName,
|
508
|
-
path
|
509
|
-
} = useMemo(() => CoreUtils.getPath(id), [id]);
|
510
|
-
const value = useSelector(getDataFromState(flowNameFromPath, path));
|
511
|
-
const errors = useSelector(makeSelectFieldError(flowName, id, validate), CoreUtils.allEqual);
|
512
|
-
const refValue = useRef();
|
513
|
-
const one = useRef();
|
514
|
-
const validateFn = useCallback(async value => {
|
515
|
-
if (asyncWaitingError) {
|
516
|
-
setCustomErrors([asyncWaitingError]);
|
517
|
-
}
|
518
|
-
setIsValidating(true);
|
519
|
-
const state = FlowerStateUtils.getAllData(store);
|
520
|
-
const res = await asyncValidate(value, state, errors);
|
521
|
-
setIsValidating(false);
|
522
|
-
setCustomErrors(res);
|
523
|
-
}, [asyncWaitingError, errors]);
|
524
|
-
const debouncedValidation = useCallback(debounce(validateFn, asyncDebounce), [validateFn]);
|
525
|
-
useEffect(() => {
|
526
|
-
if (asyncValidate) {
|
527
|
-
if (refValue.current === value) return;
|
528
|
-
refValue.current = value;
|
529
|
-
const hasValue = !MatchRules.utils.isEmpty(value);
|
530
|
-
if (!hasValue) {
|
531
|
-
setCustomErrors([asyncInitialError]);
|
398
|
+
function Wrapper$1({ Component, id, flowName, currentNode, validate, asyncDebounce = 0, asyncValidate, asyncInitialError, asyncWaitingError, destroyValue, onBlur = (val) => null, hidden, onUpdate, defaultValue, ...props }) {
|
399
|
+
const dispatch = useDispatch();
|
400
|
+
const [touched, setTouched] = useState();
|
401
|
+
const [customErrors, setCustomErrors] = useState(asyncValidate && [asyncInitialError]);
|
402
|
+
const [isValidating, setIsValidating] = useState(undefined);
|
403
|
+
const { flowNameFromPath = flowName, path } = useMemo(() => CoreUtils.getPath(id), [id]);
|
404
|
+
const value = useSelector(getDataFromState(flowNameFromPath, path));
|
405
|
+
const errors = useSelector(makeSelectFieldError(flowName, id, validate), CoreUtils.allEqual);
|
406
|
+
const refValue = useRef();
|
407
|
+
const one = useRef();
|
408
|
+
const validateFn = useCallback(async (value) => {
|
409
|
+
if (asyncWaitingError) {
|
410
|
+
setCustomErrors([asyncWaitingError]);
|
411
|
+
}
|
412
|
+
setIsValidating(true);
|
413
|
+
const state = FlowerStateUtils.getAllData(store);
|
414
|
+
const res = await asyncValidate(value, state, errors);
|
532
415
|
setIsValidating(false);
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
dispatch({
|
562
|
-
type: 'flower/formAddErrors',
|
563
|
-
payload: {
|
564
|
-
name: flowName,
|
565
|
-
id,
|
566
|
-
currentNode,
|
567
|
-
errors: allErrors
|
568
|
-
}
|
569
|
-
});
|
570
|
-
}, [id, flowName, allErrors, currentNode]);
|
571
|
-
useEffect(() => {
|
572
|
-
dispatch({
|
573
|
-
type: 'flower/setFormIsValidating',
|
574
|
-
payload: {
|
575
|
-
name: flowName,
|
576
|
-
currentNode,
|
577
|
-
isValidating
|
578
|
-
}
|
579
|
-
});
|
580
|
-
}, [flowName, currentNode, isValidating]);
|
581
|
-
useLayoutEffect(() => {
|
582
|
-
// destroy
|
583
|
-
return () => {
|
584
|
-
if (destroyValue) {
|
416
|
+
setCustomErrors(res);
|
417
|
+
}, [asyncWaitingError, errors]);
|
418
|
+
const debouncedValidation = useCallback(debounce(validateFn, asyncDebounce), [
|
419
|
+
validateFn
|
420
|
+
]);
|
421
|
+
useEffect(() => {
|
422
|
+
if (asyncValidate) {
|
423
|
+
if (refValue.current === value)
|
424
|
+
return;
|
425
|
+
refValue.current = value;
|
426
|
+
const hasValue = !MatchRules.utils.isEmpty(value);
|
427
|
+
if (!hasValue) {
|
428
|
+
setCustomErrors([asyncInitialError]);
|
429
|
+
setIsValidating(false);
|
430
|
+
return;
|
431
|
+
}
|
432
|
+
setTouched(true);
|
433
|
+
debouncedValidation(value);
|
434
|
+
}
|
435
|
+
}, [asyncValidate, asyncInitialError, value, debouncedValidation]);
|
436
|
+
const touchedForm = useSelector(makeSelectNodeFormTouched(flowName, currentNode));
|
437
|
+
const allErrors = useMemo(() => [...errors, ...(customErrors || []).filter(Boolean)], [errors, customErrors]);
|
438
|
+
useEffect(() => {
|
439
|
+
if (onUpdate) {
|
440
|
+
onUpdate(value);
|
441
|
+
}
|
442
|
+
}, [value, onUpdate]);
|
443
|
+
const onChange = useCallback((val) => {
|
585
444
|
dispatch({
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
445
|
+
type: `flower/addDataByPath`,
|
446
|
+
payload: {
|
447
|
+
flowName: flowNameFromPath,
|
448
|
+
id: path,
|
449
|
+
value: val
|
450
|
+
}
|
591
451
|
});
|
592
|
-
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
452
|
+
}, [flowNameFromPath, path, onBlur, dispatch]);
|
453
|
+
const onBlurInternal = useCallback((e) => {
|
454
|
+
setTouched(true);
|
455
|
+
onBlur && onBlur(e);
|
456
|
+
}, [onBlur]);
|
457
|
+
useLayoutEffect(() => {
|
458
|
+
dispatch({
|
459
|
+
type: 'flower/formAddErrors',
|
460
|
+
payload: {
|
461
|
+
name: flowName,
|
462
|
+
id,
|
463
|
+
currentNode,
|
464
|
+
errors: allErrors
|
465
|
+
}
|
466
|
+
});
|
467
|
+
}, [id, flowName, allErrors, currentNode]);
|
468
|
+
useEffect(() => {
|
469
|
+
dispatch({
|
470
|
+
type: 'flower/setFormIsValidating',
|
471
|
+
payload: {
|
472
|
+
name: flowName,
|
473
|
+
currentNode,
|
474
|
+
isValidating
|
475
|
+
}
|
476
|
+
});
|
477
|
+
}, [flowName, currentNode, isValidating]);
|
478
|
+
useLayoutEffect(() => {
|
479
|
+
// destroy
|
480
|
+
return () => {
|
481
|
+
if (destroyValue) {
|
482
|
+
dispatch({
|
483
|
+
type: `flower/unsetData`,
|
484
|
+
payload: { flowName: flowNameFromPath, id: path }
|
485
|
+
});
|
486
|
+
}
|
487
|
+
dispatch({
|
488
|
+
type: 'flower/formRemoveErrors',
|
489
|
+
payload: {
|
490
|
+
name: flowName,
|
491
|
+
id,
|
492
|
+
currentNode
|
493
|
+
}
|
494
|
+
});
|
495
|
+
};
|
496
|
+
}, [destroyValue]);
|
497
|
+
useEffect(() => {
|
498
|
+
if (defaultValue && !one.current) {
|
499
|
+
one.current = true;
|
500
|
+
onChange(defaultValue);
|
599
501
|
}
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
502
|
+
}, [defaultValue, onChange]);
|
503
|
+
const isTouched = touched || touchedForm;
|
504
|
+
const newProps = useMemo(() => ({
|
505
|
+
...props,
|
506
|
+
id,
|
507
|
+
value,
|
508
|
+
errors: isTouched && allErrors,
|
509
|
+
hasError: isTouched && !!allErrors.length,
|
510
|
+
onChange,
|
511
|
+
onBlur: onBlurInternal,
|
512
|
+
isTouched,
|
513
|
+
hidden,
|
514
|
+
isValidating
|
515
|
+
}), [
|
516
|
+
props,
|
517
|
+
id,
|
518
|
+
value,
|
519
|
+
allErrors,
|
520
|
+
isTouched,
|
521
|
+
onChange,
|
522
|
+
onBlurInternal,
|
523
|
+
hidden,
|
524
|
+
isValidating
|
525
|
+
]);
|
526
|
+
if (typeof Component === 'function') {
|
527
|
+
return Component(newProps);
|
528
|
+
}
|
529
|
+
// TODO si arriva in questa condizione quando si passa un componente primitivo es. div
|
530
|
+
// in questo caso non posso props custom di flower
|
531
|
+
if (isIntrinsicElement$1(Component)) {
|
532
|
+
return React.createElement(Component, { id: id, ...props });
|
607
533
|
}
|
608
|
-
|
609
|
-
const isTouched = touched || touchedForm;
|
610
|
-
const newProps = useMemo(() => _extends({}, props, {
|
611
|
-
id,
|
612
|
-
value,
|
613
|
-
errors: isTouched && allErrors,
|
614
|
-
hasError: isTouched && !!allErrors.length,
|
615
|
-
onChange,
|
616
|
-
onBlur: onBlurInternal,
|
617
|
-
isTouched,
|
618
|
-
hidden,
|
619
|
-
isValidating
|
620
|
-
}), [props, id, value, allErrors, isTouched, onChange, onBlurInternal, hidden, isValidating]);
|
621
|
-
if (typeof Component === 'function') {
|
622
|
-
return Component(newProps);
|
623
|
-
}
|
624
|
-
// TODO si arriva in questa condizione quando si passa un componente primitivo es. div
|
625
|
-
// in questo caso non posso props custom di flower
|
626
|
-
if (isIntrinsicElement$1(Component)) {
|
627
|
-
return /*#__PURE__*/React.createElement(Component, _extends({
|
628
|
-
id: id
|
629
|
-
}, props));
|
630
|
-
}
|
631
|
-
return Component && /*#__PURE__*/React.createElement(Component, _extends({}, newProps));
|
534
|
+
return Component && React.createElement(Component, { ...newProps });
|
632
535
|
}
|
633
|
-
const FlowerField = ({
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
asyncInitialError,
|
639
|
-
asyncWaitingError,
|
640
|
-
rules,
|
641
|
-
alwaysDisplay,
|
642
|
-
value,
|
643
|
-
children,
|
644
|
-
defaultValue,
|
645
|
-
destroyValue,
|
646
|
-
flowName,
|
647
|
-
onUpdate
|
648
|
-
}) => {
|
649
|
-
const {
|
650
|
-
flowName: flowNameContext,
|
651
|
-
currentNode
|
652
|
-
} = useContext(context);
|
653
|
-
const name = flowName || flowNameContext;
|
654
|
-
if (typeof children === 'function') {
|
655
|
-
return /*#__PURE__*/React.createElement(component$5, {
|
656
|
-
alwaysDisplay: alwaysDisplay,
|
657
|
-
rules: rules,
|
658
|
-
value: value,
|
659
|
-
flowName: name,
|
660
|
-
id: id
|
661
|
-
}, ({
|
662
|
-
hidden
|
663
|
-
}) => ( /*#__PURE__*/React.createElement(Wrapper$1, {
|
664
|
-
hidden: hidden,
|
665
|
-
id: id,
|
666
|
-
Component: children,
|
667
|
-
flowName: name,
|
668
|
-
currentNode: currentNode,
|
669
|
-
validate: validate,
|
670
|
-
asyncValidate: asyncValidate,
|
671
|
-
asyncDebounce: asyncDebounce,
|
672
|
-
asyncInitialError: asyncInitialError,
|
673
|
-
asyncWaitingError: asyncWaitingError,
|
674
|
-
destroyValue: destroyValue,
|
675
|
-
onUpdate: onUpdate,
|
676
|
-
defaultValue: defaultValue
|
677
|
-
})));
|
678
|
-
}
|
679
|
-
return React.Children.map(children, (child, i) => {
|
680
|
-
if (! /*#__PURE__*/React.isValidElement(child)) {
|
681
|
-
return child;
|
536
|
+
const FlowerField = ({ id, validate, asyncValidate, asyncDebounce, asyncInitialError, asyncWaitingError, rules, alwaysDisplay, value, children, defaultValue, destroyValue, flowName, onUpdate }) => {
|
537
|
+
const { flowName: flowNameContext, currentNode } = useContext(context);
|
538
|
+
const name = flowName || flowNameContext;
|
539
|
+
if (typeof children === 'function') {
|
540
|
+
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 }))));
|
682
541
|
}
|
683
|
-
|
684
|
-
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
rules: rules,
|
692
|
-
value: value,
|
693
|
-
flowName: name
|
694
|
-
}, ({
|
695
|
-
hidden
|
696
|
-
}) => ( /*#__PURE__*/React.createElement(Wrapper$1, _extends({}, props, {
|
697
|
-
hidden: hidden,
|
698
|
-
id: id,
|
699
|
-
Component: Component,
|
700
|
-
flowName: name,
|
701
|
-
currentNode: currentNode,
|
702
|
-
validate: validate,
|
703
|
-
asyncValidate: asyncValidate,
|
704
|
-
asyncDebounce: asyncDebounce,
|
705
|
-
asyncInitialError: asyncInitialError,
|
706
|
-
asyncWaitingError: asyncWaitingError,
|
707
|
-
destroyValue: destroyValue,
|
708
|
-
onUpdate: onUpdate,
|
709
|
-
defaultValue: defaultValue
|
710
|
-
}))));
|
711
|
-
});
|
542
|
+
return React.Children.map(children, (child, i) => {
|
543
|
+
if (!React.isValidElement(child)) {
|
544
|
+
return child;
|
545
|
+
}
|
546
|
+
const { type, props } = child;
|
547
|
+
const Component = type;
|
548
|
+
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 }))));
|
549
|
+
});
|
712
550
|
};
|
713
|
-
const component$4 =
|
551
|
+
const component$4 = React.memo(FlowerField);
|
714
552
|
component$4.displayName = 'FlowerField';
|
715
553
|
|
716
|
-
|
717
|
-
_excluded2 = ["id", "alwaysDisplay", "rules", "value", "Component", "spreadValue", "flowName", "onUpdate"];
|
554
|
+
/* eslint-disable */
|
718
555
|
//TODO make types for wrapper function
|
719
|
-
function Wrapper(
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
path
|
732
|
-
} = useMemo(() => CoreUtils.getPath(id), [id]);
|
733
|
-
const value = useSelector(getDataFromState(flowNameFromPath, path));
|
734
|
-
const values = spreadValue && typeof value === 'object' && !Array.isArray(value) ? value : {
|
735
|
-
value
|
736
|
-
};
|
737
|
-
useEffect(() => {
|
738
|
-
if (onUpdate) {
|
739
|
-
onUpdate(value);
|
740
|
-
}
|
741
|
-
}, [onUpdate, value]);
|
742
|
-
return /*#__PURE__*/React.createElement(Component, _extends({
|
743
|
-
id: id
|
744
|
-
}, props, {
|
745
|
-
flowName: flowName,
|
746
|
-
hidden: hidden
|
747
|
-
}, values));
|
556
|
+
function Wrapper({ Component, id, flowName, spreadValue, hidden, onUpdate, ...props }) {
|
557
|
+
const { flowNameFromPath = flowName, path } = useMemo(() => CoreUtils.getPath(id), [id]);
|
558
|
+
const value = useSelector(getDataFromState(flowNameFromPath, path));
|
559
|
+
const values = spreadValue && typeof value === 'object' && !Array.isArray(value)
|
560
|
+
? value
|
561
|
+
: { value };
|
562
|
+
useEffect(() => {
|
563
|
+
if (onUpdate) {
|
564
|
+
onUpdate(value);
|
565
|
+
}
|
566
|
+
}, [onUpdate, value]);
|
567
|
+
return (React.createElement(Component, { id: id, ...props, flowName: flowName, hidden: hidden, ...values }));
|
748
568
|
}
|
749
|
-
const RenderRules$1 =
|
750
|
-
|
751
|
-
id,
|
752
|
-
alwaysDisplay,
|
753
|
-
rules,
|
754
|
-
value,
|
755
|
-
Component,
|
756
|
-
spreadValue,
|
757
|
-
flowName,
|
758
|
-
onUpdate
|
759
|
-
} = _ref2,
|
760
|
-
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
761
|
-
return /*#__PURE__*/React.createElement(component$5, {
|
762
|
-
alwaysDisplay: alwaysDisplay,
|
763
|
-
rules: rules,
|
764
|
-
value: value,
|
765
|
-
flowName: flowName,
|
766
|
-
id: id
|
767
|
-
}, ({
|
768
|
-
hidden
|
769
|
-
}) => ( /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
|
770
|
-
hidden: hidden,
|
771
|
-
id: id,
|
772
|
-
Component: Component,
|
773
|
-
spreadValue: spreadValue,
|
774
|
-
flowName: flowName,
|
775
|
-
onUpdate: onUpdate
|
776
|
-
}))));
|
569
|
+
const RenderRules$1 = ({ id, alwaysDisplay, rules, value, Component, spreadValue, flowName, onUpdate, ...props }) => {
|
570
|
+
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 }))));
|
777
571
|
};
|
778
|
-
const FlowerValue = ({
|
779
|
-
|
780
|
-
|
781
|
-
|
782
|
-
|
783
|
-
|
784
|
-
|
785
|
-
|
786
|
-
|
787
|
-
}
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
const name = flowName || flowNameContext;
|
792
|
-
if (typeof children === 'function') {
|
793
|
-
return /*#__PURE__*/React.createElement(RenderRules$1, {
|
794
|
-
id: _id,
|
795
|
-
alwaysDisplay: alwaysDisplay,
|
796
|
-
rules: rules,
|
797
|
-
value: value,
|
798
|
-
spreadValue: spreadValue,
|
799
|
-
Component: children,
|
800
|
-
flowName: name,
|
801
|
-
onUpdate: onUpdate
|
572
|
+
const FlowerValue = ({ id = '*', rules, alwaysDisplay, value, children, spreadValue, flowName, onUpdate, }) => {
|
573
|
+
const { flowName: flowNameContext } = useContext(context);
|
574
|
+
const name = flowName || flowNameContext;
|
575
|
+
if (typeof children === 'function') {
|
576
|
+
return (React.createElement(RenderRules$1, { id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, Component: children, flowName: name, onUpdate: onUpdate }));
|
577
|
+
}
|
578
|
+
return React.Children.map(children, (child, i) => {
|
579
|
+
if (!React.isValidElement(child))
|
580
|
+
return child;
|
581
|
+
const { type, props } = child;
|
582
|
+
const Component = type;
|
583
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
584
|
+
return (React.createElement(RenderRules$1, { key: i, id: id, alwaysDisplay: alwaysDisplay, rules: rules, value: value, spreadValue: spreadValue, flowName: name, Component: Component, ...props, onUpdate: onUpdate }));
|
802
585
|
});
|
803
|
-
}
|
804
|
-
return React.Children.map(children, (child, i) => {
|
805
|
-
if (! /*#__PURE__*/React.isValidElement(child)) return child;
|
806
|
-
const {
|
807
|
-
type,
|
808
|
-
props
|
809
|
-
} = child;
|
810
|
-
const Component = type;
|
811
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
812
|
-
return /*#__PURE__*/React.createElement(RenderRules$1, _extends({
|
813
|
-
key: i,
|
814
|
-
id: _id,
|
815
|
-
alwaysDisplay: alwaysDisplay,
|
816
|
-
rules: rules,
|
817
|
-
value: value,
|
818
|
-
spreadValue: spreadValue,
|
819
|
-
flowName: name,
|
820
|
-
Component: Component
|
821
|
-
}, props, {
|
822
|
-
onUpdate: onUpdate
|
823
|
-
}));
|
824
|
-
});
|
825
586
|
};
|
826
|
-
const component$3 =
|
587
|
+
const component$3 = React.memo(FlowerValue);
|
827
588
|
component$3.displayName = 'FlowerValue';
|
828
589
|
|
829
590
|
const ACTION_TYPES = {
|
830
|
-
|
831
|
-
|
832
|
-
|
833
|
-
|
834
|
-
|
591
|
+
back: ['prev', 'prevToNode'],
|
592
|
+
jump: ['node', 'node'],
|
593
|
+
next: ['next', 'next'],
|
594
|
+
restart: ['restart', 'restart'],
|
595
|
+
reset: ['reset', 'initializeFromNode']
|
835
596
|
};
|
836
597
|
const PAYLAOAD_KEYS_NEEDED = {
|
837
|
-
|
838
|
-
|
839
|
-
|
840
|
-
|
841
|
-
|
598
|
+
back: ['node'],
|
599
|
+
jump: ['node', 'history'],
|
600
|
+
next: ['node', 'route', 'data'],
|
601
|
+
restart: ['node'],
|
602
|
+
reset: ['node', 'initialData']
|
842
603
|
};
|
843
604
|
const makeActionPayload = (actions, keys) => (flowName, params) => {
|
844
|
-
|
845
|
-
|
846
|
-
|
847
|
-
|
848
|
-
|
849
|
-
|
850
|
-
|
851
|
-
|
852
|
-
|
853
|
-
|
854
|
-
};
|
605
|
+
const rest = typeof params === 'string' ? { node: params } : params;
|
606
|
+
const payload = {
|
607
|
+
flowName: params?.flowName || flowName,
|
608
|
+
...Object.fromEntries(Object.entries(rest ?? {}).filter(([k]) => keys.includes(k)))
|
609
|
+
};
|
610
|
+
const type = !params || !payload.node ? actions[0] : actions[1];
|
611
|
+
return {
|
612
|
+
type,
|
613
|
+
payload
|
614
|
+
};
|
855
615
|
};
|
856
616
|
const makeActionPayloadOnPrev = makeActionPayload(ACTION_TYPES.back, PAYLAOAD_KEYS_NEEDED.back);
|
857
617
|
const makeActionPayloadOnReset = makeActionPayload(ACTION_TYPES.reset, PAYLAOAD_KEYS_NEEDED.reset);
|
@@ -876,124 +636,72 @@ const makeActionPayloadOnRestart = makeActionPayload(ACTION_TYPES.restart, PAYLA
|
|
876
636
|
*
|
877
637
|
* @param {string} name - optional parameter, if flowName exist, name is not used
|
878
638
|
*/
|
879
|
-
const useFlower = ({
|
880
|
-
|
881
|
-
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
|
892
|
-
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
|
899
|
-
|
639
|
+
const useFlower = ({ flowName: customFlowName, name } = {}) => {
|
640
|
+
const dispatch = useDispatch();
|
641
|
+
const { flowName: flowNameDefault, initialData } = useContext(context);
|
642
|
+
const flowName = customFlowName || name || flowNameDefault;
|
643
|
+
const nodeId = useSelector(makeSelectCurrentNodeId(flowName ?? ''));
|
644
|
+
const startId = useSelector(makeSelectStartNodeId(flowName ?? ''));
|
645
|
+
const emitNavigateEvent = useCallback(
|
646
|
+
//TODO check this function is needed
|
647
|
+
(params) => {
|
648
|
+
/* istanbul ignore next */
|
649
|
+
// eslint-disable-next-line no-underscore-dangle, no-undef
|
650
|
+
if (_get(devtoolState, '__FLOWER_DEVTOOLS__')) {
|
651
|
+
Emitter.emit('flower-devtool-from-client', {
|
652
|
+
source: 'flower-client',
|
653
|
+
action: 'FLOWER_NAVIGATE',
|
654
|
+
nodeId,
|
655
|
+
name: flowName,
|
656
|
+
time: new Date(),
|
657
|
+
params
|
658
|
+
});
|
659
|
+
}
|
660
|
+
}, [flowName, nodeId]);
|
661
|
+
const next = useCallback((param) => {
|
662
|
+
const params = typeof param === 'string' ? { route: param } : { data: param };
|
663
|
+
const { type, payload } = makeActionPayloadOnNext(flowName, params);
|
664
|
+
dispatch({
|
665
|
+
type: `flower/${type}`,
|
666
|
+
payload
|
667
|
+
});
|
668
|
+
emitNavigateEvent({ type, payload });
|
669
|
+
}, [dispatch, emitNavigateEvent, flowName]);
|
670
|
+
const back = useCallback((param) => {
|
671
|
+
const { type, payload } = makeActionPayloadOnPrev(flowName, param);
|
672
|
+
dispatch({ type: `flower/${type}`, payload });
|
673
|
+
emitNavigateEvent({ type, payload });
|
674
|
+
}, [dispatch, emitNavigateEvent, flowName]);
|
675
|
+
const restart = useCallback((param) => {
|
676
|
+
const { type, payload } = makeActionPayloadOnRestart(flowName, param);
|
677
|
+
dispatch({ type: `flower/${type}`, payload });
|
678
|
+
emitNavigateEvent({ type, payload });
|
679
|
+
}, [dispatch, emitNavigateEvent, flowName]);
|
680
|
+
const reset = useCallback((param) => {
|
681
|
+
const { type, payload } = makeActionPayloadOnReset(flowName, typeof param === 'string'
|
682
|
+
? { node: param, initialData }
|
683
|
+
: {
|
684
|
+
...param,
|
685
|
+
initialData
|
686
|
+
});
|
687
|
+
dispatch({ type: `flower/${type}`, payload });
|
688
|
+
emitNavigateEvent({ type, payload });
|
689
|
+
}, [dispatch, emitNavigateEvent, flowName, initialData]);
|
690
|
+
const jump = useCallback((param) => {
|
691
|
+
const { type, payload } = makeActionPayloadOnNode(flowName, param);
|
692
|
+
dispatch({ type: `flower/${type}`, payload });
|
693
|
+
emitNavigateEvent({ type, payload });
|
694
|
+
}, [dispatch, emitNavigateEvent, flowName]);
|
695
|
+
return {
|
696
|
+
flowName,
|
900
697
|
nodeId,
|
901
|
-
|
902
|
-
|
903
|
-
|
904
|
-
|
905
|
-
|
906
|
-
|
907
|
-
const next = useCallback(param => {
|
908
|
-
const params = typeof param === 'string' ? {
|
909
|
-
route: param
|
910
|
-
} : {
|
911
|
-
data: param
|
698
|
+
startId,
|
699
|
+
next,
|
700
|
+
jump,
|
701
|
+
back,
|
702
|
+
reset,
|
703
|
+
restart
|
912
704
|
};
|
913
|
-
const {
|
914
|
-
type,
|
915
|
-
payload
|
916
|
-
} = makeActionPayloadOnNext(flowName, params);
|
917
|
-
dispatch({
|
918
|
-
type: `flower/${type}`,
|
919
|
-
payload
|
920
|
-
});
|
921
|
-
emitNavigateEvent({
|
922
|
-
type,
|
923
|
-
payload
|
924
|
-
});
|
925
|
-
}, [dispatch, emitNavigateEvent, flowName]);
|
926
|
-
const back = useCallback(param => {
|
927
|
-
const {
|
928
|
-
type,
|
929
|
-
payload
|
930
|
-
} = makeActionPayloadOnPrev(flowName, param);
|
931
|
-
dispatch({
|
932
|
-
type: `flower/${type}`,
|
933
|
-
payload
|
934
|
-
});
|
935
|
-
emitNavigateEvent({
|
936
|
-
type,
|
937
|
-
payload
|
938
|
-
});
|
939
|
-
}, [dispatch, emitNavigateEvent, flowName]);
|
940
|
-
const restart = useCallback(param => {
|
941
|
-
const {
|
942
|
-
type,
|
943
|
-
payload
|
944
|
-
} = makeActionPayloadOnRestart(flowName, param);
|
945
|
-
dispatch({
|
946
|
-
type: `flower/${type}`,
|
947
|
-
payload
|
948
|
-
});
|
949
|
-
emitNavigateEvent({
|
950
|
-
type,
|
951
|
-
payload
|
952
|
-
});
|
953
|
-
}, [dispatch, emitNavigateEvent, flowName]);
|
954
|
-
const reset = useCallback(param => {
|
955
|
-
const {
|
956
|
-
type,
|
957
|
-
payload
|
958
|
-
} = makeActionPayloadOnReset(flowName, typeof param === 'string' ? {
|
959
|
-
node: param,
|
960
|
-
initialData
|
961
|
-
} : _extends({}, param, {
|
962
|
-
initialData
|
963
|
-
}));
|
964
|
-
dispatch({
|
965
|
-
type: `flower/${type}`,
|
966
|
-
payload
|
967
|
-
});
|
968
|
-
emitNavigateEvent({
|
969
|
-
type,
|
970
|
-
payload
|
971
|
-
});
|
972
|
-
}, [dispatch, emitNavigateEvent, flowName, initialData]);
|
973
|
-
const jump = useCallback(param => {
|
974
|
-
const {
|
975
|
-
type,
|
976
|
-
payload
|
977
|
-
} = makeActionPayloadOnNode(flowName, param);
|
978
|
-
dispatch({
|
979
|
-
type: `flower/${type}`,
|
980
|
-
payload
|
981
|
-
});
|
982
|
-
emitNavigateEvent({
|
983
|
-
type,
|
984
|
-
payload
|
985
|
-
});
|
986
|
-
}, [dispatch, emitNavigateEvent, flowName]);
|
987
|
-
return {
|
988
|
-
flowName,
|
989
|
-
nodeId,
|
990
|
-
startId,
|
991
|
-
next,
|
992
|
-
jump,
|
993
|
-
back,
|
994
|
-
reset,
|
995
|
-
restart
|
996
|
-
};
|
997
705
|
};
|
998
706
|
|
999
707
|
/* eslint-disable */
|
@@ -1018,161 +726,88 @@ const useFlower = ({
|
|
1018
726
|
// route?: undefined;
|
1019
727
|
// }
|
1020
728
|
// );
|
1021
|
-
const useFlowerNavigate = ({
|
1022
|
-
|
1023
|
-
|
1024
|
-
|
1025
|
-
|
1026
|
-
|
1027
|
-
|
1028
|
-
|
1029
|
-
|
1030
|
-
|
1031
|
-
|
1032
|
-
|
1033
|
-
|
1034
|
-
|
1035
|
-
|
1036
|
-
|
1037
|
-
|
1038
|
-
|
1039
|
-
|
1040
|
-
|
1041
|
-
|
1042
|
-
|
1043
|
-
|
1044
|
-
|
1045
|
-
|
1046
|
-
|
1047
|
-
|
1048
|
-
|
1049
|
-
|
1050
|
-
|
1051
|
-
case 'reset':
|
1052
|
-
reset(node);
|
1053
|
-
return;
|
1054
|
-
case 'restart':
|
1055
|
-
restart(node);
|
1056
|
-
return;
|
1057
|
-
default:
|
1058
|
-
next();
|
1059
|
-
return;
|
1060
|
-
}
|
1061
|
-
}, [next, jump, back, reset, restart, node, route]);
|
1062
|
-
return {
|
1063
|
-
onNavigate,
|
1064
|
-
flowName
|
1065
|
-
};
|
729
|
+
const useFlowerNavigate = ({ flowName, action, route, node }) => {
|
730
|
+
const { flowName: flowNameContext } = useContext(context);
|
731
|
+
const name = flowName || flowNameContext;
|
732
|
+
const { next, jump, back, reset, restart } = useFlower({ flowName: name });
|
733
|
+
const onNavigate = useCallback(() => {
|
734
|
+
switch (action) {
|
735
|
+
case 'next':
|
736
|
+
next(route);
|
737
|
+
return;
|
738
|
+
case 'jump':
|
739
|
+
jump(node);
|
740
|
+
return;
|
741
|
+
case 'back':
|
742
|
+
back(node);
|
743
|
+
return;
|
744
|
+
case 'reset':
|
745
|
+
reset(node);
|
746
|
+
return;
|
747
|
+
case 'restart':
|
748
|
+
restart(node);
|
749
|
+
return;
|
750
|
+
default:
|
751
|
+
next();
|
752
|
+
return;
|
753
|
+
}
|
754
|
+
}, [next, jump, back, reset, restart, node, route]);
|
755
|
+
return {
|
756
|
+
onNavigate,
|
757
|
+
flowName
|
758
|
+
};
|
1066
759
|
};
|
1067
760
|
|
1068
|
-
|
761
|
+
/* eslint-disable */
|
1069
762
|
function isIntrinsicElement(x) {
|
1070
|
-
|
763
|
+
return typeof x === 'string';
|
1071
764
|
}
|
1072
765
|
//TODO type FlowerNavigateWrapper props
|
1073
|
-
function FlowerNavigateWrapper(
|
1074
|
-
|
1075
|
-
|
1076
|
-
|
1077
|
-
|
1078
|
-
}
|
1079
|
-
|
1080
|
-
|
1081
|
-
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
|
1089
|
-
|
1090
|
-
return
|
1091
|
-
onClick: onNavigate
|
1092
|
-
}));
|
1093
|
-
}
|
1094
|
-
// TODO in questa condizione si arriva se nel progetto si utilizza Vite, in questo caso i componenti non sono Function ma Object,
|
1095
|
-
// oppure nel caso di un testo semplice come children di questo componente
|
1096
|
-
/* istanbul ignore next */
|
1097
|
-
return Component && /*#__PURE__*/React.createElement(Component, _extends({}, newProps));
|
766
|
+
function FlowerNavigateWrapper({ hidden, Component, onNavigate, ...props }) {
|
767
|
+
const newProps = useMemo(() => ({
|
768
|
+
...props,
|
769
|
+
hidden,
|
770
|
+
onClick: onNavigate,
|
771
|
+
}), [props, onNavigate]);
|
772
|
+
if (typeof Component === 'function') {
|
773
|
+
return Component(newProps);
|
774
|
+
}
|
775
|
+
// TODO si arriva in questa condizione quando si passa un componente primitivo es. div
|
776
|
+
// in questo caso non posso props custom di flower
|
777
|
+
if (isIntrinsicElement(Component)) {
|
778
|
+
return React.createElement(Component, { ...props, onClick: onNavigate });
|
779
|
+
}
|
780
|
+
// TODO in questa condizione si arriva se nel progetto si utilizza Vite, in questo caso i componenti non sono Function ma Object,
|
781
|
+
// oppure nel caso di un testo semplice come children di questo componente
|
782
|
+
/* istanbul ignore next */
|
783
|
+
return Component && React.createElement(Component, { ...newProps });
|
1098
784
|
}
|
1099
|
-
const component$2 =
|
785
|
+
const component$2 = React.memo(FlowerNavigateWrapper);
|
1100
786
|
|
1101
|
-
|
787
|
+
/* eslint-disable */
|
1102
788
|
//TODO type RenderRules props
|
1103
|
-
const RenderRules =
|
1104
|
-
|
1105
|
-
alwaysDisplay,
|
1106
|
-
rules,
|
1107
|
-
Component,
|
1108
|
-
flowName,
|
1109
|
-
onNavigate
|
1110
|
-
} = _ref,
|
1111
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
1112
|
-
return /*#__PURE__*/React.createElement(component$5, {
|
1113
|
-
alwaysDisplay: alwaysDisplay,
|
1114
|
-
rules: rules,
|
1115
|
-
flowName: flowName
|
1116
|
-
}, ({
|
1117
|
-
hidden
|
1118
|
-
}) => /*#__PURE__*/React.createElement(component$2, _extends({}, props, {
|
1119
|
-
Component: Component,
|
1120
|
-
hidden: hidden,
|
1121
|
-
onNavigate: onNavigate
|
1122
|
-
})));
|
789
|
+
const RenderRules = ({ alwaysDisplay, rules, Component, flowName, onNavigate, ...props }) => {
|
790
|
+
return (React.createElement(component$5, { alwaysDisplay: alwaysDisplay, rules: rules, flowName: flowName }, ({ hidden }) => React.createElement(component$2, { ...props, Component: Component, hidden: hidden, onNavigate: onNavigate })));
|
1123
791
|
};
|
1124
|
-
const FlowerNavigate = ({
|
1125
|
-
|
1126
|
-
|
1127
|
-
|
1128
|
-
|
1129
|
-
|
1130
|
-
|
1131
|
-
|
1132
|
-
}
|
1133
|
-
|
1134
|
-
|
1135
|
-
|
1136
|
-
} = useFlowerNavigate({
|
1137
|
-
flowName: forceFlowName,
|
1138
|
-
action,
|
1139
|
-
route,
|
1140
|
-
node
|
1141
|
-
});
|
1142
|
-
if (typeof children === 'function') {
|
1143
|
-
return /*#__PURE__*/React.createElement(RenderRules, {
|
1144
|
-
alwaysDisplay: alwaysDisplay,
|
1145
|
-
rules: rules,
|
1146
|
-
Component: children,
|
1147
|
-
flowName: flowName,
|
1148
|
-
onNavigate: onNavigate
|
792
|
+
const FlowerNavigate = ({ children, flowName: forceFlowName, action, route, node, rules, alwaysDisplay, }) => {
|
793
|
+
const { onNavigate, flowName } = useFlowerNavigate({ flowName: forceFlowName, action, route, node });
|
794
|
+
if (typeof children === 'function') {
|
795
|
+
return React.createElement(RenderRules, { alwaysDisplay: alwaysDisplay, rules: rules, Component: children, flowName: flowName, onNavigate: onNavigate });
|
796
|
+
}
|
797
|
+
return React.Children.map(children, (child, i) => {
|
798
|
+
if (!React.isValidElement(child))
|
799
|
+
return child;
|
800
|
+
const { type, props } = child;
|
801
|
+
const Component = type;
|
802
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
803
|
+
return React.createElement(RenderRules, { key: i, alwaysDisplay: alwaysDisplay, rules: rules, Component: Component, flowName: flowName, onNavigate: onNavigate, ...props });
|
1149
804
|
});
|
1150
|
-
}
|
1151
|
-
return React.Children.map(children, (child, i) => {
|
1152
|
-
if (! /*#__PURE__*/React.isValidElement(child)) return child;
|
1153
|
-
const {
|
1154
|
-
type,
|
1155
|
-
props
|
1156
|
-
} = child;
|
1157
|
-
const Component = type;
|
1158
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
1159
|
-
return /*#__PURE__*/React.createElement(RenderRules, _extends({
|
1160
|
-
key: i,
|
1161
|
-
alwaysDisplay: alwaysDisplay,
|
1162
|
-
rules: rules,
|
1163
|
-
Component: Component,
|
1164
|
-
flowName: flowName,
|
1165
|
-
onNavigate: onNavigate
|
1166
|
-
}, props));
|
1167
|
-
});
|
1168
805
|
};
|
1169
|
-
const component$1 =
|
806
|
+
const component$1 = React.memo(FlowerNavigate);
|
1170
807
|
component$1.displayName = 'FlowerNavigate';
|
1171
808
|
|
1172
|
-
const FlowerComponent = ({
|
1173
|
-
|
1174
|
-
}) => children;
|
1175
|
-
const component = /*#__PURE__*/memo(FlowerComponent);
|
809
|
+
const FlowerComponent = ({ children }) => children;
|
810
|
+
const component = memo(FlowerComponent);
|
1176
811
|
|
1177
812
|
/** This hook allows you to manage and retrieve information about Forms.
|
1178
813
|
*
|
@@ -1191,74 +826,51 @@ const component = /*#__PURE__*/memo(FlowerComponent);
|
|
1191
826
|
* @param {string} name - optional parameter, if flowName exist, name is not used
|
1192
827
|
*
|
1193
828
|
*/
|
1194
|
-
const useFlowerForm = ({
|
1195
|
-
|
1196
|
-
|
1197
|
-
|
1198
|
-
|
1199
|
-
flowName
|
1200
|
-
|
1201
|
-
|
1202
|
-
|
1203
|
-
|
1204
|
-
|
1205
|
-
|
1206
|
-
|
1207
|
-
|
1208
|
-
|
1209
|
-
|
1210
|
-
|
1211
|
-
|
1212
|
-
|
1213
|
-
|
1214
|
-
|
1215
|
-
|
1216
|
-
|
1217
|
-
|
1218
|
-
|
1219
|
-
|
1220
|
-
|
1221
|
-
|
1222
|
-
|
1223
|
-
|
1224
|
-
|
1225
|
-
|
1226
|
-
|
1227
|
-
value: val
|
1228
|
-
|
1229
|
-
|
1230
|
-
|
1231
|
-
|
1232
|
-
|
1233
|
-
|
1234
|
-
|
1235
|
-
|
1236
|
-
|
1237
|
-
|
1238
|
-
|
1239
|
-
path: newpath
|
1240
|
-
} = CoreUtils.getPath(path);
|
1241
|
-
dispatch(actions.unsetData({
|
1242
|
-
flowName: flowNameFromPath,
|
1243
|
-
id: newpath
|
1244
|
-
}));
|
1245
|
-
}, [flowName, dispatch]);
|
1246
|
-
const replaceData = useCallback(val => {
|
1247
|
-
dispatch(actions.replaceData({
|
1248
|
-
flowName,
|
1249
|
-
value: val
|
1250
|
-
}));
|
1251
|
-
}, [flowName, dispatch]);
|
1252
|
-
return {
|
1253
|
-
touched,
|
1254
|
-
errors,
|
1255
|
-
isValid,
|
1256
|
-
isValidating,
|
1257
|
-
getData,
|
1258
|
-
setData,
|
1259
|
-
unsetData,
|
1260
|
-
replaceData
|
1261
|
-
};
|
829
|
+
const useFlowerForm = ({ flowName: customFlowName, name } = {}) => {
|
830
|
+
const { flowName: flowNameDefault } = useContext(context);
|
831
|
+
const dispatch = useDispatch();
|
832
|
+
const store = useStore();
|
833
|
+
const flowName = customFlowName || name || flowNameDefault || '';
|
834
|
+
const currentNode = useSelector(makeSelectCurrentNodeId(flowName));
|
835
|
+
const { errors, isValid, touched, isValidating } = useSelector(makeSelectNodeErrors(flowName, currentNode));
|
836
|
+
const getData = useCallback((path) => {
|
837
|
+
const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
|
838
|
+
return _get(store.getState(), [
|
839
|
+
'flower',
|
840
|
+
flowNameFromPath,
|
841
|
+
'data',
|
842
|
+
...newpath
|
843
|
+
]);
|
844
|
+
}, [store, flowName]);
|
845
|
+
const setData = useCallback((val, path) => {
|
846
|
+
if (path) {
|
847
|
+
const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
|
848
|
+
dispatch(actions.addDataByPath({
|
849
|
+
flowName: flowNameFromPath,
|
850
|
+
id: Array.isArray(newpath) ? newpath : [newpath],
|
851
|
+
value: val
|
852
|
+
}));
|
853
|
+
return;
|
854
|
+
}
|
855
|
+
dispatch(actions.addData({ flowName, value: val }));
|
856
|
+
}, [flowName, dispatch]);
|
857
|
+
const unsetData = useCallback((path) => {
|
858
|
+
const { flowNameFromPath = flowName, path: newpath } = CoreUtils.getPath(path);
|
859
|
+
dispatch(actions.unsetData({ flowName: flowNameFromPath, id: newpath }));
|
860
|
+
}, [flowName, dispatch]);
|
861
|
+
const replaceData = useCallback((val) => {
|
862
|
+
dispatch(actions.replaceData({ flowName, value: val }));
|
863
|
+
}, [flowName, dispatch]);
|
864
|
+
return {
|
865
|
+
touched,
|
866
|
+
errors,
|
867
|
+
isValid,
|
868
|
+
isValidating,
|
869
|
+
getData,
|
870
|
+
setData,
|
871
|
+
unsetData,
|
872
|
+
replaceData
|
873
|
+
};
|
1262
874
|
};
|
1263
875
|
|
1264
876
|
export { component$c as Flower, component$a as FlowerAction, component as FlowerComponent, context as FlowerContext, Consumer as FlowerContextConsumer, Provider as FlowerContextProvider, component$4 as FlowerField, component$8 as FlowerFlow, component$1 as FlowerNavigate, component$b as FlowerNode, FlowerProvider, component$6 as FlowerRoute, component$5 as FlowerRule, component$9 as FlowerServer, component$7 as FlowerStart, component$3 as FlowerValue, getDataByFlow, useFlower, useFlowerForm, useSelector };
|