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

package/Examples/SampleUI/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,257 @@
+import * as React from 'react';
+import {
+  AccessibilityState,
+  ColorValue,
+  GestureResponderEvent,
+  PressableAndroidRippleConfig,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import {
+  getContentMaxWidth,
+  getMenuItemColor,
+  MAX_WIDTH,
+  MIN_WIDTH,
+} from './utils';
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+import Icon, { IconSource } from '../Icon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import Text from '../Typography/Text';
+
+export type Props = {
+  /**
+   * Title text for the `MenuItem`.
+   */
+  title: React.ReactNode;
+  /**
+   * @renamed Renamed from 'icon' to 'leadingIcon' in v5.x
+   *
+   * Leading icon to display for the `MenuItem`.
+   */
+  leadingIcon?: IconSource;
+  /**
+   * @supported Available in v5.x with theme version 3
+   *
+   * Trailing icon to display for the `MenuItem`.
+   */
+  trailingIcon?: IconSource;
+  /**
+   * Whether the 'item' is disabled. A disabled 'item' is greyed out and `onPress` is not called on touch.
+   */
+  disabled?: boolean;
+  /**
+   * @supported Available in v5.x with theme version 3
+   *
+   * Sets min height with densed layout.
+   */
+  dense?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Specifies the largest possible scale a title font can reach.
+   */
+  titleMaxFontSizeMultiplier?: number;
+  /**
+   * @optional
+   */
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+  /**
+   * Accessibility label for the Touchable. This is read by the screen reader when the user taps the component.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Accessibility state for the Touchable. This is read by the screen reader when the user taps the component.
+   */
+  accessibilityState?: AccessibilityState;
+};
+
+/**
+ * A component to show a single list item inside a Menu.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Menu } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <View style={{ flex: 1 }}>
+ *     <Menu.Item leadingIcon="redo" onPress={() => {}} title="Redo" />
+ *     <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
+ *     <Menu.Item leadingIcon="content-cut" onPress={() => {}} title="Cut" disabled />
+ *     <Menu.Item leadingIcon="content-copy" onPress={() => {}} title="Copy" disabled />
+ *     <Menu.Item leadingIcon="content-paste" onPress={() => {}} title="Paste" />
+ *   </View>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const MenuItem = ({
+  leadingIcon,
+  trailingIcon,
+  dense,
+  title,
+  disabled,
+  background,
+  onPress,
+  style,
+  contentStyle,
+  titleStyle,
+  rippleColor: customRippleColor,
+  testID = 'menu-item',
+  accessibilityLabel,
+  accessibilityState,
+  theme: themeOverrides,
+  titleMaxFontSizeMultiplier = 1.5,
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { titleColor, iconColor, rippleColor } = getMenuItemColor({
+    theme,
+    disabled,
+    customRippleColor,
+  });
+  const { isV3 } = theme;
+
+  const containerPadding = isV3 ? 12 : 8;
+
+  const iconWidth = isV3 ? 24 : 40;
+
+  const minWidth = MIN_WIDTH - (isV3 ? 12 : 16);
+
+  const maxWidth = getContentMaxWidth({
+    isV3,
+    iconWidth,
+    leadingIcon,
+    trailingIcon,
+  });
+
+  const titleTextStyle = {
+    color: titleColor,
+    ...(isV3 ? theme.fonts.bodyLarge : {}),
+  };
+
+  const newAccessibilityState = { ...accessibilityState, disabled };
+
+  return (
+    <TouchableRipple
+      style={[
+        styles.container,
+        { paddingHorizontal: containerPadding },
+        dense && styles.md3DenseContainer,
+        style,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      background={background}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="menuitem"
+      accessibilityState={newAccessibilityState}
+      rippleColor={rippleColor}
+    >
+      <View style={styles.row}>
+        {leadingIcon ? (
+          <View
+            style={[!isV3 && styles.item, { width: iconWidth }]}
+            pointerEvents="box-none"
+          >
+            <Icon source={leadingIcon} size={24} color={iconColor} />
+          </View>
+        ) : null}
+        <View
+          style={[
+            !isV3 && styles.item,
+            styles.content,
+            { minWidth, maxWidth },
+            isV3 &&
+              (leadingIcon
+                ? styles.md3LeadingIcon
+                : styles.md3WithoutLeadingIcon),
+            contentStyle,
+          ]}
+          pointerEvents="none"
+        >
+          <Text
+            variant="bodyLarge"
+            selectable={false}
+            numberOfLines={1}
+            testID={`${testID}-title`}
+            style={[!isV3 && styles.title, titleTextStyle, titleStyle]}
+            maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
+          >
+            {title}
+          </Text>
+        </View>
+        {isV3 && trailingIcon ? (
+          <View
+            style={[!isV3 && styles.item, { width: iconWidth }]}
+            pointerEvents="box-none"
+          >
+            <Icon source={trailingIcon} size={24} color={iconColor} />
+          </View>
+        ) : null}
+      </View>
+    </TouchableRipple>
+  );
+};
+
+MenuItem.displayName = 'Menu.Item';
+
+const styles = StyleSheet.create({
+  container: {
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH,
+    height: 48,
+    justifyContent: 'center',
+  },
+  md3DenseContainer: {
+    height: 32,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  title: {
+    fontSize: 16,
+  },
+  item: {
+    marginHorizontal: 8,
+  },
+  content: {
+    justifyContent: 'center',
+  },
+  md3LeadingIcon: {
+    marginLeft: 12,
+  },
+  md3WithoutLeadingIcon: {
+    marginLeft: 4,
+  },
+});
+
+export default MenuItem;

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

@@ -0,0 +1,110 @@
+import type { ColorValue } from 'react-native';
+
+import color from 'color';
+
+import { black, white } from '../../styles/themes/v2/colors';
+import type { InternalTheme } from '../../types';
+import type { IconSource } from '../Icon';
+
+export const MIN_WIDTH = 112;
+export const MAX_WIDTH = 280;
+
+type ContentProps = {
+  isV3: boolean;
+  iconWidth: number;
+  leadingIcon?: IconSource;
+  trailingIcon?: IconSource;
+};
+
+type ColorProps = {
+  theme: InternalTheme;
+  disabled?: boolean;
+  customRippleColor?: ColorValue;
+};
+
+const getDisabledColor = (theme: InternalTheme) => {
+  if (theme.isV3) {
+    return theme.colors.onSurfaceDisabled;
+  }
+
+  return color(theme.dark ? white : black)
+    .alpha(0.32)
+    .rgb()
+    .string();
+};
+
+const getTitleColor = ({ theme, disabled }: ColorProps) => {
+  if (disabled) {
+    return getDisabledColor(theme);
+  }
+
+  if (theme.isV3) {
+    return theme.colors.onSurface;
+  }
+
+  return color(theme.colors.text).alpha(0.87).rgb().string();
+};
+
+const getIconColor = ({ theme, disabled }: ColorProps) => {
+  if (disabled) {
+    return getDisabledColor(theme);
+  }
+
+  if (theme.isV3) {
+    return theme.colors.onSurfaceVariant;
+  }
+
+  return color(theme.colors.text).alpha(0.54).rgb().string();
+};
+
+const getRippleColor = ({
+  theme,
+  customRippleColor,
+}: Omit<ColorProps, 'disabled'>) => {
+  if (customRippleColor) {
+    return customRippleColor;
+  }
+
+  if (theme.isV3) {
+    return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
+  }
+
+  return undefined;
+};
+
+export const getMenuItemColor = ({
+  theme,
+  disabled,
+  customRippleColor,
+}: ColorProps) => {
+  return {
+    titleColor: getTitleColor({ theme, disabled }),
+    iconColor: getIconColor({ theme, disabled }),
+    rippleColor: getRippleColor({ theme, customRippleColor }),
+  };
+};
+
+export const getContentMaxWidth = ({
+  isV3,
+  iconWidth,
+  leadingIcon,
+  trailingIcon,
+}: ContentProps) => {
+  if (isV3) {
+    if (leadingIcon && trailingIcon) {
+      return MAX_WIDTH - (2 * iconWidth + 24);
+    }
+
+    if (leadingIcon || trailingIcon) {
+      return MAX_WIDTH - (iconWidth + 24);
+    }
+
+    return MAX_WIDTH - 12;
+  }
+
+  if (leadingIcon) {
+    return MAX_WIDTH - (iconWidth + 48);
+  }
+
+  return MAX_WIDTH - 16;
+};

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

@@ -0,0 +1,245 @@
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  StyleProp,
+  StyleSheet,
+  Pressable,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useLatestCallback from 'use-latest-callback';
+
+import Surface from './Surface';
+import { useInternalTheme } from '../core/theming';
+import type { ThemeProp } from '../types';
+import { addEventListener } from '../utils/addEventListener';
+import { BackHandler } from '../utils/BackHandler/BackHandler';
+import useAnimatedValue from '../utils/useAnimatedValue';
+
+export type Props = {
+  /**
+   * Determines whether clicking outside the modal dismisses it.
+   */
+  dismissable?: boolean;
+  /**
+   * Determines whether clicking Android hardware back button dismisses the dialog.
+   */
+  dismissableBackButton?: boolean;
+  /**
+   * Callback that is called when the user dismisses the modal.
+   */
+  onDismiss?: () => void;
+  /**
+   * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.
+   */
+  overlayAccessibilityLabel?: string;
+  /**
+   * Determines Whether the modal is visible.
+   */
+  visible: boolean;
+  /**
+   * Content of the `Modal`.
+   */
+  children: React.ReactNode;
+  /**
+   * Style for the content of the modal
+   */
+  contentContainerStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Style for the wrapper of the modal.
+   * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
+};
+
+const DEFAULT_DURATION = 220;
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+/**
+ * The Modal component is a simple way to present content above an enclosing view.
+ * To render the `Modal` above other components, you'll need to wrap it with the [`Portal`](./Portal) component.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [visible, setVisible] = React.useState(false);
+ *
+ *   const showModal = () => setVisible(true);
+ *   const hideModal = () => setVisible(false);
+ *   const containerStyle = {backgroundColor: 'white', padding: 20};
+ *
+ *   return (
+ *     <PaperProvider>
+ *       <Portal>
+ *         <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
+ *           <Text>Example Modal.  Click outside this area to dismiss.</Text>
+ *         </Modal>
+ *       </Portal>
+ *       <Button style={{marginTop: 30}} onPress={showModal}>
+ *         Show
+ *       </Button>
+ *     </PaperProvider>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+function Modal({
+  dismissable = true,
+  dismissableBackButton = dismissable,
+  visible = false,
+  overlayAccessibilityLabel = 'Close modal',
+  onDismiss = () => {},
+  children,
+  contentContainerStyle,
+  style,
+  theme: themeOverrides,
+  testID = 'modal',
+}: Props) {
+  const theme = useInternalTheme(themeOverrides);
+  const onDismissCallback = useLatestCallback(onDismiss);
+  const { scale } = theme.animation;
+  const { top, bottom } = useSafeAreaInsets();
+  const opacity = useAnimatedValue(visible ? 1 : 0);
+  const [visibleInternal, setVisibleInternal] = React.useState(visible);
+
+  const showModalAnimation = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: scale * DEFAULT_DURATION,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [opacity, scale]);
+
+  const hideModalAnimation = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: scale * DEFAULT_DURATION,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (!finished) {
+        return;
+      }
+
+      setVisibleInternal(false);
+    });
+  }, [opacity, scale]);
+
+  React.useEffect(() => {
+    if (visibleInternal === visible) {
+      return;
+    }
+
+    if (!visibleInternal && visible) {
+      setVisibleInternal(true);
+      return showModalAnimation();
+    }
+
+    if (visibleInternal && !visible) {
+      return hideModalAnimation();
+    }
+  }, [visible, showModalAnimation, hideModalAnimation, visibleInternal]);
+
+  React.useEffect(() => {
+    if (!visible) {
+      return undefined;
+    }
+
+    const onHardwareBackPress = () => {
+      if (dismissable || dismissableBackButton) {
+        onDismissCallback();
+      }
+
+      return true;
+    };
+
+    const subscription = addEventListener(
+      BackHandler,
+      'hardwareBackPress',
+      onHardwareBackPress
+    );
+    return () => subscription.remove();
+  }, [dismissable, dismissableBackButton, onDismissCallback, visible]);
+
+  if (!visibleInternal) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      pointerEvents={visible ? 'auto' : 'none'}
+      accessibilityViewIsModal
+      accessibilityLiveRegion="polite"
+      style={StyleSheet.absoluteFill}
+      onAccessibilityEscape={onDismissCallback}
+      testID={testID}
+    >
+      <AnimatedPressable
+        accessibilityLabel={overlayAccessibilityLabel}
+        accessibilityRole="button"
+        disabled={!dismissable}
+        onPress={dismissable ? onDismissCallback : undefined}
+        importantForAccessibility="no"
+        style={[
+          styles.backdrop,
+          {
+            backgroundColor: theme.colors?.backdrop,
+            opacity,
+          },
+        ]}
+        testID={`${testID}-backdrop`}
+      />
+      <View
+        style={[
+          styles.wrapper,
+          { marginTop: top, marginBottom: bottom },
+          style,
+        ]}
+        pointerEvents="box-none"
+        testID={`${testID}-wrapper`}
+      >
+        <Surface
+          testID={`${testID}-surface`}
+          theme={theme}
+          style={[{ opacity }, styles.content, contentContainerStyle]}
+        >
+          {children}
+        </Surface>
+      </View>
+    </Animated.View>
+  );
+}
+
+export default Modal;
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+  },
+  wrapper: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+  },
+  // eslint-disable-next-line react-native/no-color-literals
+  content: {
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+  },
+});

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import type { InternalTheme } from 'src/types';
+
+import PortalConsumer from './PortalConsumer';
+import PortalHost, { PortalContext, PortalMethods } from './PortalHost';
+import {
+  Consumer as SettingsConsumer,
+  Provider as SettingsProvider,
+} from '../../core/settings';
+import { ThemeProvider, withInternalTheme } from '../../core/theming';
+
+export type Props = {
+  /**
+   * Content of the `Portal`.
+   */
+  children: React.ReactNode;
+  /**
+   * @optional
+   */
+  theme: InternalTheme;
+};
+
+/**
+ * Portal allows rendering a component at a different place in the parent tree.
+ * You can use it to render content which should appear above other elements, similar to `Modal`.
+ * It requires a [`Portal.Host`](PortalHost) component to be rendered somewhere in the parent tree.
+ * Note that if you're using the `Provider` component, this already includes a `Portal.Host`.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Portal, Text } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Portal>
+ *     <Text>This is rendered at a different place</Text>
+ *   </Portal>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+class Portal extends React.Component<Props> {
+  // @component ./PortalHost.tsx
+  static Host = PortalHost;
+
+  render() {
+    const { children, theme } = this.props;
+
+    return (
+      <SettingsConsumer>
+        {(settings) => (
+          <PortalContext.Consumer>
+            {(manager) => (
+              <PortalConsumer manager={manager as PortalMethods}>
+                <SettingsProvider value={settings}>
+                  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+                </SettingsProvider>
+              </PortalConsumer>
+            )}
+          </PortalContext.Consumer>
+        )}
+      </SettingsConsumer>
+    );
+  }
+}
+
+export default withInternalTheme(Portal);