react-transition-state 1.2.0-alpha.0 → 1.2.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{index.js → cjs/index.js} +70 -31
- package/dist/es/_virtual/_rollupPluginBabelHelpers.js +19 -0
- package/dist/es/hooks/useTransition.js +85 -0
- package/dist/es/hooks/useTransitionMap.js +169 -0
- package/dist/es/hooks/utils.js +35 -0
- package/dist/es/index.js +2 -0
- package/package.json +9 -8
- package/types/index.d.ts +50 -0
- package/dist/index.d.ts +0 -26
- package/dist/index.es.js +0 -261
|
@@ -12,6 +12,14 @@ var EXITING = 4;
|
|
|
12
12
|
var EXITED = 5;
|
|
13
13
|
var UNMOUNTED = 6;
|
|
14
14
|
var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
|
|
15
|
+
var getFullState = function getFullState(_state) {
|
|
16
|
+
return {
|
|
17
|
+
_state: _state,
|
|
18
|
+
state: STATES[_state],
|
|
19
|
+
isEnter: _state < PRE_EXIT,
|
|
20
|
+
isMounted: _state !== UNMOUNTED
|
|
21
|
+
};
|
|
22
|
+
};
|
|
15
23
|
var startOrEnd = function startOrEnd(unmounted) {
|
|
16
24
|
return unmounted ? UNMOUNTED : EXITED;
|
|
17
25
|
};
|
|
@@ -111,72 +119,100 @@ var useTransition = function useTransition(_temp) {
|
|
|
111
119
|
return [STATES[state], toggle, endTransition];
|
|
112
120
|
};
|
|
113
121
|
|
|
122
|
+
function _extends() {
|
|
123
|
+
_extends = Object.assign || function (target) {
|
|
124
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
125
|
+
var source = arguments[i];
|
|
126
|
+
|
|
127
|
+
for (var key in source) {
|
|
128
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
129
|
+
target[key] = source[key];
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
return target;
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
return _extends.apply(this, arguments);
|
|
138
|
+
}
|
|
139
|
+
|
|
114
140
|
var initialStateMap = new Map();
|
|
115
141
|
var initialConfigMap = new Map();
|
|
116
142
|
|
|
117
143
|
var updateState = function updateState(_ref) {
|
|
118
|
-
var
|
|
144
|
+
var key = _ref.key,
|
|
119
145
|
_state = _ref.newState,
|
|
120
146
|
setStateMap = _ref.setStateMap,
|
|
121
147
|
latestStateMap = _ref.latestStateMap,
|
|
122
148
|
timeoutId = _ref.timeoutId,
|
|
123
149
|
onChange = _ref.onChange;
|
|
124
150
|
clearTimeout(timeoutId);
|
|
125
|
-
var state =
|
|
126
|
-
state: STATES[_state],
|
|
127
|
-
_state: _state
|
|
128
|
-
};
|
|
151
|
+
var state = getFullState(_state);
|
|
129
152
|
var stateMap = new Map(latestStateMap.current);
|
|
130
|
-
stateMap.set(
|
|
153
|
+
stateMap.set(key, state);
|
|
131
154
|
setStateMap(stateMap);
|
|
132
155
|
latestStateMap.current = stateMap;
|
|
133
|
-
onChange && onChange(
|
|
156
|
+
onChange && onChange(_extends({
|
|
157
|
+
key: key
|
|
158
|
+
}, state));
|
|
134
159
|
};
|
|
135
160
|
|
|
136
|
-
var useTransitionMap = function useTransitionMap() {
|
|
161
|
+
var useTransitionMap = function useTransitionMap(_temp) {
|
|
162
|
+
var _ref2 = _temp === void 0 ? {} : _temp,
|
|
163
|
+
singleEnter = _ref2.singleEnter;
|
|
164
|
+
|
|
137
165
|
var _useState = react.useState(initialStateMap),
|
|
138
166
|
stateMap = _useState[0],
|
|
139
167
|
setStateMap = _useState[1];
|
|
140
168
|
|
|
141
169
|
var latestStateMap = react.useRef(stateMap);
|
|
142
170
|
var configMap = react.useRef(initialConfigMap);
|
|
143
|
-
var
|
|
144
|
-
|
|
145
|
-
|
|
171
|
+
var setItem = react.useCallback(function (key, config) {
|
|
172
|
+
if (config === void 0) {
|
|
173
|
+
config = {};
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
var _config = config,
|
|
177
|
+
initialEntered = _config.initialEntered,
|
|
178
|
+
mountOnEnter = _config.mountOnEnter;
|
|
146
179
|
var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
|
|
147
180
|
updateState({
|
|
148
|
-
|
|
181
|
+
key: key,
|
|
149
182
|
newState: newState,
|
|
150
183
|
setStateMap: setStateMap,
|
|
151
184
|
latestStateMap: latestStateMap
|
|
152
185
|
});
|
|
153
|
-
configMap.current.set(
|
|
186
|
+
configMap.current.set(key, _extends({}, config));
|
|
154
187
|
}, []);
|
|
155
|
-
var
|
|
188
|
+
var deleteItem = react.useCallback(function (key) {
|
|
156
189
|
var newStateMap = new Map(latestStateMap.current);
|
|
157
190
|
|
|
158
|
-
if (newStateMap.delete(
|
|
191
|
+
if (newStateMap.delete(key)) {
|
|
159
192
|
setStateMap(newStateMap);
|
|
160
193
|
latestStateMap.current = newStateMap;
|
|
161
|
-
configMap.current.delete(
|
|
194
|
+
configMap.current.delete(key);
|
|
195
|
+
return true;
|
|
162
196
|
}
|
|
197
|
+
|
|
198
|
+
return false;
|
|
163
199
|
}, []);
|
|
164
|
-
var endTransition = react.useCallback(function (
|
|
165
|
-
var stateObj = latestStateMap.current.get(
|
|
200
|
+
var endTransition = react.useCallback(function (key) {
|
|
201
|
+
var stateObj = latestStateMap.current.get(key);
|
|
166
202
|
|
|
167
203
|
if (!stateObj) {
|
|
168
|
-
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid
|
|
204
|
+
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
|
|
169
205
|
return;
|
|
170
206
|
}
|
|
171
207
|
|
|
172
|
-
var _configMap$current$ge = configMap.current.get(
|
|
208
|
+
var _configMap$current$ge = configMap.current.get(key),
|
|
173
209
|
timeoutId = _configMap$current$ge.timeoutId,
|
|
174
210
|
onChange = _configMap$current$ge.onChange,
|
|
175
211
|
unmountOnExit = _configMap$current$ge.unmountOnExit;
|
|
176
212
|
|
|
177
213
|
var newState = getEndState(stateObj._state, unmountOnExit);
|
|
178
214
|
newState && updateState({
|
|
179
|
-
|
|
215
|
+
key: key,
|
|
180
216
|
newState: newState,
|
|
181
217
|
setStateMap: setStateMap,
|
|
182
218
|
latestStateMap: latestStateMap,
|
|
@@ -184,15 +220,15 @@ var useTransitionMap = function useTransitionMap() {
|
|
|
184
220
|
onChange: onChange
|
|
185
221
|
});
|
|
186
222
|
}, []);
|
|
187
|
-
var toggle = react.useCallback(function (
|
|
188
|
-
var stateObj = latestStateMap.current.get(
|
|
223
|
+
var toggle = react.useCallback(function (key, toEnter) {
|
|
224
|
+
var stateObj = latestStateMap.current.get(key);
|
|
189
225
|
|
|
190
226
|
if (!stateObj) {
|
|
191
|
-
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid
|
|
227
|
+
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
|
|
192
228
|
return;
|
|
193
229
|
}
|
|
194
230
|
|
|
195
|
-
var config = configMap.current.get(
|
|
231
|
+
var config = configMap.current.get(key);
|
|
196
232
|
var _config$enter = config.enter,
|
|
197
233
|
enter = _config$enter === void 0 ? true : _config$enter,
|
|
198
234
|
_config$exit = config.exit,
|
|
@@ -206,7 +242,7 @@ var useTransitionMap = function useTransitionMap() {
|
|
|
206
242
|
|
|
207
243
|
var transitState = function transitState(newState) {
|
|
208
244
|
updateState({
|
|
209
|
-
|
|
245
|
+
key: key,
|
|
210
246
|
newState: newState,
|
|
211
247
|
setStateMap: setStateMap,
|
|
212
248
|
latestStateMap: latestStateMap,
|
|
@@ -221,13 +257,13 @@ var useTransitionMap = function useTransitionMap() {
|
|
|
221
257
|
switch (newState) {
|
|
222
258
|
case ENTERING:
|
|
223
259
|
if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
|
|
224
|
-
return endTransition(
|
|
260
|
+
return endTransition(key);
|
|
225
261
|
}, enterTimeout);
|
|
226
262
|
break;
|
|
227
263
|
|
|
228
264
|
case EXITING:
|
|
229
265
|
if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
|
|
230
|
-
return endTransition(
|
|
266
|
+
return endTransition(key);
|
|
231
267
|
}, exitTimeout);
|
|
232
268
|
break;
|
|
233
269
|
|
|
@@ -246,19 +282,22 @@ var useTransitionMap = function useTransitionMap() {
|
|
|
246
282
|
if (toEnter) {
|
|
247
283
|
if (!enterStage) {
|
|
248
284
|
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
285
|
+
singleEnter && latestStateMap.current.forEach(function (_, _key) {
|
|
286
|
+
return _key !== key && toggle(_key, false);
|
|
287
|
+
});
|
|
249
288
|
}
|
|
250
289
|
} else {
|
|
251
290
|
if (enterStage) {
|
|
252
291
|
transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
253
292
|
}
|
|
254
293
|
}
|
|
255
|
-
}, [endTransition]);
|
|
294
|
+
}, [endTransition, singleEnter]);
|
|
256
295
|
return {
|
|
257
296
|
stateMap: stateMap,
|
|
258
297
|
toggle: toggle,
|
|
259
298
|
endTransition: endTransition,
|
|
260
|
-
|
|
261
|
-
|
|
299
|
+
setItem: setItem,
|
|
300
|
+
deleteItem: deleteItem
|
|
262
301
|
};
|
|
263
302
|
};
|
|
264
303
|
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function _extends() {
|
|
2
|
+
_extends = Object.assign || function (target) {
|
|
3
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
4
|
+
var source = arguments[i];
|
|
5
|
+
|
|
6
|
+
for (var key in source) {
|
|
7
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
8
|
+
target[key] = source[key];
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return target;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
return _extends.apply(this, arguments);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { _extends as extends };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
|
+
import { ENTERED, startOrEnd, getTimeout, getEndState, PRE_EXIT, EXITING, STATES, PRE_ENTER, ENTERING } from './utils.js';
|
|
3
|
+
|
|
4
|
+
var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
|
|
5
|
+
clearTimeout(timeoutId.current);
|
|
6
|
+
setState(state);
|
|
7
|
+
latestState.current = state;
|
|
8
|
+
onChange && onChange({
|
|
9
|
+
state: STATES[state]
|
|
10
|
+
});
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
var useTransition = function useTransition(_temp) {
|
|
14
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
15
|
+
_ref$enter = _ref.enter,
|
|
16
|
+
enter = _ref$enter === void 0 ? true : _ref$enter,
|
|
17
|
+
_ref$exit = _ref.exit,
|
|
18
|
+
exit = _ref$exit === void 0 ? true : _ref$exit,
|
|
19
|
+
preEnter = _ref.preEnter,
|
|
20
|
+
preExit = _ref.preExit,
|
|
21
|
+
timeout = _ref.timeout,
|
|
22
|
+
initialEntered = _ref.initialEntered,
|
|
23
|
+
mountOnEnter = _ref.mountOnEnter,
|
|
24
|
+
unmountOnExit = _ref.unmountOnExit,
|
|
25
|
+
onChange = _ref.onChange;
|
|
26
|
+
|
|
27
|
+
var _useState = useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
|
|
28
|
+
state = _useState[0],
|
|
29
|
+
setState = _useState[1];
|
|
30
|
+
|
|
31
|
+
var latestState = useRef(state);
|
|
32
|
+
var timeoutId = useRef();
|
|
33
|
+
|
|
34
|
+
var _getTimeout = getTimeout(timeout),
|
|
35
|
+
enterTimeout = _getTimeout[0],
|
|
36
|
+
exitTimeout = _getTimeout[1];
|
|
37
|
+
|
|
38
|
+
var endTransition = useCallback(function () {
|
|
39
|
+
var newState = getEndState(latestState.current, unmountOnExit);
|
|
40
|
+
newState && updateState(newState, setState, latestState, timeoutId, onChange);
|
|
41
|
+
}, [onChange, unmountOnExit]);
|
|
42
|
+
var toggle = useCallback(function (toEnter) {
|
|
43
|
+
var transitState = function transitState(newState) {
|
|
44
|
+
updateState(newState, setState, latestState, timeoutId, onChange);
|
|
45
|
+
|
|
46
|
+
switch (newState) {
|
|
47
|
+
case ENTERING:
|
|
48
|
+
if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
|
|
49
|
+
break;
|
|
50
|
+
|
|
51
|
+
case EXITING:
|
|
52
|
+
if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
|
|
53
|
+
break;
|
|
54
|
+
|
|
55
|
+
case PRE_ENTER:
|
|
56
|
+
case PRE_EXIT:
|
|
57
|
+
timeoutId.current = setTimeout(function () {
|
|
58
|
+
return transitState(newState + 1);
|
|
59
|
+
}, 0);
|
|
60
|
+
break;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
var enterStage = latestState.current <= ENTERED;
|
|
65
|
+
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
66
|
+
|
|
67
|
+
if (toEnter) {
|
|
68
|
+
if (!enterStage) {
|
|
69
|
+
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
70
|
+
}
|
|
71
|
+
} else {
|
|
72
|
+
if (enterStage) {
|
|
73
|
+
transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
77
|
+
useEffect(function () {
|
|
78
|
+
return function () {
|
|
79
|
+
return clearTimeout(timeoutId.current);
|
|
80
|
+
};
|
|
81
|
+
}, []);
|
|
82
|
+
return [STATES[state], toggle, endTransition];
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export { useTransition };
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
import { useState, useRef, useCallback } from 'react';
|
|
3
|
+
import { ENTERED, startOrEnd, getEndState, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, getFullState, getTimeout } from './utils.js';
|
|
4
|
+
|
|
5
|
+
var initialStateMap = new Map();
|
|
6
|
+
var initialConfigMap = new Map();
|
|
7
|
+
|
|
8
|
+
var updateState = function updateState(_ref) {
|
|
9
|
+
var key = _ref.key,
|
|
10
|
+
_state = _ref.newState,
|
|
11
|
+
setStateMap = _ref.setStateMap,
|
|
12
|
+
latestStateMap = _ref.latestStateMap,
|
|
13
|
+
timeoutId = _ref.timeoutId,
|
|
14
|
+
onChange = _ref.onChange;
|
|
15
|
+
clearTimeout(timeoutId);
|
|
16
|
+
var state = getFullState(_state);
|
|
17
|
+
var stateMap = new Map(latestStateMap.current);
|
|
18
|
+
stateMap.set(key, state);
|
|
19
|
+
setStateMap(stateMap);
|
|
20
|
+
latestStateMap.current = stateMap;
|
|
21
|
+
onChange && onChange(_extends({
|
|
22
|
+
key: key
|
|
23
|
+
}, state));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var useTransitionMap = function useTransitionMap(_temp) {
|
|
27
|
+
var _ref2 = _temp === void 0 ? {} : _temp,
|
|
28
|
+
singleEnter = _ref2.singleEnter;
|
|
29
|
+
|
|
30
|
+
var _useState = useState(initialStateMap),
|
|
31
|
+
stateMap = _useState[0],
|
|
32
|
+
setStateMap = _useState[1];
|
|
33
|
+
|
|
34
|
+
var latestStateMap = useRef(stateMap);
|
|
35
|
+
var configMap = useRef(initialConfigMap);
|
|
36
|
+
var setItem = useCallback(function (key, config) {
|
|
37
|
+
if (config === void 0) {
|
|
38
|
+
config = {};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
var _config = config,
|
|
42
|
+
initialEntered = _config.initialEntered,
|
|
43
|
+
mountOnEnter = _config.mountOnEnter;
|
|
44
|
+
var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
|
|
45
|
+
updateState({
|
|
46
|
+
key: key,
|
|
47
|
+
newState: newState,
|
|
48
|
+
setStateMap: setStateMap,
|
|
49
|
+
latestStateMap: latestStateMap
|
|
50
|
+
});
|
|
51
|
+
configMap.current.set(key, _extends({}, config));
|
|
52
|
+
}, []);
|
|
53
|
+
var deleteItem = useCallback(function (key) {
|
|
54
|
+
var newStateMap = new Map(latestStateMap.current);
|
|
55
|
+
|
|
56
|
+
if (newStateMap.delete(key)) {
|
|
57
|
+
setStateMap(newStateMap);
|
|
58
|
+
latestStateMap.current = newStateMap;
|
|
59
|
+
configMap.current.delete(key);
|
|
60
|
+
return true;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return false;
|
|
64
|
+
}, []);
|
|
65
|
+
var endTransition = useCallback(function (key) {
|
|
66
|
+
var stateObj = latestStateMap.current.get(key);
|
|
67
|
+
|
|
68
|
+
if (!stateObj) {
|
|
69
|
+
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
var _configMap$current$ge = configMap.current.get(key),
|
|
74
|
+
timeoutId = _configMap$current$ge.timeoutId,
|
|
75
|
+
onChange = _configMap$current$ge.onChange,
|
|
76
|
+
unmountOnExit = _configMap$current$ge.unmountOnExit;
|
|
77
|
+
|
|
78
|
+
var newState = getEndState(stateObj._state, unmountOnExit);
|
|
79
|
+
newState && updateState({
|
|
80
|
+
key: key,
|
|
81
|
+
newState: newState,
|
|
82
|
+
setStateMap: setStateMap,
|
|
83
|
+
latestStateMap: latestStateMap,
|
|
84
|
+
timeoutId: timeoutId,
|
|
85
|
+
onChange: onChange
|
|
86
|
+
});
|
|
87
|
+
}, []);
|
|
88
|
+
var toggle = useCallback(function (key, toEnter) {
|
|
89
|
+
var stateObj = latestStateMap.current.get(key);
|
|
90
|
+
|
|
91
|
+
if (!stateObj) {
|
|
92
|
+
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
var config = configMap.current.get(key);
|
|
97
|
+
var _config$enter = config.enter,
|
|
98
|
+
enter = _config$enter === void 0 ? true : _config$enter,
|
|
99
|
+
_config$exit = config.exit,
|
|
100
|
+
exit = _config$exit === void 0 ? true : _config$exit,
|
|
101
|
+
preEnter = config.preEnter,
|
|
102
|
+
preExit = config.preExit,
|
|
103
|
+
timeout = config.timeout,
|
|
104
|
+
unmountOnExit = config.unmountOnExit,
|
|
105
|
+
onChange = config.onChange,
|
|
106
|
+
timeoutId = config.timeoutId;
|
|
107
|
+
|
|
108
|
+
var transitState = function transitState(newState) {
|
|
109
|
+
updateState({
|
|
110
|
+
key: key,
|
|
111
|
+
newState: newState,
|
|
112
|
+
setStateMap: setStateMap,
|
|
113
|
+
latestStateMap: latestStateMap,
|
|
114
|
+
timeoutId: timeoutId,
|
|
115
|
+
onChange: onChange
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
var _getTimeout = getTimeout(timeout),
|
|
119
|
+
enterTimeout = _getTimeout[0],
|
|
120
|
+
exitTimeout = _getTimeout[1];
|
|
121
|
+
|
|
122
|
+
switch (newState) {
|
|
123
|
+
case ENTERING:
|
|
124
|
+
if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
|
|
125
|
+
return endTransition(key);
|
|
126
|
+
}, enterTimeout);
|
|
127
|
+
break;
|
|
128
|
+
|
|
129
|
+
case EXITING:
|
|
130
|
+
if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
|
|
131
|
+
return endTransition(key);
|
|
132
|
+
}, exitTimeout);
|
|
133
|
+
break;
|
|
134
|
+
|
|
135
|
+
case PRE_ENTER:
|
|
136
|
+
case PRE_EXIT:
|
|
137
|
+
config.timeoutId = setTimeout(function () {
|
|
138
|
+
return transitState(newState + 1);
|
|
139
|
+
}, 0);
|
|
140
|
+
break;
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
var enterStage = stateObj._state <= ENTERED;
|
|
145
|
+
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
146
|
+
|
|
147
|
+
if (toEnter) {
|
|
148
|
+
if (!enterStage) {
|
|
149
|
+
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
150
|
+
singleEnter && latestStateMap.current.forEach(function (_, _key) {
|
|
151
|
+
return _key !== key && toggle(_key, false);
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
} else {
|
|
155
|
+
if (enterStage) {
|
|
156
|
+
transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}, [endTransition, singleEnter]);
|
|
160
|
+
return {
|
|
161
|
+
stateMap: stateMap,
|
|
162
|
+
toggle: toggle,
|
|
163
|
+
endTransition: endTransition,
|
|
164
|
+
setItem: setItem,
|
|
165
|
+
deleteItem: deleteItem
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
export { useTransitionMap };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
var PRE_ENTER = 0;
|
|
2
|
+
var ENTERING = 1;
|
|
3
|
+
var ENTERED = 2;
|
|
4
|
+
var PRE_EXIT = 3;
|
|
5
|
+
var EXITING = 4;
|
|
6
|
+
var EXITED = 5;
|
|
7
|
+
var UNMOUNTED = 6;
|
|
8
|
+
var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
|
|
9
|
+
var getFullState = function getFullState(_state) {
|
|
10
|
+
return {
|
|
11
|
+
_state: _state,
|
|
12
|
+
state: STATES[_state],
|
|
13
|
+
isEnter: _state < PRE_EXIT,
|
|
14
|
+
isMounted: _state !== UNMOUNTED
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
var startOrEnd = function startOrEnd(unmounted) {
|
|
18
|
+
return unmounted ? UNMOUNTED : EXITED;
|
|
19
|
+
};
|
|
20
|
+
var getEndState = function getEndState(state, unmountOnExit) {
|
|
21
|
+
switch (state) {
|
|
22
|
+
case ENTERING:
|
|
23
|
+
case PRE_ENTER:
|
|
24
|
+
return ENTERED;
|
|
25
|
+
|
|
26
|
+
case EXITING:
|
|
27
|
+
case PRE_EXIT:
|
|
28
|
+
return startOrEnd(unmountOnExit);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
var getTimeout = function getTimeout(timeout) {
|
|
32
|
+
return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export { ENTERED, ENTERING, EXITED, EXITING, PRE_ENTER, PRE_EXIT, STATES, UNMOUNTED, getEndState, getFullState, getTimeout, startOrEnd };
|
package/dist/es/index.js
ADDED
package/package.json
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-transition-state",
|
|
3
|
-
"version": "1.2.0-alpha.
|
|
3
|
+
"version": "1.2.0-alpha.3",
|
|
4
4
|
"description": "Zero dependency, 0.7KB react-transition-group alternative.",
|
|
5
5
|
"author": "Zheng Song",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": "szhsin/react-transition-state",
|
|
8
8
|
"homepage": "https://szhsin.github.io/react-transition-state/",
|
|
9
|
-
"main": "dist/index.js",
|
|
10
|
-
"module": "dist/index.
|
|
11
|
-
"types": "
|
|
9
|
+
"main": "dist/cjs/index.js",
|
|
10
|
+
"module": "dist/es/index.js",
|
|
11
|
+
"types": "types/index.d.ts",
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"files": [
|
|
14
|
-
"dist"
|
|
14
|
+
"dist/",
|
|
15
|
+
"types/*.d.ts"
|
|
15
16
|
],
|
|
16
17
|
"keywords": [
|
|
17
18
|
"react",
|
|
@@ -26,12 +27,12 @@
|
|
|
26
27
|
"bundle": "rollup -c",
|
|
27
28
|
"test": "jest",
|
|
28
29
|
"eg": "npm start --prefix example",
|
|
29
|
-
"
|
|
30
|
-
"types": "npm run dtslint && cp -f types/index.d.ts dist/",
|
|
30
|
+
"types": "dtslint --localTs node_modules/typescript/lib types",
|
|
31
31
|
"tsc": "cd types && tsc",
|
|
32
32
|
"lint": "eslint .",
|
|
33
33
|
"lint:fix": "eslint --fix .",
|
|
34
|
-
"pret": "prettier
|
|
34
|
+
"pret": "prettier -c .",
|
|
35
|
+
"pret:fix": "prettier -w .",
|
|
35
36
|
"build": "run-s clean lint pret bundle types"
|
|
36
37
|
},
|
|
37
38
|
"peerDependencies": {
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export type TransitionState =
|
|
2
|
+
| 'preEnter'
|
|
3
|
+
| 'entering'
|
|
4
|
+
| 'entered'
|
|
5
|
+
| 'preExit'
|
|
6
|
+
| 'exiting'
|
|
7
|
+
| 'exited'
|
|
8
|
+
| 'unmounted';
|
|
9
|
+
|
|
10
|
+
export interface State {
|
|
11
|
+
state: TransitionState;
|
|
12
|
+
isMounted: boolean;
|
|
13
|
+
isEnter: boolean;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface TransitionOptions {
|
|
17
|
+
initialEntered?: boolean;
|
|
18
|
+
mountOnEnter?: boolean;
|
|
19
|
+
unmountOnExit?: boolean;
|
|
20
|
+
preEnter?: boolean;
|
|
21
|
+
preExit?: boolean;
|
|
22
|
+
enter?: boolean;
|
|
23
|
+
exit?: boolean;
|
|
24
|
+
timeout?: number | { enter?: number; exit?: number };
|
|
25
|
+
onChange?: (event: { state: TransitionState }) => void;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface TransitionItemOptions<K> extends Omit<TransitionOptions, 'onChange'> {
|
|
29
|
+
onChange?: (event: { key: K } & State) => void;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export interface TransitionMapOptions {
|
|
33
|
+
singleEnter?: boolean;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export type TransitionResult = [TransitionState, (toEnter?: boolean) => void, () => void];
|
|
37
|
+
|
|
38
|
+
export interface TransitionMapResult<K> {
|
|
39
|
+
stateMap: Omit<Map<K, State>, 'clear' | 'delete' | 'set'>;
|
|
40
|
+
toggle: (key: K, toEnter?: boolean) => void;
|
|
41
|
+
endTransition: (key: K) => void;
|
|
42
|
+
setItem: (key: K, options?: TransitionItemOptions<K>) => void;
|
|
43
|
+
deleteItem: (key: K) => boolean;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export const useTransition: (options?: TransitionOptions) => TransitionResult;
|
|
47
|
+
|
|
48
|
+
export const useTransitionMap: <K>(options?: TransitionMapOptions) => TransitionMapResult<K>;
|
|
49
|
+
|
|
50
|
+
export default useTransition;
|
package/dist/index.d.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export type TransitionState =
|
|
2
|
-
| 'preEnter'
|
|
3
|
-
| 'entering'
|
|
4
|
-
| 'entered'
|
|
5
|
-
| 'preExit'
|
|
6
|
-
| 'exiting'
|
|
7
|
-
| 'exited'
|
|
8
|
-
| 'unmounted';
|
|
9
|
-
|
|
10
|
-
export interface TransitionOptions {
|
|
11
|
-
initialEntered?: boolean;
|
|
12
|
-
mountOnEnter?: boolean;
|
|
13
|
-
unmountOnExit?: boolean;
|
|
14
|
-
preEnter?: boolean;
|
|
15
|
-
preExit?: boolean;
|
|
16
|
-
enter?: boolean;
|
|
17
|
-
exit?: boolean;
|
|
18
|
-
timeout?: number | { enter?: number; exit?: number };
|
|
19
|
-
onChange?: (event: { state: TransitionState }) => void;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export const useTransition: (
|
|
23
|
-
options?: TransitionOptions
|
|
24
|
-
) => [TransitionState, (toEnter?: boolean) => void, () => void];
|
|
25
|
-
|
|
26
|
-
export default useTransition;
|
package/dist/index.es.js
DELETED
|
@@ -1,261 +0,0 @@
|
|
|
1
|
-
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
var PRE_ENTER = 0;
|
|
4
|
-
var ENTERING = 1;
|
|
5
|
-
var ENTERED = 2;
|
|
6
|
-
var PRE_EXIT = 3;
|
|
7
|
-
var EXITING = 4;
|
|
8
|
-
var EXITED = 5;
|
|
9
|
-
var UNMOUNTED = 6;
|
|
10
|
-
var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
|
|
11
|
-
var startOrEnd = function startOrEnd(unmounted) {
|
|
12
|
-
return unmounted ? UNMOUNTED : EXITED;
|
|
13
|
-
};
|
|
14
|
-
var getEndState = function getEndState(state, unmountOnExit) {
|
|
15
|
-
switch (state) {
|
|
16
|
-
case ENTERING:
|
|
17
|
-
case PRE_ENTER:
|
|
18
|
-
return ENTERED;
|
|
19
|
-
|
|
20
|
-
case EXITING:
|
|
21
|
-
case PRE_EXIT:
|
|
22
|
-
return startOrEnd(unmountOnExit);
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
var getTimeout = function getTimeout(timeout) {
|
|
26
|
-
return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
var updateState$1 = function updateState(state, setState, latestState, timeoutId, onChange) {
|
|
30
|
-
clearTimeout(timeoutId.current);
|
|
31
|
-
setState(state);
|
|
32
|
-
latestState.current = state;
|
|
33
|
-
onChange && onChange({
|
|
34
|
-
state: STATES[state]
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
var useTransition = function useTransition(_temp) {
|
|
39
|
-
var _ref = _temp === void 0 ? {} : _temp,
|
|
40
|
-
_ref$enter = _ref.enter,
|
|
41
|
-
enter = _ref$enter === void 0 ? true : _ref$enter,
|
|
42
|
-
_ref$exit = _ref.exit,
|
|
43
|
-
exit = _ref$exit === void 0 ? true : _ref$exit,
|
|
44
|
-
preEnter = _ref.preEnter,
|
|
45
|
-
preExit = _ref.preExit,
|
|
46
|
-
timeout = _ref.timeout,
|
|
47
|
-
initialEntered = _ref.initialEntered,
|
|
48
|
-
mountOnEnter = _ref.mountOnEnter,
|
|
49
|
-
unmountOnExit = _ref.unmountOnExit,
|
|
50
|
-
onChange = _ref.onChange;
|
|
51
|
-
|
|
52
|
-
var _useState = useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
|
|
53
|
-
state = _useState[0],
|
|
54
|
-
setState = _useState[1];
|
|
55
|
-
|
|
56
|
-
var latestState = useRef(state);
|
|
57
|
-
var timeoutId = useRef();
|
|
58
|
-
|
|
59
|
-
var _getTimeout = getTimeout(timeout),
|
|
60
|
-
enterTimeout = _getTimeout[0],
|
|
61
|
-
exitTimeout = _getTimeout[1];
|
|
62
|
-
|
|
63
|
-
var endTransition = useCallback(function () {
|
|
64
|
-
var newState = getEndState(latestState.current, unmountOnExit);
|
|
65
|
-
newState && updateState$1(newState, setState, latestState, timeoutId, onChange);
|
|
66
|
-
}, [onChange, unmountOnExit]);
|
|
67
|
-
var toggle = useCallback(function (toEnter) {
|
|
68
|
-
var transitState = function transitState(newState) {
|
|
69
|
-
updateState$1(newState, setState, latestState, timeoutId, onChange);
|
|
70
|
-
|
|
71
|
-
switch (newState) {
|
|
72
|
-
case ENTERING:
|
|
73
|
-
if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
|
|
74
|
-
break;
|
|
75
|
-
|
|
76
|
-
case EXITING:
|
|
77
|
-
if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
|
|
78
|
-
break;
|
|
79
|
-
|
|
80
|
-
case PRE_ENTER:
|
|
81
|
-
case PRE_EXIT:
|
|
82
|
-
timeoutId.current = setTimeout(function () {
|
|
83
|
-
return transitState(newState + 1);
|
|
84
|
-
}, 0);
|
|
85
|
-
break;
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
var enterStage = latestState.current <= ENTERED;
|
|
90
|
-
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
91
|
-
|
|
92
|
-
if (toEnter) {
|
|
93
|
-
if (!enterStage) {
|
|
94
|
-
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
95
|
-
}
|
|
96
|
-
} else {
|
|
97
|
-
if (enterStage) {
|
|
98
|
-
transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
102
|
-
useEffect(function () {
|
|
103
|
-
return function () {
|
|
104
|
-
return clearTimeout(timeoutId.current);
|
|
105
|
-
};
|
|
106
|
-
}, []);
|
|
107
|
-
return [STATES[state], toggle, endTransition];
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
var initialStateMap = new Map();
|
|
111
|
-
var initialConfigMap = new Map();
|
|
112
|
-
|
|
113
|
-
var updateState = function updateState(_ref) {
|
|
114
|
-
var item = _ref.item,
|
|
115
|
-
_state = _ref.newState,
|
|
116
|
-
setStateMap = _ref.setStateMap,
|
|
117
|
-
latestStateMap = _ref.latestStateMap,
|
|
118
|
-
timeoutId = _ref.timeoutId,
|
|
119
|
-
onChange = _ref.onChange;
|
|
120
|
-
clearTimeout(timeoutId);
|
|
121
|
-
var state = {
|
|
122
|
-
state: STATES[_state],
|
|
123
|
-
_state: _state
|
|
124
|
-
};
|
|
125
|
-
var stateMap = new Map(latestStateMap.current);
|
|
126
|
-
stateMap.set(item, state);
|
|
127
|
-
setStateMap(stateMap);
|
|
128
|
-
latestStateMap.current = stateMap;
|
|
129
|
-
onChange && onChange(item, state);
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
var useTransitionMap = function useTransitionMap() {
|
|
133
|
-
var _useState = useState(initialStateMap),
|
|
134
|
-
stateMap = _useState[0],
|
|
135
|
-
setStateMap = _useState[1];
|
|
136
|
-
|
|
137
|
-
var latestStateMap = useRef(stateMap);
|
|
138
|
-
var configMap = useRef(initialConfigMap);
|
|
139
|
-
var addItem = useCallback(function (item, config) {
|
|
140
|
-
var initialEntered = config.initialEntered,
|
|
141
|
-
mountOnEnter = config.mountOnEnter;
|
|
142
|
-
var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
|
|
143
|
-
updateState({
|
|
144
|
-
item: item,
|
|
145
|
-
newState: newState,
|
|
146
|
-
setStateMap: setStateMap,
|
|
147
|
-
latestStateMap: latestStateMap
|
|
148
|
-
});
|
|
149
|
-
configMap.current.set(item, config);
|
|
150
|
-
}, []);
|
|
151
|
-
var removeItem = useCallback(function (item) {
|
|
152
|
-
var newStateMap = new Map(latestStateMap.current);
|
|
153
|
-
|
|
154
|
-
if (newStateMap.delete(item)) {
|
|
155
|
-
setStateMap(newStateMap);
|
|
156
|
-
latestStateMap.current = newStateMap;
|
|
157
|
-
configMap.current.delete(item);
|
|
158
|
-
}
|
|
159
|
-
}, []);
|
|
160
|
-
var endTransition = useCallback(function (item) {
|
|
161
|
-
var stateObj = latestStateMap.current.get(item);
|
|
162
|
-
|
|
163
|
-
if (!stateObj) {
|
|
164
|
-
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
|
|
165
|
-
return;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
var _configMap$current$ge = configMap.current.get(item),
|
|
169
|
-
timeoutId = _configMap$current$ge.timeoutId,
|
|
170
|
-
onChange = _configMap$current$ge.onChange,
|
|
171
|
-
unmountOnExit = _configMap$current$ge.unmountOnExit;
|
|
172
|
-
|
|
173
|
-
var newState = getEndState(stateObj._state, unmountOnExit);
|
|
174
|
-
newState && updateState({
|
|
175
|
-
item: item,
|
|
176
|
-
newState: newState,
|
|
177
|
-
setStateMap: setStateMap,
|
|
178
|
-
latestStateMap: latestStateMap,
|
|
179
|
-
timeoutId: timeoutId,
|
|
180
|
-
onChange: onChange
|
|
181
|
-
});
|
|
182
|
-
}, []);
|
|
183
|
-
var toggle = useCallback(function (item, toEnter) {
|
|
184
|
-
var stateObj = latestStateMap.current.get(item);
|
|
185
|
-
|
|
186
|
-
if (!stateObj) {
|
|
187
|
-
process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
|
|
188
|
-
return;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
var config = configMap.current.get(item);
|
|
192
|
-
var _config$enter = config.enter,
|
|
193
|
-
enter = _config$enter === void 0 ? true : _config$enter,
|
|
194
|
-
_config$exit = config.exit,
|
|
195
|
-
exit = _config$exit === void 0 ? true : _config$exit,
|
|
196
|
-
preEnter = config.preEnter,
|
|
197
|
-
preExit = config.preExit,
|
|
198
|
-
timeout = config.timeout,
|
|
199
|
-
unmountOnExit = config.unmountOnExit,
|
|
200
|
-
onChange = config.onChange,
|
|
201
|
-
timeoutId = config.timeoutId;
|
|
202
|
-
|
|
203
|
-
var transitState = function transitState(newState) {
|
|
204
|
-
updateState({
|
|
205
|
-
item: item,
|
|
206
|
-
newState: newState,
|
|
207
|
-
setStateMap: setStateMap,
|
|
208
|
-
latestStateMap: latestStateMap,
|
|
209
|
-
timeoutId: timeoutId,
|
|
210
|
-
onChange: onChange
|
|
211
|
-
});
|
|
212
|
-
|
|
213
|
-
var _getTimeout = getTimeout(timeout),
|
|
214
|
-
enterTimeout = _getTimeout[0],
|
|
215
|
-
exitTimeout = _getTimeout[1];
|
|
216
|
-
|
|
217
|
-
switch (newState) {
|
|
218
|
-
case ENTERING:
|
|
219
|
-
if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
|
|
220
|
-
return endTransition(item);
|
|
221
|
-
}, enterTimeout);
|
|
222
|
-
break;
|
|
223
|
-
|
|
224
|
-
case EXITING:
|
|
225
|
-
if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
|
|
226
|
-
return endTransition(item);
|
|
227
|
-
}, exitTimeout);
|
|
228
|
-
break;
|
|
229
|
-
|
|
230
|
-
case PRE_ENTER:
|
|
231
|
-
case PRE_EXIT:
|
|
232
|
-
config.timeoutId = setTimeout(function () {
|
|
233
|
-
return transitState(newState + 1);
|
|
234
|
-
}, 0);
|
|
235
|
-
break;
|
|
236
|
-
}
|
|
237
|
-
};
|
|
238
|
-
|
|
239
|
-
var enterStage = stateObj._state <= ENTERED;
|
|
240
|
-
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
241
|
-
|
|
242
|
-
if (toEnter) {
|
|
243
|
-
if (!enterStage) {
|
|
244
|
-
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
245
|
-
}
|
|
246
|
-
} else {
|
|
247
|
-
if (enterStage) {
|
|
248
|
-
transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}, [endTransition]);
|
|
252
|
-
return {
|
|
253
|
-
stateMap: stateMap,
|
|
254
|
-
toggle: toggle,
|
|
255
|
-
endTransition: endTransition,
|
|
256
|
-
addItem: addItem,
|
|
257
|
-
removeItem: removeItem
|
|
258
|
-
};
|
|
259
|
-
};
|
|
260
|
-
|
|
261
|
-
export { useTransition as default, useTransition, useTransitionMap };
|