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

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

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

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

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

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

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

@@ -0,0 +1,138 @@
+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',
+  },
+});