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

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

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

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

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

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

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