react-native-gesture-handler/lib/module/v3/components/GestureButtons.js

Declarative API exposing native platform touch and gesture system to React Native

"use strict";

import React, { useRef } from 'react';
import { Animated, Platform, StyleSheet } from 'react-native';
import GestureHandlerButton from '../../components/GestureHandlerButton';
import createNativeWrapper from '../createNativeWrapper';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const RawButtonInner = createNativeWrapper(GestureHandlerButton, {
  shouldCancelWhenOutside: false,
  shouldActivateOnStart: false
});

/**
 * @deprecated `RawButton` is deprecated, use `Clickable` instead
 */
export const RawButton = props => /*#__PURE__*/_jsx(RawButtonInner, {
  ...props,
  needsOffscreenAlphaCompositing: true
});

/**
 * @deprecated `BaseButton` is deprecated, use `Touchable` instead
 */
export const BaseButton = props => {
  const longPressDetected = useRef(false);
  const longPressTimeout = useRef(undefined);
  const delayLongPress = props.delayLongPress ?? 600;
  const {
    onLongPress,
    onPress,
    onActiveStateChange,
    style,
    ...rest
  } = props;
  const wrappedLongPress = () => {
    longPressDetected.current = true;
    onLongPress?.();
  };
  const onBegin = e => {
    if (!e.pointerInside) {
      return;
    }
    onActiveStateChange?.(true);
    longPressDetected.current = false;
    if (onLongPress) {
      longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
    }
    props.onBegin?.(e);
  };
  const onActivate = e => {
    if (!e.pointerInside && longPressTimeout.current !== undefined) {
      clearTimeout(longPressTimeout.current);
      longPressTimeout.current = undefined;
    }
    props.onActivate?.(e);
  };
  const onDeactivate = e => {
    props.onDeactivate?.(e);
  };
  const onFinalize = e => {
    onActiveStateChange?.(false);
    if (!e.canceled && !longPressDetected.current) {
      onPress?.(e.pointerInside);
    }
    if (longPressTimeout.current !== undefined) {
      clearTimeout(longPressTimeout.current);
      longPressTimeout.current = undefined;
    }
    props.onFinalize?.(e);
  };
  return /*#__PURE__*/_jsx(RawButton, {
    style: [style, Platform.OS === 'ios' && {
      cursor: undefined
    }],
    ...rest,
    onBegin: onBegin,
    onActivate: onActivate,
    onDeactivate: onDeactivate,
    onFinalize: onFinalize
  });
};
const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
const btnStyles = StyleSheet.create({
  underlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
  }
});

/**
 * @deprecated `RectButton` is deprecated, use `Touchable` with `activeUnderlayOpacity={0.7}` instead
 */
export const RectButton = props => {
  const {
    children,
    style,
    activeOpacity = 0.105,
    underlayColor = 'black',
    ...rest
  } = props;
  const opacity = useRef(new Animated.Value(0)).current;
  const onActiveStateChange = active => {
    if (Platform.OS !== 'android') {
      opacity.setValue(active ? activeOpacity : 0);
    }
    props.onActiveStateChange?.(active);
  };
  const resolvedStyle = StyleSheet.flatten(style ?? {});
  return /*#__PURE__*/_jsxs(BaseButton, {
    ...rest,
    style: resolvedStyle,
    onActiveStateChange: onActiveStateChange,
    children: [/*#__PURE__*/_jsx(Animated.View, {
      style: [btnStyles.underlay, {
        opacity,
        backgroundColor: underlayColor,
        borderRadius: resolvedStyle.borderRadius,
        borderTopLeftRadius: resolvedStyle.borderTopLeftRadius,
        borderTopRightRadius: resolvedStyle.borderTopRightRadius,
        borderBottomLeftRadius: resolvedStyle.borderBottomLeftRadius,
        borderBottomRightRadius: resolvedStyle.borderBottomRightRadius
      }]
    }), children]
  });
};

/**
 * @deprecated `BorderlessButton` is deprecated, use `Touchable` with `activeOpacity={0.3}` instead
 */
export const BorderlessButton = props => {
  const activeOpacity = props.activeOpacity ?? 0.3;
  const opacity = useRef(new Animated.Value(1)).current;
  const onActiveStateChange = active => {
    if (Platform.OS === 'ios') {
      opacity.setValue(active ? activeOpacity : 1);
    }
    props.onActiveStateChange?.(active);
  };
  const {
    children,
    style,
    ref,
    ...rest
  } = props;
  return /*#__PURE__*/_jsx(AnimatedBaseButton, {
    borderless: true,
    ...rest,
    ref: ref ?? null,
    onActiveStateChange: onActiveStateChange,
    style: [style, Platform.OS === 'ios' && {
      opacity
    }],
    children: children
  });
};
export { default as PureNativeButton } from '../../components/GestureHandlerButton';
//# sourceMappingURL=GestureButtons.js.map