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

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

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

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

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

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

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

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