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

package/Examples/SampleUI/src/components/Dialog/DialogScrollArea.tsx

@@ -1,88 +0,0 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../core/theming';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Content of the `DialogScrollArea`.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component to show a scrollable content in a Dialog. The component only provides appropriate styling.
- * For the scrollable content you can use `ScrollView`, `FlatList` etc. depending on your requirement.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ScrollView } from 'react-native';
- * import { Dialog, Portal, Text } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [visible, setVisible] = React.useState(false);
- *
- *   const hideDialog = () => setVisible(false);
- *
- *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.ScrollArea>
- *           <ScrollView contentContainerStyle={{paddingHorizontal: 24}}>
- *             <Text>This is a scrollable area</Text>
- *           </ScrollView>
- *         </Dialog.ScrollArea>
- *       </Dialog>
- *     </Portal>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const DialogScrollArea = (props: Props) => {
-  const theme = useInternalTheme(props.theme);
-  const borderStyles = {
-    borderColor: theme.isV3
-      ? theme.colors.surfaceVariant
-      : 'rgba(0, 0, 0, .12)',
-    borderTopWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth,
-    borderBottomWidth: theme.isV3 ? 1 : StyleSheet.hairlineWidth,
-  };
-  return (
-    <View
-      {...props}
-      style={[
-        styles.container,
-        borderStyles,
-        theme.isV3 && styles.v3Container,
-        props.style,
-      ]}
-    >
-      {props.children}
-    </View>
-  );
-};
-
-DialogScrollArea.displayName = 'Dialog.ScrollArea';
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 24,
-    flexGrow: 1,
-    flexShrink: 1,
-  },
-  v3Container: {
-    marginBottom: 24,
-  },
-});
-
-export default DialogScrollArea;

