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

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

@@ -1,188 +0,0 @@
-import React from 'react';
-import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet, Animated } from 'react-native';
-
-import overlay from '../../styles/overlay';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme, ThemeProp } from '../../types';
-
-export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
-
-const borderStyleProperties = [
-  'borderRadius',
-  'borderTopLeftRadius',
-  'borderTopRightRadius',
-  'borderBottomRightRadius',
-  'borderBottomLeftRadius',
-];
-
-export const getAppbarBackgroundColor = (
-  theme: InternalTheme,
-  elevation: number,
-  customBackground?: ColorValue,
-  elevated?: boolean
-) => {
-  const { isV3, dark: isDarkTheme, mode, colors } = theme;
-  const isAdaptiveMode = mode === 'adaptive';
-  if (customBackground) {
-    return customBackground;
-  }
-
-  if (!isV3) {
-    if (isDarkTheme && isAdaptiveMode) {
-      return overlay(elevation, colors?.surface);
-    }
-
-    return colors.primary;
-  }
-
-  if (elevated) {
-    return theme.colors.elevation.level2;
-  }
-
-  return colors.surface;
-};
-
-export const getAppbarColor = ({
-  color,
-  isDark,
-  isV3,
-}: BaseProps & { color: string }) => {
-  if (typeof color !== 'undefined') {
-    return color;
-  }
-
-  if (isDark) {
-    return white;
-  }
-
-  if (isV3) {
-    return undefined;
-  }
-
-  return black;
-};
-
-export const getAppbarBorders = (
-  style:
-    | Animated.Value
-    | Animated.AnimatedInterpolation<string | number>
-    | Animated.WithAnimatedObject<ViewStyle>
-) => {
-  const borders: Record<string, number> = {};
-
-  for (const property of borderStyleProperties) {
-    const value = style[property as keyof typeof style];
-    if (value) {
-      borders[property] = value;
-    }
-  }
-
-  return borders;
-};
-
-type BaseProps = {
-  isDark: boolean;
-  isV3: boolean;
-};
-
-type RenderAppbarContentProps = BaseProps & {
-  children: React.ReactNode;
-  shouldCenterContent?: boolean;
-  isV3: boolean;
-  renderOnly?: (string | boolean)[];
-  renderExcept?: string[];
-  mode?: AppbarModes;
-  theme?: ThemeProp;
-};
-
-export const DEFAULT_APPBAR_HEIGHT = 56;
-const MD3_DEFAULT_APPBAR_HEIGHT = 64;
-
-export const modeAppbarHeight = {
-  small: MD3_DEFAULT_APPBAR_HEIGHT,
-  medium: 112,
-  large: 152,
-  'center-aligned': MD3_DEFAULT_APPBAR_HEIGHT,
-};
-
-export const modeTextVariant = {
-  small: 'titleLarge',
-  medium: 'headlineSmall',
-  large: 'headlineMedium',
-  'center-aligned': 'titleLarge',
-} as const;
-
-export const renderAppbarContent = ({
-  children,
-  isDark,
-  shouldCenterContent = false,
-  isV3,
-  renderOnly,
-  renderExcept,
-  mode = 'small',
-  theme,
-}: RenderAppbarContentProps) => {
-  return React.Children.toArray(children as React.ReactNode | React.ReactNode[])
-    .filter((child) => child != null && typeof child !== 'boolean')
-    .filter((child) =>
-      // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-      renderExcept ? !renderExcept.includes(child.type.displayName) : child
-    )
-    .filter((child) =>
-      // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-      renderOnly ? renderOnly.includes(child.type.displayName) : child
-    )
-    .map((child, i) => {
-      if (
-        !React.isValidElement(child) ||
-        ![
-          'Appbar.Content',
-          'Appbar.Action',
-          'Appbar.BackAction',
-          'Tooltip',
-        ].includes(
-          // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-          child.type.displayName
-        )
-      ) {
-        return child;
-      }
-
-      const props: {
-        color?: string;
-        style?: StyleProp<ViewStyle>;
-        mode?: AppbarModes;
-        theme?: ThemeProp;
-      } = {
-        theme,
-        color: getAppbarColor({ color: child.props.color, isDark, isV3 }),
-      };
-
-      // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-      if (child.type.displayName === 'Appbar.Content') {
-        props.mode = mode;
-        props.style = [
-          isV3
-            ? i === 0 && !shouldCenterContent && styles.v3Spacing
-            : i !== 0 && styles.v2Spacing,
-          shouldCenterContent && styles.centerAlignedContent,
-          child.props.style,
-        ];
-        props.color;
-      }
-      return React.cloneElement(child, props);
-    });
-};
-
-const styles = StyleSheet.create({
-  centerAlignedContent: {
-    alignItems: 'center',
-  },
-  v2Spacing: {
-    marginLeft: 8,
-  },
-  v3Spacing: {
-    marginLeft: 12,
-  },
-});

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

