react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/hooks/aria/useAriaPress.js

@@ -3,12 +3,7 @@ import { Platform } from 'react-native';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { mergeProps } from '@react-native-aria/utils';
-const mergePropsCompat = (...args) => {
-  if (typeof mergeProps === 'function') {
-    return mergeProps(...args);
-  }
-  return Object.assign({}, ...args);
-};
+const mp = (...args) => typeof mergeProps === 'function' ? mergeProps(...args) : Object.assign({}, ...args);
 export const useAriaPress = ({
   disabled = false,
   allowHover = Platform.OS === 'web',
@@ -29,32 +24,24 @@ export const useAriaPress = ({
   } = useHover({
     isDisabled: disabled || !allowHover
   });
-  const useFocusCompat = useFocus;
   const {
     isFocused,
     focusProps
-  } = useFocusCompat({
+  } = useFocus({
     isDisabled: disabled
   });
-  const useFocusRingCompat = useFocusRing;
   const {
     focusProps: focusRingProps,
     isFocusVisible
-  } = useFocusRingCompat({
+  } = useFocusRing({
     isDisabled: disabled
   });
   const interactionProps = useMemo(() => {
-    let merged = pressProps;
-    if (allowHover) {
-      merged = mergePropsCompat(merged, hoverProps);
-    }
-    if (allowFocus && !disabled) {
-      merged = mergePropsCompat(merged, focusProps, focusRingProps);
-    }
-    if (extraProps) {
-      merged = mergePropsCompat(merged, extraProps);
-    }
-    return merged;
+    let m = pressProps;
+    if (allowHover) m = mp(m, hoverProps);
+    if (allowFocus && !disabled) m = mp(m, focusProps, focusRingProps);
+    if (extraProps) m = mp(m, extraProps);
+    return m;
   }, [allowFocus, allowHover, disabled, extraProps, focusProps, focusRingProps, hoverProps, pressProps]);
   const states = useMemo(() => ({
     hovered: !!isHovered,

package/dist/es/hooks/aria/useAriaToggle.js

@@ -2,15 +2,15 @@ import { useMemo, useRef } from 'react';
 import { useToggle } from '@react-native-aria/toggle';
 import { useToggleState } from '@react-stately/toggle';
 export const useAriaToggle = props => {
-  const inputRef = props.inputRef ?? useRef(null);
+  const fallbackRef = useRef(null);
+  const inputRef = props.inputRef ?? fallbackRef;
   const state = useToggleState(props);
   const {
     inputProps
   } = useToggle(props, state, inputRef);
-  const resolvedInputProps = useMemo(() => inputProps, [inputProps]);
   return {
     state,
-    inputProps: resolvedInputProps,
+    inputProps: useMemo(() => inputProps, [inputProps]),
     inputRef
   };
 };

package/dist/es/hooks/gesture/useGestureScroll.js

@@ -1,51 +1,52 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Animated } from 'react-native';
-const DEFAULT_THROTTLE = 16;
-const VELOCITY_NORMALIZER = 1000;
 export const useGestureScroll = (options = {}) => {
   const {
     axis = 'y',
-    scrollEventThrottle = DEFAULT_THROTTLE,
+    scrollEventThrottle = 16,
     onScroll,
     onScrollBeginDrag,
     onScrollEndDrag,
     onMomentumScrollBegin,
     onMomentumScrollEnd
   } = options;
+  const onScrollRef = useRef(onScroll);
+  onScrollRef.current = onScroll;
+  const onBeginDragRef = useRef(onScrollBeginDrag);
+  onBeginDragRef.current = onScrollBeginDrag;
+  const onEndDragRef = useRef(onScrollEndDrag);
+  onEndDragRef.current = onScrollEndDrag;
+  const onMomBeginRef = useRef(onMomentumScrollBegin);
+  onMomBeginRef.current = onMomentumScrollBegin;
+  const onMomEndRef = useRef(onMomentumScrollEnd);
+  onMomEndRef.current = onMomentumScrollEnd;
   const scrollValue = useRef(new Animated.Value(0)).current;
-  const lastOffsetRef = useRef(0);
-  const lastTimestampRef = useRef(null);
-  const velocityRef = useRef(0);
-  const directionRef = useRef(null);
+  const lastOffRef = useRef(0);
+  const lastTsRef = useRef(null);
+  const velRef = useRef(0);
+  const dirRef = useRef(null);
   const [direction, setDirection] = useState(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isMomentum, setIsMomentum] = useState(false);
-  const updateDirection = useCallback(next => {
-    if (directionRef.current !== next) {
-      directionRef.current = next;
-      setDirection(next);
+  const updateDir = useCallback(n => {
+    if (dirRef.current !== n) {
+      dirRef.current = n;
+      setDirection(n);
     }
   }, []);
-  const handleScroll = useCallback(event => {
-    onScroll?.(event);
-    const contentOffset = event.nativeEvent.contentOffset;
-    const current = axis === 'x' ? contentOffset.x ?? 0 : contentOffset.y ?? 0;
-    const delta = current - lastOffsetRef.current;
-    const timestamp = event.timeStamp ?? Date.now();
-    if (delta > 0) {
-      updateDirection('forward');
-    } else if (delta < 0) {
-      updateDirection('backward');
-    }
-    if (lastTimestampRef.current != null) {
-      const elapsed = Math.max(timestamp - lastTimestampRef.current, 1);
-      velocityRef.current = delta / elapsed * VELOCITY_NORMALIZER;
-    }
-    lastTimestampRef.current = timestamp;
-    lastOffsetRef.current = current;
-  }, [axis, onScroll, updateDirection]);
-  const animatedScrollHandler = useMemo(() => {
-    const mapping = axis === 'x' ? [{
+  const handleScroll = useCallback(e => {
+    onScrollRef.current?.(e);
+    const o = e.nativeEvent.contentOffset;
+    const cur = axis === 'x' ? o.x ?? 0 : o.y ?? 0;
+    const delta = cur - lastOffRef.current;
+    const ts = e.timeStamp ?? Date.now();
+    if (delta > 0) updateDir('forward');else if (delta < 0) updateDir('backward');
+    if (lastTsRef.current != null) velRef.current = delta / Math.max(ts - lastTsRef.current, 1) * 1000;
+    lastTsRef.current = ts;
+    lastOffRef.current = cur;
+  }, [axis, updateDir]);
+  const animHandler = useMemo(() => {
+    const m = axis === 'x' ? [{
       nativeEvent: {
         contentOffset: {
           x: scrollValue
@@ -58,53 +59,51 @@ export const useGestureScroll = (options = {}) => {
         }
       }
     }];
-    return Animated.event(mapping, {
+    return Animated.event(m, {
       useNativeDriver: false,
       listener: handleScroll
     });
   }, [axis, handleScroll, scrollValue]);
-  const handleScrollBeginDrag = useCallback(event => {
+  const hBeginDrag = useCallback(e => {
     setIsDragging(true);
-    onScrollBeginDrag?.(event);
-  }, [onScrollBeginDrag]);
-  const handleScrollEndDrag = useCallback(event => {
+    onBeginDragRef.current?.(e);
+  }, []);
+  const hEndDrag = useCallback(e => {
     setIsDragging(false);
-    onScrollEndDrag?.(event);
-  }, [onScrollEndDrag]);
-  const handleMomentumBegin = useCallback(event => {
+    onEndDragRef.current?.(e);
+  }, []);
+  const hMomBegin = useCallback(e => {
     setIsMomentum(true);
-    onMomentumScrollBegin?.(event);
-  }, [onMomentumScrollBegin]);
-  const handleMomentumEnd = useCallback(event => {
+    onMomBeginRef.current?.(e);
+  }, []);
+  const hMomEnd = useCallback(e => {
     setIsMomentum(false);
-    onMomentumScrollEnd?.(event);
-  }, [onMomentumScrollEnd]);
-  const resetOffset = useCallback((value = 0) => {
+    onMomEndRef.current?.(e);
+  }, []);
+  const resetOffset = useCallback((v = 0) => {
     scrollValue.stopAnimation();
-    scrollValue.setValue(value);
-    lastOffsetRef.current = value;
-    lastTimestampRef.current = null;
-    velocityRef.current = 0;
-    updateDirection(null);
-  }, [scrollValue, updateDirection]);
-  const getVelocity = useCallback(() => velocityRef.current, []);
-  const getCurrentOffset = useCallback(() => lastOffsetRef.current, []);
+    scrollValue.setValue(v);
+    lastOffRef.current = v;
+    lastTsRef.current = null;
+    velRef.current = 0;
+    updateDir(null);
+  }, [scrollValue, updateDir]);
   const scrollProps = useMemo(() => ({
-    onScroll: animatedScrollHandler,
+    onScroll: animHandler,
     scrollEventThrottle,
-    onScrollBeginDrag: handleScrollBeginDrag,
-    onScrollEndDrag: handleScrollEndDrag,
-    onMomentumScrollBegin: handleMomentumBegin,
-    onMomentumScrollEnd: handleMomentumEnd
-  }), [animatedScrollHandler, handleMomentumBegin, handleMomentumEnd, handleScrollBeginDrag, handleScrollEndDrag, scrollEventThrottle]);
+    onScrollBeginDrag: hBeginDrag,
+    onScrollEndDrag: hEndDrag,
+    onMomentumScrollBegin: hMomBegin,
+    onMomentumScrollEnd: hMomEnd
+  }), [animHandler, hBeginDrag, hEndDrag, hMomBegin, hMomEnd, scrollEventThrottle]);
   return {
     scrollValue,
     scrollProps,
     direction,
     isDragging,
     isMomentum,
-    getVelocity,
-    getCurrentOffset,
+    getVelocity: useCallback(() => velRef.current, []),
+    getCurrentOffset: useCallback(() => lastOffRef.current, []),
     resetOffset
   };
 };

package/dist/es/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './useSafeAreaPadding';
+export * from './animation';
 export * from './aria';
 export * from './gesture';
 export * from './overlay';

package/dist/es/hooks/overlay/OverlayStackStore.js

@@ -1,94 +1,78 @@
 import { BackHandler, Platform } from 'react-native';
 import { setBodyScrollLocked } from '../../platform';
 import { isNumber } from '../../utils';
-const DEFAULT_BASE_Z_INDEX = 1000;
-const DEFAULT_Z_INDEX_STEP = 2;
 export class OverlayStackStore {
   listeners = new Set();
   entries = [];
   keySeed = 0;
-  constructor(baseZIndex = DEFAULT_BASE_Z_INDEX, zIndexStep = DEFAULT_Z_INDEX_STEP) {
-    this.baseZIndex = baseZIndex;
-    this.zIndexStep = zIndexStep;
+  constructor(baseZ = 1000, zStep = 2) {
+    this.baseZ = baseZ;
+    this.zStep = zStep;
   }
-  subscribe = listener => {
-    this.listeners.add(listener);
+  subscribe = l => {
+    this.listeners.add(l);
     return () => {
-      this.listeners.delete(listener);
+      this.listeners.delete(l);
     };
   };
   getSnapshot = () => this.entries;
-  mount = options => {
-    const key = ++this.keySeed;
+  peek = () => this.entries[this.entries.length - 1];
+  size = () => this.entries.length;
+  getBaseZIndex = () => this.baseZ;
+  mount = o => {
     const entry = {
-      key,
-      zIndex: this.resolveZIndex(options.zIndex),
-      onClose: options.onClose,
-      closeOnBack: options.closeOnBack,
-      lockScroll: options.lockScroll,
-      type: options.type,
-      meta: options.meta
+      key: ++this.keySeed,
+      zIndex: this.resolveZ(o.zIndex),
+      onClose: o.onClose,
+      closeOnBack: o.closeOnBack,
+      lockScroll: o.lockScroll,
+      type: o.type,
+      meta: o.meta
     };
     this.entries = [...this.entries, entry];
     this.emit();
     return entry;
   };
-  update = (key, options) => {
-    const index = this.entries.findIndex(item => item.key === key);
-    if (index === -1) return undefined;
-    const prev = this.entries[index];
+  update = (key, o) => {
+    const i = this.entries.findIndex(e => e.key === key);
+    if (i === -1) return undefined;
     const next = {
-      ...prev,
-      ...options,
-      zIndex: isNumber(options.zIndex) ? this.resolveZIndex(options.zIndex) : prev.zIndex
+      ...this.entries[i],
+      ...o,
+      zIndex: isNumber(o.zIndex) ? this.resolveZ(o.zIndex) : this.entries[i].zIndex
     };
-    this.entries = [...this.entries.slice(0, index), next, ...this.entries.slice(index + 1)];
+    this.entries = [...this.entries.slice(0, i), next, ...this.entries.slice(i + 1)];
     this.emit();
     return next;
   };
   unmount = key => {
-    const next = this.entries.filter(entry => entry.key !== key);
-    if (next.length === this.entries.length) {
-      return;
+    const next = this.entries.filter(e => e.key !== key);
+    if (next.length !== this.entries.length) {
+      this.entries = next;
+      this.emit();
     }
-    this.entries = next;
-    this.emit();
   };
-  peek = () => this.entries[this.entries.length - 1];
-  size = () => this.entries.length;
-  getBaseZIndex = () => this.baseZIndex;
-  resolveZIndex = provided => {
-    if (isNumber(provided)) {
-      if (!Number.isFinite(provided) || provided < 0) {
-        return this.baseZIndex;
-      }
-      return provided >= this.baseZIndex ? provided : this.baseZIndex + provided;
-    }
+  resolveZ = v => {
+    if (isNumber(v)) return !Number.isFinite(v) || v < 0 ? this.baseZ : v >= this.baseZ ? v : this.baseZ + v;
     const top = this.peek();
-    if (!top) {
-      return this.baseZIndex;
-    }
-    return top.zIndex + this.zIndexStep;
+    return top ? top.zIndex + this.zStep : this.baseZ;
   };
   emit = () => {
-    this.listeners.forEach(listener => {
-      listener();
-    });
+    this.listeners.forEach(l => l());
   };
 }
 export const overlayStackStore = new OverlayStackStore();
-let backHandlerSubscription = null;
-const syncBackHandler = () => {
+let backSub = null;
+const syncBack = () => {
   if (Platform.OS === 'web') return;
   const entries = overlayStackStore.getSnapshot();
-  const hasClosable = entries.some(entry => entry.closeOnBack && entry.onClose);
-  if (hasClosable && !backHandlerSubscription && BackHandler?.addEventListener) {
-    backHandlerSubscription = BackHandler.addEventListener('hardwareBackPress', () => {
-      const currentEntries = overlayStackStore.getSnapshot();
-      for (let i = currentEntries.length - 1; i >= 0; i -= 1) {
-        const entry = currentEntries[i];
-        if (entry.closeOnBack && entry.onClose) {
-          entry.onClose();
+  const has = entries.some(e => e.closeOnBack && e.onClose);
+  if (has && !backSub && BackHandler?.addEventListener) {
+    backSub = BackHandler.addEventListener('hardwareBackPress', () => {
+      const cur = overlayStackStore.getSnapshot();
+      for (let i = cur.length - 1; i >= 0; i--) {
+        if (cur[i].closeOnBack && cur[i].onClose) {
+          cur[i].onClose();
           return true;
         }
       }
@@ -96,18 +80,14 @@ const syncBackHandler = () => {
     });
     return;
   }
-  if (!hasClosable && backHandlerSubscription) {
-    backHandlerSubscription.remove();
-    backHandlerSubscription = null;
+  if (!has && backSub) {
+    backSub.remove();
+    backSub = null;
   }
 };
-const syncScrollLock = () => {
-  const shouldLock = overlayStackStore.getSnapshot().some(entry => entry.lockScroll);
-  setBodyScrollLocked(shouldLock);
-};
-const handleStoreChange = () => {
-  syncBackHandler();
-  syncScrollLock();
+const onChange = () => {
+  syncBack();
+  setBodyScrollLocked(overlayStackStore.getSnapshot().some(e => e.lockScroll));
 };
-overlayStackStore.subscribe(handleStoreChange);
-handleStoreChange();
+overlayStackStore.subscribe(onChange);
+onChange();

package/dist/es/hooks/overlay/useOverlayStack.js

@@ -1,17 +1,15 @@
 import { useEffect, useRef, useSyncExternalStore } from 'react';
 import { overlayStackStore } from './OverlayStackStore';
-const useOverlayEntries = () => useSyncExternalStore(overlayStackStore.subscribe, overlayStackStore.getSnapshot, overlayStackStore.getSnapshot);
+const useEntries = () => useSyncExternalStore(overlayStackStore.subscribe, overlayStackStore.getSnapshot, overlayStackStore.getSnapshot);
 export const useOverlayStack = ({
   visible,
   ...options
 }) => {
-  const entries = useOverlayEntries();
+  const entries = useEntries();
   const entryRef = useRef(null);
-  const optionsRef = useRef(options);
-  if (optionsRef.current.onClose !== options.onClose || optionsRef.current.closeOnBack !== options.closeOnBack || optionsRef.current.lockScroll !== options.lockScroll || optionsRef.current.zIndex !== options.zIndex || optionsRef.current.type !== options.type || optionsRef.current.meta !== options.meta) {
-    optionsRef.current = options;
-  }
-  const stableOptions = optionsRef.current;
+  const optRef = useRef(options);
+  if (optRef.current.onClose !== options.onClose || optRef.current.closeOnBack !== options.closeOnBack || optRef.current.lockScroll !== options.lockScroll || optRef.current.zIndex !== options.zIndex || optRef.current.type !== options.type || optRef.current.meta !== options.meta) optRef.current = options;
+  const opts = optRef.current;
   useEffect(() => {
     if (!visible) {
       if (entryRef.current) {
@@ -20,8 +18,7 @@ export const useOverlayStack = ({
       }
       return;
     }
-    const entry = overlayStackStore.mount(stableOptions);
-    entryRef.current = entry;
+    entryRef.current = overlayStackStore.mount(opts);
     return () => {
       if (entryRef.current) {
         overlayStackStore.unmount(entryRef.current.key);
@@ -30,17 +27,14 @@ export const useOverlayStack = ({
     };
   }, [visible]);
   useEffect(() => {
-    if (!visible || !entryRef.current) {
-      return;
-    }
-    overlayStackStore.update(entryRef.current.key, stableOptions);
-  }, [stableOptions, visible]);
-  const current = entryRef.current;
-  const snapshotEntry = current ? entries.find(entry => entry.key === current.key) : undefined;
+    if (visible && entryRef.current) overlayStackStore.update(entryRef.current.key, opts);
+  }, [opts, visible]);
+  const cur = entryRef.current;
+  const snap = cur ? entries.find(e => e.key === cur.key) : undefined;
   const top = entries[entries.length - 1];
   return {
-    entryKey: snapshotEntry?.key ?? null,
-    zIndex: snapshotEntry?.zIndex ?? stableOptions.zIndex,
-    isTopMost: !!snapshotEntry && !!top && top.key === snapshotEntry.key
+    entryKey: snap?.key ?? null,
+    zIndex: snap?.zIndex ?? opts.zIndex,
+    isTopMost: !!snap && !!top && top.key === snap.key
   };
 };

package/dist/es/hooks/useControllableValue.js

@@ -8,33 +8,22 @@ function useControllableValue(props = {}, options = {}) {
     valuePropName = 'value',
     trigger = 'onChange'
   } = options;
-  const propsRecord = props;
-  const isControlled = hasProp(props, valuePropName);
-  const value = propsRecord[valuePropName];
-  const [internalValue, setInternalValue] = useState(() => {
-    if (isControlled) {
-      return value;
-    }
-    if (hasProp(props, defaultValuePropName)) {
-      return propsRecord[defaultValuePropName];
-    }
+  const p = props;
+  const ctrl = hasProp(props, valuePropName);
+  const val = p[valuePropName];
+  const [intVal, setIntVal] = useState(() => {
+    if (ctrl) return val;
+    if (hasProp(props, defaultValuePropName)) return p[defaultValuePropName];
     return defaultValue;
   });
-  const mergedValue = isControlled ? value : internalValue;
-  const handlerRef = useRef(propsRecord[trigger]);
+  const hRef = useRef(p[trigger]);
   useEffect(() => {
-    handlerRef.current = propsRecord[trigger];
+    hRef.current = p[trigger];
   }, [props, trigger]);
-  const triggerChange = useCallback((nextValue, ...args) => {
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    const handler = handlerRef.current;
-    if (isFunction(handler)) {
-      ;
-      handler(nextValue, ...args);
-    }
-  }, [isControlled]);
-  return [mergedValue, triggerChange];
+  const setVal = useCallback((next, ...args) => {
+    if (!ctrl) setIntVal(next);
+    if (isFunction(hRef.current)) hRef.current(next, ...args);
+  }, [ctrl]);
+  return [ctrl ? val : intVal, setVal];
 }
 export default useControllableValue;

package/dist/es/hooks/useCountDown.js

@@ -1,19 +1,14 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { isNumber } from '../utils/validate';
 const parseTime = time => {
-  const total = Math.max(time, 0);
-  const days = Math.floor(total / (24 * 60 * 60 * 1000));
-  const hours = Math.floor(total % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));
-  const minutes = Math.floor(total % (60 * 60 * 1000) / (60 * 1000));
-  const seconds = Math.floor(total % (60 * 1000) / 1000);
-  const milliseconds = total % 1000;
+  const t = Math.max(time, 0);
   return {
-    total,
-    days,
-    hours,
-    minutes,
-    seconds,
-    milliseconds
+    total: t,
+    days: Math.floor(t / 86400000),
+    hours: Math.floor(t % 86400000 / 3600000),
+    minutes: Math.floor(t % 3600000 / 60000),
+    seconds: Math.floor(t % 60000 / 1000),
+    milliseconds: t % 1000
   };
 };
 const useCountDown = options => {
@@ -24,11 +19,11 @@ const useCountDown = options => {
     onFinish
   } = options;
   const timeRef = useRef(time);
-  const millisecondRef = useRef(millisecond);
+  const msRef = useRef(millisecond);
   const onChangeRef = useRef(onChange);
   const onFinishRef = useRef(onFinish);
   timeRef.current = time;
-  millisecondRef.current = millisecond;
+  msRef.current = millisecond;
   onChangeRef.current = onChange;
   onFinishRef.current = onFinish;
   const remainRef = useRef(Math.max(0, time));
@@ -36,34 +31,31 @@ const useCountDown = options => {
   const timerRef = useRef(null);
   const countingRef = useRef(false);
   const [current, setCurrent] = useState(() => parseTime(remainRef.current));
-  const clearTimer = useCallback(() => {
+  const clear = useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const update = useCallback(remain => {
-    remainRef.current = remain;
-    const next = parseTime(remain);
+  const update = useCallback(rem => {
+    remainRef.current = rem;
+    const next = parseTime(rem);
     setCurrent(next);
     onChangeRef.current?.(next);
-    if (remain === 0) {
+    if (rem === 0) {
       countingRef.current = false;
-      clearTimer();
+      clear();
       onFinishRef.current?.();
     }
-  }, [clearTimer]);
+  }, [clear]);
   const tick = useCallback(() => {
     if (!countingRef.current) return;
-    clearTimer();
-    const remain = Math.max(endTimeRef.current - Date.now(), 0);
-    update(remain);
-    if (remain <= 0) return;
-    const delay = millisecondRef.current ? Math.max(1, Math.min(30, remain)) : Math.max(1, Math.min(remain, remain % 1000 + 1));
-    timerRef.current = setTimeout(() => {
-      tick();
-    }, delay);
-  }, [clearTimer, update]);
+    clear();
+    const rem = Math.max(endTimeRef.current - Date.now(), 0);
+    update(rem);
+    if (rem <= 0) return;
+    timerRef.current = setTimeout(tick, msRef.current ? Math.max(1, Math.min(30, rem)) : Math.max(1, Math.min(rem, rem % 1000 + 1)));
+  }, [clear, update]);
   const start = useCallback(() => {
     if (countingRef.current || remainRef.current <= 0) return;
     countingRef.current = true;
@@ -74,16 +66,16 @@ const useCountDown = options => {
     if (!countingRef.current) return;
     countingRef.current = false;
     remainRef.current = Math.max(endTimeRef.current - Date.now(), 0);
-    clearTimer();
-  }, [clearTimer]);
-  const reset = useCallback(newTime => {
+    clear();
+  }, [clear]);
+  const reset = useCallback(newT => {
     pause();
-    const next = Math.max(0, isNumber(newTime) ? newTime : timeRef.current);
-    remainRef.current = next;
-    endTimeRef.current = Date.now() + next;
-    setCurrent(parseTime(next));
+    const n = Math.max(0, isNumber(newT) ? newT : timeRef.current);
+    remainRef.current = n;
+    endTimeRef.current = Date.now() + n;
+    setCurrent(parseTime(n));
   }, [pause]);
-  useEffect(() => () => clearTimer(), [clearTimer]);
+  useEffect(() => () => clear(), [clear]);
   return {
     start,
     pause,