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 CHANGED
@@ -4,267 +4,178 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var react = require('react');
6
6
 
7
- var PRE_ENTER = 0;
8
- var ENTERING = 1;
9
- var ENTERED = 2;
10
- var PRE_EXIT = 3;
11
- var EXITING = 4;
12
- var EXITED = 5;
13
- var UNMOUNTED = 6;
14
- var STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
15
- var getState = function getState(status) {
16
- return {
17
- _status: status,
18
- status: STATUS[status],
19
- isEnter: status < PRE_EXIT,
20
- isMounted: status !== UNMOUNTED,
21
- isResolved: status === ENTERED || status > EXITING
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
- var getTimeout = function getTimeout(timeout) {
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
- var updateState$1 = function updateState(status, setState, latestState, timeoutId, onChange) {
35
+ const updateState$1 = (status, setState, latestState, timeoutId, onChange) => {
43
36
  clearTimeout(timeoutId.current);
44
- var state = getState(status);
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
- var useTransition = function useTransition(_temp) {
53
- var _ref = _temp === void 0 ? {} : _temp,
54
- _ref$enter = _ref.enter,
55
- enter = _ref$enter === void 0 ? true : _ref$enter,
56
- _ref$exit = _ref.exit,
57
- exit = _ref$exit === void 0 ? true : _ref$exit,
58
- preEnter = _ref.preEnter,
59
- preExit = _ref.preExit,
60
- timeout = _ref.timeout,
61
- initialEntered = _ref.initialEntered,
62
- mountOnEnter = _ref.mountOnEnter,
63
- unmountOnExit = _ref.unmountOnExit,
64
- onChange = _ref.onStateChange;
65
-
66
- var _useState = react.useState(function () {
67
- return getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter));
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
- var toggle = react.useCallback(function (toEnter) {
84
- var transitState = function transitState(status) {
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(function () {
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(function () {
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
- var initialStateMap = new Map();
123
- var initialConfigMap = new Map();
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
- var state = getState(status);
134
- var stateMap = new Map(latestStateMap.current);
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: key,
101
+ key,
140
102
  current: state
141
103
  });
142
104
  };
143
-
144
- var useTransitionMap = function useTransitionMap(_temp) {
145
- var _ref2 = _temp === void 0 ? {} : _temp,
146
- allowMultiple = _ref2.allowMultiple,
147
- _ref2$enter = _ref2.enter,
148
- enter = _ref2$enter === void 0 ? true : _ref2$enter,
149
- _ref2$exit = _ref2.exit,
150
- exit = _ref2$exit === void 0 ? true : _ref2$exit,
151
- preEnter = _ref2.preEnter,
152
- preExit = _ref2.preExit,
153
- timeout = _ref2.timeout,
154
- initialEntered = _ref2.initialEntered,
155
- mountOnEnter = _ref2.mountOnEnter,
156
- unmountOnExit = _ref2.unmountOnExit,
157
- onChange = _ref2.onStateChange;
158
-
159
- var _useState = react.useState(initialStateMap),
160
- stateMap = _useState[0],
161
- setStateMap = _useState[1];
162
-
163
- var latestStateMap = react.useRef(stateMap);
164
- var configMap = react.useRef(initialConfigMap);
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
- var deleteItem = react.useCallback(function (key) {
185
- var newStateMap = new Map(latestStateMap.current);
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
- var endTransition = react.useCallback(function (key) {
197
- var stateObj = latestStateMap.current.get(key);
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("[React-Transition-State] invalid key: " + key);
142
+ process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
201
143
  return;
202
144
  }
203
-
204
- var _configMap$current$ge = configMap.current.get(key),
205
- timeoutId = _configMap$current$ge.timeoutId;
206
-
207
- var status = getEndStatus(stateObj._status, unmountOnExit);
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
- var toggle = react.useCallback(function (key, toEnter) {
218
- var stateObj = latestStateMap.current.get(key);
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("[React-Transition-State] invalid key: " + key);
154
+ process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
222
155
  return;
223
156
  }
224
-
225
- var config = configMap.current.get(key);
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(function () {
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(function () {
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(function () {
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(function (_, _key) {
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: stateMap,
277
- toggle: toggle,
278
- endTransition: endTransition,
279
- setItem: setItem,
280
- deleteItem: deleteItem
187
+ stateMap,
188
+ toggle,
189
+ endTransition,
190
+ setItem,
191
+ deleteItem
281
192
  };
282
193
  };
283
194
 
284
- exports["default"] = useTransition;
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, PRE_EXIT, EXITING, PRE_ENTER, ENTERING } from './utils.js';
2
+ import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus, PRE_ENTER, ENTERING, PRE_EXIT, EXITING } from './utils.js';
3
3
 
4
- var updateState = function updateState(status, setState, latestState, timeoutId, onChange) {
4
+ const updateState = (status, setState, latestState, timeoutId, onChange) => {
5
5
  clearTimeout(timeoutId.current);
6
- var state = getState(status);
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
- var useTransition = function useTransition(_temp) {
15
- var _ref = _temp === void 0 ? {} : _temp,
16
- _ref$enter = _ref.enter,
17
- enter = _ref$enter === void 0 ? true : _ref$enter,
18
- _ref$exit = _ref.exit,
19
- exit = _ref$exit === void 0 ? true : _ref$exit,
20
- preEnter = _ref.preEnter,
21
- preExit = _ref.preExit,
22
- timeout = _ref.timeout,
23
- initialEntered = _ref.initialEntered,
24
- mountOnEnter = _ref.mountOnEnter,
25
- unmountOnExit = _ref.unmountOnExit,
26
- onChange = _ref.onStateChange;
27
-
28
- var _useState = useState(function () {
29
- return getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter));
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
- var toggle = useCallback(function (toEnter) {
46
- var transitState = function transitState(status) {
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(function () {
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(function () {
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, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, getState } from './utils.js';
2
+ import { getTimeout, ENTERED, startOrEnd, getEndStatus, PRE_ENTER, ENTERING, PRE_EXIT, EXITING, getState } from './utils.js';
3
3
 
4
- var initialStateMap = new Map();
5
- var initialConfigMap = new Map();
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
- var state = getState(status);
16
- var stateMap = new Map(latestStateMap.current);
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: key,
14
+ key,
22
15
  current: state
23
16
  });
24
17
  };
25
-
26
- var useTransitionMap = function useTransitionMap(_temp) {
27
- var _ref2 = _temp === void 0 ? {} : _temp,
28
- allowMultiple = _ref2.allowMultiple,
29
- _ref2$enter = _ref2.enter,
30
- enter = _ref2$enter === void 0 ? true : _ref2$enter,
31
- _ref2$exit = _ref2.exit,
32
- exit = _ref2$exit === void 0 ? true : _ref2$exit,
33
- preEnter = _ref2.preEnter,
34
- preExit = _ref2.preExit,
35
- timeout = _ref2.timeout,
36
- initialEntered = _ref2.initialEntered,
37
- mountOnEnter = _ref2.mountOnEnter,
38
- unmountOnExit = _ref2.unmountOnExit,
39
- onChange = _ref2.onStateChange;
40
-
41
- var _useState = useState(initialStateMap),
42
- stateMap = _useState[0],
43
- setStateMap = _useState[1];
44
-
45
- var latestStateMap = useRef(stateMap);
46
- var configMap = useRef(initialConfigMap);
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
- var deleteItem = useCallback(function (key) {
67
- var newStateMap = new Map(latestStateMap.current);
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
- var endTransition = useCallback(function (key) {
79
- var stateObj = latestStateMap.current.get(key);
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("[React-Transition-State] invalid key: " + key);
55
+ process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
83
56
  return;
84
57
  }
85
-
86
- var _configMap$current$ge = configMap.current.get(key),
87
- timeoutId = _configMap$current$ge.timeoutId;
88
-
89
- var status = getEndStatus(stateObj._status, unmountOnExit);
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
- var toggle = useCallback(function (key, toEnter) {
100
- var stateObj = latestStateMap.current.get(key);
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("[React-Transition-State] invalid key: " + key);
67
+ process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
104
68
  return;
105
69
  }
106
-
107
- var config = configMap.current.get(key);
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(function () {
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(function () {
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(function () {
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(function (_, _key) {
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: stateMap,
159
- toggle: toggle,
160
- endTransition: endTransition,
161
- setItem: setItem,
162
- deleteItem: deleteItem
100
+ stateMap,
101
+ toggle,
102
+ endTransition,
103
+ setItem,
104
+ deleteItem
163
105
  };
164
106
  };
165
107
 
@@ -1,36 +1,29 @@
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 STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
9
- var getState = function getState(status) {
10
- return {
11
- _status: status,
12
- status: STATUS[status],
13
- isEnter: status < PRE_EXIT,
14
- isMounted: status !== UNMOUNTED,
15
- isResolved: status === ENTERED || status > EXITING
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
- var getTimeout = function getTimeout(timeout) {
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.2",
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.18.13",
45
- "@babel/preset-env": "^7.18.10",
46
- "@rollup/plugin-babel": "^5.3.1",
47
- "@testing-library/react": "^13.3.0",
48
- "@types/jest": "^29.0.0",
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.22.0",
52
- "eslint-config-prettier": "^8.5.0",
53
- "eslint-plugin-jest": "^26.9.0",
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.0.1",
56
- "jest-environment-jsdom": "^29.0.1",
55
+ "jest": "^29.4.1",
56
+ "jest-environment-jsdom": "^29.4.1",
57
57
  "npm-run-all": "^4.1.5",
58
- "prettier": "^2.7.1",
58
+ "prettier": "^2.8.3",
59
59
  "react": "^18.2.0",
60
60
  "react-dom": "^18.2.0",
61
- "regenerator-runtime": "^0.13.9",
62
- "rollup": "^2.79.0",
63
- "typescript": "^4.7.4"
61
+ "regenerator-runtime": "^0.13.11",
62
+ "rollup": "^3.14.0",
63
+ "typescript": "^4.9.5"
64
64
  }
65
65
  }