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

package/Examples/SampleUI/src/components/List/ListItem.tsx

@@ -1,313 +0,0 @@
-import * as React from 'react';
-import {
-  GestureResponderEvent,
-  NativeSyntheticEvent,
-  StyleProp,
-  StyleSheet,
-  TextLayoutEventData,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-
-import { Style, getLeftStyles, getRightStyles } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types';
-import { forwardRef } from '../../utils/forwardRef';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-type Title =
-  | React.ReactNode
-  | ((props: {
-      selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
-      color: string;
-      fontSize: number;
-    }) => React.ReactNode);
-
-type Description =
-  | React.ReactNode
-  | ((props: {
-      selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
-      color: string;
-      fontSize: number;
-    }) => React.ReactNode);
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Title text for the list item.
-   */
-  title: Title;
-  /**
-   * Description text for the list item or callback which returns a React element to display the description.
-   */
-  description?: Description;
-  /**
-   * Callback which returns a React element to display on the left side.
-   */
-  left?: (props: { color: string; style: Style }) => React.ReactNode;
-  /**
-   * Callback which returns a React element to display on the right side.
-   */
-  right?: (props: { color: string; style?: Style }) => React.ReactNode;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * Style that is passed to the wrapping TouchableRipple element.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Style that is passed to the container wrapping title and descripton.
-   */
-  contentStyle?: StyleProp<ViewStyle>;
-  /**
-   * Style that is passed to Title element.
-   */
-  titleStyle?: StyleProp<TextStyle>;
-  /**
-   * Style that is passed to Description element.
-   */
-  descriptionStyle?: StyleProp<TextStyle>;
-  /**
-   * Truncate Title text such that the total number of lines does not
-   * exceed this number.
-   */
-  titleNumberOfLines?: number;
-  /**
-   * Truncate Description text such that the total number of lines does not
-   * exceed this number.
-   */
-  descriptionNumberOfLines?: number;
-  /**
-   * Ellipsize Mode for the Title.  One of `'head'`, `'middle'`, `'tail'`, `'clip'`.
-   *
-   * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
-   */
-  titleEllipsizeMode?: EllipsizeProp;
-  /**
-   * Ellipsize Mode for the Description.  One of `'head'`, `'middle'`, `'tail'`, `'clip'`.
-   *
-   * See [`ellipsizeMode`](https://reactnative.dev/docs/text#ellipsizemode)
-   */
-  descriptionEllipsizeMode?: EllipsizeProp;
-  /**
-   * Specifies the largest possible scale a title font can reach.
-   */
-  titleMaxFontSizeMultiplier?: number;
-  /**
-   * Specifies the largest possible scale a description font can reach.
-   */
-  descriptionMaxFontSizeMultiplier?: number;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-};
-
-/**
- * A component to show tiles inside a List.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { List } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <List.Item
- *     title="First Item"
- *     description="Item description"
- *     left={props => <List.Icon {...props} icon="folder" />}
- *   />
- * );
- *
- * export default MyComponent;
- * ```
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const ListItem = (
-  {
-    left,
-    right,
-    title,
-    description,
-    onPress,
-    theme: themeOverrides,
-    style,
-    contentStyle,
-    titleStyle,
-    titleNumberOfLines = 1,
-    descriptionNumberOfLines = 2,
-    titleEllipsizeMode,
-    descriptionEllipsizeMode,
-    descriptionStyle,
-    descriptionMaxFontSizeMultiplier,
-    titleMaxFontSizeMultiplier,
-    testID,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>
-) => {
-  const theme = useInternalTheme(themeOverrides);
-  const [alignToTop, setAlignToTop] = React.useState(false);
-
-  const onDescriptionTextLayout = (
-    event: NativeSyntheticEvent<TextLayoutEventData>
-  ) => {
-    if (!theme.isV3) {
-      return;
-    }
-    const { nativeEvent } = event;
-    setAlignToTop(nativeEvent.lines.length >= 2);
-  };
-
-  const renderDescription = (
-    descriptionColor: string,
-    description?: Description | null
-  ) => {
-    return typeof description === 'function' ? (
-      description({
-        selectable: false,
-        ellipsizeMode: descriptionEllipsizeMode,
-        color: descriptionColor,
-        fontSize: styles.description.fontSize,
-      })
-    ) : (
-      <Text
-        selectable={false}
-        numberOfLines={descriptionNumberOfLines}
-        ellipsizeMode={descriptionEllipsizeMode}
-        style={[
-          styles.description,
-          { color: descriptionColor },
-          descriptionStyle,
-        ]}
-        onTextLayout={onDescriptionTextLayout}
-        maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
-      >
-        {description}
-      </Text>
-    );
-  };
-
-  const renderTitle = () => {
-    const titleColor = theme.isV3
-      ? theme.colors.onSurface
-      : color(theme.colors.text).alpha(0.87).rgb().string();
-
-    return typeof title === 'function' ? (
-      title({
-        selectable: false,
-        ellipsizeMode: titleEllipsizeMode,
-        color: titleColor,
-        fontSize: styles.title.fontSize,
-      })
-    ) : (
-      <Text
-        selectable={false}
-        ellipsizeMode={titleEllipsizeMode}
-        numberOfLines={titleNumberOfLines}
-        style={[styles.title, { color: titleColor }, titleStyle]}
-        maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-      >
-        {title}
-      </Text>
-    );
-  };
-
-  const descriptionColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
-
-  return (
-    <TouchableRipple
-      {...rest}
-      ref={ref}
-      style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
-      onPress={onPress}
-      theme={theme}
-      testID={testID}
-    >
-      <View style={theme.isV3 ? styles.rowV3 : styles.row}>
-        {left
-          ? left({
-              color: descriptionColor,
-              style: getLeftStyles(alignToTop, description, theme.isV3),
-            })
-          : null}
-        <View
-          style={[
-            theme.isV3 ? styles.itemV3 : styles.item,
-            styles.content,
-            contentStyle,
-          ]}
-          testID={`${testID}-content`}
-        >
-          {renderTitle()}
-
-          {description
-            ? renderDescription(descriptionColor, description)
-            : null}
-        </View>
-        {right
-          ? right({
-              color: descriptionColor,
-              style: getRightStyles(alignToTop, description, theme.isV3),
-            })
-          : null}
-      </View>
-    </TouchableRipple>
-  );
-};
-
-ListItem.displayName = 'List.Item';
-const Component = forwardRef(ListItem);
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 8,
-  },
-  containerV3: {
-    paddingVertical: 8,
-    paddingRight: 24,
-  },
-  row: {
-    width: '100%',
-    flexDirection: 'row',
-  },
-  rowV3: {
-    width: '100%',
-    flexDirection: 'row',
-    marginVertical: 6,
-  },
-  title: {
-    fontSize: 16,
-  },
-  description: {
-    fontSize: 14,
-  },
-  item: {
-    marginVertical: 6,
-    paddingLeft: 8,
-  },
-  itemV3: {
-    paddingLeft: 16,
-  },
-  content: {
-    flexShrink: 1,
-    flexGrow: 1,
-    justifyContent: 'center',
-  },
-});
-
-export default Component;

package/Examples/SampleUI/src/components/List/ListSection.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import ListSubheader from './ListSubheader';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Title text for the section.
-   */
-  title?: string;
-  /**
-   * Content of the section.
-   */
-  children: React.ReactNode;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * Style that is passed to Title element.
-   */
-  titleStyle?: StyleProp<TextStyle>;
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * A component used to group list items.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { List, MD3Colors } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <List.Section>
- *     <List.Subheader>Some title</List.Subheader>
- *     <List.Item title="First Item" left={() => <List.Icon icon="folder" />} />
- *     <List.Item
- *       title="Second Item"
- *       left={() => <List.Icon color={MD3Colors.tertiary70} icon="folder" />}
- *     />
- *   </List.Section>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const ListSection = ({
-  children,
-  title,
-  titleStyle,
-  style,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const viewProps = { ...rest, theme };
-
-  return (
-    <View {...viewProps} style={[styles.container, style]}>
-      {title ? (
-        <ListSubheader style={titleStyle} theme={theme}>
-          {title}
-        </ListSubheader>
-      ) : null}
-      {children}
-    </View>
-  );
-};
-
-ListSection.displayName = 'List.Section';
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 8,
-  },
-});
-
-export default ListSection;

