react-transition-state 1.0.1 → 1.1.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/README.md +35 -16
- package/dist/index.d.ts +5 -2
- package/dist/index.es.js +79 -66
- package/dist/index.js +46 -117
- package/package.json +16 -12
- package/dist/index.min.js +0 -1
package/README.md
CHANGED
|
@@ -1,22 +1,31 @@
|
|
|
1
1
|
# React-Transition-State
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/react-transition-state)
|
|
4
|
+
[](https://www.npmjs.com/package/react-transition-state)
|
|
5
|
+
[](https://bundlephobia.com/package/react-transition-state)
|
|
4
6
|
[](https://snyk.io/test/github/szhsin/react-transition-state)
|
|
5
7
|
|
|
6
8
|
## Why?
|
|
7
9
|
|
|
8
|
-
|
|
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.
|
|
9
11
|
|
|
10
12
|
- 🍭 Working with both CSS animation and transition.
|
|
11
13
|
- 🔄 Moving React components in and out of DOM seamlessly.
|
|
12
14
|
- 🚫 Using no [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
|
|
13
15
|
- 🚀 Efficient: each state transition results in at most one extract render for your component.
|
|
14
|
-
- 🤏 Tiny: ideal for both component libraries and applications.
|
|
16
|
+
- 🤏 Tiny: [~0.7KB](https://bundlephobia.com/package/react-transition-state) and no dependencies, ideal for both component libraries and applications.
|
|
15
17
|
|
|
16
18
|
🤔 Not convinced? [See a comparison with _React Transition Group_](#comparisons-with-react-transition-group)
|
|
17
19
|
|
|
18
20
|
<br/>
|
|
19
21
|
|
|
22
|
+
## State diagram
|
|
23
|
+
|
|
24
|
+
|
|
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/>
|
|
28
|
+
|
|
20
29
|
## Install
|
|
21
30
|
|
|
22
31
|
```bash
|
|
@@ -31,6 +40,8 @@ yarn add react-transition-state
|
|
|
31
40
|
|
|
32
41
|
## Usage
|
|
33
42
|
|
|
43
|
+
### CSS example
|
|
44
|
+
|
|
34
45
|
```jsx
|
|
35
46
|
import { useTransition } from 'react-transition-state';
|
|
36
47
|
/* or import useTransition from 'react-transition-state'; */
|
|
@@ -68,7 +79,7 @@ export default Example;
|
|
|
68
79
|
|
|
69
80
|
<br/>
|
|
70
81
|
|
|
71
|
-
|
|
82
|
+
### styled-components example
|
|
72
83
|
|
|
73
84
|
```jsx
|
|
74
85
|
import React from 'react';
|
|
@@ -100,7 +111,6 @@ function StyledExample() {
|
|
|
100
111
|
{showButton && <button onClick={() => toggle(true)}>Show Message</button>}
|
|
101
112
|
{!showButton && (
|
|
102
113
|
<Box state={state}>
|
|
103
|
-
<h1>state: {state}</h1>
|
|
104
114
|
<p>This message is being transitioned in and out of the DOM.</p>
|
|
105
115
|
<button onClick={() => toggle(false)}>Close</button>
|
|
106
116
|
</Box>
|
|
@@ -116,14 +126,22 @@ export default StyledExample;
|
|
|
116
126
|
|
|
117
127
|
<br/>
|
|
118
128
|
|
|
129
|
+
### tailwindcss example
|
|
130
|
+
|
|
131
|
+
**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-tailwindcss-21nys)**
|
|
132
|
+
|
|
133
|
+
<br/>
|
|
134
|
+
|
|
119
135
|
## Comparisons with _React Transition Group_
|
|
120
136
|
|
|
121
137
|
| | React Transition Group | This library |
|
|
122
138
|
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
123
|
-
| Use derived state | _Yes_ –
|
|
139
|
+
| 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 |
|
|
124
140
|
| 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. |
|
|
125
141
|
| 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` |
|
|
126
142
|
| 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_ |
|
|
143
|
+
| Bundle size | [](https://bundlephobia.com/package/react-transition-group) | ✅ [](https://bundlephobia.com/package/react-transition-state) |
|
|
144
|
+
| Dependency count | [](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies) | ✅ [](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies) |
|
|
127
145
|
|
|
128
146
|
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_.
|
|
129
147
|
|
|
@@ -141,16 +159,17 @@ function useTransition(
|
|
|
141
159
|
|
|
142
160
|
#### Options
|
|
143
161
|
|
|
144
|
-
| Name | Type | Default | Description
|
|
145
|
-
| ---------------- | -------------------------------------------------- | ------- |
|
|
146
|
-
| `enter` | boolean | true | Enable or disable enter phase transitions
|
|
147
|
-
| `exit` | boolean | true | Enable or disable exit phase transitions
|
|
148
|
-
| `preEnter` | boolean | | Add a 'preEnter' state immediately before 'entering'
|
|
149
|
-
| `preExit` | boolean | | Add a 'preExit' state immediately before 'exiting'
|
|
150
|
-
| `initialEntered` | boolean | | Beginning from 'entered' state
|
|
151
|
-
| `mountOnEnter` | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component.
|
|
152
|
-
| `unmountOnExit` | boolean | | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM.
|
|
153
|
-
| `timeout` | number \| <br />{ enter?: number; exit?: number; } | | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions.
|
|
162
|
+
| Name | Type | Default | Description |
|
|
163
|
+
| ---------------- | -------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
164
|
+
| `enter` | boolean | true | Enable or disable enter phase transitions |
|
|
165
|
+
| `exit` | boolean | true | Enable or disable exit phase transitions |
|
|
166
|
+
| `preEnter` | boolean | | Add a 'preEnter' state immediately before 'entering', which is necessary to change DOM elements from unmounted or `display: none` with CSS transition (not necessary for CSS animation). |
|
|
167
|
+
| `preExit` | boolean | | Add a 'preExit' state immediately before 'exiting' |
|
|
168
|
+
| `initialEntered` | boolean | | Beginning from 'entered' state |
|
|
169
|
+
| `mountOnEnter` | boolean | | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. |
|
|
170
|
+
| `unmountOnExit` | boolean | | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM. |
|
|
171
|
+
| `timeout` | number \| <br />{ enter?: number; exit?: number; } | | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions. |
|
|
172
|
+
| `onChange` | (event: { state: string }) => void | | Event fired when state has changed. <br/><br/>Prefer to read state from the hook function return value directly unless you want to perform some side effects in response to state changes. <br/><br/>_Note: create an event handler with `useCallback` if you need to keep `toggle` or `endTransition` function's identity stable across re-renders._ |
|
|
154
173
|
|
|
155
174
|
#### Return value
|
|
156
175
|
|
|
@@ -166,7 +185,7 @@ The `useTransition` Hook returns an array of values in the following order:
|
|
|
166
185
|
|
|
167
186
|
- Call this function to stop transition which will turn state into 'entered' or 'exited'.
|
|
168
187
|
- You will normally call this function in the `onAnimationEnd` or `onTransitionEnd` event.
|
|
169
|
-
- You
|
|
188
|
+
- You need to either call this function explicitly in your code or set a timeout value in Hook options.
|
|
170
189
|
|
|
171
190
|
<br/>
|
|
172
191
|
|
package/dist/index.d.ts
CHANGED
|
@@ -16,8 +16,11 @@ export interface TransitionOptions {
|
|
|
16
16
|
enter?: boolean;
|
|
17
17
|
exit?: boolean;
|
|
18
18
|
timeout?: number | { enter?: number; exit?: number };
|
|
19
|
+
onChange?: (event: { state: TransitionState }) => void;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
export
|
|
22
|
+
export const useTransition: (
|
|
22
23
|
options?: TransitionOptions
|
|
23
|
-
)
|
|
24
|
+
) => [TransitionState, (toEnter?: boolean) => void, () => void];
|
|
25
|
+
|
|
26
|
+
export default useTransition;
|
package/dist/index.es.js
CHANGED
|
@@ -1,37 +1,49 @@
|
|
|
1
1
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
+
|
|
12
|
+
var startOrEnd = function startOrEnd(unmounted) {
|
|
13
|
+
return unmounted ? UNMOUNTED : EXITED;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
|
|
15
17
|
clearTimeout(timeoutId.current);
|
|
16
|
-
setState(
|
|
17
|
-
latestState.current =
|
|
18
|
+
setState(state);
|
|
19
|
+
latestState.current = state;
|
|
20
|
+
onChange && onChange({
|
|
21
|
+
state: STATES[state]
|
|
22
|
+
});
|
|
18
23
|
};
|
|
19
24
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
var useTransition = function useTransition(_temp) {
|
|
26
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
27
|
+
_ref$enter = _ref.enter,
|
|
28
|
+
enter = _ref$enter === void 0 ? true : _ref$enter,
|
|
29
|
+
_ref$exit = _ref.exit,
|
|
30
|
+
exit = _ref$exit === void 0 ? true : _ref$exit,
|
|
31
|
+
preEnter = _ref.preEnter,
|
|
32
|
+
preExit = _ref.preExit,
|
|
33
|
+
timeout = _ref.timeout,
|
|
34
|
+
initialEntered = _ref.initialEntered,
|
|
35
|
+
mountOnEnter = _ref.mountOnEnter,
|
|
36
|
+
unmountOnExit = _ref.unmountOnExit,
|
|
37
|
+
onChange = _ref.onChange;
|
|
38
|
+
|
|
39
|
+
var _useState = useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
|
|
40
|
+
state = _useState[0],
|
|
41
|
+
setState = _useState[1];
|
|
42
|
+
|
|
43
|
+
var latestState = useRef(state);
|
|
44
|
+
var timeoutId = useRef();
|
|
45
|
+
var enterTimeout, exitTimeout;
|
|
46
|
+
|
|
35
47
|
if (typeof timeout === 'object') {
|
|
36
48
|
enterTimeout = timeout.enter;
|
|
37
49
|
exitTimeout = timeout.exit;
|
|
@@ -39,64 +51,65 @@ const useTransition = ({
|
|
|
39
51
|
enterTimeout = exitTimeout = timeout;
|
|
40
52
|
}
|
|
41
53
|
|
|
42
|
-
|
|
43
|
-
|
|
54
|
+
var endTransition = useCallback(function () {
|
|
55
|
+
var newState;
|
|
56
|
+
|
|
44
57
|
switch (latestState.current) {
|
|
45
|
-
case PRE_ENTER:
|
|
46
58
|
case ENTERING:
|
|
59
|
+
case PRE_ENTER:
|
|
47
60
|
newState = ENTERED;
|
|
48
61
|
break;
|
|
49
|
-
|
|
62
|
+
|
|
50
63
|
case EXITING:
|
|
64
|
+
case PRE_EXIT:
|
|
51
65
|
newState = startOrEnd(unmountOnExit);
|
|
52
66
|
break;
|
|
53
67
|
}
|
|
54
68
|
|
|
55
|
-
if (newState) {
|
|
56
|
-
updateState(newState, setState, latestState, timeoutId);
|
|
69
|
+
if (newState !== undefined) {
|
|
70
|
+
updateState(newState, setState, latestState, timeoutId, onChange);
|
|
57
71
|
}
|
|
58
|
-
}, [unmountOnExit]);
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
updateState(newState, setState, latestState, timeoutId);
|
|
72
|
+
}, [onChange, unmountOnExit]);
|
|
73
|
+
var toggle = useCallback(function (toEnter) {
|
|
74
|
+
var transitState = function transitState(newState) {
|
|
75
|
+
updateState(newState, setState, latestState, timeoutId, onChange);
|
|
63
76
|
|
|
64
77
|
switch (newState) {
|
|
65
|
-
case PRE_ENTER:
|
|
66
|
-
case PRE_EXIT:
|
|
67
|
-
timeoutId.current = setTimeout(() => transitState(newState + 1), 0);
|
|
68
|
-
break;
|
|
69
78
|
case ENTERING:
|
|
70
79
|
if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
|
|
71
80
|
break;
|
|
81
|
+
|
|
72
82
|
case EXITING:
|
|
73
83
|
if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
|
|
74
84
|
break;
|
|
85
|
+
|
|
86
|
+
case PRE_ENTER:
|
|
87
|
+
case PRE_EXIT:
|
|
88
|
+
timeoutId.current = setTimeout(function () {
|
|
89
|
+
return transitState(newState + 1);
|
|
90
|
+
}, 0);
|
|
91
|
+
break;
|
|
75
92
|
}
|
|
76
|
-
}
|
|
77
|
-
[enterTimeout, exitTimeout, endTransition]
|
|
78
|
-
);
|
|
79
|
-
|
|
80
|
-
const toggle = useCallback(
|
|
81
|
-
(toEnter) => {
|
|
82
|
-
const enterStage = latestState.current <= ENTERED;
|
|
83
|
-
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
84
|
-
|
|
85
|
-
if (toEnter) {
|
|
86
|
-
if (!enterStage) {
|
|
87
|
-
transitState(enter ? (preEnter ? PRE_ENTER : ENTERING) : ENTERED);
|
|
88
|
-
}
|
|
89
|
-
} else {
|
|
90
|
-
if (enterStage) {
|
|
91
|
-
transitState(exit ? (preExit ? PRE_EXIT : EXITING) : startOrEnd(unmountOnExit));
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
[enter, exit, preEnter, preExit, unmountOnExit, transitState]
|
|
96
|
-
);
|
|
93
|
+
};
|
|
97
94
|
|
|
98
|
-
|
|
95
|
+
var enterStage = latestState.current <= ENTERED;
|
|
96
|
+
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
99
97
|
|
|
98
|
+
if (toEnter) {
|
|
99
|
+
if (!enterStage) {
|
|
100
|
+
transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
|
|
101
|
+
}
|
|
102
|
+
} else {
|
|
103
|
+
if (enterStage) {
|
|
104
|
+
transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
108
|
+
useEffect(function () {
|
|
109
|
+
return function () {
|
|
110
|
+
return clearTimeout(timeoutId.current);
|
|
111
|
+
};
|
|
112
|
+
}, []);
|
|
100
113
|
return [STATES[state], toggle, endTransition];
|
|
101
114
|
};
|
|
102
115
|
|
package/dist/index.js
CHANGED
|
@@ -4,81 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var react = require('react');
|
|
6
6
|
|
|
7
|
-
function _typeof(obj) {
|
|
8
|
-
"@babel/helpers - typeof";
|
|
9
|
-
|
|
10
|
-
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
11
|
-
_typeof = function (obj) {
|
|
12
|
-
return typeof obj;
|
|
13
|
-
};
|
|
14
|
-
} else {
|
|
15
|
-
_typeof = function (obj) {
|
|
16
|
-
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
return _typeof(obj);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function _slicedToArray(arr, i) {
|
|
24
|
-
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function _arrayWithHoles(arr) {
|
|
28
|
-
if (Array.isArray(arr)) return arr;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function _iterableToArrayLimit(arr, i) {
|
|
32
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
33
|
-
|
|
34
|
-
if (_i == null) return;
|
|
35
|
-
var _arr = [];
|
|
36
|
-
var _n = true;
|
|
37
|
-
var _d = false;
|
|
38
|
-
|
|
39
|
-
var _s, _e;
|
|
40
|
-
|
|
41
|
-
try {
|
|
42
|
-
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
|
43
|
-
_arr.push(_s.value);
|
|
44
|
-
|
|
45
|
-
if (i && _arr.length === i) break;
|
|
46
|
-
}
|
|
47
|
-
} catch (err) {
|
|
48
|
-
_d = true;
|
|
49
|
-
_e = err;
|
|
50
|
-
} finally {
|
|
51
|
-
try {
|
|
52
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
53
|
-
} finally {
|
|
54
|
-
if (_d) throw _e;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
return _arr;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function _unsupportedIterableToArray(o, minLen) {
|
|
62
|
-
if (!o) return;
|
|
63
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
64
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
65
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
66
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
|
67
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function _arrayLikeToArray(arr, len) {
|
|
71
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
72
|
-
|
|
73
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
74
|
-
|
|
75
|
-
return arr2;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function _nonIterableRest() {
|
|
79
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
80
|
-
}
|
|
81
|
-
|
|
82
7
|
var PRE_ENTER = 0;
|
|
83
8
|
var ENTERING = 1;
|
|
84
9
|
var ENTERED = 2;
|
|
@@ -92,35 +17,38 @@ var startOrEnd = function startOrEnd(unmounted) {
|
|
|
92
17
|
return unmounted ? UNMOUNTED : EXITED;
|
|
93
18
|
};
|
|
94
19
|
|
|
95
|
-
var updateState = function updateState(
|
|
20
|
+
var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
|
|
96
21
|
clearTimeout(timeoutId.current);
|
|
97
|
-
setState(
|
|
98
|
-
latestState.current =
|
|
22
|
+
setState(state);
|
|
23
|
+
latestState.current = state;
|
|
24
|
+
onChange && onChange({
|
|
25
|
+
state: STATES[state]
|
|
26
|
+
});
|
|
99
27
|
};
|
|
100
28
|
|
|
101
|
-
var useTransition = function useTransition() {
|
|
102
|
-
var _ref =
|
|
103
|
-
initialEntered = _ref.initialEntered,
|
|
104
|
-
mountOnEnter = _ref.mountOnEnter,
|
|
105
|
-
unmountOnExit = _ref.unmountOnExit,
|
|
106
|
-
timeout = _ref.timeout,
|
|
107
|
-
preEnter = _ref.preEnter,
|
|
108
|
-
preExit = _ref.preExit,
|
|
29
|
+
var useTransition = function useTransition(_temp) {
|
|
30
|
+
var _ref = _temp === void 0 ? {} : _temp,
|
|
109
31
|
_ref$enter = _ref.enter,
|
|
110
32
|
enter = _ref$enter === void 0 ? true : _ref$enter,
|
|
111
33
|
_ref$exit = _ref.exit,
|
|
112
|
-
exit = _ref$exit === void 0 ? true : _ref$exit
|
|
34
|
+
exit = _ref$exit === void 0 ? true : _ref$exit,
|
|
35
|
+
preEnter = _ref.preEnter,
|
|
36
|
+
preExit = _ref.preExit,
|
|
37
|
+
timeout = _ref.timeout,
|
|
38
|
+
initialEntered = _ref.initialEntered,
|
|
39
|
+
mountOnEnter = _ref.mountOnEnter,
|
|
40
|
+
unmountOnExit = _ref.unmountOnExit,
|
|
41
|
+
onChange = _ref.onChange;
|
|
113
42
|
|
|
114
43
|
var _useState = react.useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
setState = _useState2[1];
|
|
44
|
+
state = _useState[0],
|
|
45
|
+
setState = _useState[1];
|
|
118
46
|
|
|
119
47
|
var latestState = react.useRef(state);
|
|
120
48
|
var timeoutId = react.useRef();
|
|
121
49
|
var enterTimeout, exitTimeout;
|
|
122
50
|
|
|
123
|
-
if (
|
|
51
|
+
if (typeof timeout === 'object') {
|
|
124
52
|
enterTimeout = timeout.enter;
|
|
125
53
|
exitTimeout = timeout.exit;
|
|
126
54
|
} else {
|
|
@@ -131,42 +59,43 @@ var useTransition = function useTransition() {
|
|
|
131
59
|
var newState;
|
|
132
60
|
|
|
133
61
|
switch (latestState.current) {
|
|
134
|
-
case PRE_ENTER:
|
|
135
62
|
case ENTERING:
|
|
63
|
+
case PRE_ENTER:
|
|
136
64
|
newState = ENTERED;
|
|
137
65
|
break;
|
|
138
66
|
|
|
139
|
-
case PRE_EXIT:
|
|
140
67
|
case EXITING:
|
|
68
|
+
case PRE_EXIT:
|
|
141
69
|
newState = startOrEnd(unmountOnExit);
|
|
142
70
|
break;
|
|
143
71
|
}
|
|
144
72
|
|
|
145
|
-
if (newState) {
|
|
146
|
-
updateState(newState, setState, latestState, timeoutId);
|
|
147
|
-
}
|
|
148
|
-
}, [unmountOnExit]);
|
|
149
|
-
var transitState = react.useCallback(function (newState) {
|
|
150
|
-
updateState(newState, setState, latestState, timeoutId);
|
|
151
|
-
|
|
152
|
-
switch (newState) {
|
|
153
|
-
case PRE_ENTER:
|
|
154
|
-
case PRE_EXIT:
|
|
155
|
-
timeoutId.current = setTimeout(function () {
|
|
156
|
-
return transitState(newState + 1);
|
|
157
|
-
}, 0);
|
|
158
|
-
break;
|
|
159
|
-
|
|
160
|
-
case ENTERING:
|
|
161
|
-
if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
|
|
162
|
-
break;
|
|
163
|
-
|
|
164
|
-
case EXITING:
|
|
165
|
-
if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
|
|
166
|
-
break;
|
|
73
|
+
if (newState !== undefined) {
|
|
74
|
+
updateState(newState, setState, latestState, timeoutId, onChange);
|
|
167
75
|
}
|
|
168
|
-
}, [
|
|
76
|
+
}, [onChange, unmountOnExit]);
|
|
169
77
|
var toggle = react.useCallback(function (toEnter) {
|
|
78
|
+
var transitState = function transitState(newState) {
|
|
79
|
+
updateState(newState, setState, latestState, timeoutId, onChange);
|
|
80
|
+
|
|
81
|
+
switch (newState) {
|
|
82
|
+
case ENTERING:
|
|
83
|
+
if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
|
|
84
|
+
break;
|
|
85
|
+
|
|
86
|
+
case EXITING:
|
|
87
|
+
if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
|
|
88
|
+
break;
|
|
89
|
+
|
|
90
|
+
case PRE_ENTER:
|
|
91
|
+
case PRE_EXIT:
|
|
92
|
+
timeoutId.current = setTimeout(function () {
|
|
93
|
+
return transitState(newState + 1);
|
|
94
|
+
}, 0);
|
|
95
|
+
break;
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
|
|
170
99
|
var enterStage = latestState.current <= ENTERED;
|
|
171
100
|
if (typeof toEnter !== 'boolean') toEnter = !enterStage;
|
|
172
101
|
|
|
@@ -179,7 +108,7 @@ var useTransition = function useTransition() {
|
|
|
179
108
|
transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
|
|
180
109
|
}
|
|
181
110
|
}
|
|
182
|
-
}, [enter, exit, preEnter, preExit,
|
|
111
|
+
}, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
|
|
183
112
|
react.useEffect(function () {
|
|
184
113
|
return function () {
|
|
185
114
|
return clearTimeout(timeoutId.current);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-transition-state",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.1.3",
|
|
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",
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"main": "dist/index.js",
|
|
10
10
|
"module": "dist/index.es.js",
|
|
11
11
|
"types": "dist/index.d.ts",
|
|
12
|
+
"sideEffects": false,
|
|
12
13
|
"files": [
|
|
13
14
|
"dist"
|
|
14
15
|
],
|
|
@@ -20,13 +21,14 @@
|
|
|
20
21
|
"hook"
|
|
21
22
|
],
|
|
22
23
|
"scripts": {
|
|
23
|
-
"start": "rollup
|
|
24
|
+
"start": "rollup -c -w",
|
|
24
25
|
"clean": "rm -Rf dist",
|
|
25
|
-
"bundle": "rollup
|
|
26
|
+
"bundle": "rollup -c",
|
|
26
27
|
"test": "jest",
|
|
27
28
|
"eg": "npm start --prefix example",
|
|
28
29
|
"dtslint": "dtslint --localTs node_modules/typescript/lib types",
|
|
29
30
|
"types": "npm run dtslint && cp -f types/index.d.ts dist/",
|
|
31
|
+
"tsc": "cd types && tsc",
|
|
30
32
|
"lint": "eslint .",
|
|
31
33
|
"lint:fix": "eslint --fix .",
|
|
32
34
|
"pret": "prettier --write .",
|
|
@@ -37,22 +39,24 @@
|
|
|
37
39
|
"react-dom": ">=16.8.0"
|
|
38
40
|
},
|
|
39
41
|
"devDependencies": {
|
|
40
|
-
"@babel/
|
|
42
|
+
"@babel/core": "^7.16.0",
|
|
43
|
+
"@babel/preset-env": "^7.16.4",
|
|
41
44
|
"@rollup/plugin-babel": "^5.3.0",
|
|
42
45
|
"@testing-library/react-hooks": "^7.0.2",
|
|
46
|
+
"@types/jest": "^27.0.3",
|
|
47
|
+
"babel-plugin-pure-annotations": "^0.1.2",
|
|
43
48
|
"dtslint": "^4.1.6",
|
|
44
49
|
"eslint": "^7.32.0",
|
|
45
50
|
"eslint-config-prettier": "^8.3.0",
|
|
46
|
-
"eslint-plugin-jest": "^
|
|
47
|
-
"eslint-plugin-react-hooks": "^4.
|
|
48
|
-
"jest": "^27.1
|
|
51
|
+
"eslint-plugin-jest": "^25.2.4",
|
|
52
|
+
"eslint-plugin-react-hooks": "^4.3.0",
|
|
53
|
+
"jest": "^27.3.1",
|
|
49
54
|
"npm-run-all": "^4.1.5",
|
|
50
|
-
"prettier": "^2.
|
|
55
|
+
"prettier": "^2.4.0",
|
|
51
56
|
"react": "^17.0.2",
|
|
52
57
|
"react-dom": "^17.0.2",
|
|
53
58
|
"regenerator-runtime": "^0.13.9",
|
|
54
|
-
"rollup": "^2.
|
|
55
|
-
"
|
|
56
|
-
"typescript": "^4.4.2"
|
|
59
|
+
"rollup": "^2.60.0",
|
|
60
|
+
"typescript": "^4.5.2"
|
|
57
61
|
}
|
|
58
62
|
}
|
package/dist/index.min.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==r)return;var n,o,u=[],i=!0,c=!1;try{for(r=r.call(t);!(i=(n=r.next()).done)&&(u.push(n.value),!e||u.length!==e);i=!0);}catch(t){c=!0,o=t}finally{try{i||null==r.return||r.return()}finally{if(c)throw o}}return u}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}var o=["preEnter","entering","entered","preExit","exiting","exited","unmounted"],u=function(t){return t?6:5},i=function(t,e,r,n){clearTimeout(n.current),e(t),r.current=t},c=function(){var n,c,a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},l=a.initialEntered,f=a.mountOnEnter,s=a.unmountOnExit,y=a.timeout,m=a.preEnter,b=a.preExit,p=a.enter,d=void 0===p||p,v=a.exit,h=void 0===v||v,x=t.useState(l?2:u(f)),S=r(x,2),g=S[0],E=S[1],T=t.useRef(g),k=t.useRef();"object"===e(y)?(n=y.enter,c=y.exit):n=c=y;var w=t.useCallback((function(){var t;switch(T.current){case 0:case 1:t=2;break;case 3:case 4:t=u(s)}t&&i(t,E,T,k)}),[s]),A=t.useCallback((function(t){switch(i(t,E,T,k),t){case 0:case 3:k.current=setTimeout((function(){return A(t+1)}),0);break;case 1:n>=0&&(k.current=setTimeout(w,n));break;case 4:c>=0&&(k.current=setTimeout(w,c))}}),[n,c,w]),j=t.useCallback((function(t){var e=T.current<=2;"boolean"!=typeof t&&(t=!e),t?e||A(d?m?0:1:2):e&&A(h?b?3:4:u(s))}),[d,h,m,b,s,A]);return t.useEffect((function(){return function(){return clearTimeout(k.current)}}),[]),[o[g],j,w]};exports.default=c,exports.useTransition=c;
|