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

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

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

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

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

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