package/Examples/SampleUI/src/components/List/ListSubheader.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, TextStyle } from 'react-native';
-
-import color from 'color';
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../core/theming';
-import Text from '../Typography/Text';
-
-export type Props = React.ComponentProps<typeof Text> & {
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * Style that is passed to Text element.
-   */
-  style?: StyleProp<TextStyle>;
-  /**
-   * Specifies the largest possible scale a text font can reach.
-   */
-  maxFontSizeMultiplier?: number;
-};
-
-/**
- * A component used to display a header in lists.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { List } from 'react-native-paper';
- *
- * const MyComponent = () => <List.Subheader>My List Title</List.Subheader>;
- *
- * export default MyComponent;
- * ```
- */
-const ListSubheader = ({
-  style,
-  theme: overrideTheme,
-  maxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(overrideTheme);
-
-  const textColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
-
-  const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium;
-
-  return (
-    <Text
-      variant="bodyMedium"
-      numberOfLines={1}
-      maxFontSizeMultiplier={maxFontSizeMultiplier}
-      {...rest}
-      style={[
-        styles.container,
-        {
-          color: textColor,
-          ...font,
-        },
-        style,
-      ]}
-    />
-  );
-};
-
-ListSubheader.displayName = 'List.Subheader';
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 13,
-  },
-});
-
-export default ListSubheader;

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

