@react-native-oh-tpl/react-native-gesture-handler 2.12.6-2 → 2.12.9

package/src/components/GestureButtons.tsx

@@ -1,334 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  processColor,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-
-import createNativeWrapper from '../handlers/createNativeWrapper';
-import GestureHandlerButton from './GestureHandlerButton';
-import { State } from 'react-native-gesture-handler/src/State';
-
-import {
-  GestureEvent,
-  HandlerStateChangeEvent,
-} from 'react-native-gesture-handler/src/handlers/gestureHandlerCommon';
-import {
-  NativeViewGestureHandlerPayload,
-  NativeViewGestureHandlerProps,
-} from 'react-native-gesture-handler/src/handlers/NativeViewGestureHandler';
-
-export interface RawButtonProps extends NativeViewGestureHandlerProps {
-  /**
-   * Defines if more than one button could be pressed simultaneously. By default
-   * set true.
-   */
-  exclusive?: boolean;
-  // TODO: we should transform props in `createNativeWrapper`
-
-  /**
-   * Android only.
-   *
-   * Defines color of native ripple animation used since API level 21.
-   */
-  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-}
-
-export interface BaseButtonProps extends RawButtonProps {
-  /**
-   * Called when the button gets pressed (analogous to `onPress` in
-   * `TouchableHighlight` from RN core).
-   */
-  onPress?: (pointerInside: boolean) => void;
-
-  /**
-   * Called when the button gets pressed and is held for `delayLongPress`
-   * milliseconds.
-   */
-  onLongPress?: () => void;
-
-  /**
-   * Called when button changes from inactive to active and vice versa. It
-   * passes active state as a boolean variable as a first parameter for that
-   * method.
-   */
-  onActiveStateChange?: (active: boolean) => void;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-
-  /**
-   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
-   * Defaults to 600.
-   */
-  delayLongPress?: number;
-}
-
-export interface RectButtonProps extends BaseButtonProps {
-  /**
-   * Background color that will be dimmed when button is in active state.
-   */
-  underlayColor?: string;
-
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the underlay when button is in active state.
-   */
-  activeOpacity?: number;
-}
-
-export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the button when it is in an active state.
-   */
-  activeOpacity?: number;
-}
-
-export const RawButton = createNativeWrapper(GestureHandlerButton, {
-  shouldCancelWhenOutside: false,
-  shouldActivateOnStart: false,
-});
-
-export class BaseButton extends React.Component<BaseButtonProps> {
-  static defaultProps = {
-    delayLongPress: 600,
-  };
-
-  private lastActive: boolean;
-  private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
-  private longPressDetected: boolean;
-
-  constructor(props: BaseButtonProps) {
-    super(props);
-    this.lastActive = false;
-    this.longPressDetected = false;
-  }
-
-  private handleEvent = ({
-    nativeEvent,
-  }: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>) => {
-    const { state, oldState, pointerInside } = nativeEvent;
-    const active = pointerInside && state === State.ACTIVE;
-
-    if (active !== this.lastActive && this.props.onActiveStateChange) {
-      this.props.onActiveStateChange(active);
-    }
-
-    if (
-      !this.longPressDetected &&
-      oldState === State.ACTIVE &&
-      state !== State.CANCELLED &&
-      this.lastActive &&
-      this.props.onPress
-    ) {
-      this.props.onPress(active);
-    }
-
-    if (
-      !this.lastActive &&
-      // NativeViewGestureHandler sends different events based on platform
-      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
-      pointerInside
-    ) {
-      this.longPressDetected = false;
-      if (this.props.onLongPress) {
-        this.longPressTimeout = setTimeout(
-          this.onLongPress,
-          this.props.delayLongPress
-        );
-      }
-    } else if (
-      // cancel longpress timeout if it's set and the finger moved out of the view
-      state === State.ACTIVE &&
-      !pointerInside &&
-      this.longPressTimeout !== undefined
-    ) {
-      clearTimeout(this.longPressTimeout);
-      this.longPressTimeout = undefined;
-    } else if (
-      // cancel longpress timeout if it's set and the gesture has finished
-      this.longPressTimeout !== undefined &&
-      (state === State.END ||
-        state === State.CANCELLED ||
-        state === State.FAILED)
-    ) {
-      clearTimeout(this.longPressTimeout);
-      this.longPressTimeout = undefined;
-    }
-
-    this.lastActive = active;
-  };
-
-  private onLongPress = () => {
-    this.longPressDetected = true;
-    this.props.onLongPress?.();
-  };
-
-  // Normally, the parent would execute it's handler first, then forward the
-  // event to listeners. However, here our handler is virtually only forwarding
-  // events to listeners, so we reverse the order to keep the proper order of
-  // the callbacks (from "raw" ones to "processed").
-  private onHandlerStateChange = (
-    e: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>
-  ) => {
-    this.props.onHandlerStateChange?.(e);
-    this.handleEvent(e);
-  };
-
-  private onGestureEvent = (
-    e: GestureEvent<NativeViewGestureHandlerPayload>
-  ) => {
-    this.props.onGestureEvent?.(e);
-    this.handleEvent(
-      e as HandlerStateChangeEvent<NativeViewGestureHandlerPayload>
-    ); // TODO: maybe it is not correct
-  };
-
-  render() {
-    const { rippleColor, ...rest } = this.props;
-
-    return (
-      <RawButton
-        rippleColor={processColor(rippleColor)}
-        {...rest}
-        onGestureEvent={this.onGestureEvent}
-        onHandlerStateChange={this.onHandlerStateChange}
-      />
-    );
-  }
-}
-
-const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
-
-const btnStyles = StyleSheet.create({
-  underlay: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 0,
-  },
-});
-
-export class RectButton extends React.Component<RectButtonProps> {
-  static defaultProps = {
-    activeOpacity: 0.105,
-    underlayColor: 'black',
-  };
-
-  private opacity: Animated.Value;
-
-  constructor(props: RectButtonProps) {
-    super(props);
-    this.opacity = new Animated.Value(0);
-  }
-
-  private onActiveStateChange = (active: boolean) => {
-    if (Platform.OS !== 'android') {
-      this.opacity.setValue(active ? this.props.activeOpacity! : 0);
-    }
-
-    this.props.onActiveStateChange?.(active);
-  };
-
-  render() {
-    const { children, style, ...rest } = this.props;
-
-    const resolvedStyle = StyleSheet.flatten(style ?? {});
-
-    return (
-      <BaseButton
-        {...rest}
-        style={resolvedStyle}
-        onActiveStateChange={this.onActiveStateChange}
-      >
-        <Animated.View
-          style={[
-            btnStyles.underlay,
-            {
-              opacity: this.opacity,
-              backgroundColor: this.props.underlayColor,
-              borderRadius: resolvedStyle.borderRadius,
-              borderTopLeftRadius: resolvedStyle.borderTopLeftRadius,
-              borderTopRightRadius: resolvedStyle.borderTopRightRadius,
-              borderBottomLeftRadius: resolvedStyle.borderBottomLeftRadius,
-              borderBottomRightRadius: resolvedStyle.borderBottomRightRadius,
-            },
-          ]}
-        />
-        {children}
-      </BaseButton>
-    );
-  }
-}
-
-export class BorderlessButton extends React.Component<BorderlessButtonProps> {
-  static defaultProps = {
-    activeOpacity: 0.3,
-    borderless: true,
-  };
-
-  private opacity: Animated.Value;
-
-  constructor(props: BorderlessButtonProps) {
-    super(props);
-    this.opacity = new Animated.Value(1);
-  }
-
-  private onActiveStateChange = (active: boolean) => {
-    if (Platform.OS !== 'android') {
-      this.opacity.setValue(active ? this.props.activeOpacity! : 1);
-    }
-
-    this.props.onActiveStateChange?.(active);
-  };
-
-  render() {
-    const { children, style, ...rest } = this.props;
-
-    return (
-      <AnimatedBaseButton
-        {...rest}
-        onActiveStateChange={this.onActiveStateChange}
-        style={[style, Platform.OS === 'ios' && { opacity: this.opacity }]}
-      >
-        {children}
-      </AnimatedBaseButton>
-    );
-  }
-}
-
-export { default as PureNativeButton } from './GestureHandlerButton';

