react-native-acoustic-connect-beta 19.0.26 → 19.0.28

package/Examples/SampleUI/src/components/Tooltip/Tooltip.tsx

@@ -1,249 +0,0 @@
-import * as React from 'react';
-import {
-  Dimensions,
-  View,
-  LayoutChangeEvent,
-  StyleSheet,
-  Platform,
-  Pressable,
-  ViewStyle,
-} from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { getTooltipPosition, Measurement } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { addEventListener } from '../../utils/addEventListener';
-import Portal from '../Portal/Portal';
-import Text from '../Typography/Text';
-
-export type Props = {
-  /**
-   * Tooltip reference element. Needs to be able to hold a ref.
-   */
-  children: React.ReactElement;
-  /**
-   * The number of milliseconds a user must touch the element before showing the tooltip.
-   */
-  enterTouchDelay?: number;
-  /**
-   * The number of milliseconds after the user stops touching an element before hiding the tooltip.
-   */
-  leaveTouchDelay?: number;
-  /**
-   * Tooltip title
-   */
-  title: string;
-  /**
-   * Specifies the largest possible scale a title font can reach.
-   */
-  titleMaxFontSizeMultiplier?: number;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Tooltips display informative text when users hover over, focus on, or tap an element.
- *
- * Plain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { IconButton, Tooltip } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Tooltip title="Selected Camera">
- *     <IconButton icon="camera" selected size={24} onPress={() => {}} />
- *   </Tooltip>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Tooltip = ({
-  children,
-  enterTouchDelay = 500,
-  leaveTouchDelay = 1500,
-  title,
-  theme: themeOverrides,
-  titleMaxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const isWeb = Platform.OS === 'web';
-
-  const theme = useInternalTheme(themeOverrides);
-  const [visible, setVisible] = React.useState(false);
-
-  const [measurement, setMeasurement] = React.useState({
-    children: {},
-    tooltip: {},
-    measured: false,
-  });
-  const showTooltipTimer = React.useRef<NodeJS.Timeout[]>([]);
-  const hideTooltipTimer = React.useRef<NodeJS.Timeout[]>([]);
-  const childrenWrapperRef = React.useRef() as React.MutableRefObject<View>;
-  const touched = React.useRef(false);
-
-  React.useEffect(() => {
-    return () => {
-      if (showTooltipTimer.current.length) {
-        showTooltipTimer.current.forEach((t) => clearTimeout(t));
-        showTooltipTimer.current = [];
-      }
-
-      if (hideTooltipTimer.current.length) {
-        hideTooltipTimer.current.forEach((t) => clearTimeout(t));
-        hideTooltipTimer.current = [];
-      }
-    };
-  }, []);
-
-  React.useEffect(() => {
-    const subscription = addEventListener(Dimensions, 'change', () =>
-      setVisible(false)
-    );
-
-    return () => subscription.remove();
-  }, []);
-
-  const handleOnLayout = ({ nativeEvent: { layout } }: LayoutChangeEvent) => {
-    childrenWrapperRef.current.measure(
-      (_x, _y, width, height, pageX, pageY) => {
-        setMeasurement({
-          children: { pageX, pageY, height, width },
-          tooltip: { ...layout },
-          measured: true,
-        });
-      }
-    );
-  };
-
-  const handleTouchStart = () => {
-    if (hideTooltipTimer.current.length) {
-      hideTooltipTimer.current.forEach((t) => clearTimeout(t));
-      hideTooltipTimer.current = [];
-    }
-
-    if (isWeb) {
-      let id = setTimeout(() => {
-        touched.current = true;
-        setVisible(true);
-      }, enterTouchDelay) as unknown as NodeJS.Timeout;
-      showTooltipTimer.current.push(id);
-    } else {
-      touched.current = true;
-      setVisible(true);
-    }
-  };
-
-  const handleTouchEnd = () => {
-    touched.current = false;
-    if (showTooltipTimer.current.length) {
-      showTooltipTimer.current.forEach((t) => clearTimeout(t));
-      showTooltipTimer.current = [];
-    }
-
-    let id = setTimeout(() => {
-      setVisible(false);
-      setMeasurement({ children: {}, tooltip: {}, measured: false });
-    }, leaveTouchDelay) as unknown as NodeJS.Timeout;
-    hideTooltipTimer.current.push(id);
-  };
-
-  const mobilePressProps = {
-    onPress: React.useCallback(() => {
-      if (touched.current) {
-        return null;
-      } else {
-        if (children.props.disabled) return null;
-        return children.props.onPress?.();
-      }
-    }, [children.props]),
-    onLongPress: () => handleTouchStart(),
-    onPressOut: () => handleTouchEnd(),
-    delayLongPress: enterTouchDelay,
-  };
-
-  const webPressProps = {
-    onHoverIn: () => {
-      handleTouchStart();
-      children.props.onHoverIn?.();
-    },
-    onHoverOut: () => {
-      handleTouchEnd();
-      children.props.onHoverOut?.();
-    },
-  };
-
-  return (
-    <>
-      {visible && (
-        <Portal>
-          <View
-            onLayout={handleOnLayout}
-            style={[
-              styles.tooltip,
-              {
-                backgroundColor: theme.isV3
-                  ? theme.colors.onSurface
-                  : theme.colors.tooltip,
-                ...getTooltipPosition(measurement as Measurement, children),
-                borderRadius: theme.roundness,
-                ...(measurement.measured ? styles.visible : styles.hidden),
-              },
-            ]}
-            testID="tooltip-container"
-          >
-            <Text
-              accessibilityLiveRegion="polite"
-              numberOfLines={1}
-              selectable={false}
-              variant="labelLarge"
-              style={{ color: theme.colors.surface }}
-              maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-            >
-              {title}
-            </Text>
-          </View>
-        </Portal>
-      )}
-      {/* Need the xxPressProps in both places */}
-      <Pressable
-        ref={childrenWrapperRef}
-        style={styles.pressContainer}
-        {...(isWeb ? webPressProps : mobilePressProps)}
-      >
-        {React.cloneElement(children, {
-          ...rest,
-          ...(isWeb ? webPressProps : mobilePressProps),
-        })}
-      </Pressable>
-    </>
-  );
-};
-
-Tooltip.displayName = 'Tooltip';
-
-const styles = StyleSheet.create({
-  tooltip: {
-    alignSelf: 'flex-start',
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    height: 32,
-    maxHeight: 32,
-  },
-  visible: {
-    opacity: 1,
-  },
-  hidden: {
-    opacity: 0,
-  },
-  pressContainer: {
-    ...(Platform.OS === 'web' && { cursor: 'default' }),
-  } as ViewStyle,
-});
-
-export default Tooltip;

package/Examples/SampleUI/src/components/Tooltip/utils.ts

@@ -1,129 +0,0 @@
-import { Dimensions, LayoutRectangle, ViewStyle } from 'react-native';
-
-type ChildrenMeasurement = {
-  width: number;
-  height: number;
-  pageX: number;
-  pageY: number;
-};
-
-type TooltipLayout = LayoutRectangle;
-
-export type Measurement = {
-  children: ChildrenMeasurement;
-  tooltip: TooltipLayout;
-  measured: boolean;
-};
-
-/**
- * Return true when the tooltip center x-coordinate relative to the wrapped element is negative.
- * The tooltip will be placed at the starting x-coordinate from the wrapped element.
- */
-const overflowLeft = (center: number): boolean => {
-  return center < 0;
-};
-
-/**
- * Return true when the tooltip center x-coordinate + tooltip width is greater than the layout width
- * The tooltip width will grow from right to left relative to the wrapped element.
- */
-const overflowRight = (center: number, tooltipWidth: number): boolean => {
-  const { width: layoutWidth } = Dimensions.get('window');
-
-  return center + tooltipWidth > layoutWidth;
-};
-
-/**
- * Return true when the children y-coordinate + its height + tooltip height is greater than the layout height.
- * The tooltip will be placed at the top of the wrapped element.
- */
-const overflowBottom = (
-  childrenY: number,
-  childrenHeight: number,
-  tooltipHeight: number
-): boolean => {
-  const { height: layoutHeight } = Dimensions.get('window');
-
-  return childrenY + childrenHeight + tooltipHeight > layoutHeight;
-};
-
-const getTooltipXPosition = (
-  { pageX: childrenX, width: childrenWidth }: ChildrenMeasurement,
-  { width: tooltipWidth }: TooltipLayout
-): number => {
-  // when the children use position absolute the childrenWidth is measured as 0,
-  // so it's best to anchor the tooltip at the start of the children
-  const center =
-    childrenWidth > 0
-      ? childrenX + (childrenWidth - tooltipWidth) / 2
-      : childrenX;
-
-  if (overflowLeft(center)) return childrenX;
-
-  if (overflowRight(center, tooltipWidth))
-    return childrenX + childrenWidth - tooltipWidth;
-
-  return center;
-};
-
-const getTooltipYPosition = (
-  { pageY: childrenY, height: childrenHeight }: ChildrenMeasurement,
-  { height: tooltipHeight }: TooltipLayout
-): number => {
-  if (overflowBottom(childrenY, childrenHeight, tooltipHeight))
-    return childrenY - tooltipHeight;
-
-  return childrenY + childrenHeight;
-};
-
-const getChildrenMeasures = (
-  style: ViewStyle | Array<ViewStyle>,
-  measures: ChildrenMeasurement
-): ChildrenMeasurement => {
-  const { position, top, bottom, left, right } = Array.isArray(style)
-    ? style.reduce((acc, current) => ({ ...acc, ...current }))
-    : style;
-
-  if (position === 'absolute') {
-    let pageX = 0;
-    let pageY = measures.pageY;
-    let height = 0;
-    let width = 0;
-    if (typeof left === 'number') {
-      pageX = left;
-      width = 0;
-    }
-    if (typeof right === 'number') {
-      pageX = measures.width - right;
-      width = 0;
-    }
-    if (typeof top === 'number') {
-      pageY = pageY + top;
-    }
-    if (typeof bottom === 'number') {
-      pageY = pageY - bottom;
-    }
-
-    return { pageX, pageY, width, height };
-  }
-
-  return measures;
-};
-
-export const getTooltipPosition = (
-  { children, tooltip, measured }: Measurement,
-  component: React.ReactElement<{
-    style: ViewStyle | Array<ViewStyle> | undefined | null;
-  }>
-): {} | { left: number; top: number } => {
-  if (!measured) return {};
-  let measures = children;
-  if (component.props.style) {
-    measures = getChildrenMeasures(component.props.style, children);
-  }
-
-  return {
-    left: getTooltipXPosition(measures, tooltip),
-    top: getTooltipYPosition(measures, tooltip),
-  };
-};

package/Examples/SampleUI/src/components/TouchableRipple/Pressable.tsx

@@ -1,41 +0,0 @@
-import type * as React from 'react';
-import type {
-  Animated,
-  PressableProps as PressableNativeProps,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { Pressable as PressableNative } from 'react-native';
-
-// This component is added to support type-safe hover and focus states on web
-// https://necolas.github.io/react-native-web/docs/pressable/
-
-export type PressableStateCallbackType = {
-  hovered: boolean;
-  pressed: boolean;
-  focused: boolean;
-};
-
-export type PressableProps = Omit<
-  PressableNativeProps,
-  'children' | 'style'
-> & {
-  children:
-    | React.ReactNode
-    | ((state: PressableStateCallbackType) => React.ReactNode)
-    | undefined;
-  style?:
-    | StyleProp<ViewStyle>
-    | Animated.WithAnimatedValue<StyleProp<ViewStyle>>
-    | ((
-        state: PressableStateCallbackType
-      ) =>
-        | StyleProp<ViewStyle>
-        | Animated.WithAnimatedValue<StyleProp<ViewStyle>>)
-    | undefined;
-};
-
-export const Pressable: React.ForwardRefExoticComponent<
-  PressableProps & React.RefAttributes<View>
-> = PressableNative as any;

package/Examples/SampleUI/src/components/TouchableRipple/TouchableRipple.native.tsx

@@ -1,145 +0,0 @@
-import * as React from 'react';
-import {
-  PressableAndroidRippleConfig,
-  StyleProp,
-  Platform,
-  ViewStyle,
-  StyleSheet,
-  GestureResponderEvent,
-  View,
-  ColorValue,
-} from 'react-native';
-
-import type { PressableProps } from './Pressable';
-import { Pressable } from './Pressable';
-import { getTouchableRippleColors } from './utils';
-import { Settings, SettingsContext } from '../../core/settings';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-import hasTouchHandler from '../../utils/hasTouchHandler';
-
-const ANDROID_VERSION_LOLLIPOP = 21;
-const ANDROID_VERSION_PIE = 28;
-
-export type Props = PressableProps & {
-  borderless?: boolean;
-  background?: PressableAndroidRippleConfig;
-  centered?: boolean;
-  disabled?: boolean;
-  onPress?: (e: GestureResponderEvent) => void | null;
-  onLongPress?: (e: GestureResponderEvent) => void;
-  onPressIn?: (e: GestureResponderEvent) => void;
-  onPressOut?: (e: GestureResponderEvent) => void;
-  rippleColor?: ColorValue;
-  underlayColor?: string;
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-};
-
-const TouchableRipple = (
-  {
-    style,
-    background,
-    borderless = false,
-    disabled: disabledProp,
-    rippleColor,
-    underlayColor,
-    children,
-    theme: themeOverrides,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { rippleEffectEnabled } = React.useContext<Settings>(SettingsContext);
-
-  const { onPress, onLongPress, onPressIn, onPressOut } = rest;
-
-  const hasPassedTouchHandler = hasTouchHandler({
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-  });
-
-  const disabled = disabledProp || !hasPassedTouchHandler;
-
-  const { calculatedRippleColor, calculatedUnderlayColor } =
-    getTouchableRippleColors({
-      theme,
-      rippleColor,
-      underlayColor,
-    });
-
-  // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
-  // https://github.com/facebook/react-native/issues/6480
-  const useForeground =
-    Platform.OS === 'android' &&
-    Platform.Version >= ANDROID_VERSION_PIE &&
-    borderless;
-
-  if (TouchableRipple.supported) {
-    const androidRipple = rippleEffectEnabled
-      ? background ?? {
-          color: calculatedRippleColor,
-          borderless,
-          foreground: useForeground,
-        }
-      : undefined;
-
-    return (
-      <Pressable
-        {...rest}
-        ref={ref}
-        disabled={disabled}
-        style={[borderless && styles.overflowHidden, style]}
-        android_ripple={androidRipple}
-      >
-        {React.Children.only(children)}
-      </Pressable>
-    );
-  }
-
-  return (
-    <Pressable
-      {...rest}
-      ref={ref}
-      disabled={disabled}
-      style={[borderless && styles.overflowHidden, style]}
-    >
-      {({ pressed }) => (
-        <>
-          {pressed && rippleEffectEnabled && (
-            <View
-              testID="touchable-ripple-underlay"
-              style={[
-                styles.underlay,
-                { backgroundColor: calculatedUnderlayColor },
-              ]}
-            />
-          )}
-          {React.Children.only(children)}
-        </>
-      )}
-    </Pressable>
-  );
-};
-
-TouchableRipple.supported =
-  Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
-
-const styles = StyleSheet.create({
-  overflowHidden: {
-    overflow: 'hidden',
-  },
-  underlay: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 2,
-  },
-});
-
-const Component = forwardRef(TouchableRipple);
-
-export default Component as typeof Component & { supported: boolean };