@@ -1,113 +0,0 @@
-import { FlexAlignType, ColorValue, StyleSheet } from 'react-native';
-
-import color from 'color';
-import type { EllipsizeProp, InternalTheme } from 'src/types';
-
-type Description =
-  | React.ReactNode
-  | ((props: {
-      selectable: boolean;
-      ellipsizeMode: EllipsizeProp | undefined;
-      color: string;
-      fontSize: number;
-    }) => React.ReactNode);
-
-export type Style = {
-  marginLeft?: number;
-  marginRight?: number;
-  marginVertical?: number;
-  alignSelf?: FlexAlignType;
-};
-
-export const getLeftStyles = (
-  alignToTop: boolean,
-  description: Description,
-  isV3: boolean
-) => {
-  const stylesV3 = {
-    marginRight: 0,
-    marginLeft: 16,
-    alignSelf: alignToTop ? 'flex-start' : 'center',
-  };
-
-  if (!description) {
-    return {
-      ...styles.iconMarginLeft,
-      ...styles.marginVerticalNone,
-      ...(isV3 && { ...stylesV3 }),
-    };
-  }
-
-  if (!isV3) {
-    return styles.iconMarginLeft;
-  }
-
-  return {
-    ...styles.iconMarginLeft,
-    ...stylesV3,
-  };
-};
-
-export const getRightStyles = (
-  alignToTop: boolean,
-  description: Description,
-  isV3: boolean
-) => {
-  const stylesV3 = {
-    marginLeft: 16,
-    alignSelf: alignToTop ? 'flex-start' : 'center',
-  };
-
-  if (!description) {
-    return {
-      ...styles.iconMarginRight,
-      ...styles.marginVerticalNone,
-      ...(isV3 && { ...stylesV3 }),
-    };
-  }
-
-  if (!isV3) {
-    return styles.iconMarginRight;
-  }
-
-  return {
-    ...styles.iconMarginRight,
-    ...stylesV3,
-  };
-};
-
-const styles = StyleSheet.create({
-  marginVerticalNone: { marginVertical: 0 },
-  iconMarginLeft: { marginLeft: 0, marginRight: 16 },
-  iconMarginRight: { marginRight: 0 },
-});
-
-export const getAccordionColors = ({
-  theme,
-  isExpanded,
-  customRippleColor,
-}: {
-  theme: InternalTheme;
-  isExpanded?: boolean;
-  customRippleColor?: ColorValue;
-}) => {
-  const titleColor = theme.isV3
-    ? theme.colors.onSurface
-    : color(theme.colors.text).alpha(0.87).rgb().string();
-
-  const descriptionColor = theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
-
-  const titleTextColor = isExpanded ? theme.colors?.primary : titleColor;
-
-  const rippleColor =
-    customRippleColor || color(titleTextColor).alpha(0.12).rgb().string();
-
-  return {
-    titleColor,
-    descriptionColor,
-    titleTextColor,
-    rippleColor,
-  };
-};

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