package/src/components/GestureHandlerButton.tsx

@@ -1,5 +0,0 @@
-import { HostComponent } from 'react-native';
-import { RawButtonProps } from 'react-native-gesture-handler/src/components/GestureButtons';
-import { RNGestureHandlerButton } from './RNGestureHandlerButton';
-
-export default RNGestureHandlerButton as HostComponent<RawButtonProps>;

package/src/components/RNGestureHandlerButton.tsx

@@ -1,23 +0,0 @@
-import {
-  registerViewConfig,
-  ReactNativeViewAttributes,
-} from 'react-native-harmony';
-
-export const RNGestureHandlerButton = registerViewConfig(
-  'RNGestureHandlerButton',
-  () => ({
-    uiViewClassName: 'RNGestureHandlerButton',
-    bubblingEventTypes: {},
-    directEventTypes: {},
-    validAttributes: {
-      ...ReactNativeViewAttributes.UIView,
-      exclusive: true,
-      foreground: true,
-      borderless: true,
-      enabled: true,
-      rippleColor: true,
-      rippleRadius: true,
-      touchSoundDisabled: true,
-    },
-  })
-);

package/src/components/touchables/GenericTouchable.tsx

@@ -1,301 +0,0 @@
-import * as React from 'react';
-import { Component } from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  ViewStyle,
-  TouchableWithoutFeedbackProps,
-  Insets,
-} from 'react-native';
-
-import { State } from 'react-native-gesture-handler/src/State';
-import { BaseButton } from '../GestureButtons';
-
-import {
-  GestureEvent,
-  HandlerStateChangeEvent,
-} from 'react-native-gesture-handler/src/handlers/gestureHandlerCommon';
-import { NativeViewGestureHandlerPayload } from 'react-native-gesture-handler/src/handlers/NativeViewGestureHandler';
-
-/**
- * Each touchable is a states' machine which preforms transitions.
- * On very beginning (and on the very end or recognition) touchable is
- * UNDETERMINED. Then it moves to BEGAN. If touchable recognizes that finger
- * travel outside it transits to special MOVED_OUTSIDE state. Gesture recognition
- * finishes in UNDETERMINED state.
- */
-export const TOUCHABLE_STATE = {
-  UNDETERMINED: 0,
-  BEGAN: 1,
-  MOVED_OUTSIDE: 2,
-} as const;
-
-type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
-
-export interface GenericTouchableProps
-  extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
-  // Decided to drop not used fields from RN's implementation.
-  // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment
-
-  // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too
-  onPress?: () => void;
-  onPressIn?: () => void;
-  onPressOut?: () => void;
-  onLongPress?: () => void;
-
-  nativeID?: string;
-  shouldActivateOnStart?: boolean;
-  disallowInterruption?: boolean;
-
-  containerStyle?: StyleProp<ViewStyle>;
-  hitSlop?: Insets | number;
-}
-
-interface InternalProps {
-  extraButtonProps: any;
-  onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
-}
-
-// TODO: maybe can be better
-// TODO: all clearTimeout have ! added, maybe they shouldn't ?
-type Timeout = ReturnType<typeof setTimeout> | null | undefined;
-
-/**
- * GenericTouchable is not intented to be used as it is.
- * Should be treated as a source for the rest of touchables
- */
-
-export default class GenericTouchable extends Component<
-  GenericTouchableProps & InternalProps
-> {
-  static defaultProps = {
-    delayLongPress: 600,
-    extraButtonProps: {
-      rippleColor: 'transparent',
-      exclusive: true,
-    },
-  };
-
-  // timeout handlers
-  pressInTimeout: Timeout;
-  pressOutTimeout: Timeout;
-  longPressTimeout: Timeout;
-
-  // This flag is required since recognition of longPress implies not-invoking onPress
-  longPressDetected = false;
-
-  pointerInside = true;
-
-  // State of touchable
-  STATE: TouchableState = TOUCHABLE_STATE.UNDETERMINED;
-
-  // handlePressIn in called on first touch on traveling inside component.
-  // Handles state transition with delay.
-  handlePressIn() {
-    if (this.props.delayPressIn) {
-      this.pressInTimeout = setTimeout(() => {
-        this.moveToState(TOUCHABLE_STATE.BEGAN);
-        this.pressInTimeout = null;
-      }, this.props.delayPressIn);
-    } else {
-      this.moveToState(TOUCHABLE_STATE.BEGAN);
-    }
-    if (this.props.onLongPress) {
-      const time =
-        (this.props.delayPressIn || 0) + (this.props.delayLongPress || 0);
-      this.longPressTimeout = setTimeout(this.onLongPressDetected, time);
-    }
-  }
-  // handleMoveOutside in called on traveling outside component.
-  // Handles state transition with delay.
-  handleMoveOutside() {
-    if (this.props.delayPressOut) {
-      this.pressOutTimeout =
-        this.pressOutTimeout ||
-        setTimeout(() => {
-          this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
-          this.pressOutTimeout = null;
-        }, this.props.delayPressOut);
-    } else {
-      this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
-    }
-  }
-
-  // handleGoToUndetermined transits to UNDETERMINED state with proper delay
-  handleGoToUndetermined() {
-    clearTimeout(this.pressOutTimeout!); // TODO: maybe it can be undefined
-    if (this.props.delayPressOut) {
-      this.pressOutTimeout = setTimeout(() => {
-        if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
-          this.moveToState(TOUCHABLE_STATE.BEGAN);
-        }
-        this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
-        this.pressOutTimeout = null;
-      }, this.props.delayPressOut);
-    } else {
-      if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
-        this.moveToState(TOUCHABLE_STATE.BEGAN);
-      }
-      this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
-    }
-  }
-
-  componentDidMount() {
-    this.reset();
-  }
-  // reset timeout to prevent memory leaks.
-  reset() {
-    this.longPressDetected = false;
-    this.pointerInside = true;
-    clearTimeout(this.pressInTimeout!);
-    clearTimeout(this.pressOutTimeout!);
-    clearTimeout(this.longPressTimeout!);
-    this.pressOutTimeout = null;
-    this.longPressTimeout = null;
-    this.pressInTimeout = null;
-  }
-
-  // All states' transitions are defined here.
-  moveToState(newState: TouchableState) {
-    if (newState === this.STATE) {
-      // Ignore dummy transitions
-      return;
-    }
-    if (newState === TOUCHABLE_STATE.BEGAN) {
-      // First touch and moving inside
-      this.props.onPressIn?.();
-    } else if (newState === TOUCHABLE_STATE.MOVED_OUTSIDE) {
-      // Moving outside
-      this.props.onPressOut?.();
-    } else if (newState === TOUCHABLE_STATE.UNDETERMINED) {
-      // Need to reset each time on transition to UNDETERMINED
-      this.reset();
-      if (this.STATE === TOUCHABLE_STATE.BEGAN) {
-        // ... and if it happens inside button.
-        this.props.onPressOut?.();
-      }
-    }
-    // Finally call lister (used by subclasses)
-    this.props.onStateChange?.(this.STATE, newState);
-    // ... and make transition.
-    this.STATE = newState;
-  }
-
-  onGestureEvent = ({
-    nativeEvent: { pointerInside },
-  }: GestureEvent<NativeViewGestureHandlerPayload>) => {
-    if (this.pointerInside !== pointerInside) {
-      if (pointerInside) {
-        this.onMoveIn();
-      } else {
-        this.onMoveOut();
-      }
-    }
-    this.pointerInside = pointerInside;
-  };
-
-  onHandlerStateChange = ({
-    nativeEvent,
-  }: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>) => {
-    const { state } = nativeEvent;
-    if (state === State.CANCELLED || state === State.FAILED) {
-      // Need to handle case with external cancellation (e.g. by ScrollView)
-      this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
-    } else if (
-      // This platform check is an implication of slightly different behavior of handlers on different platform.
-      // And Android "Active" state is achieving on first move of a finger, not on press in.
-      // On iOS event on "Began" is not delivered.
-      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
-      this.STATE === TOUCHABLE_STATE.UNDETERMINED
-    ) {
-      // Moving inside requires
-      this.handlePressIn();
-    } else if (state === State.END) {
-      const shouldCallOnPress =
-        !this.longPressDetected &&
-        this.STATE !== TOUCHABLE_STATE.MOVED_OUTSIDE &&
-        this.pressOutTimeout === null;
-      this.handleGoToUndetermined();
-      if (shouldCallOnPress) {
-        // Calls only inside component whether no long press was called previously
-        this.props.onPress?.();
-      }
-    }
-  };
-
-  onLongPressDetected = () => {
-    this.longPressDetected = true;
-    // checked for in the caller of `onLongPressDetected`, but better to check twice
-    this.props.onLongPress?.();
-  };
-
-  componentWillUnmount() {
-    // to prevent memory leaks
-    this.reset();
-  }
-
-  onMoveIn() {
-    if (this.STATE === TOUCHABLE_STATE.MOVED_OUTSIDE) {
-      // This call is not throttled with delays (like in RN's implementation).
-      this.moveToState(TOUCHABLE_STATE.BEGAN);
-    }
-  }
-
-  onMoveOut() {
-    // long press should no longer be detected
-    clearTimeout(this.longPressTimeout!);
-    this.longPressTimeout = null;
-    if (this.STATE === TOUCHABLE_STATE.BEGAN) {
-      this.handleMoveOutside();
-    }
-  }
-
-  render() {
-    const hitSlop =
-      (typeof this.props.hitSlop === 'number'
-        ? {
-            top: this.props.hitSlop,
-            left: this.props.hitSlop,
-            bottom: this.props.hitSlop,
-            right: this.props.hitSlop,
-          }
-        : this.props.hitSlop) ?? undefined;
-
-    const coreProps = {
-      accessible: this.props.accessible !== false,
-      accessibilityLabel: this.props.accessibilityLabel,
-      accessibilityHint: this.props.accessibilityHint,
-      accessibilityRole: this.props.accessibilityRole,
-      // TODO: check if changed to no 's' correctly, also removed 2 props that are no longer available: `accessibilityComponentType` and `accessibilityTraits`,
-      // would be good to check if it is ok for sure, see: https://github.com/facebook/react-native/issues/24016
-      accessibilityState: this.props.accessibilityState,
-      accessibilityActions: this.props.accessibilityActions,
-      onAccessibilityAction: this.props.onAccessibilityAction,
-      nativeID: this.props.nativeID,
-      onLayout: this.props.onLayout,
-    };
-
-    return (
-      <BaseButton
-        style={this.props.containerStyle}
-        onHandlerStateChange={
-          // TODO: not sure if it can be undefined instead of null
-          this.props.disabled ? undefined : this.onHandlerStateChange
-        }
-        onGestureEvent={this.onGestureEvent}
-        hitSlop={hitSlop}
-        shouldActivateOnStart={this.props.shouldActivateOnStart}
-        disallowInterruption={this.props.disallowInterruption}
-        testID={this.props.testID}
-        touchSoundDisabled={this.props.touchSoundDisabled ?? false}
-        enabled={!this.props.disabled}
-        {...this.props.extraButtonProps}
-      >
-        <Animated.View {...coreProps} style={this.props.style}>
-          {this.props.children}
-        </Animated.View>
-      </BaseButton>
-    );
-  }
-}