@@ -1,8 +0,0 @@
-// @component ./AvatarIcon.tsx
-export { default as Icon } from './AvatarIcon';
-
-// @component ./AvatarImage.tsx
-export { default as Image } from './AvatarImage';
-
-// @component ./AvatarText.tsx
-export { default as Text } from './AvatarText';

package/Examples/SampleUI/src/components/Avatar/AvatarIcon.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import getContrastingColor from '../../utils/getContrastingColor';
-import Icon, { IconSource } from '../Icon';
-
-const defaultSize = 64;
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Icon to display for the `Avatar`.
-   */
-  icon: IconSource;
-  /**
-   * Size of the avatar.
-   */
-  size?: number;
-  /**
-   * Custom color for the icon.
-   */
-  color?: string;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Avatars can be used to represent people in a graphical way.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Avatar } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Avatar.Icon size={24} icon="folder" />
- * );
- * ```
- */
-const Avatar = ({
-  icon,
-  size = defaultSize,
-  style,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { backgroundColor = theme.colors?.primary, ...restStyle } =
-    StyleSheet.flatten(style) || {};
-  const textColor =
-    rest.color ??
-    getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
-
-  return (
-    <View
-      style={[
-        {
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          backgroundColor,
-        },
-        styles.container,
-        restStyle,
-      ]}
-      {...rest}
-    >
-      <Icon source={icon} color={textColor} size={size * 0.6} />
-    </View>
-  );
-};
-
-Avatar.displayName = 'Avatar.Icon';
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default Avatar;

package/Examples/SampleUI/src/components/Avatar/AvatarImage.tsx

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import {
-  Image,
-  ImageProps,
-  ImageSourcePropType,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-
-const defaultSize = 64;
-
-export type AvatarImageSource =
-  | ImageSourcePropType
-  | ((props: { size: number }) => React.ReactNode);
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Image to display for the `Avatar`.
-   * It accepts a standard React Native Image `source` prop
-   * Or a function that returns an `Image`.
-   */
-  source: AvatarImageSource;
-  /**
-   * Size of the avatar.
-   */
-  size?: number;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Invoked on load error.
-   */
-  onError?: ImageProps['onError'];
-  /**
-   * Invoked on mount and on layout changes.
-   */
-  onLayout?: ImageProps['onLayout'];
-  /**
-   * Invoked when load completes successfully.
-   */
-  onLoad?: ImageProps['onLoad'];
-  /**
-   * Invoked when load either succeeds or fails.
-   */
-  onLoadEnd?: ImageProps['onLoadEnd'];
-  /**
-   * Invoked on load start.
-   */
-  onLoadStart?: ImageProps['onLoadStart'];
-  /**
-   * Invoked on download progress.
-   */
-  onProgress?: ImageProps['onProgress'];
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Avatars can be used to represent people in a graphical way.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Avatar } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Avatar.Image size={24} source={require('../assets/avatar.png')} />
- * );
- * export default MyComponent
- * ```
- */
-const AvatarImage = ({
-  size = defaultSize,
-  source,
-  style,
-  onError,
-  onLayout,
-  onLoad,
-  onLoadEnd,
-  onLoadStart,
-  onProgress,
-  theme: themeOverrides,
-  testID,
-  ...rest
-}: Props) => {
-  const { colors } = useInternalTheme(themeOverrides);
-  const { backgroundColor = colors?.primary } = StyleSheet.flatten(style) || {};
-
-  return (
-    <View
-      style={[
-        {
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          backgroundColor,
-        },
-        style,
-      ]}
-      {...rest}
-    >
-      {typeof source === 'function' && source({ size })}
-      {typeof source !== 'function' && (
-        <Image
-          testID={testID}
-          source={source}
-          style={{ width: size, height: size, borderRadius: size / 2 }}
-          onError={onError}
-          onLayout={onLayout}
-          onLoad={onLoad}
-          onLoadEnd={onLoadEnd}
-          onLoadStart={onLoadStart}
-          onProgress={onProgress}
-          accessibilityIgnoresInvertColors
-        />
-      )}
-    </View>
-  );
-};
-
-AvatarImage.displayName = 'Avatar.Image';
-
-export default AvatarImage;

package/Examples/SampleUI/src/components/Avatar/AvatarText.tsx

