react-transition-state - npm Package Compare versions

Comparing version 1.2.0-alpha.3 to 1.2.0-alpha.4

dist/cjs/index.js

@@ -105,9 +105,5 @@ 'use strict';
     if (toEnter) {
-      if (!enterStage) {
-        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-      }
+      !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
     } else {
-      if (enterStage) {
-        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
-      }
+      enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
     }
@@ -123,20 +119,2 @@ }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
 var initialStateMap = new Map();
@@ -158,5 +136,6 @@ var initialConfigMap = new Map();
   latestStateMap.current = stateMap;
-  onChange && onChange(_extends({
-    key: key
-  }, state));
+  onChange && onChange({
+    key: key,
+    current: state
+  });
 };
@@ -166,3 +145,14 @@
   var _ref2 = _temp === void 0 ? {} : _temp,
-      singleEnter = _ref2.singleEnter;
+      singleEnter = _ref2.singleEnter,
+      _ref2$enter = _ref2.enter,
+      enter = _ref2$enter === void 0 ? true : _ref2$enter,
+      _ref2$exit = _ref2.exit,
+      exit = _ref2$exit === void 0 ? true : _ref2$exit,
+      preEnter = _ref2.preEnter,
+      preExit = _ref2.preExit,
+      timeout = _ref2.timeout,
+      initialEntered = _ref2.initialEntered,
+      mountOnEnter = _ref2.mountOnEnter,
+      unmountOnExit = _ref2.unmountOnExit,
+      onChange = _ref2.onChange;
 
@@ -175,11 +165,13 @@ var _useState = react.useState(initialStateMap),
   var configMap = react.useRef(initialConfigMap);
+
+  var _getTimeout = getTimeout(timeout),
+      enterTimeout = _getTimeout[0],
+      exitTimeout = _getTimeout[1];
+
   var setItem = react.useCallback(function (key, config) {
-    if (config === void 0) {
-      config = {};
-    }
+    var _ref3 = config || {},
+        _ref3$initialEntered = _ref3.initialEntered,
+        _initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
 
-    var _config = config,
-        initialEntered = _config.initialEntered,
-        mountOnEnter = _config.mountOnEnter;
-    var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+    var newState = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
     updateState({
@@ -191,4 +183,4 @@ key: key,
     });
-    configMap.current.set(key, _extends({}, config));
-  }, []);
+    configMap.current.set(key, {});
+  }, [initialEntered, mountOnEnter]);
   var deleteItem = react.useCallback(function (key) {
@@ -215,5 +207,3 @@ var newStateMap = new Map(latestStateMap.current);
     var _configMap$current$ge = configMap.current.get(key),
-        timeoutId = _configMap$current$ge.timeoutId,
-        onChange = _configMap$current$ge.onChange,
-        unmountOnExit = _configMap$current$ge.unmountOnExit;
+        timeoutId = _configMap$current$ge.timeoutId;
 
@@ -229,3 +219,3 @@ var newState = getEndState(stateObj._state, unmountOnExit);
     });
-  }, []);
+  }, [onChange, unmountOnExit]);
   var toggle = react.useCallback(function (key, toEnter) {
@@ -240,12 +230,2 @@ var stateObj = latestStateMap.current.get(key);
     var config = configMap.current.get(key);
-    var _config$enter = config.enter,
-        enter = _config$enter === void 0 ? true : _config$enter,
-        _config$exit = config.exit,
-        exit = _config$exit === void 0 ? true : _config$exit,
-        preEnter = config.preEnter,
-        preExit = config.preExit,
-        timeout = config.timeout,
-        unmountOnExit = config.unmountOnExit,
-        onChange = config.onChange,
-        timeoutId = config.timeoutId;
 
@@ -258,10 +238,6 @@ var transitState = function transitState(newState) {
         latestStateMap: latestStateMap,
-        timeoutId: timeoutId,
+        timeoutId: config.timeoutId,
         onChange: onChange
       });
 
-      var _getTimeout = getTimeout(timeout),
-          enterTimeout = _getTimeout[0],
-          exitTimeout = _getTimeout[1];
-
       switch (newState) {
@@ -304,3 +280,3 @@ case ENTERING:
     }
-  }, [endTransition, singleEnter]);
+  }, [onChange, endTransition, singleEnter, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
   return {
@@ -307,0 +283,0 @@ stateMap: stateMap,

dist/es/hooks/useTransition.js

@@ -68,9 +68,5 @@ import { useState, useRef, useCallback, useEffect } from 'react';
     if (toEnter) {
-      if (!enterStage) {
-        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-      }
+      !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
     } else {
-      if (enterStage) {
-        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
-      }
+      enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
     }
@@ -77,0 +73,0 @@ }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);

dist/es/hooks/useTransitionMap.js

@@ -1,4 +0,3 @@
-import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { useState, useRef, useCallback } from 'react';
-import { ENTERED, startOrEnd, getEndState, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, getFullState, getTimeout } from './utils.js';
+import { getTimeout, ENTERED, startOrEnd, getEndState, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, getFullState } from './utils.js';
 
@@ -21,5 +20,6 @@ var initialStateMap = new Map();
   latestStateMap.current = stateMap;
-  onChange && onChange(_extends({
-    key: key
-  }, state));
+  onChange && onChange({
+    key: key,
+    current: state
+  });
 };
