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

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

@@ -0,0 +1,391 @@
+import * as React from 'react';
+import {
+  ColorValue,
+  GestureResponderEvent,
+  I18nManager,
+  NativeSyntheticEvent,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TextLayoutEventData,
+  View,
+  ViewProps,
+  ViewStyle,
+  PressableAndroidRippleConfig,
+} from 'react-native';
+
+import { ListAccordionGroupContext } from './ListAccordionGroup';
+import type { Style } from './utils';
+import { getAccordionColors, getLeftStyles } from './utils';
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+import MaterialCommunityIcon from '../MaterialCommunityIcon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import Text from '../Typography/Text';
+
+export type Props = {
+  /**
+   * Title text for the list accordion.
+   */
+  title: React.ReactNode;
+  /**
+   * Description text for the list accordion.
+   */
+  description?: React.ReactNode;
+  /**
+   * 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: { isExpanded: boolean }) => React.ReactNode;
+  /**
+   * Whether the accordion is expanded
+   * If this prop is provided, the accordion will behave as a "controlled component".
+   * You'll need to update this prop when you want to toggle the component or on `onPress`.
+   */
+  expanded?: boolean;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
+  /**
+   * Content of the section.
+   */
+  children: React.ReactNode;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
+  /**
+   * Style that is passed to the wrapping TouchableRipple element.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Style that is passed to Title element.
+   */
+  titleStyle?: StyleProp<TextStyle>;
+  /**
+   * Style that is passed to Description element.
+   */
+  descriptionStyle?: StyleProp<TextStyle>;
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
+  /**
+   * 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;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
+  /**
+   * Specifies the largest possible scale a description font can reach.
+   */
+  descriptionMaxFontSizeMultiplier?: number;
+  /**
+   * Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion.
+   */
+  id?: string | number;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+  /**
+   * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.
+   */
+  accessibilityLabel?: string;
+  /**
+   * `pointerEvents` passed to the `View` container
+   */
+  pointerEvents?: ViewProps['pointerEvents'];
+};
+
+/**
+ * A component used to display an expandable list item.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { List } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [expanded, setExpanded] = React.useState(true);
+ *
+ *   const handlePress = () => setExpanded(!expanded);
+ *
+ *   return (
+ *     <List.Section title="Accordions">
+ *       <List.Accordion
+ *         title="Uncontrolled Accordion"
+ *         left={props => <List.Icon {...props} icon="folder" />}>
+ *         <List.Item title="First item" />
+ *         <List.Item title="Second item" />
+ *       </List.Accordion>
+ *
+ *       <List.Accordion
+ *         title="Controlled Accordion"
+ *         left={props => <List.Icon {...props} icon="folder" />}
+ *         expanded={expanded}
+ *         onPress={handlePress}>
+ *         <List.Item title="First item" />
+ *         <List.Item title="Second item" />
+ *       </List.Accordion>
+ *     </List.Section>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const ListAccordion = ({
+  left,
+  right,
+  title,
+  description,
+  children,
+  theme: themeOverrides,
+  titleStyle,
+  descriptionStyle,
+  titleNumberOfLines = 1,
+  descriptionNumberOfLines = 2,
+  rippleColor: customRippleColor,
+  style,
+  id,
+  testID,
+  background,
+  onPress,
+  onLongPress,
+  delayLongPress,
+  expanded: expandedProp,
+  accessibilityLabel,
+  pointerEvents = 'none',
+  titleMaxFontSizeMultiplier,
+  descriptionMaxFontSizeMultiplier,
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const [expanded, setExpanded] = React.useState<boolean>(
+    expandedProp || false
+  );
+  const [alignToTop, setAlignToTop] = React.useState(false);
+
+  const onDescriptionTextLayout = (
+    event: NativeSyntheticEvent<TextLayoutEventData>
+  ) => {
+    if (!theme.isV3) {
+      return;
+    }
+    const { nativeEvent } = event;
+    setAlignToTop(nativeEvent.lines.length >= 2);
+  };
+
+  const handlePressAction = (e: GestureResponderEvent) => {
+    onPress?.(e);
+
+    if (expandedProp === undefined) {
+      // Only update state of the `expanded` prop was not passed
+      // If it was passed, the component will act as a controlled component
+      setExpanded((expanded) => !expanded);
+    }
+  };
+
+  const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
+
+  const groupContext = React.useContext(ListAccordionGroupContext);
+  if (groupContext !== null && (id === undefined || id === null || id === '')) {
+    throw new Error(
+      'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
+    );
+  }
+  const isExpanded = groupContext
+    ? groupContext.expandedId === id
+    : expandedInternal;
+
+  const { titleColor, descriptionColor, titleTextColor, rippleColor } =
+    getAccordionColors({
+      theme,
+      isExpanded,
+      customRippleColor,
+    });
+
+  const handlePress =
+    groupContext && id !== undefined
+      ? () => groupContext.onAccordionPress(id)
+      : handlePressAction;
+  return (
+    <View>
+      <View style={{ backgroundColor: theme?.colors?.background }}>
+        <TouchableRipple
+          style={[theme.isV3 ? styles.containerV3 : styles.container, style]}
+          onPress={handlePress}
+          onLongPress={onLongPress}
+          delayLongPress={delayLongPress}
+          rippleColor={rippleColor}
+          accessibilityRole="button"
+          accessibilityState={{ expanded: isExpanded }}
+          accessibilityLabel={accessibilityLabel}
+          testID={testID}
+          theme={theme}
+          background={background}
+          borderless
+        >
+          <View
+            style={theme.isV3 ? styles.rowV3 : styles.row}
+            pointerEvents={pointerEvents}
+          >
+            {left
+              ? left({
+                  color: isExpanded ? theme.colors?.primary : descriptionColor,
+                  style: getLeftStyles(alignToTop, description, theme.isV3),
+                })
+              : null}
+            <View
+              style={[theme.isV3 ? styles.itemV3 : styles.item, styles.content]}
+            >
+              <Text
+                selectable={false}
+                numberOfLines={titleNumberOfLines}
+                style={[
+                  styles.title,
+                  {
+                    color: titleTextColor,
+                  },
+                  titleStyle,
+                ]}
+                maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
+              >
+                {title}
+              </Text>
+              {description ? (
+                <Text
+                  selectable={false}
+                  numberOfLines={descriptionNumberOfLines}
+                  style={[
+                    styles.description,
+                    {
+                      color: descriptionColor,
+                    },
+                    descriptionStyle,
+                  ]}
+                  onTextLayout={onDescriptionTextLayout}
+                  maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
+                >
+                  {description}
+                </Text>
+              ) : null}
+            </View>
+            <View
+              style={[styles.item, description ? styles.multiline : undefined]}
+            >
+              {right ? (
+                right({
+                  isExpanded: isExpanded,
+                })
+              ) : (
+                <MaterialCommunityIcon
+                  name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                  color={theme.isV3 ? descriptionColor : titleColor}
+                  size={24}
+                  direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+                />
+              )}
+            </View>
+          </View>
+        </TouchableRipple>
+      </View>
+
+      {isExpanded
+        ? React.Children.map(children, (child) => {
+            if (
+              left &&
+              React.isValidElement(child) &&
+              !child.props.left &&
+              !child.props.right
+            ) {
+              return React.cloneElement(child as React.ReactElement<any>, {
+                style: [
+                  theme.isV3 ? styles.childV3 : styles.child,
+                  child.props.style,
+                ],
+                theme,
+              });
+            }
+
+            return child;
+          })
+        : null}
+    </View>
+  );
+};
+
+ListAccordion.displayName = 'List.Accordion';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+  containerV3: {
+    paddingVertical: 8,
+    paddingRight: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rowV3: {
+    flexDirection: 'row',
+    marginVertical: 6,
+  },
+  multiline: {
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 16,
+  },
+  description: {
+    fontSize: 14,
+  },
+  item: {
+    marginVertical: 6,
+    paddingLeft: 8,
+  },
+  itemV3: {
+    paddingLeft: 16,
+  },
+  child: {
+    paddingLeft: 64,
+  },
+  childV3: {
+    paddingLeft: 40,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
+
+export default ListAccordion;

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

@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+export type Props = {
+  /**
+   * Function to execute on selection change.
+   */
+  onAccordionPress?: (expandedId: string | number) => void;
+  /**
+   * Id of the currently expanded list accordion
+   */
+  expandedId?: string | number;
+  /**
+   * React elements containing list accordions
+   */
+  children: React.ReactNode;
+};
+
+export type ListAccordionGroupContextType = {
+  expandedId: string | number | undefined;
+  onAccordionPress: (expandedId: string | number) => void;
+} | null;
+
+export const ListAccordionGroupContext =
+  React.createContext<ListAccordionGroupContextType>(null);
+
+/**
+ * List.AccordionGroup allows to control a group of List Accordions. `id` prop for List.Accordion is required in order for group to work.
+ * List.AccordionGroup can be a controlled or uncontrolled component. The example shows the uncontrolled version.
+ * At most one Accordion can be expanded at a given time.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View, Text } from 'react-native';
+ * import { List } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <List.AccordionGroup>
+ *     <List.Accordion title="Accordion 1" id="1">
+ *       <List.Item title="Item 1" />
+ *     </List.Accordion>
+ *     <List.Accordion title="Accordion 2" id="2">
+ *       <List.Item title="Item 2" />
+ *     </List.Accordion>
+ *     <View>
+ *       <Text>
+ *         List.Accordion can be wrapped because implementation uses React.Context.
+ *       </Text>
+ *       <List.Accordion title="Accordion 3" id="3">
+ *         <List.Item title="Item 3" />
+ *       </List.Accordion>
+ *     </View>
+ *   </List.AccordionGroup>
+ * );
+ *
+ * export default MyComponent;
+ *```
+ */
+const ListAccordionGroup = ({
+  expandedId: expandedIdProp,
+  onAccordionPress,
+  children,
+}: Props) => {
+  const [expandedId, setExpandedId] = React.useState<
+    string | number | undefined
+  >(undefined);
+
+  const onAccordionPressDefault = (newExpandedId: string | number) => {
+    setExpandedId((currentExpandedId) =>
+      currentExpandedId === newExpandedId ? undefined : newExpandedId
+    );
+  };
+
+  return (
+    <ListAccordionGroupContext.Provider
+      value={{
+        expandedId: expandedIdProp || expandedId, // component can be controlled or uncontrolled
+        onAccordionPress: onAccordionPress || onAccordionPressDefault,
+      }}
+    >
+      {children}
+    </ListAccordionGroupContext.Provider>
+  );
+};
+
+ListAccordionGroup.displayName = 'List.AccordionGroup';
+
+export default ListAccordionGroup;

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
+
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+import Icon, { IconSource } from '../Icon';
+
+export type Props = {
+  /**
+   * Icon to show.
+   */
+  icon: IconSource;
+  /**
+   * Color for the icon.
+   */
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+const ICON_SIZE = 24;
+
+/**
+ * A component to show an icon in a list item.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { List, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <>
+ *     <List.Icon color={MD3Colors.tertiary70} icon="folder" />
+ *     <List.Icon color={MD3Colors.tertiary70} icon="equal" />
+ *     <List.Icon color={MD3Colors.tertiary70} icon="calendar" />
+ *   </>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const ListIcon = ({
+  icon,
+  color: iconColor,
+  style,
+  theme: themeOverrides,
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+
+  return (
+    <View
+      style={[theme.isV3 ? styles.itemV3 : styles.item, style]}
+      pointerEvents="box-none"
+    >
+      <Icon source={icon} size={ICON_SIZE} color={iconColor} theme={theme} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: {
+    margin: 8,
+    height: 40,
+    width: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemV3: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+ListIcon.displayName = 'List.Icon';
+
+export default ListIcon;

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

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  StyleProp,
+  Image,
+  ImageSourcePropType,
+  ImageStyle,
+} from 'react-native';
+
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+
+export type Props = {
+  source: ImageSourcePropType;
+  variant?: 'image' | 'video';
+  style?: StyleProp<ImageStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * A component to show image in a list item.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { List, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <>
+ *     <List.Image variant="image" source={{uri: 'https://www.someurl.com/apple'}} />
+ *     <List.Image variant="video" source={require('../../some-apple.png')} />
+ *   </>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const ListImage = ({
+  style,
+  source,
+  variant = 'image',
+  theme: themeOverrides,
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const getStyles = () => {
+    if (variant === 'video') {
+      if (!theme.isV3) {
+        return [style, styles.video];
+      }
+
+      return [style, styles.videoV3];
+    }
+
+    return [style, styles.image];
+  };
+
+  return (
+    <Image
+      style={getStyles()}
+      source={source}
+      accessibilityIgnoresInvertColors
+      testID="list-image"
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: 56,
+    height: 56,
+  },
+  video: {
+    width: 100,
+    height: 64,
+    marginLeft: 0,
+  },
+  videoV3: {
+    width: 114,
+    height: 64,
+    marginLeft: 0,
+  },
+});
+
+ListImage.displayName = 'List.Image';
+
+export default ListImage;