@react-aria/spinbutton 3.7.2 → 3.8.0

package/src/useSpinButton.ts

@@ -1,298 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {announce, clearAnnouncer} from '@react-aria/live-announcer';
-import {AriaButtonProps} from '@react-types/button';
-import {DOMAttributes, InputBase, RangeInputBase, Validation, ValueBase} from '@react-types/shared';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {useCallback, useEffect, useRef, useState} from 'react';
-import {useEffectEvent, useGlobalListeners} from '@react-aria/utils';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-
-
-const noop = () => {};
-
-export interface SpinButtonProps extends InputBase, Validation<number>, ValueBase<number>, RangeInputBase<number> {
-  textValue?: string,
-  onIncrement?: () => void,
-  onIncrementPage?: () => void,
-  onDecrement?: () => void,
-  onDecrementPage?: () => void,
-  onDecrementToMin?: () => void,
-  onIncrementToMax?: () => void
-}
-
-export interface SpinbuttonAria {
-  spinButtonProps: DOMAttributes,
-  incrementButtonProps: AriaButtonProps,
-  decrementButtonProps: AriaButtonProps
-}
-
-export function useSpinButton(
-  props: SpinButtonProps
-): SpinbuttonAria {
-  const _async = useRef<number>(undefined);
-  let {
-    value,
-    textValue,
-    minValue,
-    maxValue,
-    isDisabled,
-    isReadOnly,
-    isRequired,
-    onIncrement,
-    onIncrementPage,
-    onDecrement,
-    onDecrementPage,
-    onDecrementToMin,
-    onIncrementToMax
-  } = props;
-  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/spinbutton');
-
-  let isSpinning = useRef(false);
-  const clearAsync = useCallback(() => {
-    clearTimeout(_async.current);
-    isSpinning.current = false;
-  }, []);
-  const clearAsyncEvent = useEffectEvent(() => {
-    clearAsync();
-  });
-
-  useEffect(() => {
-    return () => clearAsyncEvent();
-  }, []);
-
-  let onKeyDown = (e) => {
-    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || isReadOnly || e.nativeEvent.isComposing) {
-      return;
-    }
-
-    switch (e.key) {
-      case 'PageUp':
-        if (onIncrementPage) {
-          e.preventDefault();
-          onIncrementPage?.();
-          break;
-        }
-      // fallthrough!
-      case 'ArrowUp':
-      case 'Up':
-        if (onIncrement) {
-          e.preventDefault();
-          onIncrement?.();
-        }
-        break;
-      case 'PageDown':
-        if (onDecrementPage) {
-          e.preventDefault();
-          onDecrementPage?.();
-          break;
-        }
-      // fallthrough
-      case 'ArrowDown':
-      case 'Down':
-        if (onDecrement) {
-          e.preventDefault();
-          onDecrement?.();
-        }
-        break;
-      case 'Home':
-        if (onDecrementToMin) {
-          e.preventDefault();
-          onDecrementToMin?.();
-        }
-        break;
-      case 'End':
-        if (onIncrementToMax) {
-          e.preventDefault();
-          onIncrementToMax?.();
-        }
-        break;
-    }
-  };
-
-  let isFocused = useRef(false);
-  let onFocus = () => {
-    isFocused.current = true;
-  };
-
-  let onBlur = () => {
-    isFocused.current = false;
-  };
-
-  // Replace Unicode hyphen-minus (U+002D) with minus sign (U+2212).
-  // This ensures that macOS VoiceOver announces it as "minus" even with other characters between the minus sign
-  // and the number (e.g. currency symbol). Otherwise it announces nothing because it assumes the character is a hyphen.
-  // In addition, replace the empty string with the word "Empty" so that iOS VoiceOver does not read "50%" for an empty field.
-  let ariaTextValue = textValue === '' ? stringFormatter.format('Empty') : (textValue || `${value}`).replace('-', '\u2212');
-
-  useEffect(() => {
-    if (isFocused.current) {
-      clearAnnouncer('assertive');
-      announce(ariaTextValue, 'assertive');
-    }
-  }, [ariaTextValue]);
-
-  // For touch users, if they move their finger like they're scrolling, we don't want to trigger a spin.
-  let onPointerCancel = useCallback(() => {
-    clearAsync();
-  }, [clearAsync]);
-
-  const onIncrementEvent = useEffectEvent(onIncrement ?? noop);
-  const onDecrementEvent = useEffectEvent(onDecrement ?? noop);
-
-  const stepUpEvent = useEffectEvent(() => {
-    if (maxValue === undefined || isNaN(maxValue) || value === undefined || isNaN(value) || value < maxValue) {
-      onIncrementEvent();
-      onIncrementPressStartEvent(60);
-    }
-  });
-
-  const onIncrementPressStartEvent = useEffectEvent((initialStepDelay: number) => {
-    clearAsyncEvent();
-    isSpinning.current = true;
-    // Start spinning after initial delay
-    _async.current = window.setTimeout(stepUpEvent, initialStepDelay);
-  });
-
-  const stepDownEvent = useEffectEvent(() => {
-    if (minValue === undefined || isNaN(minValue) || value === undefined || isNaN(value) || value > minValue) {
-      onDecrementEvent();
-      onDecrementPressStartEvent(60);
-    }
-  });
-
-  const onDecrementPressStartEvent = useEffectEvent((initialStepDelay: number) => {
-    clearAsyncEvent();
-    isSpinning.current = true;
-    // Start spinning after initial delay
-    _async.current = window.setTimeout(stepDownEvent, initialStepDelay);
-  });
-
-  let cancelContextMenu = (e) => {
-    e.preventDefault();
-  };
-
-  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
-
-  // Tracks in touch if the press end event was preceded by a press up.
-  // If it wasn't, then we know the finger left the button while still in contact with the screen.
-  // This means that the user is trying to scroll or interact in some way that shouldn't trigger
-  // an increment or decrement.
-  let isUp = useRef(false);
-
-  let [isIncrementPressed, setIsIncrementPressed] = useState<'touch' | 'mouse' | null>(null);
-  useEffect(() => {
-    if (isIncrementPressed === 'touch') {
-      onIncrementPressStartEvent(600);
-    } else if (isIncrementPressed) {
-      onIncrementPressStartEvent(400);
-    }
-  }, [isIncrementPressed]);
-
-  let [isDecrementPressed, setIsDecrementPressed] = useState<'touch' | 'mouse' | null>(null);
-  useEffect(() => {
-    if (isDecrementPressed === 'touch') {
-      onDecrementPressStartEvent(600);
-    } else if (isDecrementPressed) {
-      onDecrementPressStartEvent(400);
-    }
-  }, [isDecrementPressed]);
-
-  return {
-    spinButtonProps: {
-      role: 'spinbutton',
-      'aria-valuenow': value !== undefined && !isNaN(value) ? value : undefined,
-      'aria-valuetext': ariaTextValue,
-      'aria-valuemin': minValue,
-      'aria-valuemax': maxValue,
-      'aria-disabled': isDisabled || undefined,
-      'aria-readonly': isReadOnly || undefined,
-      'aria-required': isRequired || undefined,
-      onKeyDown,
-      onFocus,
-      onBlur
-    },
-    incrementButtonProps: {
-      onPressStart: (e) => {
-        clearAsync();
-        if (e.pointerType !== 'touch') {
-          onIncrement?.();
-          setIsIncrementPressed('mouse');
-        } else {
-          addGlobalListener(window, 'pointercancel', onPointerCancel, {capture: true});
-          isUp.current = false;
-          // For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
-          // the control isn't spinning.
-          setIsIncrementPressed('touch');
-        }
-        addGlobalListener(window, 'contextmenu', cancelContextMenu);
-      },
-      onPressUp: (e) => {
-        clearAsync();
-        if (e.pointerType === 'touch') {
-          isUp.current = true;
-        }
-        removeAllGlobalListeners();
-        setIsIncrementPressed(null);
-      },
-      onPressEnd: (e) => {
-        clearAsync();
-        if (e.pointerType === 'touch') {
-          if (!isSpinning.current && isUp.current) {
-            onIncrement?.();
-          }
-        }
-        isUp.current = false;
-        setIsIncrementPressed(null);
-      },
-      onFocus,
-      onBlur
-    },
-    decrementButtonProps: {
-      onPressStart: (e) => {
-        clearAsync();
-        if (e.pointerType !== 'touch') {
-          onDecrement?.();
-          setIsDecrementPressed('mouse');
-        } else {
-          addGlobalListener(window, 'pointercancel', onPointerCancel, {capture: true});
-          isUp.current = false;
-          // For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
-          // the control isn't spinning.
-          setIsDecrementPressed('touch');
-        }
-      },
-      onPressUp: (e) => {
-        clearAsync();
-        if (e.pointerType === 'touch') {
-          isUp.current = true;
-        }
-        removeAllGlobalListeners();
-        setIsDecrementPressed(null);
-      },
-      onPressEnd: (e) => {
-        clearAsync();
-        if (e.pointerType === 'touch') {
-          if (!isSpinning.current && isUp.current) {
-            onDecrement?.();
-          }
-        }
-        isUp.current = false;
-        setIsDecrementPressed(null);
-      },
-      onFocus,
-      onBlur
-    }
-  };
-}