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

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

@@ -1,317 +0,0 @@
-import * as React from 'react';
-import {
-  ColorValue,
-  GestureResponderEvent,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-
-import type { PressableProps, PressableStateCallbackType } 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';
-
-export type Props = PressableProps & {
-  /**
-   * Whether to render the ripple outside the view bounds.
-   */
-  borderless?: boolean;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: Object;
-  /**
-   * Whether to start the ripple at the center (Web).
-   */
-  centered?: boolean;
-  /**
-   * Whether to prevent interaction with the touchable.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press. If not set, will cause the touchable to be disabled.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`.
-   */
-  onPressIn?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute when a touch is released.
-   */
-  onPressOut?: (e: GestureResponderEvent) => void;
-  /**
-   * Color of the ripple effect (Android >= 5.0 and Web).
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
-   */
-  underlayColor?: string;
-  /**
-   * Content of the `TouchableRipple`.
-   */
-  children:
-    | ((state: PressableStateCallbackType) => React.ReactNode)
-    | React.ReactNode;
-  style?:
-    | StyleProp<ViewStyle>
-    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
-    | undefined;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A wrapper for views that should respond to touches.
- * Provides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).
- * On unsupported platforms, it falls back to a highlight effect.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Text, TouchableRipple } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <TouchableRipple
- *     onPress={() => console.log('Pressed')}
- *     rippleColor="rgba(0, 0, 0, .32)"
- *   >
- *     <Text>Press anywhere</Text>
- *   </TouchableRipple>
- * );
- *
- * export default MyComponent;
- * ```
- *
- * @extends Pressable props https://reactnative.dev/docs/Pressable#props
- */
-const TouchableRipple = (
-  {
-    style,
-    background: _background,
-    borderless = false,
-    disabled: disabledProp,
-    rippleColor,
-    underlayColor: _underlayColor,
-    children,
-    theme: themeOverrides,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { calculatedRippleColor } = getTouchableRippleColors({
-    theme,
-    rippleColor,
-  });
-  const hoverColor = color(calculatedRippleColor).fade(0.5).rgb().string();
-  const { rippleEffectEnabled } = React.useContext<Settings>(SettingsContext);
-
-  const { onPress, onLongPress, onPressIn, onPressOut } = rest;
-
-  const handlePressIn = React.useCallback(
-    (e: any) => {
-      onPressIn?.(e);
-
-      if (rippleEffectEnabled) {
-        const { centered } = rest;
-
-        const button = e.currentTarget;
-        const style = window.getComputedStyle(button);
-        const dimensions = button.getBoundingClientRect();
-
-        let touchX;
-        let touchY;
-
-        const { changedTouches, touches } = e.nativeEvent;
-        const touch = touches?.[0] ?? changedTouches?.[0];
-
-        // If centered or it was pressed using keyboard - enter or space
-        if (centered || !touch) {
-          touchX = dimensions.width / 2;
-          touchY = dimensions.height / 2;
-        } else {
-          touchX = touch.locationX ?? e.pageX;
-          touchY = touch.locationY ?? e.pageY;
-        }
-
-        // Get the size of the button to determine how big the ripple should be
-        const size = centered
-          ? // If ripple is always centered, we don't need to make it too big
-            Math.min(dimensions.width, dimensions.height) * 1.5
-          : // Otherwise make it twice as big so clicking on one end spreads ripple to other
-            Math.max(dimensions.width, dimensions.height) * 2;
-
-        // Create a container for our ripple effect so we don't need to change the parent's style
-        const container = document.createElement('span');
-
-        container.setAttribute('data-paper-ripple', '');
-
-        Object.assign(container.style, {
-          position: 'absolute',
-          pointerEvents: 'none',
-          top: '0',
-          left: '0',
-          right: '0',
-          bottom: '0',
-          borderTopLeftRadius: style.borderTopLeftRadius,
-          borderTopRightRadius: style.borderTopRightRadius,
-          borderBottomRightRadius: style.borderBottomRightRadius,
-          borderBottomLeftRadius: style.borderBottomLeftRadius,
-          overflow: centered ? 'visible' : 'hidden',
-        });
-
-        // Create span to show the ripple effect
-        const ripple = document.createElement('span');
-
-        Object.assign(ripple.style, {
-          position: 'absolute',
-          pointerEvents: 'none',
-          backgroundColor: calculatedRippleColor,
-          borderRadius: '50%',
-
-          /* Transition configuration */
-          transitionProperty: 'transform opacity',
-          transitionDuration: `${Math.min(size * 1.5, 350)}ms`,
-          transitionTimingFunction: 'linear',
-          transformOrigin: 'center',
-
-          /* We'll animate these properties */
-          transform: 'translate3d(-50%, -50%, 0) scale3d(0.1, 0.1, 0.1)',
-          opacity: '0.5',
-
-          // Position the ripple where cursor was
-          left: `${touchX}px`,
-          top: `${touchY}px`,
-          width: `${size}px`,
-          height: `${size}px`,
-        });
-
-        // Finally, append it to DOM
-        container.appendChild(ripple);
-        button.appendChild(container);
-
-        // rAF runs in the same frame as the event handler
-        // Use double rAF to ensure the transition class is added in next frame
-        // This will make sure that the transition animation is triggered
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            Object.assign(ripple.style, {
-              transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
-              opacity: '1',
-            });
-          });
-        });
-      }
-    },
-    [onPressIn, rest, rippleEffectEnabled, calculatedRippleColor]
-  );
-
-  const handlePressOut = React.useCallback(
-    (e: any) => {
-      onPressOut?.(e);
-
-      if (rippleEffectEnabled) {
-        const containers = e.currentTarget.querySelectorAll(
-          '[data-paper-ripple]'
-        ) as HTMLElement[];
-
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            containers.forEach((container) => {
-              const ripple = container.firstChild as HTMLSpanElement;
-
-              Object.assign(ripple.style, {
-                transitionDuration: '250ms',
-                opacity: 0,
-              });
-
-              // Finally remove the span after the transition
-              setTimeout(() => {
-                const { parentNode } = container;
-
-                if (parentNode) {
-                  parentNode.removeChild(container);
-                }
-              }, 500);
-            });
-          });
-        });
-      }
-    },
-    [onPressOut, rippleEffectEnabled]
-  );
-
-  const hasPassedTouchHandler = hasTouchHandler({
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-  });
-
-  const disabled = disabledProp || !hasPassedTouchHandler;
-
-  return (
-    <Pressable
-      {...rest}
-      ref={ref}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      disabled={disabled}
-      style={(state) => [
-        styles.touchable,
-        borderless && styles.borderless,
-        // focused state is not ready yet: https://github.com/necolas/react-native-web/issues/1849
-        // state.focused && { backgroundColor: ___ },
-        state.hovered && { backgroundColor: hoverColor },
-        typeof style === 'function' ? style(state) : style,
-      ]}
-    >
-      {(state) =>
-        React.Children.only(
-          typeof children === 'function' ? children(state) : children
-        )
-      }
-    </Pressable>
-  );
-};
-
-/**
- * Whether ripple effect is supported.
- */
-TouchableRipple.supported = true;
-
-const styles = StyleSheet.create({
-  touchable: {
-    position: 'relative',
-    ...(Platform.OS === 'web' && {
-      cursor: 'pointer',
-      transition: '150ms background-color',
-    }),
-  },
-  borderless: {
-    overflow: 'hidden',
-  },
-});
-
-const Component = forwardRef(TouchableRipple);
-
-export default Component as typeof Component & { supported: boolean };

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

@@ -1,66 +0,0 @@
-import type { ColorValue } from 'react-native';
-
-import color from 'color';
-
-import type { InternalTheme } from '../../types';
-
-const getUnderlayColor = ({
-  theme,
-  calculatedRippleColor,
-  underlayColor,
-}: {
-  theme: InternalTheme;
-  calculatedRippleColor: ColorValue;
-  underlayColor?: string;
-}) => {
-  if (underlayColor != null) {
-    return underlayColor;
-  }
-
-  if (theme.isV3) {
-    return color(calculatedRippleColor).rgb().string();
-  }
-
-  return color(calculatedRippleColor).fade(0.5).rgb().string();
-};
-
-const getRippleColor = ({
-  theme,
-  rippleColor,
-}: {
-  theme: InternalTheme;
-  rippleColor?: ColorValue;
-}) => {
-  if (rippleColor) {
-    return rippleColor;
-  }
-
-  if (theme.isV3) {
-    return color(theme.colors.onSurface).alpha(0.12).rgb().string();
-  }
-
-  if (theme.dark) {
-    return color(theme.colors.text).alpha(0.32).rgb().string();
-  }
-  return color(theme.colors.text).alpha(0.2).rgb().string();
-};
-
-export const getTouchableRippleColors = ({
-  theme,
-  rippleColor,
-  underlayColor,
-}: {
-  theme: InternalTheme;
-  rippleColor?: ColorValue;
-  underlayColor?: string;
-}) => {
-  const calculatedRippleColor = getRippleColor({ theme, rippleColor });
-  return {
-    calculatedRippleColor,
-    calculatedUnderlayColor: getUnderlayColor({
-      theme,
-      calculatedRippleColor,
-      underlayColor,
-    }),
-  };
-};

package/Examples/SampleUI/src/components/Typography/AnimatedText.tsx

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  Text,
-} from 'react-native';
-
-import type { VariantProp } from './types';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-
-type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
-  /**
-   * Variant defines appropriate text styles for type role and its size.
-   * Available variants:
-   *
-   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
-   *
-   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
-   *
-   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
-   *
-   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
-   *
-   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
-   */
-  variant?: VariantProp<T>;
-  style?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Animated text component which follows styles from the theme.
- *
- * @extends Text props https://reactnative.dev/docs/text#props
- */
-const AnimatedText = forwardRef<Text & HTMLElement, Props<never>>(
-  function AnimatedText(
-    { style, theme: themeOverrides, variant, ...rest },
-    ref
-  ) {
-    const theme = useInternalTheme(themeOverrides);
-    const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
-
-    if (theme.isV3 && variant) {
-      const font = theme.fonts[variant];
-      if (typeof font !== 'object') {
-        throw new Error(
-          `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
-            theme.fonts
-          ).join(', ')}.`
-        );
-      }
-
-      return (
-        <Animated.Text
-          ref={ref}
-          {...rest}
-          style={[
-            font,
-            styles.text,
-            { writingDirection, color: theme.colors.onSurface },
-            style,
-          ]}
-        />
-      );
-    } else {
-      const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium;
-      const textStyle = {
-        ...font,
-        color: theme.isV3 ? theme.colors.onSurface : theme.colors.text,
-      };
-      return (
-        <Animated.Text
-          ref={ref}
-          {...rest}
-          style={[
-            styles.text,
-            textStyle,
-            {
-              writingDirection,
-            },
-            style,
-          ]}
-        />
-      );
-    }
-  }
-);
-
-const styles = StyleSheet.create({
-  text: {
-    textAlign: 'left',
-  },
-});
-
-export const customAnimatedText = <T,>() =>
-  AnimatedText as (props: Props<T>) => JSX.Element;
-
-export default AnimatedText;

package/Examples/SampleUI/src/components/Typography/Text.tsx

@@ -1,184 +0,0 @@
-import * as React from 'react';
-import {
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  Text as NativeText,
-  TextStyle,
-} from 'react-native';
-
-import AnimatedText from './AnimatedText';
-import type { VariantProp } from './types';
-import StyledText from './v2/StyledText';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-
-export type Props<T> = React.ComponentProps<typeof NativeText> & {
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Variant defines appropriate text styles for type role and its size.
-   * Available variants:
-   *
-   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
-   *
-   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
-   *
-   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
-   *
-   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
-   *
-   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
-   */
-  variant?: VariantProp<T>;
-  children: React.ReactNode;
-  theme?: ThemeProp;
-  style?: StyleProp<TextStyle>;
-};
-
-export type TextRef = React.ForwardedRef<{
-  setNativeProps(args: Object): void;
-}>;
-
-// @component-group Typography
-
-/**
- * Typography component showing styles complied with passed `variant` prop and supported by the type system.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Text } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <>
- *     <Text variant="displayLarge">Display Large</Text>
- *     <Text variant="displayMedium">Display Medium</Text>
- *     <Text variant="displaySmall">Display small</Text>
- *
- *     <Text variant="headlineLarge">Headline Large</Text>
- *     <Text variant="headlineMedium">Headline Medium</Text>
- *     <Text variant="headlineSmall">Headline Small</Text>
- *
- *     <Text variant="titleLarge">Title Large</Text>
- *     <Text variant="titleMedium">Title Medium</Text>
- *     <Text variant="titleSmall">Title Small</Text>
- *
- *     <Text variant="bodyLarge">Body Large</Text>
- *     <Text variant="bodyMedium">Body Medium</Text>
- *     <Text variant="bodySmall">Body Small</Text>
- *
- *     <Text variant="labelLarge">Label Large</Text>
- *     <Text variant="labelMedium">Label Medium</Text>
- *     <Text variant="labelSmall">Label Small</Text>
- *  </>
- * );
- *
- * export default MyComponent;
- * ```
- *
- * @extends Text props https://reactnative.dev/docs/text#props
- */
-const Text = (
-  { style, variant, theme: initialTheme, ...rest }: Props<string>,
-  ref: TextRef
-) => {
-  const root = React.useRef<NativeText | null>(null);
-  // FIXME: destructure it in TS 4.6+
-  const theme = useInternalTheme(initialTheme);
-  const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
-
-  React.useImperativeHandle(ref, () => ({
-    setNativeProps: (args: Object) => root.current?.setNativeProps(args),
-  }));
-
-  if (theme.isV3 && variant) {
-    let font = theme.fonts[variant];
-    let textStyle = [font, style];
-
-    if (
-      React.isValidElement(rest.children) &&
-      (rest.children.type === Component ||
-        rest.children.type === AnimatedText ||
-        rest.children.type === StyledText)
-    ) {
-      const { props } = rest.children;
-
-      // Context:   Some components have the built-in `Text` component with a predefined variant,
-      //            that also accepts `children` as a `React.Node`. This can result in a situation,
-      //            where another `Text` component is rendered within the built-in `Text` component.
-      //            By doing that, we assume that user doesn't want to consume pre-defined font properties.
-      // Case one:  Nested `Text` has different `variant` that specified in parent. For example:
-      //              <Chip>
-      //                <Text variant="displayMedium">Nested</Text>
-      //              </Chip>
-      // Solution:  To address the following scenario, the code below overrides the `variant`
-      //            specified in a parent in favor of children's variant:
-      if (props.variant) {
-        font = theme.fonts[props.variant as VariantProp<typeof props.variant>];
-        textStyle = [style, font];
-      }
-
-      // Case two:  Nested `Text` has specified `styles` which intefere
-      //            with font properties, from the parent's `variant`. For example:
-      //              <Chip>
-      //                <Text style={{fontSize: 30}}>Nested</Text>
-      //              </Chip>
-      // Solution:  To address the following scenario, the code below overrides the
-      //            parent's style with children's style:
-      if (!props.variant) {
-        textStyle = [style, props.style];
-      }
-    }
-
-    if (typeof font !== 'object') {
-      throw new Error(
-        `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
-          theme.fonts
-        ).join(', ')}.`
-      );
-    }
-
-    return (
-      <NativeText
-        ref={root}
-        style={[
-          styles.text,
-          { writingDirection, color: theme.colors.onSurface },
-          textStyle,
-        ]}
-        {...rest}
-      />
-    );
-  } else {
-    const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular;
-    const textStyle = {
-      ...font,
-      color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,
-    };
-    return (
-      <NativeText
-        {...rest}
-        ref={root}
-        style={[styles.text, textStyle, { writingDirection }, style]}
-      />
-    );
-  }
-};
-
-const styles = StyleSheet.create({
-  text: {
-    textAlign: 'left',
-  },
-});
-
-type TextComponent<T> = (
-  props: Props<T> & { ref?: React.RefObject<TextRef> }
-) => JSX.Element;
-
-const Component = forwardRef(Text) as TextComponent<never>;
-
-export const customText = <T,>() => Component as unknown as TextComponent<T>;
-
-export default Component;

package/Examples/SampleUI/src/components/Typography/types.tsx

@@ -1,5 +0,0 @@
-import type { MD3TypescaleKey } from '../../types';
-
-export type VariantProp<T> =
-  | (T extends string ? (string extends T ? never : T) : never)
-  | keyof typeof MD3TypescaleKey;