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

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

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

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

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

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

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