react-transition-state 2.0.2 → 2.1.0-alpha.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/dist/cjs/index.js +97 -186
- package/dist/es/hooks/useTransition.js +25 -49
- package/dist/es/hooks/useTransitionMap.js +55 -113
- package/dist/es/hooks/utils.js +18 -25
- package/package.json +15 -15
package/dist/cjs/index.js
CHANGED
|
@@ -4,267 +4,178 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var startOrEnd = function startOrEnd(unmounted) {
|
|
25
|
-
return unmounted ? UNMOUNTED : EXITED;
|
|
26
|
-
};
|
|
27
|
-
var getEndStatus = function getEndStatus(status, unmountOnExit) {
|
|
7
|
+
const PRE_ENTER = 0;
|
|
8
|
+
const ENTERING = 1;
|
|
9
|
+
const ENTERED = 2;
|
|
10
|
+
const PRE_EXIT = 3;
|
|
11
|
+
const EXITING = 4;
|
|
12
|
+
const EXITED = 5;
|
|
13
|
+
const UNMOUNTED = 6;
|
|
14
|
+
const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
|
|
15
|
+
const getState = status => ({
|
|
16
|
+
_status: status,
|
|
17
|
+
status: STATUS[status],
|
|
18
|
+
isEnter: status < PRE_EXIT,
|
|
19
|
+
isMounted: status !== UNMOUNTED,
|
|
20
|
+
isResolved: status === ENTERED || status > EXITING
|
|
21
|
+
});
|
|
22
|
+
const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
|
|
23
|
+
const getEndStatus = (status, unmountOnExit) => {
|
|
28
24
|
switch (status) {
|
|
29
25
|
case ENTERING:
|
|
30
26
|
case PRE_ENTER:
|
|
31
27
|
return ENTERED;
|
|
32
|
-
|
|
33
28
|
case EXITING:
|
|
34
29
|
case PRE_EXIT:
|
|
35
30
|
return startOrEnd(unmountOnExit);
|
|
36
31
|
}
|
|
37
32
|
};
|
|
38
|
-
|
|
39
|
-
return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
|
|
40
|
-
};
|
|
33
|
+
const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
|
|
41
34
|
|
|
42
|
-
|
|
35
|
+
const updateState$1 = (status, setState, latestState, timeoutId, onChange) => {
|
|
43
36
|
clearTimeout(timeoutId.current);
|
|
44
|
-
|
|
37
|
+
const state = getState(status);
|
|
45
38
|
setState(state);
|
|
46
39
|
latestState.current = state;
|
|
47
40
|
onChange && onChange({
|
|
48
41
|
current: state
|
|
49
42
|
});
|
|
50
43
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}),
|
|
69
|
-
state = _useState[0],
|
|
70
|
-
setState = _useState[1];
|
|
71
|
-
|
|
72
|
-
var latestState = react.useRef(state);
|
|
73
|
-
var timeoutId = react.useRef();
|
|
74
|
-
|
|
75
|
-
var _getTimeout = getTimeout(timeout),
|
|
76
|
-
enterTimeout = _getTimeout[0],
|
|
77
|
-
exitTimeout = _getTimeout[1];
|
|
78
|
-
|
|
79
|
-
var endTransition = react.useCallback(function () {
|
|
80
|
-
var status = getEndStatus(latestState.current._status, unmountOnExit);
|
|
44
|
+
const useTransition = ({
|
|
45
|
+
enter = true,
|
|
46
|
+
exit = true,
|
|
47
|
+
preEnter,
|
|
48
|
+
preExit,
|
|
49
|
+
timeout,
|
|
50
|
+
initialEntered,
|
|
51
|
+
mountOnEnter,
|
|
52
|
+
unmountOnExit,
|
|
53
|
+
onStateChange: onChange
|
|
54
|
+
} = {}) => {
|
|
55
|
+
const [state, setState] = react.useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
|
|
56
|
+
const latestState = react.useRef(state);
|
|
57
|
+
const timeoutId = react.useRef();
|
|
58
|
+
const [enterTimeout, exitTimeout] = getTimeout(timeout);
|
|
59
|
+
const endTransition = react.useCallback(() => {
|
|
60
|
+
const status = getEndStatus(latestState.current._status, unmountOnExit);
|
|
81
61
|
status && updateState$1(status, setState, latestState, timeoutId, onChange);
|
|
82
62
|
}, [onChange, unmountOnExit]);
|
|
83
|
-
|
|
84
|
-
|
|
63
|
+
const toggle = react.useCallback(toEnter => {
|
|
64
|
+
const transitState = status => {
|
|
85
65
|
updateState$1(status, setState, latestState, timeoutId, onChange);
|
|
86
|
-
|
|
87
66
|
switch (status) {
|
|
88
67
|
case ENTERING:
|
|
89
68
|
if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
|
|
90
69
|
break;
|
|
91
|
-
|
|
92
70
|
case EXITING:
|
|
93
71
|
if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
|
|
94
72
|
break;
|
|
95
|
-
|
|
96
73
|
case PRE_ENTER:
|
|
97
74
|
case PRE_EXIT:
|
|
98
|
-
timeoutId.current = setTimeout(
|
|
99
|
-
return transitState(status + 1);
|
|
100
|
-
}, 0);
|
|
75
|
+
timeoutId.current = setTimeout(() => transitState(status + 1), 0);
|
|
101
76
|
break;
|
|
102
77
|
}
|
|
103
78
|
};
|
|
104
|
-
|
|
105
|
-
var enterStage = latestState.current.isEnter;
|
|
79
|
+
const enterStage = latestState.current.isEnter;
|
|
106
80
|
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
107
|
-
|
|
108
81
|
if (toEnter) {
|
|
109
82
|
!enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
110
83
|
} else {
|
|
111
84
|
enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
112
85
|
}
|
|
113
86
|
}, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
114
|
-
react.useEffect(
|
|
115
|
-
return function () {
|
|
116
|
-
return clearTimeout(timeoutId.current);
|
|
117
|
-
};
|
|
118
|
-
}, []);
|
|
87
|
+
react.useEffect(() => () => clearTimeout(timeoutId.current), []);
|
|
119
88
|
return [state, toggle, endTransition];
|
|
120
89
|
};
|
|
121
90
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
var updateState = function updateState(_ref) {
|
|
126
|
-
var key = _ref.key,
|
|
127
|
-
status = _ref.status,
|
|
128
|
-
setStateMap = _ref.setStateMap,
|
|
129
|
-
latestStateMap = _ref.latestStateMap,
|
|
130
|
-
timeoutId = _ref.timeoutId,
|
|
131
|
-
onChange = _ref.onChange;
|
|
91
|
+
const initialStateMap = new Map();
|
|
92
|
+
const initialConfigMap = new Map();
|
|
93
|
+
const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
|
|
132
94
|
clearTimeout(timeoutId);
|
|
133
|
-
|
|
134
|
-
|
|
95
|
+
const state = getState(status);
|
|
96
|
+
const stateMap = new Map(latestStateMap.current);
|
|
135
97
|
stateMap.set(key, state);
|
|
136
98
|
setStateMap(stateMap);
|
|
137
99
|
latestStateMap.current = stateMap;
|
|
138
100
|
onChange && onChange({
|
|
139
|
-
key
|
|
101
|
+
key,
|
|
140
102
|
current: state
|
|
141
103
|
});
|
|
142
104
|
};
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
var _getTimeout = getTimeout(timeout),
|
|
167
|
-
enterTimeout = _getTimeout[0],
|
|
168
|
-
exitTimeout = _getTimeout[1];
|
|
169
|
-
|
|
170
|
-
var setItem = react.useCallback(function (key, config) {
|
|
171
|
-
var _ref3 = config || {},
|
|
172
|
-
_ref3$initialEntered = _ref3.initialEntered,
|
|
173
|
-
_initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
|
|
174
|
-
|
|
175
|
-
var status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
|
|
176
|
-
updateState({
|
|
177
|
-
key: key,
|
|
178
|
-
status: status,
|
|
179
|
-
setStateMap: setStateMap,
|
|
180
|
-
latestStateMap: latestStateMap
|
|
181
|
-
});
|
|
105
|
+
const useTransitionMap = ({
|
|
106
|
+
allowMultiple,
|
|
107
|
+
enter = true,
|
|
108
|
+
exit = true,
|
|
109
|
+
preEnter,
|
|
110
|
+
preExit,
|
|
111
|
+
timeout,
|
|
112
|
+
initialEntered,
|
|
113
|
+
mountOnEnter,
|
|
114
|
+
unmountOnExit,
|
|
115
|
+
onStateChange: onChange
|
|
116
|
+
} = {}) => {
|
|
117
|
+
const [stateMap, setStateMap] = react.useState(initialStateMap);
|
|
118
|
+
const latestStateMap = react.useRef(stateMap);
|
|
119
|
+
const configMap = react.useRef(initialConfigMap);
|
|
120
|
+
const [enterTimeout, exitTimeout] = getTimeout(timeout);
|
|
121
|
+
const setItem = react.useCallback((key, config) => {
|
|
122
|
+
const {
|
|
123
|
+
initialEntered: _initialEntered = initialEntered
|
|
124
|
+
} = config || {};
|
|
125
|
+
const status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
|
|
126
|
+
updateState(key, status, setStateMap, latestStateMap);
|
|
182
127
|
configMap.current.set(key, {});
|
|
183
128
|
}, [initialEntered, mountOnEnter]);
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
129
|
+
const deleteItem = react.useCallback(key => {
|
|
130
|
+
const newStateMap = new Map(latestStateMap.current);
|
|
187
131
|
if (newStateMap.delete(key)) {
|
|
188
132
|
setStateMap(newStateMap);
|
|
189
133
|
latestStateMap.current = newStateMap;
|
|
190
134
|
configMap.current.delete(key);
|
|
191
135
|
return true;
|
|
192
136
|
}
|
|
193
|
-
|
|
194
137
|
return false;
|
|
195
138
|
}, []);
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
139
|
+
const endTransition = react.useCallback(key => {
|
|
140
|
+
const stateObj = latestStateMap.current.get(key);
|
|
199
141
|
if (!stateObj) {
|
|
200
|
-
process.env.NODE_ENV !== 'production' && console.error(
|
|
142
|
+
process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
|
|
201
143
|
return;
|
|
202
144
|
}
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
status && updateState({
|
|
209
|
-
key: key,
|
|
210
|
-
status: status,
|
|
211
|
-
setStateMap: setStateMap,
|
|
212
|
-
latestStateMap: latestStateMap,
|
|
213
|
-
timeoutId: timeoutId,
|
|
214
|
-
onChange: onChange
|
|
215
|
-
});
|
|
145
|
+
const {
|
|
146
|
+
timeoutId
|
|
147
|
+
} = configMap.current.get(key);
|
|
148
|
+
const status = getEndStatus(stateObj._status, unmountOnExit);
|
|
149
|
+
status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
|
|
216
150
|
}, [onChange, unmountOnExit]);
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
151
|
+
const toggle = react.useCallback((key, toEnter) => {
|
|
152
|
+
const stateObj = latestStateMap.current.get(key);
|
|
220
153
|
if (!stateObj) {
|
|
221
|
-
process.env.NODE_ENV !== 'production' && console.error(
|
|
154
|
+
process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
|
|
222
155
|
return;
|
|
223
156
|
}
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
var transitState = function transitState(status) {
|
|
228
|
-
updateState({
|
|
229
|
-
key: key,
|
|
230
|
-
status: status,
|
|
231
|
-
setStateMap: setStateMap,
|
|
232
|
-
latestStateMap: latestStateMap,
|
|
233
|
-
timeoutId: config.timeoutId,
|
|
234
|
-
onChange: onChange
|
|
235
|
-
});
|
|
236
|
-
|
|
157
|
+
const config = configMap.current.get(key);
|
|
158
|
+
const transitState = status => {
|
|
159
|
+
updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
|
|
237
160
|
switch (status) {
|
|
238
161
|
case ENTERING:
|
|
239
|
-
if (enterTimeout >= 0) config.timeoutId = setTimeout(
|
|
240
|
-
return endTransition(key);
|
|
241
|
-
}, enterTimeout);
|
|
162
|
+
if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
|
|
242
163
|
break;
|
|
243
|
-
|
|
244
164
|
case EXITING:
|
|
245
|
-
if (exitTimeout >= 0) config.timeoutId = setTimeout(
|
|
246
|
-
return endTransition(key);
|
|
247
|
-
}, exitTimeout);
|
|
165
|
+
if (exitTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), exitTimeout);
|
|
248
166
|
break;
|
|
249
|
-
|
|
250
167
|
case PRE_ENTER:
|
|
251
168
|
case PRE_EXIT:
|
|
252
|
-
config.timeoutId = setTimeout(
|
|
253
|
-
return transitState(status + 1);
|
|
254
|
-
}, 0);
|
|
169
|
+
config.timeoutId = setTimeout(() => transitState(status + 1), 0);
|
|
255
170
|
break;
|
|
256
171
|
}
|
|
257
172
|
};
|
|
258
|
-
|
|
259
|
-
var enterStage = stateObj.isEnter;
|
|
173
|
+
const enterStage = stateObj.isEnter;
|
|
260
174
|
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
261
|
-
|
|
262
175
|
if (toEnter) {
|
|
263
176
|
if (!enterStage) {
|
|
264
177
|
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
265
|
-
!allowMultiple && latestStateMap.current.forEach(
|
|
266
|
-
return _key !== key && toggle(_key, false);
|
|
267
|
-
});
|
|
178
|
+
!allowMultiple && latestStateMap.current.forEach((_, _key) => _key !== key && toggle(_key, false));
|
|
268
179
|
}
|
|
269
180
|
} else {
|
|
270
181
|
if (enterStage) {
|
|
@@ -273,14 +184,14 @@ var useTransitionMap = function useTransitionMap(_temp) {
|
|
|
273
184
|
}
|
|
274
185
|
}, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
275
186
|
return {
|
|
276
|
-
stateMap
|
|
277
|
-
toggle
|
|
278
|
-
endTransition
|
|
279
|
-
setItem
|
|
280
|
-
deleteItem
|
|
187
|
+
stateMap,
|
|
188
|
+
toggle,
|
|
189
|
+
endTransition,
|
|
190
|
+
setItem,
|
|
191
|
+
deleteItem
|
|
281
192
|
};
|
|
282
193
|
};
|
|
283
194
|
|
|
284
|
-
exports
|
|
195
|
+
exports.default = useTransition;
|
|
285
196
|
exports.useTransition = useTransition;
|
|
286
197
|
exports.useTransitionMap = useTransitionMap;
|
|
@@ -1,83 +1,59 @@
|
|
|
1
1
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
|
-
import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus,
|
|
2
|
+
import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus, PRE_ENTER, ENTERING, PRE_EXIT, EXITING } from './utils.js';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const updateState = (status, setState, latestState, timeoutId, onChange) => {
|
|
5
5
|
clearTimeout(timeoutId.current);
|
|
6
|
-
|
|
6
|
+
const state = getState(status);
|
|
7
7
|
setState(state);
|
|
8
8
|
latestState.current = state;
|
|
9
9
|
onChange && onChange({
|
|
10
10
|
current: state
|
|
11
11
|
});
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}),
|
|
31
|
-
state = _useState[0],
|
|
32
|
-
setState = _useState[1];
|
|
33
|
-
|
|
34
|
-
var latestState = useRef(state);
|
|
35
|
-
var timeoutId = useRef();
|
|
36
|
-
|
|
37
|
-
var _getTimeout = getTimeout(timeout),
|
|
38
|
-
enterTimeout = _getTimeout[0],
|
|
39
|
-
exitTimeout = _getTimeout[1];
|
|
40
|
-
|
|
41
|
-
var endTransition = useCallback(function () {
|
|
42
|
-
var status = getEndStatus(latestState.current._status, unmountOnExit);
|
|
13
|
+
const useTransition = ({
|
|
14
|
+
enter = true,
|
|
15
|
+
exit = true,
|
|
16
|
+
preEnter,
|
|
17
|
+
preExit,
|
|
18
|
+
timeout,
|
|
19
|
+
initialEntered,
|
|
20
|
+
mountOnEnter,
|
|
21
|
+
unmountOnExit,
|
|
22
|
+
onStateChange: onChange
|
|
23
|
+
} = {}) => {
|
|
24
|
+
const [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
|
|
25
|
+
const latestState = useRef(state);
|
|
26
|
+
const timeoutId = useRef();
|
|
27
|
+
const [enterTimeout, exitTimeout] = getTimeout(timeout);
|
|
28
|
+
const endTransition = useCallback(() => {
|
|
29
|
+
const status = getEndStatus(latestState.current._status, unmountOnExit);
|
|
43
30
|
status && updateState(status, setState, latestState, timeoutId, onChange);
|
|
44
31
|
}, [onChange, unmountOnExit]);
|
|
45
|
-
|
|
46
|
-
|
|
32
|
+
const toggle = useCallback(toEnter => {
|
|
33
|
+
const transitState = status => {
|
|
47
34
|
updateState(status, setState, latestState, timeoutId, onChange);
|
|
48
|
-
|
|
49
35
|
switch (status) {
|
|
50
36
|
case ENTERING:
|
|
51
37
|
if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
|
|
52
38
|
break;
|
|
53
|
-
|
|
54
39
|
case EXITING:
|
|
55
40
|
if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
|
|
56
41
|
break;
|
|
57
|
-
|
|
58
42
|
case PRE_ENTER:
|
|
59
43
|
case PRE_EXIT:
|
|
60
|
-
timeoutId.current = setTimeout(
|
|
61
|
-
return transitState(status + 1);
|
|
62
|
-
}, 0);
|
|
44
|
+
timeoutId.current = setTimeout(() => transitState(status + 1), 0);
|
|
63
45
|
break;
|
|
64
46
|
}
|
|
65
47
|
};
|
|
66
|
-
|
|
67
|
-
var enterStage = latestState.current.isEnter;
|
|
48
|
+
const enterStage = latestState.current.isEnter;
|
|
68
49
|
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
69
|
-
|
|
70
50
|
if (toEnter) {
|
|
71
51
|
!enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
72
52
|
} else {
|
|
73
53
|
enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
74
54
|
}
|
|
75
55
|
}, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
76
|
-
useEffect(
|
|
77
|
-
return function () {
|
|
78
|
-
return clearTimeout(timeoutId.current);
|
|
79
|
-
};
|
|
80
|
-
}, []);
|
|
56
|
+
useEffect(() => () => clearTimeout(timeoutId.current), []);
|
|
81
57
|
return [state, toggle, endTransition];
|
|
82
58
|
};
|
|
83
59
|
|
|
@@ -1,152 +1,94 @@
|
|
|
1
1
|
import { useState, useRef, useCallback } from 'react';
|
|
2
|
-
import { getTimeout, ENTERED, startOrEnd, getEndStatus,
|
|
2
|
+
import { getTimeout, ENTERED, startOrEnd, getEndStatus, PRE_ENTER, ENTERING, PRE_EXIT, EXITING, getState } from './utils.js';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var updateState = function updateState(_ref) {
|
|
8
|
-
var key = _ref.key,
|
|
9
|
-
status = _ref.status,
|
|
10
|
-
setStateMap = _ref.setStateMap,
|
|
11
|
-
latestStateMap = _ref.latestStateMap,
|
|
12
|
-
timeoutId = _ref.timeoutId,
|
|
13
|
-
onChange = _ref.onChange;
|
|
4
|
+
const initialStateMap = new Map();
|
|
5
|
+
const initialConfigMap = new Map();
|
|
6
|
+
const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
|
|
14
7
|
clearTimeout(timeoutId);
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
const state = getState(status);
|
|
9
|
+
const stateMap = new Map(latestStateMap.current);
|
|
17
10
|
stateMap.set(key, state);
|
|
18
11
|
setStateMap(stateMap);
|
|
19
12
|
latestStateMap.current = stateMap;
|
|
20
13
|
onChange && onChange({
|
|
21
|
-
key
|
|
14
|
+
key,
|
|
22
15
|
current: state
|
|
23
16
|
});
|
|
24
17
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
var _getTimeout = getTimeout(timeout),
|
|
49
|
-
enterTimeout = _getTimeout[0],
|
|
50
|
-
exitTimeout = _getTimeout[1];
|
|
51
|
-
|
|
52
|
-
var setItem = useCallback(function (key, config) {
|
|
53
|
-
var _ref3 = config || {},
|
|
54
|
-
_ref3$initialEntered = _ref3.initialEntered,
|
|
55
|
-
_initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
|
|
56
|
-
|
|
57
|
-
var status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
|
|
58
|
-
updateState({
|
|
59
|
-
key: key,
|
|
60
|
-
status: status,
|
|
61
|
-
setStateMap: setStateMap,
|
|
62
|
-
latestStateMap: latestStateMap
|
|
63
|
-
});
|
|
18
|
+
const useTransitionMap = ({
|
|
19
|
+
allowMultiple,
|
|
20
|
+
enter = true,
|
|
21
|
+
exit = true,
|
|
22
|
+
preEnter,
|
|
23
|
+
preExit,
|
|
24
|
+
timeout,
|
|
25
|
+
initialEntered,
|
|
26
|
+
mountOnEnter,
|
|
27
|
+
unmountOnExit,
|
|
28
|
+
onStateChange: onChange
|
|
29
|
+
} = {}) => {
|
|
30
|
+
const [stateMap, setStateMap] = useState(initialStateMap);
|
|
31
|
+
const latestStateMap = useRef(stateMap);
|
|
32
|
+
const configMap = useRef(initialConfigMap);
|
|
33
|
+
const [enterTimeout, exitTimeout] = getTimeout(timeout);
|
|
34
|
+
const setItem = useCallback((key, config) => {
|
|
35
|
+
const {
|
|
36
|
+
initialEntered: _initialEntered = initialEntered
|
|
37
|
+
} = config || {};
|
|
38
|
+
const status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
|
|
39
|
+
updateState(key, status, setStateMap, latestStateMap);
|
|
64
40
|
configMap.current.set(key, {});
|
|
65
41
|
}, [initialEntered, mountOnEnter]);
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
42
|
+
const deleteItem = useCallback(key => {
|
|
43
|
+
const newStateMap = new Map(latestStateMap.current);
|
|
69
44
|
if (newStateMap.delete(key)) {
|
|
70
45
|
setStateMap(newStateMap);
|
|
71
46
|
latestStateMap.current = newStateMap;
|
|
72
47
|
configMap.current.delete(key);
|
|
73
48
|
return true;
|
|
74
49
|
}
|
|
75
|
-
|
|
76
50
|
return false;
|
|
77
51
|
}, []);
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
52
|
+
const endTransition = useCallback(key => {
|
|
53
|
+
const stateObj = latestStateMap.current.get(key);
|
|
81
54
|
if (!stateObj) {
|
|
82
|
-
process.env.NODE_ENV !== 'production' && console.error(
|
|
55
|
+
process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
|
|
83
56
|
return;
|
|
84
57
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
status && updateState({
|
|
91
|
-
key: key,
|
|
92
|
-
status: status,
|
|
93
|
-
setStateMap: setStateMap,
|
|
94
|
-
latestStateMap: latestStateMap,
|
|
95
|
-
timeoutId: timeoutId,
|
|
96
|
-
onChange: onChange
|
|
97
|
-
});
|
|
58
|
+
const {
|
|
59
|
+
timeoutId
|
|
60
|
+
} = configMap.current.get(key);
|
|
61
|
+
const status = getEndStatus(stateObj._status, unmountOnExit);
|
|
62
|
+
status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
|
|
98
63
|
}, [onChange, unmountOnExit]);
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
64
|
+
const toggle = useCallback((key, toEnter) => {
|
|
65
|
+
const stateObj = latestStateMap.current.get(key);
|
|
102
66
|
if (!stateObj) {
|
|
103
|
-
process.env.NODE_ENV !== 'production' && console.error(
|
|
67
|
+
process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
|
|
104
68
|
return;
|
|
105
69
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
var transitState = function transitState(status) {
|
|
110
|
-
updateState({
|
|
111
|
-
key: key,
|
|
112
|
-
status: status,
|
|
113
|
-
setStateMap: setStateMap,
|
|
114
|
-
latestStateMap: latestStateMap,
|
|
115
|
-
timeoutId: config.timeoutId,
|
|
116
|
-
onChange: onChange
|
|
117
|
-
});
|
|
118
|
-
|
|
70
|
+
const config = configMap.current.get(key);
|
|
71
|
+
const transitState = status => {
|
|
72
|
+
updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
|
|
119
73
|
switch (status) {
|
|
120
74
|
case ENTERING:
|
|
121
|
-
if (enterTimeout >= 0) config.timeoutId = setTimeout(
|
|
122
|
-
return endTransition(key);
|
|
123
|
-
}, enterTimeout);
|
|
75
|
+
if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
|
|
124
76
|
break;
|
|
125
|
-
|
|
126
77
|
case EXITING:
|
|
127
|
-
if (exitTimeout >= 0) config.timeoutId = setTimeout(
|
|
128
|
-
return endTransition(key);
|
|
129
|
-
}, exitTimeout);
|
|
78
|
+
if (exitTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), exitTimeout);
|
|
130
79
|
break;
|
|
131
|
-
|
|
132
80
|
case PRE_ENTER:
|
|
133
81
|
case PRE_EXIT:
|
|
134
|
-
config.timeoutId = setTimeout(
|
|
135
|
-
return transitState(status + 1);
|
|
136
|
-
}, 0);
|
|
82
|
+
config.timeoutId = setTimeout(() => transitState(status + 1), 0);
|
|
137
83
|
break;
|
|
138
84
|
}
|
|
139
85
|
};
|
|
140
|
-
|
|
141
|
-
var enterStage = stateObj.isEnter;
|
|
86
|
+
const enterStage = stateObj.isEnter;
|
|
142
87
|
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
143
|
-
|
|
144
88
|
if (toEnter) {
|
|
145
89
|
if (!enterStage) {
|
|
146
90
|
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
147
|
-
!allowMultiple && latestStateMap.current.forEach(
|
|
148
|
-
return _key !== key && toggle(_key, false);
|
|
149
|
-
});
|
|
91
|
+
!allowMultiple && latestStateMap.current.forEach((_, _key) => _key !== key && toggle(_key, false));
|
|
150
92
|
}
|
|
151
93
|
} else {
|
|
152
94
|
if (enterStage) {
|
|
@@ -155,11 +97,11 @@ var useTransitionMap = function useTransitionMap(_temp) {
|
|
|
155
97
|
}
|
|
156
98
|
}, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
157
99
|
return {
|
|
158
|
-
stateMap
|
|
159
|
-
toggle
|
|
160
|
-
endTransition
|
|
161
|
-
setItem
|
|
162
|
-
deleteItem
|
|
100
|
+
stateMap,
|
|
101
|
+
toggle,
|
|
102
|
+
endTransition,
|
|
103
|
+
setItem,
|
|
104
|
+
deleteItem
|
|
163
105
|
};
|
|
164
106
|
};
|
|
165
107
|
|
package/dist/es/hooks/utils.js
CHANGED
|
@@ -1,36 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
var startOrEnd = function startOrEnd(unmounted) {
|
|
19
|
-
return unmounted ? UNMOUNTED : EXITED;
|
|
20
|
-
};
|
|
21
|
-
var getEndStatus = function getEndStatus(status, unmountOnExit) {
|
|
1
|
+
const PRE_ENTER = 0;
|
|
2
|
+
const ENTERING = 1;
|
|
3
|
+
const ENTERED = 2;
|
|
4
|
+
const PRE_EXIT = 3;
|
|
5
|
+
const EXITING = 4;
|
|
6
|
+
const EXITED = 5;
|
|
7
|
+
const UNMOUNTED = 6;
|
|
8
|
+
const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
|
|
9
|
+
const getState = status => ({
|
|
10
|
+
_status: status,
|
|
11
|
+
status: STATUS[status],
|
|
12
|
+
isEnter: status < PRE_EXIT,
|
|
13
|
+
isMounted: status !== UNMOUNTED,
|
|
14
|
+
isResolved: status === ENTERED || status > EXITING
|
|
15
|
+
});
|
|
16
|
+
const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
|
|
17
|
+
const getEndStatus = (status, unmountOnExit) => {
|
|
22
18
|
switch (status) {
|
|
23
19
|
case ENTERING:
|
|
24
20
|
case PRE_ENTER:
|
|
25
21
|
return ENTERED;
|
|
26
|
-
|
|
27
22
|
case EXITING:
|
|
28
23
|
case PRE_EXIT:
|
|
29
24
|
return startOrEnd(unmountOnExit);
|
|
30
25
|
}
|
|
31
26
|
};
|
|
32
|
-
|
|
33
|
-
return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
|
|
34
|
-
};
|
|
27
|
+
const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
|
|
35
28
|
|
|
36
29
|
export { ENTERED, ENTERING, EXITED, EXITING, PRE_ENTER, PRE_EXIT, STATUS, UNMOUNTED, getEndStatus, getState, getTimeout, startOrEnd };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-transition-state",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.1.0-alpha.1",
|
|
4
4
|
"description": "Zero dependency React transition state machine.",
|
|
5
5
|
"author": "Zheng Song",
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,25 +41,25 @@
|
|
|
41
41
|
"react-dom": ">=16.8.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@babel/core": "^7.
|
|
45
|
-
"@babel/preset-env": "^7.
|
|
46
|
-
"@rollup/plugin-babel": "^
|
|
47
|
-
"@testing-library/react": "^13.
|
|
48
|
-
"@types/jest": "^29.
|
|
44
|
+
"@babel/core": "^7.20.12",
|
|
45
|
+
"@babel/preset-env": "^7.20.2",
|
|
46
|
+
"@rollup/plugin-babel": "^6.0.3",
|
|
47
|
+
"@testing-library/react": "^13.4.0",
|
|
48
|
+
"@types/jest": "^29.4.0",
|
|
49
49
|
"babel-plugin-pure-annotations": "^0.1.2",
|
|
50
50
|
"dtslint": "^4.1.6",
|
|
51
|
-
"eslint": "^8.
|
|
52
|
-
"eslint-config-prettier": "^8.
|
|
53
|
-
"eslint-plugin-jest": "^
|
|
51
|
+
"eslint": "^8.33.0",
|
|
52
|
+
"eslint-config-prettier": "^8.6.0",
|
|
53
|
+
"eslint-plugin-jest": "^27.2.1",
|
|
54
54
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
55
|
-
"jest": "^29.
|
|
56
|
-
"jest-environment-jsdom": "^29.
|
|
55
|
+
"jest": "^29.4.1",
|
|
56
|
+
"jest-environment-jsdom": "^29.4.1",
|
|
57
57
|
"npm-run-all": "^4.1.5",
|
|
58
|
-
"prettier": "^2.
|
|
58
|
+
"prettier": "^2.8.3",
|
|
59
59
|
"react": "^18.2.0",
|
|
60
60
|
"react-dom": "^18.2.0",
|
|
61
|
-
"regenerator-runtime": "^0.13.
|
|
62
|
-
"rollup": "^
|
|
63
|
-
"typescript": "^4.
|
|
61
|
+
"regenerator-runtime": "^0.13.11",
|
|
62
|
+
"rollup": "^3.14.0",
|
|
63
|
+
"typescript": "^4.9.5"
|
|
64
64
|
}
|
|
65
65
|
}
|