react-transition-state 1.1.2 → 1.2.0-alpha.0

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 (4) hide show
  1. package/README.md +43 -18
  2. package/dist/index.es.js +173 -28
  3. package/dist/index.js +174 -28
  4. package/package.json +14 -14
package/README.md CHANGED
@@ -5,15 +5,15 @@
5
5
  [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state)
6
6
  [![Known Vulnerabilities](https://snyk.io/test/github/szhsin/react-transition-state/badge.svg)](https://snyk.io/test/github/szhsin/react-transition-state)
7
7
 
8
- ## Why?
8
+ ## Features
9
9
 
10
- Inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group), this tiny library allows you to easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner, using a Hook API.
10
+ Inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group), this tiny library helps you easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner, using a Hook API.
11
11
 
12
12
  - 🍭 Working with both CSS animation and transition.
13
13
  - 🔄 Moving React components in and out of DOM seamlessly.
14
14
  - 🚫 Using no [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
15
- - 🚀 Efficient: each state transition results in at most one extract render for your component.
16
- - 🤏 Tiny: ideal for both component libraries and applications.
15
+ - 🚀 Efficient: each state transition results in at most one extract render for consuming component.
16
+ - 🤏 Tiny: [~0.7KB](https://bundlephobia.com/package/react-transition-state) and no dependencies, ideal for both component libraries and applications.
17
17
 
18
18
  🤔 Not convinced? [See a comparison with _React Transition Group_](#comparisons-with-react-transition-group)
19
19
 
@@ -21,7 +21,10 @@ Inspired by the [React Transition Group](https://github.com/reactjs/react-transi
21
21
 
22
22
  ## State diagram
23
23
 
24
- ![state-diagram](https://user-images.githubusercontent.com/41896553/142717714-9c5ca23f-6911-4783-9916-327c2415d109.png)
24
+ ![state-diagram](https://user-images.githubusercontent.com/41896553/142855447-cb8d8730-f8fb-4296-a3db-d1523b0fa2d9.png)
25
+ The `initialEntered` and `mountOnEnter` props are omitted from the diagram to keep it less convoluted. [Please read more details at the API section](#usetransition-hook).
26
+
27
+ <br/>
25
28
 
26
29
  ## Install
27
30
 
@@ -37,6 +40,8 @@ yarn add react-transition-state
37
40
 
38
41
  ## Usage
39
42
 
43
+ ### CSS example
44
+
40
45
  ```jsx
41
46
  import { useTransition } from 'react-transition-state';
42
47
  /* or import useTransition from 'react-transition-state'; */
@@ -70,14 +75,13 @@ export default Example;
70
75
  }
71
76
  ```
72
77
 
73
- **[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-basic-100io)**
78
+ **[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-state-100io)**
74
79
 
75
80
  <br/>
76
81
 
77
- ## styled-components example
82
+ ### styled-components example
78
83
 
79
84
  ```jsx
80
- import React from 'react';
81
85
  import styled from 'styled-components';
82
86
  import { useTransition } from 'react-transition-state';
83
87
 
@@ -121,18 +125,39 @@ export default StyledExample;
121
125
 
122
126
  <br/>
123
127
 
124
- ## Comparisons with _React Transition Group_
128
+ ### tailwindcss example
129
+
130
+ **[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-tailwindcss-21nys)**
131
+
132
+ <br/>
133
+
134
+ ### Perform appearing transition when page loads or a component mounts
125
135
 
126
- | | React Transition Group | This library |
127
- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
128
- | Use derived state | _Yes_ – use an `in` prop to trigger changes in a derived transition state | _No_ – there is only a single state which is triggered by a toggle function |
129
- | Controlled | _No_ – <br/>Transition state is managed internally.<br/>Resort to callback events to read the internal state. | _Yes_ – <br/>Transition state is _lifted_ up into the consuming component.<br/>You have direct access to the transition state. |
130
- | DOM updates | _Imperative_ – [commit changes into DOM imperatively](https://github.com/reactjs/react-transition-group/blob/5aa3fd2d7e3354a7e42505d55af605ff44f74e2e/src/CSSTransition.js#L10) to update `classes` | _Declarative_ – you declare [what the `classes` look like](https://github.com/szhsin/react-transition-state/blob/2ab44c12ac5d5283ec3bb997bfc1d5ef6dffb0ce/example/src/components/BasicExample.js#L31) and DOM updates are taken care of by `ReactDOM` |
131
- | Working with _styled-components_ | Your code looks like – <br/>`&.box-exit-active { opacity: 0; }`<br/>`&.box-enter-active { opacity: 1; }` | Your code looks like – <br/>`opacity: ${({ state }) => (state === 'exiting' ? '0' : '1')};` <br/> It's the way how you normally use the _styled-components_ |
132
- | Bundle size | [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-group)](https://bundlephobia.com/package/react-transition-group) | ✅ [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state) |
133
- | Dependency count | [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-group)](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ✅ [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-state)](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |
136
+ You can toggle on transition with the `useEffect` hook.
137
+
138
+ ```js
139
+ useEffect(() => {
140
+ toggle(true);
141
+ }, [toggle]);
142
+ ```
143
+
144
+ **[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-appear-9kkss3)**
145
+
146
+ <br/>
147
+
148
+ ## Comparisons with _React Transition Group_
134
149
 
135
- This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a more simplified, declarative, and controllable manner than _React Transition Group_.
150
+ | | React Transition Group | This library |
151
+ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
152
+ | Use derived state | _Yes_ – use an `in` prop to trigger changes in a derived transition state | _No_ – there is only a single state which is triggered by a toggle function |
153
+ | Controlled | _No_ – <br/>Transition state is managed internally.<br/>Resort to callback events to read the internal state. | _Yes_ – <br/>Transition state is _lifted_ up into the consuming component.<br/>You have direct access to the transition state. |
154
+ | DOM updates | _Imperative_ – [commit changes into DOM imperatively](https://github.com/reactjs/react-transition-group/blob/5aa3fd2d7e3354a7e42505d55af605ff44f74e2e/src/CSSTransition.js#L10) to update `classes` | _Declarative_ – you declare [what the `classes` look like](https://github.com/szhsin/react-transition-state/blob/2ab44c12ac5d5283ec3bb997bfc1d5ef6dffb0ce/example/src/components/BasicExample.js#L31) and DOM updates are taken care of by `ReactDOM` |
155
+ | Render something in response to state updates | _Resort to side effects_ – rendering based on [state update events](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:1007-1188) | _Pure_ – rendering based on [transition state](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:2140-2325) |
156
+ | Working with _styled-components_ | Your code looks like – <br/>`&.box-exit-active { opacity: 0; }`<br/>`&.box-enter-active { opacity: 1; }` | Your code looks like – <br/>`opacity: ${({ state }) => (state === 'exiting' ? '0' : '1')};` <br/> It's the way how you normally use the _styled-components_ |
157
+ | Bundle size | [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-group)](https://bundlephobia.com/package/react-transition-group) | ✅ [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state) |
158
+ | Dependency count | [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-group)](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ✅ [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-state)](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |
159
+
160
+ This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a simpler, more declarative, and controllable manner than _React Transition Group_.
136
161
 
137
162
  <br/>
138
163
 
package/dist/index.es.js CHANGED
@@ -8,12 +8,25 @@ var EXITING = 4;
8
8
  var EXITED = 5;
9
9
  var UNMOUNTED = 6;
10
10
  var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
11
-
12
11
  var startOrEnd = function startOrEnd(unmounted) {
13
12
  return unmounted ? UNMOUNTED : EXITED;
14
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
+ };
15
28
 
16
- var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
29
+ var updateState$1 = function updateState(state, setState, latestState, timeoutId, onChange) {
17
30
  clearTimeout(timeoutId.current);
18
31
  setState(state);
19
32
  latestState.current = state;
@@ -42,37 +55,18 @@ var useTransition = function useTransition(_temp) {
42
55
 
43
56
  var latestState = useRef(state);
44
57
  var timeoutId = useRef();
45
- var enterTimeout, exitTimeout;
46
58
 
47
- if (typeof timeout === 'object') {
48
- enterTimeout = timeout.enter;
49
- exitTimeout = timeout.exit;
50
- } else {
51
- enterTimeout = exitTimeout = timeout;
52
- }
59
+ var _getTimeout = getTimeout(timeout),
60
+ enterTimeout = _getTimeout[0],
61
+ exitTimeout = _getTimeout[1];
53
62
 
54
63
  var endTransition = useCallback(function () {
55
- var newState;
56
-
57
- switch (latestState.current) {
58
- case ENTERING:
59
- case PRE_ENTER:
60
- newState = ENTERED;
61
- break;
62
-
63
- case EXITING:
64
- case PRE_EXIT:
65
- newState = startOrEnd(unmountOnExit);
66
- break;
67
- }
68
-
69
- if (newState !== undefined) {
70
- updateState(newState, setState, latestState, timeoutId, onChange);
71
- }
64
+ var newState = getEndState(latestState.current, unmountOnExit);
65
+ newState && updateState$1(newState, setState, latestState, timeoutId, onChange);
72
66
  }, [onChange, unmountOnExit]);
73
67
  var toggle = useCallback(function (toEnter) {
74
68
  var transitState = function transitState(newState) {
75
- updateState(newState, setState, latestState, timeoutId, onChange);
69
+ updateState$1(newState, setState, latestState, timeoutId, onChange);
76
70
 
77
71
  switch (newState) {
78
72
  case ENTERING:
@@ -113,4 +107,155 @@ var useTransition = function useTransition(_temp) {
113
107
  return [STATES[state], toggle, endTransition];
114
108
  };
115
109
 
116
- export { useTransition as default, useTransition };
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 };
package/dist/index.js CHANGED
@@ -12,12 +12,25 @@ 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
-
16
15
  var startOrEnd = function startOrEnd(unmounted) {
17
16
  return unmounted ? UNMOUNTED : EXITED;
18
17
  };
18
+ var getEndState = function getEndState(state, unmountOnExit) {
19
+ switch (state) {
20
+ case ENTERING:
21
+ case PRE_ENTER:
22
+ return ENTERED;
23
+
24
+ case EXITING:
25
+ case PRE_EXIT:
26
+ return startOrEnd(unmountOnExit);
27
+ }
28
+ };
29
+ var getTimeout = function getTimeout(timeout) {
30
+ return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
31
+ };
19
32
 
20
- var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
33
+ var updateState$1 = function updateState(state, setState, latestState, timeoutId, onChange) {
21
34
  clearTimeout(timeoutId.current);
22
35
  setState(state);
23
36
  latestState.current = state;
@@ -46,37 +59,18 @@ var useTransition = function useTransition(_temp) {
46
59
 
47
60
  var latestState = react.useRef(state);
48
61
  var timeoutId = react.useRef();
49
- var enterTimeout, exitTimeout;
50
62
 
51
- if (typeof timeout === 'object') {
52
- enterTimeout = timeout.enter;
53
- exitTimeout = timeout.exit;
54
- } else {
55
- enterTimeout = exitTimeout = timeout;
56
- }
63
+ var _getTimeout = getTimeout(timeout),
64
+ enterTimeout = _getTimeout[0],
65
+ exitTimeout = _getTimeout[1];
57
66
 
58
67
  var endTransition = react.useCallback(function () {
59
- var newState;
60
-
61
- switch (latestState.current) {
62
- case ENTERING:
63
- case PRE_ENTER:
64
- newState = ENTERED;
65
- break;
66
-
67
- case EXITING:
68
- case PRE_EXIT:
69
- newState = startOrEnd(unmountOnExit);
70
- break;
71
- }
72
-
73
- if (newState !== undefined) {
74
- updateState(newState, setState, latestState, timeoutId, onChange);
75
- }
68
+ var newState = getEndState(latestState.current, unmountOnExit);
69
+ newState && updateState$1(newState, setState, latestState, timeoutId, onChange);
76
70
  }, [onChange, unmountOnExit]);
77
71
  var toggle = react.useCallback(function (toEnter) {
78
72
  var transitState = function transitState(newState) {
79
- updateState(newState, setState, latestState, timeoutId, onChange);
73
+ updateState$1(newState, setState, latestState, timeoutId, onChange);
80
74
 
81
75
  switch (newState) {
82
76
  case ENTERING:
@@ -117,5 +111,157 @@ var useTransition = function useTransition(_temp) {
117
111
  return [STATES[state], toggle, endTransition];
118
112
  };
119
113
 
120
- exports['default'] = useTransition;
114
+ var initialStateMap = new Map();
115
+ var initialConfigMap = new Map();
116
+
117
+ var updateState = function updateState(_ref) {
118
+ var item = _ref.item,
119
+ _state = _ref.newState,
120
+ setStateMap = _ref.setStateMap,
121
+ latestStateMap = _ref.latestStateMap,
122
+ timeoutId = _ref.timeoutId,
123
+ onChange = _ref.onChange;
124
+ clearTimeout(timeoutId);
125
+ var state = {
126
+ state: STATES[_state],
127
+ _state: _state
128
+ };
129
+ var stateMap = new Map(latestStateMap.current);
130
+ stateMap.set(item, state);
131
+ setStateMap(stateMap);
132
+ latestStateMap.current = stateMap;
133
+ onChange && onChange(item, state);
134
+ };
135
+
136
+ var useTransitionMap = function useTransitionMap() {
137
+ var _useState = react.useState(initialStateMap),
138
+ stateMap = _useState[0],
139
+ setStateMap = _useState[1];
140
+
141
+ var latestStateMap = react.useRef(stateMap);
142
+ var configMap = react.useRef(initialConfigMap);
143
+ var addItem = react.useCallback(function (item, config) {
144
+ var initialEntered = config.initialEntered,
145
+ mountOnEnter = config.mountOnEnter;
146
+ var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
147
+ updateState({
148
+ item: item,
149
+ newState: newState,
150
+ setStateMap: setStateMap,
151
+ latestStateMap: latestStateMap
152
+ });
153
+ configMap.current.set(item, config);
154
+ }, []);
155
+ var removeItem = react.useCallback(function (item) {
156
+ var newStateMap = new Map(latestStateMap.current);
157
+
158
+ if (newStateMap.delete(item)) {
159
+ setStateMap(newStateMap);
160
+ latestStateMap.current = newStateMap;
161
+ configMap.current.delete(item);
162
+ }
163
+ }, []);
164
+ var endTransition = react.useCallback(function (item) {
165
+ var stateObj = latestStateMap.current.get(item);
166
+
167
+ if (!stateObj) {
168
+ process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
169
+ return;
170
+ }
171
+
172
+ var _configMap$current$ge = configMap.current.get(item),
173
+ timeoutId = _configMap$current$ge.timeoutId,
174
+ onChange = _configMap$current$ge.onChange,
175
+ unmountOnExit = _configMap$current$ge.unmountOnExit;
176
+
177
+ var newState = getEndState(stateObj._state, unmountOnExit);
178
+ newState && updateState({
179
+ item: item,
180
+ newState: newState,
181
+ setStateMap: setStateMap,
182
+ latestStateMap: latestStateMap,
183
+ timeoutId: timeoutId,
184
+ onChange: onChange
185
+ });
186
+ }, []);
187
+ var toggle = react.useCallback(function (item, toEnter) {
188
+ var stateObj = latestStateMap.current.get(item);
189
+
190
+ if (!stateObj) {
191
+ process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
192
+ return;
193
+ }
194
+
195
+ var config = configMap.current.get(item);
196
+ var _config$enter = config.enter,
197
+ enter = _config$enter === void 0 ? true : _config$enter,
198
+ _config$exit = config.exit,
199
+ exit = _config$exit === void 0 ? true : _config$exit,
200
+ preEnter = config.preEnter,
201
+ preExit = config.preExit,
202
+ timeout = config.timeout,
203
+ unmountOnExit = config.unmountOnExit,
204
+ onChange = config.onChange,
205
+ timeoutId = config.timeoutId;
206
+
207
+ var transitState = function transitState(newState) {
208
+ updateState({
209
+ item: item,
210
+ newState: newState,
211
+ setStateMap: setStateMap,
212
+ latestStateMap: latestStateMap,
213
+ timeoutId: timeoutId,
214
+ onChange: onChange
215
+ });
216
+
217
+ var _getTimeout = getTimeout(timeout),
218
+ enterTimeout = _getTimeout[0],
219
+ exitTimeout = _getTimeout[1];
220
+
221
+ switch (newState) {
222
+ case ENTERING:
223
+ if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
224
+ return endTransition(item);
225
+ }, enterTimeout);
226
+ break;
227
+
228
+ case EXITING:
229
+ if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
230
+ return endTransition(item);
231
+ }, exitTimeout);
232
+ break;
233
+
234
+ case PRE_ENTER:
235
+ case PRE_EXIT:
236
+ config.timeoutId = setTimeout(function () {
237
+ return transitState(newState + 1);
238
+ }, 0);
239
+ break;
240
+ }
241
+ };
242
+
243
+ var enterStage = stateObj._state <= ENTERED;
244
+ if (typeof toEnter !== 'boolean') toEnter = !enterStage;
245
+
246
+ if (toEnter) {
247
+ if (!enterStage) {
248
+ transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
249
+ }
250
+ } else {
251
+ if (enterStage) {
252
+ transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
253
+ }
254
+ }
255
+ }, [endTransition]);
256
+ return {
257
+ stateMap: stateMap,
258
+ toggle: toggle,
259
+ endTransition: endTransition,
260
+ addItem: addItem,
261
+ removeItem: removeItem
262
+ };
263
+ };
264
+
265
+ exports["default"] = useTransition;
121
266
  exports.useTransition = useTransition;
267
+ exports.useTransitionMap = useTransitionMap;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-transition-state",
3
- "version": "1.1.2",
4
- "description": "Perform animation and transition of React component with ease.",
3
+ "version": "1.2.0-alpha.0",
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",
@@ -39,24 +39,24 @@
39
39
  "react-dom": ">=16.8.0"
40
40
  },
41
41
  "devDependencies": {
42
- "@babel/core": "^7.16.0",
43
- "@babel/preset-env": "^7.16.0",
44
- "@rollup/plugin-babel": "^5.3.0",
42
+ "@babel/core": "^7.17.9",
43
+ "@babel/preset-env": "^7.16.11",
44
+ "@rollup/plugin-babel": "^5.3.1",
45
45
  "@testing-library/react-hooks": "^7.0.2",
46
- "@types/jest": "^27.0.2",
46
+ "@types/jest": "^27.4.1",
47
47
  "babel-plugin-pure-annotations": "^0.1.2",
48
48
  "dtslint": "^4.1.6",
49
- "eslint": "^7.32.0",
50
- "eslint-config-prettier": "^8.3.0",
51
- "eslint-plugin-jest": "^25.2.2",
52
- "eslint-plugin-react-hooks": "^4.2.0",
53
- "jest": "^27.3.1",
49
+ "eslint": "^8.12.0",
50
+ "eslint-config-prettier": "^8.5.0",
51
+ "eslint-plugin-jest": "^26.1.3",
52
+ "eslint-plugin-react-hooks": "^4.4.0",
53
+ "jest": "^27.5.1",
54
54
  "npm-run-all": "^4.1.5",
55
- "prettier": "^2.4.0",
55
+ "prettier": "^2.6.2",
56
56
  "react": "^17.0.2",
57
57
  "react-dom": "^17.0.2",
58
58
  "regenerator-runtime": "^0.13.9",
59
- "rollup": "^2.59.0",
60
- "typescript": "^4.4.4"
59
+ "rollup": "^2.70.1",
60
+ "typescript": "^4.6.3"
61
61
  }
62
62
  }