Use explicit file extensions for both module systems

dist/cjs/hooks/useTransitionMap.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+var react = require('react');
+var utils = require('./utils.cjs');
+
+const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
+  clearTimeout(timeoutId);
+  const state = utils.getState(status);
+  const stateMap = new Map(latestStateMap.current);
+  stateMap.set(key, state);
+  setStateMap(stateMap);
+  latestStateMap.current = stateMap;
+  onChange && onChange({
+    key,
+    current: state
+  });
+};
+const useTransitionMap = ({
+  allowMultiple,
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange
+} = {}) => {
+  const [stateMap, setStateMap] = react.useState(new Map());
+  const latestStateMap = react.useRef(stateMap);
+  const configMap = react.useRef(new Map());
+  const [enterTimeout, exitTimeout] = utils.getTimeout(timeout);
+  const setItem = react.useCallback((key, config) => {
+    const {
+      initialEntered: _initialEntered = initialEntered
+    } = config || {};
+    const status = _initialEntered ? utils.ENTERED : utils.startOrEnd(mountOnEnter);
+    updateState(key, status, setStateMap, latestStateMap);
+    configMap.current.set(key, {});
+  }, [initialEntered, mountOnEnter]);
+  const deleteItem = react.useCallback(key => {
+    const newStateMap = new Map(latestStateMap.current);
+    if (newStateMap.delete(key)) {
+      setStateMap(newStateMap);
+      latestStateMap.current = newStateMap;
+      configMap.current.delete(key);
+      return true;
+    }
+    return false;
+  }, []);
+  const endTransition = react.useCallback(key => {
+    const stateObj = latestStateMap.current.get(key);
+    if (!stateObj) {
+      process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
+      return;
+    }
+    const {
+      timeoutId
+    } = configMap.current.get(key);
+    const status = utils.getEndStatus(stateObj._s, unmountOnExit);
+    status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
+  }, [onChange, unmountOnExit]);
+  const toggle = react.useCallback((key, toEnter) => {
+    const stateObj = latestStateMap.current.get(key);
+    if (!stateObj) {
+      process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
+      return;
+    }
+    const config = configMap.current.get(key);
+    const transitState = status => {
+      updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
+      switch (status) {
+        case utils.ENTERING:
+          if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
+          break;
+        case utils.EXITING:
+          if (exitTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), exitTimeout);
+          break;
+        case utils.PRE_ENTER:
+        case utils.PRE_EXIT:
+          config.timeoutId = utils.nextTick(transitState, status);
+          break;
+      }
+    };
+    const enterStage = stateObj.isEnter;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+    if (toEnter) {
+      if (!enterStage) {
+        transitState(enter ? preEnter ? utils.PRE_ENTER : utils.ENTERING : utils.ENTERED);
+        !allowMultiple && latestStateMap.current.forEach((_, _key) => _key !== key && toggle(_key, false));
+      }
+    } else {
+      if (enterStage) {
+        transitState(exit ? preExit ? utils.PRE_EXIT : utils.EXITING : utils.startOrEnd(unmountOnExit));
+      }
+    }
+  }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  const toggleAll = react.useCallback(toEnter => {
+    if (!allowMultiple && toEnter !== false) return;
+    for (const key of latestStateMap.current.keys()) toggle(key, toEnter);
+  }, [allowMultiple, toggle]);
+  return {
+    stateMap,
+    toggle,
+    toggleAll,
+    endTransition,
+    setItem,
+    deleteItem
+  };
+};
+
+exports.useTransitionMap = useTransitionMap;

dist/cjs/hooks/useTransitionState.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var react = require('react');
+var utils = require('./utils.cjs');
+
+const updateState = (status, setState, latestState, timeoutId, onChange) => {
+  clearTimeout(timeoutId.current);
+  const state = utils.getState(status);
+  setState(state);
+  latestState.current = state;
+  onChange && onChange({
+    current: state
+  });
+};
+const useTransitionState = ({
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange
+} = {}) => {
+  const [state, setState] = react.useState(() => utils.getState(initialEntered ? utils.ENTERED : utils.startOrEnd(mountOnEnter)));
+  const latestState = react.useRef(state);
+  const timeoutId = react.useRef();
+  const [enterTimeout, exitTimeout] = utils.getTimeout(timeout);
+  const endTransition = react.useCallback(() => {
+    const status = utils.getEndStatus(latestState.current._s, unmountOnExit);
+    status && updateState(status, setState, latestState, timeoutId, onChange);
+  }, [onChange, unmountOnExit]);
+  const toggle = react.useCallback(toEnter => {
+    const transitState = status => {
+      updateState(status, setState, latestState, timeoutId, onChange);
+      switch (status) {
+        case utils.ENTERING:
+          if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
+          break;
+        case utils.EXITING:
+          if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
+          break;
+        case utils.PRE_ENTER:
+        case utils.PRE_EXIT:
+          timeoutId.current = utils.nextTick(transitState, status);
+          break;
+      }
+    };
+    const enterStage = latestState.current.isEnter;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+    if (toEnter) {
+      !enterStage && transitState(enter ? preEnter ? utils.PRE_ENTER : utils.ENTERING : utils.ENTERED);
+    } else {
+      enterStage && transitState(exit ? preExit ? utils.PRE_EXIT : utils.EXITING : utils.startOrEnd(unmountOnExit));
+    }
+  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  react.useEffect(() => () => clearTimeout(timeoutId.current), []);
+  return [state, toggle, endTransition];
+};
+
+exports.useTransitionState = useTransitionState;

dist/cjs/hooks/utils.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+const PRE_ENTER = 0;
+const ENTERING = 1;
+const ENTERED = 2;
+const PRE_EXIT = 3;
+const EXITING = 4;
+const EXITED = 5;
+const UNMOUNTED = 6;
+const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+const getState = status => ({
+  _s: status,
+  status: STATUS[status],
+  isEnter: status < PRE_EXIT,
+  isMounted: status !== UNMOUNTED,
+  isResolved: status === ENTERED || status > EXITING
+});
+const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
+const getEndStatus = (status, unmountOnExit) => {
+  switch (status) {
+    case ENTERING:
+    case PRE_ENTER:
+      return ENTERED;
+    case EXITING:
+    case PRE_EXIT:
+      return startOrEnd(unmountOnExit);
+  }
+};
+const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
+const nextTick = (transitState, status) => setTimeout(() => {
+  // Reading document.body.offsetTop can force browser to repaint before transition to the next state
+  isNaN(document.body.offsetTop) || transitState(status + 1);
+}, 0);
+
+exports.ENTERED = ENTERED;
+exports.ENTERING = ENTERING;
+exports.EXITED = EXITED;
+exports.EXITING = EXITING;
+exports.PRE_ENTER = PRE_ENTER;
+exports.PRE_EXIT = PRE_EXIT;
+exports.STATUS = STATUS;
+exports.UNMOUNTED = UNMOUNTED;
+exports.getEndStatus = getEndStatus;
+exports.getState = getState;
+exports.getTimeout = getTimeout;
+exports.nextTick = nextTick;
+exports.startOrEnd = startOrEnd;

dist/cjs/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useTransitionState = require('./hooks/useTransitionState.cjs');
+var useTransitionMap = require('./hooks/useTransitionMap.cjs');
+
+
+
+exports.default = useTransitionState.useTransitionState;
+exports.useTransition = useTransitionState.useTransitionState;
+exports.useTransitionState = useTransitionState.useTransitionState;
+exports.useTransitionMap = useTransitionMap.useTransitionMap;