@@ -29,3 +29,14 @@
   var _ref2 = _temp === void 0 ? {} : _temp,
-      singleEnter = _ref2.singleEnter;
+      singleEnter = _ref2.singleEnter,
+      _ref2$enter = _ref2.enter,
+      enter = _ref2$enter === void 0 ? true : _ref2$enter,
+      _ref2$exit = _ref2.exit,
+      exit = _ref2$exit === void 0 ? true : _ref2$exit,
+      preEnter = _ref2.preEnter,
+      preExit = _ref2.preExit,
+      timeout = _ref2.timeout,
+      initialEntered = _ref2.initialEntered,
+      mountOnEnter = _ref2.mountOnEnter,
+      unmountOnExit = _ref2.unmountOnExit,
+      onChange = _ref2.onChange;
 
@@ -38,11 +49,13 @@ var _useState = useState(initialStateMap),
   var configMap = useRef(initialConfigMap);
+
+  var _getTimeout = getTimeout(timeout),
+      enterTimeout = _getTimeout[0],
+      exitTimeout = _getTimeout[1];
+
   var setItem = useCallback(function (key, config) {
-    if (config === void 0) {
-      config = {};
-    }
+    var _ref3 = config || {},
+        _ref3$initialEntered = _ref3.initialEntered,
+        _initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
 
-    var _config = config,
-        initialEntered = _config.initialEntered,
-        mountOnEnter = _config.mountOnEnter;
-    var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+    var newState = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
     updateState({
@@ -54,4 +67,4 @@ key: key,
     });
-    configMap.current.set(key, _extends({}, config));
-  }, []);
+    configMap.current.set(key, {});
+  }, [initialEntered, mountOnEnter]);
   var deleteItem = useCallback(function (key) {
@@ -78,5 +91,3 @@ var newStateMap = new Map(latestStateMap.current);
     var _configMap$current$ge = configMap.current.get(key),
-        timeoutId = _configMap$current$ge.timeoutId,
-        onChange = _configMap$current$ge.onChange,
-        unmountOnExit = _configMap$current$ge.unmountOnExit;
+        timeoutId = _configMap$current$ge.timeoutId;
 
@@ -92,3 +103,3 @@ var newState = getEndState(stateObj._state, unmountOnExit);
     });
-  }, []);
+  }, [onChange, unmountOnExit]);
   var toggle = useCallback(function (key, toEnter) {
@@ -103,12 +114,2 @@ var stateObj = latestStateMap.current.get(key);
     var config = configMap.current.get(key);
-    var _config$enter = config.enter,
-        enter = _config$enter === void 0 ? true : _config$enter,
-        _config$exit = config.exit,
-        exit = _config$exit === void 0 ? true : _config$exit,
-        preEnter = config.preEnter,
-        preExit = config.preExit,
-        timeout = config.timeout,
-        unmountOnExit = config.unmountOnExit,
-        onChange = config.onChange,
-        timeoutId = config.timeoutId;
 
@@ -121,10 +122,6 @@ var transitState = function transitState(newState) {
         latestStateMap: latestStateMap,
-        timeoutId: timeoutId,
+        timeoutId: config.timeoutId,
         onChange: onChange
       });
 
-      var _getTimeout = getTimeout(timeout),
-          enterTimeout = _getTimeout[0],
-          exitTimeout = _getTimeout[1];
-
       switch (newState) {
@@ -167,3 +164,3 @@ case ENTERING:
     }
-  }, [endTransition, singleEnter]);
+  }, [onChange, endTransition, singleEnter, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
   return {
@@ -170,0 +167,0 @@ stateMap: stateMap,

package.json

 {
   "name": "react-transition-state",
-  "version": "1.2.0-alpha.3",
+  "version": "1.2.0-alpha.4",
   "description": "Zero dependency, 0.7KB react-transition-group alternative.",
@@ -5,0 +5,0 @@ "author": "Zheng Song",

types/index.d.ts

@@ -28,8 +28,9 @@ export type TransitionState =
 
-export interface TransitionItemOptions<K> extends Omit<TransitionOptions, 'onChange'> {
-  onChange?: (event: { key: K } & State) => void;
+export interface TransitionItemOptions {
+  initialEntered?: boolean;
 }
 
-export interface TransitionMapOptions {
+export interface TransitionMapOptions<K> extends Omit<TransitionOptions, 'onChange'> {
   singleEnter?: boolean;
+  onChange?: (event: { key: K; current: State }) => void;
 }
@@ -43,3 +44,3 @@
   endTransition: (key: K) => void;
-  setItem: (key: K, options?: TransitionItemOptions<K>) => void;
+  setItem: (key: K, options?: TransitionItemOptions) => void;
   deleteItem: (key: K) => boolean;
@@ -50,4 +51,4 @@ }
 
-export const useTransitionMap: <K>(options?: TransitionMapOptions) => TransitionMapResult<K>;
+export const useTransitionMap: <K>(options?: TransitionMapOptions<K>) => TransitionMapResult<K>;
 
 export default useTransition;

No alert changes

Worsened metrics

Total package byte prevSize

36520

decreased by-2.34%

Number of package files

9

decreased by-10%

Lines of code

535

decreased by-7.44%

No dependency changes