react-transition-state 2.1.0-alpha.0 → 2.1.0-alpha.2

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.
Files changed (7) hide show
  1. package/README.md +1 -0
  2. package/dist/cjs/index.js +12 -33
  3. package/dist/es/hooks/useTransition.js +1 -1
  4. package/dist/es/hooks/useTransitionMap.js +10 -31
  5. package/dist/es/hooks/utils.js +1 -1
  6. package/package.json +1 -1
  7. package/types/index.d.ts +1 -0
package/README.md CHANGED
@@ -234,6 +234,7 @@ The Hook returns an object of shape:
234
234
  interface TransitionMapResult<K> {
235
235
  stateMap: ReadonlyMap<K, TransitionState>;
236
236
  toggle: (key: K, toEnter?: boolean) => void;
237
+ toggleAll: (toEnter?: boolean) => void;
237
238
  endTransition: (key: K) => void;
238
239
  setItem: (key: K, options?: TransitionItemOptions) => void;
239
240
  deleteItem: (key: K) => boolean;
package/dist/cjs/index.js CHANGED
@@ -13,7 +13,7 @@ const EXITED = 5;
13
13
  const UNMOUNTED = 6;
14
14
  const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
15
15
  const getState = status => ({
16
- _status: status,
16
+ _s: status,
17
17
  status: STATUS[status],
18
18
  isEnter: status < PRE_EXIT,
19
19
  isMounted: status !== UNMOUNTED,
@@ -57,7 +57,7 @@ const useTransition = ({
57
57
  const timeoutId = react.useRef();
58
58
  const [enterTimeout, exitTimeout] = getTimeout(timeout);
59
59
  const endTransition = react.useCallback(() => {
60
- const status = getEndStatus(latestState.current._status, unmountOnExit);
60
+ const status = getEndStatus(latestState.current._s, unmountOnExit);
61
61
  status && updateState$1(status, setState, latestState, timeoutId, onChange);
62
62
  }, [onChange, unmountOnExit]);
63
63
  const toggle = react.useCallback(toEnter => {
@@ -90,14 +90,7 @@ const useTransition = ({
90
90
 
91
91
  const initialStateMap = new Map();
92
92
  const initialConfigMap = new Map();
93
- const updateState = ({
94
- key,
95
- status,
96
- setStateMap,
97
- latestStateMap,
98
- timeoutId,
99
- onChange
100
- }) => {
93
+ const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
101
94
  clearTimeout(timeoutId);
102
95
  const state = getState(status);
103
96
  const stateMap = new Map(latestStateMap.current);
@@ -130,12 +123,7 @@ const useTransitionMap = ({
130
123
  initialEntered: _initialEntered = initialEntered
131
124
  } = config || {};
132
125
  const status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
133
- updateState({
134
- key,
135
- status,
136
- setStateMap,
137
- latestStateMap
138
- });
126
+ updateState(key, status, setStateMap, latestStateMap);
139
127
  configMap.current.set(key, {});
140
128
  }, [initialEntered, mountOnEnter]);
141
129
  const deleteItem = react.useCallback(key => {
@@ -157,15 +145,8 @@ const useTransitionMap = ({
157
145
  const {
158
146
  timeoutId
159
147
  } = configMap.current.get(key);
160
- const status = getEndStatus(stateObj._status, unmountOnExit);
161
- status && updateState({
162
- key,
163
- status,
164
- setStateMap,
165
- latestStateMap,
166
- timeoutId,
167
- onChange
168
- });
148
+ const status = getEndStatus(stateObj._s, unmountOnExit);
149
+ status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
169
150
  }, [onChange, unmountOnExit]);
170
151
  const toggle = react.useCallback((key, toEnter) => {
171
152
  const stateObj = latestStateMap.current.get(key);
@@ -175,14 +156,7 @@ const useTransitionMap = ({
175
156
  }
176
157
  const config = configMap.current.get(key);
177
158
  const transitState = status => {
178
- updateState({
179
- key,
180
- status,
181
- setStateMap,
182
- latestStateMap,
183
- timeoutId: config.timeoutId,
184
- onChange
185
- });
159
+ updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
186
160
  switch (status) {
187
161
  case ENTERING:
188
162
  if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
@@ -209,9 +183,14 @@ const useTransitionMap = ({
209
183
  }
210
184
  }
211
185
  }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
186
+ const toggleAll = react.useCallback(toEnter => {
187
+ if (!allowMultiple && toEnter !== false) return;
188
+ for (const key of latestStateMap.current.keys()) toggle(key, toEnter);
189
+ }, [allowMultiple, toggle]);
212
190
  return {
213
191
  stateMap,
214
192
  toggle,
193
+ toggleAll,
215
194
  endTransition,
216
195
  setItem,
217
196
  deleteItem
package/dist/es/hooks/useTransition.js CHANGED
@@ -26,7 +26,7 @@ const useTransition = ({
26
26
  const timeoutId = useRef();
27
27
  const [enterTimeout, exitTimeout] = getTimeout(timeout);
28
28
  const endTransition = useCallback(() => {
29
- const status = getEndStatus(latestState.current._status, unmountOnExit);
29
+ const status = getEndStatus(latestState.current._s, unmountOnExit);
30
30
  status && updateState(status, setState, latestState, timeoutId, onChange);
31
31
  }, [onChange, unmountOnExit]);
32
32
  const toggle = useCallback(toEnter => {
package/dist/es/hooks/useTransitionMap.js CHANGED
@@ -3,14 +3,7 @@ import { getTimeout, ENTERED, startOrEnd, getEndStatus, PRE_ENTER, ENTERING, PRE
3
3
 
4
4
  const initialStateMap = new Map();
5
5
  const initialConfigMap = new Map();
6
- const updateState = ({
7
- key,
8
- status,
9
- setStateMap,
10
- latestStateMap,
11
- timeoutId,
12
- onChange
13
- }) => {
6
+ const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
14
7
  clearTimeout(timeoutId);
15
8
  const state = getState(status);
16
9
  const stateMap = new Map(latestStateMap.current);
@@ -43,12 +36,7 @@ const useTransitionMap = ({
43
36
  initialEntered: _initialEntered = initialEntered
44
37
  } = config || {};
45
38
  const status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
46
- updateState({
47
- key,
48
- status,
49
- setStateMap,
50
- latestStateMap
51
- });
39
+ updateState(key, status, setStateMap, latestStateMap);
52
40
  configMap.current.set(key, {});
53
41
  }, [initialEntered, mountOnEnter]);
54
42
  const deleteItem = useCallback(key => {
@@ -70,15 +58,8 @@ const useTransitionMap = ({
70
58
  const {
71
59
  timeoutId
72
60
  } = configMap.current.get(key);
73
- const status = getEndStatus(stateObj._status, unmountOnExit);
74
- status && updateState({
75
- key,
76
- status,
77
- setStateMap,
78
- latestStateMap,
79
- timeoutId,
80
- onChange
81
- });
61
+ const status = getEndStatus(stateObj._s, unmountOnExit);
62
+ status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
82
63
  }, [onChange, unmountOnExit]);
83
64
  const toggle = useCallback((key, toEnter) => {
84
65
  const stateObj = latestStateMap.current.get(key);
@@ -88,14 +69,7 @@ const useTransitionMap = ({
88
69
  }
89
70
  const config = configMap.current.get(key);
90
71
  const transitState = status => {
91
- updateState({
92
- key,
93
- status,
94
- setStateMap,
95
- latestStateMap,
96
- timeoutId: config.timeoutId,
97
- onChange
98
- });
72
+ updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
99
73
  switch (status) {
100
74
  case ENTERING:
101
75
  if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
@@ -122,9 +96,14 @@ const useTransitionMap = ({
122
96
  }
123
97
  }
124
98
  }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
99
+ const toggleAll = useCallback(toEnter => {
100
+ if (!allowMultiple && toEnter !== false) return;
101
+ for (const key of latestStateMap.current.keys()) toggle(key, toEnter);
102
+ }, [allowMultiple, toggle]);
125
103
  return {
126
104
  stateMap,
127
105
  toggle,
106
+ toggleAll,
128
107
  endTransition,
129
108
  setItem,
130
109
  deleteItem
package/dist/es/hooks/utils.js CHANGED
@@ -7,7 +7,7 @@ const EXITED = 5;
7
7
  const UNMOUNTED = 6;
8
8
  const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
9
9
  const getState = status => ({
10
- _status: status,
10
+ _s: status,
11
11
  status: STATUS[status],
12
12
  isEnter: status < PRE_EXIT,
13
13
  isMounted: status !== UNMOUNTED,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-transition-state",
3
- "version": "2.1.0-alpha.0",
3
+ "version": "2.1.0-alpha.2",
4
4
  "description": "Zero dependency React transition state machine.",
5
5
  "author": "Zheng Song",
6
6
  "license": "MIT",
package/types/index.d.ts CHANGED
@@ -40,6 +40,7 @@ export type TransitionResult = [TransitionState, (toEnter?: boolean) => void, ()
40
40
  export interface TransitionMapResult<K> {
41
41
  stateMap: ReadonlyMap<K, TransitionState>;
42
42
  toggle: (key: K, toEnter?: boolean) => void;
43
+ toggleAll: (toEnter?: boolean) => void;
43
44
  endTransition: (key: K) => void;
44
45
  setItem: (key: K, options?: TransitionItemOptions) => void;
45
46
  deleteItem: (key: K) => boolean;