@@ -1,127 +0,0 @@
-import * as React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import getContrastingColor from '../../utils/getContrastingColor';
-import Text from '../Typography/Text';
-
-const defaultSize = 64;
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Initials to show as the text in the `Avatar`.
-   */
-  label: string;
-  /**
-   * Size of the avatar.
-   */
-  size?: number;
-  /**
-   * Custom color for the text.
-   */
-  color?: string;
-  /**
-   * Style for text container
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Style for the title.
-   */
-  labelStyle?: StyleProp<TextStyle>;
-  /**
-   * Specifies the largest possible scale a text font can reach.
-   */
-  maxFontSizeMultiplier?: number;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Avatars can be used to represent people in a graphical way.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Avatar } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Avatar.Text size={24} label="XD" />
- * );
- * ```
- */
-const AvatarText = ({
-  label,
-  size = defaultSize,
-  style,
-  labelStyle,
-  color: customColor,
-  theme: themeOverrides,
-  maxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { backgroundColor = theme.colors?.primary, ...restStyle } =
-    StyleSheet.flatten(style) || {};
-  const textColor =
-    customColor ??
-    getContrastingColor(backgroundColor, white, 'rgba(0, 0, 0, .54)');
-  const { fontScale } = useWindowDimensions();
-
-  return (
-    <View
-      style={[
-        {
-          width: size,
-          height: size,
-          borderRadius: size / 2,
-          backgroundColor,
-        },
-        styles.container,
-        restStyle,
-      ]}
-      {...rest}
-    >
-      <Text
-        style={[
-          styles.text,
-          {
-            color: textColor,
-            fontSize: size / 2,
-            lineHeight: size / fontScale,
-          },
-          labelStyle,
-        ]}
-        numberOfLines={1}
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-      >
-        {label}
-      </Text>
-    </View>
-  );
-};
-
-AvatarText.displayName = 'Avatar.Text';
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    textAlign: 'center',
-    textAlignVertical: 'center',
-  },
-});
-
-export default AvatarText;

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

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  useWindowDimensions,
-} from 'react-native';
-
-import { useInternalTheme } from '../core/theming';
-import { black, white } from '../styles/themes/v2/colors';
-import type { ThemeProp } from '../types';
-import getContrastingColor from '../utils/getContrastingColor';
-
-const defaultSize = 20;
-
-export type Props = React.ComponentProps<typeof Animated.Text> & {
-  /**
-   * Whether the badge is visible
-   */
-  visible?: boolean;
-  /**
-   * Content of the `Badge`.
-   */
-  children?: string | number;
-  /**
-   * Size of the `Badge`.
-   */
-  size?: number;
-  style?: StyleProp<TextStyle>;
-  ref?: React.RefObject<typeof Animated.Text>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Badges are small status descriptors for UI elements.
- * A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Badge } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Badge>3</Badge>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Badge = ({
-  children,
-  size = defaultSize,
-  style,
-  theme: themeOverrides,
-  visible = true,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: opacity } = React.useRef<Animated.Value>(
-    new Animated.Value(visible ? 1 : 0)
-  );
-  const { fontScale } = useWindowDimensions();
-
-  const isFirstRendering = React.useRef<boolean>(true);
-
-  const {
-    animation: { scale },
-  } = theme;
-
-  React.useEffect(() => {
-    // Do not run animation on very first rendering
-    if (isFirstRendering.current) {
-      isFirstRendering.current = false;
-      return;
-    }
-
-    Animated.timing(opacity, {
-      toValue: visible ? 1 : 0,
-      duration: 150 * scale,
-      useNativeDriver: true,
-    }).start();
-  }, [visible, opacity, scale]);
-
-  const {
-    backgroundColor = theme.isV3
-      ? theme.colors.error
-      : theme.colors?.notification,
-    ...restStyle
-  } = (StyleSheet.flatten(style) || {}) as TextStyle;
-
-  const textColor = theme.isV3
-    ? theme.colors.onError
-    : getContrastingColor(backgroundColor, white, black);
-
-  const borderRadius = size / 2;
-
-  const paddingHorizontal = theme.isV3 ? 3 : 4;
-
-  return (
-    <Animated.Text
-      numberOfLines={1}
-      style={[
-        {
-          opacity,
-          backgroundColor,
-          color: textColor,
-          fontSize: size * 0.5,
-          ...(!theme.isV3 && theme.fonts.regular),
-          lineHeight: size / fontScale,
-          height: size,
-          minWidth: size,
-          borderRadius,
-          paddingHorizontal,
-        },
-        styles.container,
-        restStyle,
-      ]}
-      {...rest}
-    >
-      {children}
-    </Animated.Text>
-  );
-};
-
-export default Badge;
-
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: 'flex-end',
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    overflow: 'hidden',
-  },
-});