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

package/Examples/SampleUI/src/components/Appbar/AppbarAction.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import type {
-  Animated,
-  ColorValue,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../core/theming';
-import { black } from '../../styles/themes/v2/colors';
-import { forwardRef } from '../../utils/forwardRef';
-import type { IconSource } from '../Icon';
-import IconButton from '../IconButton/IconButton';
-
-export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
-  /**
-   *  Custom color for action icon.
-   */
-  color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Name of the icon to show.
-   */
-  icon: IconSource;
-  /**
-   * Optional icon size.
-   */
-  size?: number;
-  /**
-   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
-   */
-  disabled?: boolean;
-  /**
-   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: () => void;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Whether it's the leading button.
-   */
-  isLeading?: boolean;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  ref?: React.RefObject<View>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component used to display an action item in the appbar.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Appbar } from 'react-native-paper';
- * import { Platform } from 'react-native';
- *
- * const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
- *
- * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" subtitle={'Subtitle'} />
- *         <Appbar.Action icon="magnify" onPress={() => {}} />
- *         <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
- *     </Appbar.Header>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const AppbarAction = forwardRef<View, Props>(
-  (
-    {
-      size = 24,
-      color: iconColor,
-      icon,
-      disabled,
-      onPress,
-      accessibilityLabel,
-      isLeading,
-      theme: themeOverrides,
-      rippleColor,
-      ...rest
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(themeOverrides);
-
-    const actionIconColor = iconColor
-      ? iconColor
-      : theme.isV3
-      ? isLeading
-        ? theme.colors.onSurface
-        : theme.colors.onSurfaceVariant
-      : color(black).alpha(0.54).rgb().string();
-
-    return (
-      <IconButton
-        size={size}
-        onPress={onPress}
-        iconColor={actionIconColor}
-        icon={icon}
-        disabled={disabled}
-        accessibilityLabel={accessibilityLabel}
-        animated
-        ref={ref}
-        rippleColor={rippleColor}
-        {...rest}
-      />
-    );
-  }
-);
-
-AppbarAction.displayName = 'Appbar.Action';
-
-export default AppbarAction;
-
-// @component-docs ignore-next-line
-export { AppbarAction };

package/Examples/SampleUI/src/components/Appbar/AppbarBackAction.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import type {
-  Animated,
-  GestureResponderEvent,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import type { $Omit } from './../../types';
-import AppbarAction from './AppbarAction';
-import AppbarBackIcon from './AppbarBackIcon';
-import { forwardRef } from '../../utils/forwardRef';
-
-export type Props = $Omit<
-  React.ComponentPropsWithoutRef<typeof AppbarAction>,
-  'icon'
-> & {
-  /**
-   *  Custom color for back icon.
-   */
-  color?: string;
-  /**
-   * Optional icon size.
-   */
-  size?: number;
-  /**
-   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
-   */
-  disabled?: boolean;
-  /**
-   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  ref?: React.RefObject<View>;
-};
-
-/**
- * A component used to display a back button in the appbar.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Appbar } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *     <Appbar.Header>
- *       <Appbar.BackAction onPress={() => {}} />
- *     </Appbar.Header>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const AppbarBackAction = forwardRef<View, Props>(
-  ({ accessibilityLabel = 'Back', ...rest }: Props, ref) => (
-    <AppbarAction
-      accessibilityLabel={accessibilityLabel}
-      {...rest}
-      icon={AppbarBackIcon}
-      isLeading
-      ref={ref}
-    />
-  )
-);
-
-AppbarBackAction.displayName = 'Appbar.BackAction';
-
-export default AppbarBackAction;
-
-// @component-docs ignore-next-line
-export { AppbarBackAction };

package/Examples/SampleUI/src/components/Appbar/AppbarBackIcon.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { I18nManager, Image, Platform, StyleSheet, View } from 'react-native';
-
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-
-const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
-  const iosIconSize = size - 3;
-
-  return Platform.OS === 'ios' ? (
-    <View
-      style={[
-        styles.wrapper,
-        {
-          width: size,
-          height: size,
-          transform: [{ scaleX: I18nManager.getConstants().isRTL ? -1 : 1 }],
-        },
-      ]}
-    >
-      <Image
-        source={require('../../assets/back-chevron.png')}
-        style={[
-          styles.icon,
-          { tintColor: color, width: iosIconSize, height: iosIconSize },
-        ]}
-        accessibilityIgnoresInvertColors
-      />
-    </View>
-  ) : (
-    <MaterialCommunityIcon
-      name="arrow-left"
-      color={color}
-      size={size}
-      direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    resizeMode: 'contain',
-  },
-});
-
-export default AppbarBackIcon;
-
-// @component-docs ignore-next-line
-export { AppbarBackIcon };

package/Examples/SampleUI/src/components/Appbar/AppbarContent.tsx

@@ -1,249 +0,0 @@
-import * as React from 'react';
-import {
-  AccessibilityRole,
-  GestureResponderEvent,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  Pressable,
-  View,
-  ViewStyle,
-  ViewProps,
-} from 'react-native';
-
-import color from 'color';
-
-import { modeTextVariant } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types';
-import Text, { TextRef } from '../Typography/Text';
-
-type TitleString = {
-  title: string;
-  titleStyle?: StyleProp<TextStyle>;
-};
-
-type TitleElement = { title: React.ReactNode; titleStyle?: never };
-
-export type Props = $RemoveChildren<typeof View> & {
-  // For `title` and `titleStyle` props their types are duplicated due to the generation of documentation.
-  // Appropriate type for them are either `TitleString` or `TitleElement`, depends on `title` type.
-  /**
-   * Text or component for the title.
-   */
-  title: React.ReactNode;
-  /**
-   * Style for the title, if `title` is a string.
-   */
-  titleStyle?: StyleProp<TextStyle>;
-  /**
-   * Reference for the title.
-   */
-  titleRef?: React.RefObject<TextRef>;
-  /**
-   * @deprecated Deprecated in v5.x
-   * Text for the subtitle.
-   */
-  subtitle?: React.ReactNode;
-  /**
-   * @deprecated Deprecated in v5.x
-   * Style for the subtitle.
-   */
-  subtitleStyle?: StyleProp<TextStyle>;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * If true, disable all interactions for this component.
-   */
-  disabled?: boolean;
-  /**
-   * Custom color for the text.
-   */
-  color?: string;
-  /**
-   * Specifies the largest possible scale a title font can reach.
-   */
-  titleMaxFontSizeMultiplier?: number;
-  /**
-   * @internal
-   */
-  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-} & (TitleString | TitleElement);
-
-/**
- * A component used to display a title and optional subtitle in an appbar.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Appbar } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" />
- *     </Appbar.Header>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const AppbarContent = ({
-  color: titleColor,
-  subtitle,
-  subtitleStyle,
-  onPress,
-  disabled,
-  style,
-  titleRef,
-  titleStyle,
-  title,
-  titleMaxFontSizeMultiplier,
-  mode = 'small',
-  theme: themeOverrides,
-  testID = 'appbar-content',
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3, colors } = theme;
-
-  const titleTextColor = titleColor
-    ? titleColor
-    : isV3
-    ? colors.onSurface
-    : white;
-
-  const subtitleColor = color(titleTextColor).alpha(0.7).rgb().string();
-
-  const modeContainerStyles = {
-    small: styles.v3DefaultContainer,
-    medium: styles.v3MediumContainer,
-    large: styles.v3LargeContainer,
-    'center-aligned': styles.v3DefaultContainer,
-  };
-
-  const variant = modeTextVariant[mode] as MD3TypescaleKey;
-
-  const contentWrapperProps = {
-    pointerEvents: 'box-none' as ViewProps['pointerEvents'],
-    style: [styles.container, isV3 && modeContainerStyles[mode], style],
-    testID,
-    ...rest,
-  };
-
-  const content = (
-    <>
-      {typeof title === 'string' ? (
-        <Text
-          {...(isV3 && { variant })}
-          ref={titleRef}
-          style={[
-            {
-              color: titleTextColor,
-              ...(isV3
-                ? theme.fonts[variant]
-                : Platform.OS === 'ios'
-                ? theme.fonts.regular
-                : theme.fonts.medium),
-            },
-            !isV3 && styles.title,
-            titleStyle,
-          ]}
-          numberOfLines={1}
-          accessible
-          accessibilityRole={
-            onPress
-              ? 'none'
-              : Platform.OS === 'web'
-              ? ('heading' as 'header')
-              : 'header'
-          }
-          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-          accessibilityTraits="header"
-          testID={`${testID}-title-text`}
-          maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-        >
-          {title}
-        </Text>
-      ) : (
-        title
-      )}
-      {!isV3 && subtitle ? (
-        <Text
-          style={[styles.subtitle, { color: subtitleColor }, subtitleStyle]}
-          numberOfLines={1}
-        >
-          {subtitle}
-        </Text>
-      ) : null}
-    </>
-  );
-
-  if (onPress) {
-    return (
-      // eslint-disable-next-line react-native-a11y/has-accessibility-props
-      <Pressable
-        accessibilityRole={touchableRole}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={touchableRole}
-        accessibilityComponentType="button"
-        accessbilityState={disabled ? 'disabled' : null}
-        onPress={onPress}
-        disabled={disabled}
-        {...contentWrapperProps}
-      >
-        {content}
-      </Pressable>
-    );
-  }
-
-  return <View {...contentWrapperProps}>{content}</View>;
-};
-
-AppbarContent.displayName = 'Appbar.Content';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 12,
-  },
-  v3DefaultContainer: {
-    paddingHorizontal: 0,
-  },
-  v3MediumContainer: {
-    paddingHorizontal: 0,
-    justifyContent: 'flex-end',
-    paddingBottom: 24,
-  },
-  v3LargeContainer: {
-    paddingHorizontal: 0,
-    paddingTop: 36,
-    justifyContent: 'flex-end',
-    paddingBottom: 28,
-  },
-  title: {
-    fontSize: Platform.OS === 'ios' ? 17 : 20,
-  },
-  subtitle: {
-    fontSize: Platform.OS === 'ios' ? 11 : 14,
-  },
-});
-
-const touchableRole: AccessibilityRole = 'button';
-
-export default AppbarContent;
-
-// @component-docs ignore-next-line
-export { AppbarContent };

package/Examples/SampleUI/src/components/Appbar/AppbarHeader.tsx

@@ -1,174 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  ColorValue,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { Appbar } from './Appbar';
-import {
-  DEFAULT_APPBAR_HEIGHT,
-  getAppbarBackgroundColor,
-  modeAppbarHeight,
-  getAppbarBorders,
-} from './utils';
-import { useInternalTheme } from '../../core/theming';
-import shadow from '../../styles/shadow';
-import type { ThemeProp } from '../../types';
-
-export type Props = Omit<
-  React.ComponentProps<typeof Appbar>,
-  'safeAreaInsets'
-> & {
-  /**
-   * Whether the background color is a dark color. A dark header will render light text and vice-versa.
-   */
-  dark?: boolean;
-  /**
-   * Extra padding to add at the top of header to account for translucent status bar.
-   * This is automatically handled on iOS >= 11 including iPhone X using `SafeAreaView`.
-   * If you are using Expo, we assume translucent status bar and set a height for status bar automatically.
-   * Pass `0` or a custom value to disable the default behaviour, and customize the height.
-   */
-  statusBarHeight?: number;
-  /**
-   * Content of the header.
-   */
-  children: React.ReactNode;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Mode of the Appbar.
-   * - `small` - Appbar with default height (64).
-   * - `medium` - Appbar with medium height (112).
-   * - `large` - Appbar with large height (152).
-   * - `center-aligned` - Appbar with default height and center-aligned title.
-   */
-  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Whether Appbar background should have the elevation along with primary color pigment.
-   */
-  elevated?: boolean;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-};
-
-/**
- * A component to use as a header at the top of the screen.
- * It can contain the screen title, controls such as navigation buttons, menu button etc.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Appbar } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const _goBack = () => console.log('Went back');
- *
- *   const _handleSearch = () => console.log('Searching');
- *
- *   const _handleMore = () => console.log('Shown more');
- *
- *   return (
- *     <Appbar.Header>
- *       <Appbar.BackAction onPress={_goBack} />
- *       <Appbar.Content title="Title" />
- *       <Appbar.Action icon="magnify" onPress={_handleSearch} />
- *       <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
- *     </Appbar.Header>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const AppbarHeader = ({
-  // Don't use default props since we check it to know whether we should use SafeAreaView
-  statusBarHeight,
-  style,
-  dark,
-  mode = Platform.OS === 'ios' ? 'center-aligned' : 'small',
-  elevated = false,
-  theme: themeOverrides,
-  testID = 'appbar-header',
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
-
-  const flattenedStyle = StyleSheet.flatten(style);
-  const {
-    height = isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
-    elevation = isV3 ? (elevated ? 2 : 0) : 4,
-    backgroundColor: customBackground,
-    zIndex = isV3 && elevated ? 1 : 0,
-    ...restStyle
-  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
-    height?: number;
-    elevation?: number;
-    backgroundColor?: ColorValue;
-    zIndex?: number;
-  };
-
-  const borderRadius = getAppbarBorders(restStyle);
-
-  const backgroundColor = getAppbarBackgroundColor(
-    theme,
-    elevation,
-    customBackground,
-    elevated
-  );
-
-  const { top, left, right } = useSafeAreaInsets();
-
-  return (
-    <View
-      testID={`${testID}-root-layer`}
-      style={[
-        {
-          backgroundColor,
-          zIndex,
-          elevation,
-          paddingTop: statusBarHeight ?? top,
-          paddingHorizontal: Math.max(left, right),
-        },
-        borderRadius,
-        shadow(elevation) as ViewStyle,
-      ]}
-    >
-      <Appbar
-        testID={testID}
-        style={[{ height, backgroundColor }, styles.appbar, restStyle]}
-        dark={dark}
-        {...(isV3 && {
-          mode,
-        })}
-        {...rest}
-        theme={theme}
-      />
-    </View>
-  );
-};
-
-AppbarHeader.displayName = 'Appbar.Header';
-
-const styles = StyleSheet.create({
-  appbar: {
-    elevation: 0,
-  },
-});
-
-export default AppbarHeader;
-
-// @component-docs ignore-next-line
-export { AppbarHeader };

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

@@ -1,22 +0,0 @@
-import AppbarComponent from './Appbar';
-import AppbarAction from './AppbarAction';
-import AppbarBackAction from './AppbarBackAction';
-import AppbarContent from './AppbarContent';
-import AppbarHeader from './AppbarHeader';
-
-const Appbar = Object.assign(
-  // @component ./Appbar.tsx
-  AppbarComponent,
-  {
-    // @component ./AppbarContent.tsx
-    Content: AppbarContent,
-    // @component ./AppbarAction.tsx
-    Action: AppbarAction,
-    // @component ./AppbarBackAction.tsx
-    BackAction: AppbarBackAction,
-    // @component ./AppbarHeader.tsx
-    Header: AppbarHeader,
-  }
-);
-
-export default Appbar;