react-transition-state 1.2.0-alpha.4 → 2.0.0-alpha.1

package/dist/cjs/index.js

@@ -11,20 +11,21 @@ var PRE_EXIT = 3;
 var EXITING = 4;
 var EXITED = 5;
 var UNMOUNTED = 6;
-var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
-var getFullState = function getFullState(_state) {
+var STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+var getState = function getState(_status) {
   return {
-    _state: _state,
-    state: STATES[_state],
-    isEnter: _state < PRE_EXIT,
-    isMounted: _state !== UNMOUNTED
+    _status: _status,
+    status: STATUS[_status],
+    isEnter: _status < PRE_EXIT,
+    isMounted: _status !== UNMOUNTED,
+    isResolved: _status === ENTERED || _status > EXITING
   };
 };
 var startOrEnd = function startOrEnd(unmounted) {
   return unmounted ? UNMOUNTED : EXITED;
 };
-var getEndState = function getEndState(state, unmountOnExit) {
-  switch (state) {
+var getEndStatus = function getEndStatus(status, unmountOnExit) {
+  switch (status) {
     case ENTERING:
     case PRE_ENTER:
       return ENTERED;
@@ -38,12 +39,13 @@ var getTimeout = function getTimeout(timeout) {
   return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
 };
 
-var updateState$1 = function updateState(state, setState, latestState, timeoutId, onChange) {
+var updateState$1 = function updateState(status, setState, latestState, timeoutId, onChange) {
   clearTimeout(timeoutId.current);
+  var state = getState(status);
   setState(state);
   latestState.current = state;
   onChange && onChange({
-    state: STATES[state]
+    current: state
   });
 };
 
@@ -59,9 +61,11 @@ var useTransition = function useTransition(_temp) {
       initialEntered = _ref.initialEntered,
       mountOnEnter = _ref.mountOnEnter,
       unmountOnExit = _ref.unmountOnExit,
-      onChange = _ref.onChange;
+      onChange = _ref.onStateChange;
 
-  var _useState = react.useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
+  var _useState = react.useState(function () {
+    return getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter));
+  }),
       state = _useState[0],
       setState = _useState[1];
 
@@ -73,14 +77,14 @@ var useTransition = function useTransition(_temp) {
       exitTimeout = _getTimeout[1];
 
   var endTransition = react.useCallback(function () {
-    var newState = getEndState(latestState.current, unmountOnExit);
-    newState && updateState$1(newState, setState, latestState, timeoutId, onChange);
+    var status = getEndStatus(latestState.current._status, unmountOnExit);
+    status && updateState$1(status, setState, latestState, timeoutId, onChange);
   }, [onChange, unmountOnExit]);
   var toggle = react.useCallback(function (toEnter) {
-    var transitState = function transitState(newState) {
-      updateState$1(newState, setState, latestState, timeoutId, onChange);
+    var transitState = function transitState(status) {
+      updateState$1(status, setState, latestState, timeoutId, onChange);
 
-      switch (newState) {
+      switch (status) {
         case ENTERING:
           if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
           break;
@@ -92,13 +96,13 @@ var useTransition = function useTransition(_temp) {
         case PRE_ENTER:
         case PRE_EXIT:
           timeoutId.current = setTimeout(function () {
-            return transitState(newState + 1);
+            return transitState(status + 1);
           }, 0);
           break;
       }
     };
 
-    var enterStage = latestState.current <= ENTERED;
+    var enterStage = latestState.current._status <= ENTERED;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
 
     if (toEnter) {
@@ -112,7 +116,7 @@ var useTransition = function useTransition(_temp) {
       return clearTimeout(timeoutId.current);
     };
   }, []);
-  return [STATES[state], toggle, endTransition];
+  return [state, toggle, endTransition];
 };
 
 var initialStateMap = new Map();
@@ -120,13 +124,13 @@ var initialConfigMap = new Map();
 
 var updateState = function updateState(_ref) {
   var key = _ref.key,
-      _state = _ref.newState,
+      status = _ref.status,
       setStateMap = _ref.setStateMap,
       latestStateMap = _ref.latestStateMap,
       timeoutId = _ref.timeoutId,
       onChange = _ref.onChange;
   clearTimeout(timeoutId);
-  var state = getFullState(_state);
+  var state = getState(status);
   var stateMap = new Map(latestStateMap.current);
   stateMap.set(key, state);
   setStateMap(stateMap);
@@ -139,7 +143,7 @@ var updateState = function updateState(_ref) {
 
 var useTransitionMap = function useTransitionMap(_temp) {
   var _ref2 = _temp === void 0 ? {} : _temp,
-      singleEnter = _ref2.singleEnter,
+      allowMultiple = _ref2.allowMultiple,
       _ref2$enter = _ref2.enter,
       enter = _ref2$enter === void 0 ? true : _ref2$enter,
       _ref2$exit = _ref2.exit,
@@ -150,7 +154,7 @@ var useTransitionMap = function useTransitionMap(_temp) {
       initialEntered = _ref2.initialEntered,
       mountOnEnter = _ref2.mountOnEnter,
       unmountOnExit = _ref2.unmountOnExit,
-      onChange = _ref2.onChange;
+      onChange = _ref2.onStateChange;
 
   var _useState = react.useState(initialStateMap),
       stateMap = _useState[0],
@@ -168,10 +172,10 @@ var useTransitionMap = function useTransitionMap(_temp) {
         _ref3$initialEntered = _ref3.initialEntered,
         _initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
 
-    var newState = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+    var status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
     updateState({
       key: key,
-      newState: newState,
+      status: status,
       setStateMap: setStateMap,
       latestStateMap: latestStateMap
     });
@@ -200,10 +204,10 @@ var useTransitionMap = function useTransitionMap(_temp) {
     var _configMap$current$ge = configMap.current.get(key),
         timeoutId = _configMap$current$ge.timeoutId;
 
-    var newState = getEndState(stateObj._state, unmountOnExit);
-    newState && updateState({
+    var status = getEndStatus(stateObj._status, unmountOnExit);
+    status && updateState({
       key: key,
-      newState: newState,
+      status: status,
       setStateMap: setStateMap,
       latestStateMap: latestStateMap,
       timeoutId: timeoutId,
@@ -220,17 +224,17 @@ var useTransitionMap = function useTransitionMap(_temp) {
 
     var config = configMap.current.get(key);
 
-    var transitState = function transitState(newState) {
+    var transitState = function transitState(status) {
       updateState({
         key: key,
-        newState: newState,
+        status: status,
         setStateMap: setStateMap,
         latestStateMap: latestStateMap,
         timeoutId: config.timeoutId,
         onChange: onChange
       });
 
-      switch (newState) {
+      switch (status) {
         case ENTERING:
           if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
             return endTransition(key);
@@ -246,19 +250,19 @@ var useTransitionMap = function useTransitionMap(_temp) {
         case PRE_ENTER:
         case PRE_EXIT:
           config.timeoutId = setTimeout(function () {
-            return transitState(newState + 1);
+            return transitState(status + 1);
           }, 0);
           break;
       }
     };
 
-    var enterStage = stateObj._state <= ENTERED;
+    var enterStage = stateObj._status <= ENTERED;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
 
     if (toEnter) {
       if (!enterStage) {
         transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-        singleEnter && latestStateMap.current.forEach(function (_, _key) {
+        !allowMultiple && latestStateMap.current.forEach(function (_, _key) {
           return _key !== key && toggle(_key, false);
         });
       }
@@ -267,7 +271,7 @@ var useTransitionMap = function useTransitionMap(_temp) {
         transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
       }
     }
-  }, [onChange, endTransition, singleEnter, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
   return {
     stateMap: stateMap,
     toggle: toggle,

package/dist/es/hooks/useTransition.js

@@ -1,12 +1,13 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { ENTERED, startOrEnd, getTimeout, getEndState, PRE_EXIT, EXITING, STATES, PRE_ENTER, ENTERING } from './utils.js';
+import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus, PRE_EXIT, EXITING, PRE_ENTER, ENTERING } from './utils.js';
 
-var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
+var updateState = function updateState(status, setState, latestState, timeoutId, onChange) {
   clearTimeout(timeoutId.current);
+  var state = getState(status);
   setState(state);
   latestState.current = state;
   onChange && onChange({
-    state: STATES[state]
+    current: state
   });
 };
 
@@ -22,9 +23,11 @@ var useTransition = function useTransition(_temp) {
       initialEntered = _ref.initialEntered,
       mountOnEnter = _ref.mountOnEnter,
       unmountOnExit = _ref.unmountOnExit,
-      onChange = _ref.onChange;
+      onChange = _ref.onStateChange;
 
-  var _useState = useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
+  var _useState = useState(function () {
+    return getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter));
+  }),
       state = _useState[0],
       setState = _useState[1];
 
@@ -36,14 +39,14 @@ var useTransition = function useTransition(_temp) {
       exitTimeout = _getTimeout[1];
 
   var endTransition = useCallback(function () {
-    var newState = getEndState(latestState.current, unmountOnExit);
-    newState && updateState(newState, setState, latestState, timeoutId, onChange);
+    var status = getEndStatus(latestState.current._status, unmountOnExit);
+    status && updateState(status, setState, latestState, timeoutId, onChange);
   }, [onChange, unmountOnExit]);
   var toggle = useCallback(function (toEnter) {
-    var transitState = function transitState(newState) {
-      updateState(newState, setState, latestState, timeoutId, onChange);
+    var transitState = function transitState(status) {
+      updateState(status, setState, latestState, timeoutId, onChange);
 
-      switch (newState) {
+      switch (status) {
         case ENTERING:
           if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
           break;
@@ -55,13 +58,13 @@ var useTransition = function useTransition(_temp) {
         case PRE_ENTER:
         case PRE_EXIT:
           timeoutId.current = setTimeout(function () {
-            return transitState(newState + 1);
+            return transitState(status + 1);
           }, 0);
           break;
       }
     };
 
-    var enterStage = latestState.current <= ENTERED;
+    var enterStage = latestState.current._status <= ENTERED;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
 
     if (toEnter) {
@@ -75,7 +78,7 @@ var useTransition = function useTransition(_temp) {
       return clearTimeout(timeoutId.current);
     };
   }, []);
-  return [STATES[state], toggle, endTransition];
+  return [state, toggle, endTransition];
 };
 
 export { useTransition };

package/dist/es/hooks/useTransitionMap.js

@@ -1,18 +1,18 @@
 import { useState, useRef, useCallback } from 'react';
-import { getTimeout, ENTERED, startOrEnd, getEndState, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, getFullState } from './utils.js';
+import { getTimeout, ENTERED, startOrEnd, getEndStatus, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, getState } from './utils.js';
 
 var initialStateMap = new Map();
 var initialConfigMap = new Map();
 
 var updateState = function updateState(_ref) {
   var key = _ref.key,
-      _state = _ref.newState,
+      status = _ref.status,
       setStateMap = _ref.setStateMap,
       latestStateMap = _ref.latestStateMap,
       timeoutId = _ref.timeoutId,
       onChange = _ref.onChange;
   clearTimeout(timeoutId);
-  var state = getFullState(_state);
+  var state = getState(status);
   var stateMap = new Map(latestStateMap.current);
   stateMap.set(key, state);
   setStateMap(stateMap);
@@ -25,7 +25,7 @@ var updateState = function updateState(_ref) {
 
 var useTransitionMap = function useTransitionMap(_temp) {
   var _ref2 = _temp === void 0 ? {} : _temp,
-      singleEnter = _ref2.singleEnter,
+      allowMultiple = _ref2.allowMultiple,
       _ref2$enter = _ref2.enter,
       enter = _ref2$enter === void 0 ? true : _ref2$enter,
       _ref2$exit = _ref2.exit,
@@ -36,7 +36,7 @@ var useTransitionMap = function useTransitionMap(_temp) {
       initialEntered = _ref2.initialEntered,
       mountOnEnter = _ref2.mountOnEnter,
       unmountOnExit = _ref2.unmountOnExit,
-      onChange = _ref2.onChange;
+      onChange = _ref2.onStateChange;
 
   var _useState = useState(initialStateMap),
       stateMap = _useState[0],
@@ -54,10 +54,10 @@ var useTransitionMap = function useTransitionMap(_temp) {
         _ref3$initialEntered = _ref3.initialEntered,
         _initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
 
-    var newState = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+    var status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
     updateState({
       key: key,
-      newState: newState,
+      status: status,
       setStateMap: setStateMap,
       latestStateMap: latestStateMap
     });
@@ -86,10 +86,10 @@ var useTransitionMap = function useTransitionMap(_temp) {
     var _configMap$current$ge = configMap.current.get(key),
         timeoutId = _configMap$current$ge.timeoutId;
 
-    var newState = getEndState(stateObj._state, unmountOnExit);
-    newState && updateState({
+    var status = getEndStatus(stateObj._status, unmountOnExit);
+    status && updateState({
       key: key,
-      newState: newState,
+      status: status,
       setStateMap: setStateMap,
       latestStateMap: latestStateMap,
       timeoutId: timeoutId,
@@ -106,17 +106,17 @@ var useTransitionMap = function useTransitionMap(_temp) {
 
     var config = configMap.current.get(key);
 
-    var transitState = function transitState(newState) {
+    var transitState = function transitState(status) {
       updateState({
         key: key,
-        newState: newState,
+        status: status,
         setStateMap: setStateMap,
         latestStateMap: latestStateMap,
         timeoutId: config.timeoutId,
         onChange: onChange
       });
 
-      switch (newState) {
+      switch (status) {
         case ENTERING:
           if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
             return endTransition(key);
@@ -132,19 +132,19 @@ var useTransitionMap = function useTransitionMap(_temp) {
         case PRE_ENTER:
         case PRE_EXIT:
           config.timeoutId = setTimeout(function () {
-            return transitState(newState + 1);
+            return transitState(status + 1);
           }, 0);
           break;
       }
     };
 
-    var enterStage = stateObj._state <= ENTERED;
+    var enterStage = stateObj._status <= ENTERED;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
 
     if (toEnter) {
       if (!enterStage) {
         transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-        singleEnter && latestStateMap.current.forEach(function (_, _key) {
+        !allowMultiple && latestStateMap.current.forEach(function (_, _key) {
           return _key !== key && toggle(_key, false);
         });
       }
@@ -153,7 +153,7 @@ var useTransitionMap = function useTransitionMap(_temp) {
         transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
       }
     }
-  }, [onChange, endTransition, singleEnter, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
   return {
     stateMap: stateMap,
     toggle: toggle,

package/dist/es/hooks/utils.js

@@ -5,20 +5,21 @@ var PRE_EXIT = 3;
 var EXITING = 4;
 var EXITED = 5;
 var UNMOUNTED = 6;
-var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
-var getFullState = function getFullState(_state) {
+var STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+var getState = function getState(_status) {
   return {
-    _state: _state,
-    state: STATES[_state],
-    isEnter: _state < PRE_EXIT,
-    isMounted: _state !== UNMOUNTED
+    _status: _status,
+    status: STATUS[_status],
+    isEnter: _status < PRE_EXIT,
+    isMounted: _status !== UNMOUNTED,
+    isResolved: _status === ENTERED || _status > EXITING
   };
 };
 var startOrEnd = function startOrEnd(unmounted) {
   return unmounted ? UNMOUNTED : EXITED;
 };
-var getEndState = function getEndState(state, unmountOnExit) {
-  switch (state) {
+var getEndStatus = function getEndStatus(status, unmountOnExit) {
+  switch (status) {
     case ENTERING:
     case PRE_ENTER:
       return ENTERED;
@@ -32,4 +33,4 @@ var getTimeout = function getTimeout(timeout) {
   return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
 };
 
-export { ENTERED, ENTERING, EXITED, EXITING, PRE_ENTER, PRE_EXIT, STATES, UNMOUNTED, getEndState, getFullState, getTimeout, startOrEnd };
+export { ENTERED, ENTERING, EXITED, EXITING, PRE_ENTER, PRE_EXIT, STATUS, UNMOUNTED, getEndStatus, getState, getTimeout, startOrEnd };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-transition-state",
-  "version": "1.2.0-alpha.4",
-  "description": "Zero dependency, 0.7KB react-transition-group alternative.",
+  "version": "2.0.0-alpha.1",
+  "description": "Zero dependency React transition state machine.",
   "author": "Zheng Song",
   "license": "MIT",
   "repository": "szhsin/react-transition-state",
@@ -19,7 +19,8 @@
     "transition",
     "animation",
     "component",
-    "hook"
+    "hook",
+    "state machine"
   ],
   "scripts": {
     "start": "rollup -c -w",

package/types/index.d.ts

@@ -1,4 +1,4 @@
-export type TransitionState =
+export type TransitionStatus =
   | 'preEnter'
   | 'entering'
   | 'entered'
@@ -7,11 +7,12 @@ export type TransitionState =
   | 'exited'
   | 'unmounted';
 
-export interface State {
-  state: TransitionState;
+export type TransitionState = Readonly<{
+  status: TransitionStatus;
   isMounted: boolean;
   isEnter: boolean;
-}
+  isResolved: boolean;
+}>;
 
 export interface TransitionOptions {
   initialEntered?: boolean;
@@ -22,22 +23,22 @@ export interface TransitionOptions {
   enter?: boolean;
   exit?: boolean;
   timeout?: number | { enter?: number; exit?: number };
-  onChange?: (event: { state: TransitionState }) => void;
+  onStateChange?: (event: { current: TransitionState }) => void;
 }
 
 export interface TransitionItemOptions {
   initialEntered?: boolean;
 }
 
-export interface TransitionMapOptions<K> extends Omit<TransitionOptions, 'onChange'> {
-  singleEnter?: boolean;
-  onChange?: (event: { key: K; current: State }) => void;
+export interface TransitionMapOptions<K> extends Omit<TransitionOptions, 'onStateChange'> {
+  allowMultiple?: boolean;
+  onStateChange?: (event: { key: K; current: TransitionState }) => void;
 }
 
 export type TransitionResult = [TransitionState, (toEnter?: boolean) => void, () => void];
 
 export interface TransitionMapResult<K> {
-  stateMap: Omit<Map<K, State>, 'clear' | 'delete' | 'set'>;
+  stateMap: ReadonlyMap<K, TransitionState>;
   toggle: (key: K, toEnter?: boolean) => void;
   endTransition: (key: K) => void;
   setItem: (key: K, options?: TransitionItemOptions) => void;