react-native-acoustic-connect-beta 18.0.7 → 18.0.8

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

@@ -0,0 +1,249 @@
+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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,145 @@
+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 };