package/Examples/SampleUI/src/components/Dialog/DialogTitle.tsx

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, TextStyle } from 'react-native';
-
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import Text from '../Typography/Text';
-import Title from '../Typography/v2/Title';
-
-export type Props = React.ComponentPropsWithRef<typeof Title> & {
-  /**
-   * Title text for the `DialogTitle`.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component to show a title in a Dialog.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Dialog, Portal, Text } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [visible, setVisible] = React.useState(false);
- *
- *   const hideDialog = () => setVisible(false);
- *
- *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.Title>This is a title</Dialog.Title>
- *         <Dialog.Content>
- *           <Text variant="bodyMedium">This is simple dialog</Text>
- *         </Dialog.Content>
- *       </Dialog>
- *     </Portal>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const DialogTitle = ({
-  children,
-  theme: themeOverrides,
-  style,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3, colors, fonts } = theme;
-
-  const TextComponent = isV3 ? Text : Title;
-
-  const headerTextStyle = {
-    color: isV3 ? colors.onSurface : colors?.text,
-    ...(isV3 ? fonts.headlineSmall : {}),
-  };
-
-  return (
-    <TextComponent
-      variant="headlineSmall"
-      accessibilityRole="header"
-      style={[styles.text, isV3 && styles.v3Text, headerTextStyle, style]}
-      {...rest}
-    >
-      {children}
-    </TextComponent>
-  );
-};
-
-DialogTitle.displayName = 'Dialog.Title';
-
-const styles = StyleSheet.create({
-  text: {
-    marginTop: 22,
-    marginBottom: 18,
-    marginHorizontal: 24,
-  },
-  v3Text: {
-    marginTop: 16,
-    marginBottom: 16,
-  },
-});
-
-export default DialogTitle;
-
-// @component-docs ignore-next-line
-export { DialogTitle };

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

@@ -1,102 +0,0 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import color from 'color';
-
-import { useInternalTheme } from '../core/theming';
-import { black, white } from '../styles/themes/v2/colors';
-import type { $RemoveChildren, ThemeProp } from '../types';
-
-export type Props = $RemoveChildren<typeof View> & {
-  /**
-   * @renamed Renamed from 'inset' to 'leftInset` in v5.x
-   * Whether divider has a left inset.
-   */
-  leftInset?: boolean;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *  Whether divider has a horizontal inset on both sides.
-   */
-  horizontalInset?: boolean;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *  Whether divider should be bolded.
-   */
-  bold?: boolean;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A divider is a thin, lightweight separator that groups content in lists and page layouts.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Divider, Text } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <View>
- *     <Text>Lemon</Text>
- *     <Divider />
- *     <Text>Mango</Text>
- *     <Divider />
- *   </View>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const Divider = ({
-  leftInset,
-  horizontalInset = false,
-  style,
-  theme: themeOverrides,
-  bold = false,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { dark: isDarkTheme, isV3 } = theme;
-
-  const dividerColor = isV3
-    ? theme.colors.outlineVariant
-    : color(isDarkTheme ? white : black)
-        .alpha(0.12)
-        .rgb()
-        .string();
-
-  return (
-    <View
-      {...rest}
-      style={[
-        { height: StyleSheet.hairlineWidth, backgroundColor: dividerColor },
-        leftInset && (isV3 ? styles.v3LeftInset : styles.leftInset),
-        isV3 && horizontalInset && styles.horizontalInset,
-        isV3 && bold && styles.bold,
-        style,
-      ]}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  leftInset: {
-    marginLeft: 72,
-  },
-  v3LeftInset: {
-    marginLeft: 16,
-  },
-  horizontalInset: {
-    marginLeft: 16,
-    marginRight: 16,
-  },
-  bold: {
-    height: 1,
-  },
-});
-
-export default Divider;

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

@@ -1,8 +0,0 @@
-// @component ./DrawerItem.tsx
-export { default as Item } from './DrawerItem';
-
-// @component ./DrawerCollapsedItem.tsx
-export { default as CollapsedItem } from './DrawerCollapsedItem';
-
-// @component ./DrawerSection.tsx
-export { default as Section } from './DrawerSection';

package/Examples/SampleUI/src/components/Drawer/DrawerCollapsedItem.tsx

@@ -1,282 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  GestureResponderEvent,
-  NativeSyntheticEvent,
-  Platform,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  TextLayoutEventData,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import Badge from '../Badge';
-import Icon, { IconSource } from '../Icon';
-import Text from '../Typography/Text';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * The label text of the item.
-   */
-  label?: string;
-  /**
-   * Badge to show on the icon, can be `true` to show a dot, `string` or `number` to show text.
-   */
-  badge?: string | number | boolean;
-  /**
-   * Whether the item is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
-   * Icon to use as the focused destination icon, can be a string, an image source or a react component
-   */
-  focusedIcon?: IconSource;
-  /**
-   * @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
-   * Icon to use as the unfocused destination icon, can be a string, an image source or a react component
-   */
-  unfocusedIcon?: IconSource;
-  /**
-   * Whether to highlight the drawer item as active.
-   */
-  active?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Specifies the largest possible scale a label font can reach.
-   */
-  labelMaxFontSizeMultiplier?: number;
-  /**
-   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-};
-
-const badgeSize = 8;
-const iconSize = 24;
-const itemSize = 56;
-const outlineHeight = 32;
-
-/**
- * Note: Available in v5.x with theme version 3
- *
- * Collapsed component used to show an action item with an icon and optionally label in a navigation drawer.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Drawer } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *    <Drawer.CollapsedItem
- *      focusedIcon="inbox"
- *      unfocusedIcon="inbox-outline"
- *      label="Inbox"
- *    />
- * );
- *
- * export default MyComponent;
- * ```
- */
-const DrawerCollapsedItem = ({
-  focusedIcon,
-  unfocusedIcon,
-  label,
-  active,
-  theme: themeOverrides,
-  style,
-  onPress,
-  disabled,
-  accessibilityLabel,
-  badge = false,
-  testID = 'drawer-collapsed-item',
-  labelMaxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
-  const { scale } = theme.animation;
-
-  const [numOfLines, setNumOfLines] = React.useState(1);
-
-  const { current: animScale } = React.useRef<Animated.Value>(
-    new Animated.Value(active ? 1 : 0.5)
-  );
-
-  React.useEffect(() => {
-    if (!active) {
-      animScale.setValue(0.5);
-    }
-  }, [animScale, active]);
-
-  if (!isV3) {
-    return null;
-  }
-
-  const handlePressOut = () => {
-    Animated.timing(animScale, {
-      toValue: 1,
-      duration: 150 * scale,
-      useNativeDriver: true,
-    }).start();
-  };
-
-  const iconPadding = ((!label ? itemSize : outlineHeight) - iconSize) / 2;
-
-  const backgroundColor = active
-    ? theme.colors.secondaryContainer
-    : 'transparent';
-  const labelColor = active
-    ? theme.colors.onSurface
-    : theme.colors.onSurfaceVariant;
-  const iconColor = active
-    ? theme.colors.onSecondaryContainer
-    : theme.colors.onSurfaceVariant;
-
-  const onTextLayout = ({
-    nativeEvent,
-  }: NativeSyntheticEvent<TextLayoutEventData>) => {
-    setNumOfLines(nativeEvent.lines.length);
-  };
-
-  // Label is cut off on Android, when centered "labelMedium" text
-  // has more than 4 lines, so there is a need to decrease the letter spacing.
-  const androidLetterSpacingStyle =
-    Platform.OS === 'android' && numOfLines > 4 && styles.letterSpacing;
-
-  const labelTextStyle = {
-    color: labelColor,
-    ...(isV3 ? theme.fonts.labelMedium : {}),
-  };
-
-  const icon =
-    !active && unfocusedIcon !== undefined ? unfocusedIcon : focusedIcon;
-
-  return (
-    <View {...rest}>
-      {/* eslint-disable-next-line react-native-a11y/has-accessibility-props */}
-      <Pressable
-        onPress={onPress}
-        onPressOut={onPress ? handlePressOut : undefined}
-        disabled={disabled}
-        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
-        accessibilityTraits={active ? ['button', 'selected'] : 'button'}
-        accessibilityComponentType="button"
-        accessibilityRole="button"
-        accessibilityState={{ selected: active }}
-        accessibilityLabel={accessibilityLabel}
-        testID={testID}
-      >
-        <View style={styles.wrapper}>
-          <Animated.View
-            style={[
-              styles.outline,
-              !label && styles.roundedOutline,
-              {
-                transform: [
-                  label
-                    ? {
-                        scaleX: animScale,
-                      }
-                    : { scale: animScale },
-                ],
-                backgroundColor,
-              },
-              style,
-            ]}
-            testID={`${testID}-outline`}
-          />
-
-          <View
-            style={[styles.icon, { top: iconPadding }]}
-            testID={`${testID}-container`}
-          >
-            {badge && (
-              <View style={styles.badgeContainer}>
-                {typeof badge === 'boolean' ? (
-                  <Badge visible={badge} size={badgeSize} />
-                ) : (
-                  <Badge visible={badge != null} size={2 * badgeSize}>
-                    {badge}
-                  </Badge>
-                )}
-              </View>
-            )}
-            <Icon source={icon} size={iconSize} color={iconColor} />
-          </View>
-
-          {label ? (
-            <Text
-              variant="labelMedium"
-              selectable={false}
-              numberOfLines={2}
-              onTextLayout={onTextLayout}
-              style={[styles.label, androidLetterSpacingStyle, labelTextStyle]}
-              maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-            >
-              {label}
-            </Text>
-          ) : null}
-        </View>
-      </Pressable>
-    </View>
-  );
-};
-
-DrawerCollapsedItem.displayName = 'Drawer.CollapsedItem';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: 80,
-    marginBottom: 12,
-    minHeight: itemSize,
-    alignItems: 'center',
-  },
-  outline: {
-    width: itemSize,
-    height: outlineHeight,
-    borderRadius: itemSize / 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  roundedOutline: {
-    height: itemSize,
-  },
-  icon: {
-    position: 'absolute',
-  },
-  letterSpacing: {
-    letterSpacing: 0.3,
-    alignSelf: 'stretch',
-  },
-  label: {
-    marginHorizontal: 12,
-    marginTop: 4,
-    textAlign: 'center',
-  },
-  badgeContainer: {
-    position: 'absolute',
-    left: 20,
-    bottom: 20,
-    zIndex: 2,
-  },
-});
-
-export default DrawerCollapsedItem;