@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, Text, Platform, ViewProps, Role } from 'react-native';
-
-import { black } from '../styles/themes/v2/colors';
-
-export type IconProps = {
-  name: string;
-  color?: string;
-  size: number;
-  direction: 'rtl' | 'ltr';
-  allowFontScaling?: boolean;
-  testID?: string;
-};
-
-type AccessibilityProps =
-  | {
-      role?: Role;
-      focusable?: boolean;
-    }
-  | {
-      accessibilityElementsHidden?: boolean;
-      importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
-    };
-
-let MaterialCommunityIcons: React.ComponentType<
-  React.ComponentProps<
-    typeof import('react-native-vector-icons/MaterialCommunityIcons').default
-  > & {
-    color: string;
-    pointerEvents?: ViewProps['pointerEvents'];
-  }
->;
-
-try {
-  // Optionally require vector-icons
-  MaterialCommunityIcons =
-    require('react-native-vector-icons/MaterialCommunityIcons').default;
-} catch (e) {
-  let isErrorLogged = false;
-
-  // Fallback component for icons
-  MaterialCommunityIcons = ({ name, color, size, ...rest }) => {
-    /* eslint-disable no-console */
-    if (!isErrorLogged) {
-      if (
-        !/(Cannot find module|Module not found|Cannot resolve module)/.test(
-          (e as any).message
-        )
-      ) {
-        console.error(e);
-      }
-
-      console.warn(
-        `Tried to use the icon '${name}' in a component from 'react-native-paper', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`,
-        `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://callstack.github.io/react-native-paper/docs/guides/icons`
-      );
-
-      isErrorLogged = true;
-    }
-
-    return (
-      <Text
-        {...rest}
-        style={[styles.icon, { color, fontSize: size }]}
-        // @ts-expect-error: Text doesn't support this, but it seems to affect TouchableNativeFeedback
-        pointerEvents="none"
-        selectable={false}
-      >
-        □
-      </Text>
-    );
-  };
-}
-
-export const accessibilityProps: AccessibilityProps =
-  Platform.OS === 'web'
-    ? {
-        role: 'img',
-        focusable: false,
-      }
-    : {
-        accessibilityElementsHidden: true,
-        importantForAccessibility:
-          'no-hide-descendants' as 'no-hide-descendants',
-      };
-
-const defaultIcon = ({
-  name,
-  color = black,
-  size,
-  direction,
-  allowFontScaling,
-  testID,
-}: IconProps) => (
-  <MaterialCommunityIcons
-    allowFontScaling={allowFontScaling}
-    name={name}
-    color={color}
-    size={size}
-    style={[
-      {
-        transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
-        lineHeight: size,
-      },
-      styles.icon,
-    ]}
-    pointerEvents="none"
-    selectable={false}
-    testID={testID}
-    {...accessibilityProps}
-  />
-);
-
-const styles = StyleSheet.create({
-  // eslint-disable-next-line react-native/no-color-literals
-  icon: {
-    backgroundColor: 'transparent',
-  },
-});
-
-export default defaultIcon;