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

package/Examples/SampleUI/src/components/DataTable/DataTableTitle.tsx

@@ -1,208 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  GestureResponderEvent,
-  I18nManager,
-  PixelRatio,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import Text from '../Typography/Text';
-
-export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
-  /**
-   * Text content of the `DataTableTitle`.
-   */
-  children: React.ReactNode;
-  /**
-   * Align the text to the right. Generally monetary or number fields are aligned to right.
-   */
-  numeric?: boolean;
-  /**
-   * Direction of sorting. An arrow indicating the direction is displayed when this is given.
-   */
-  sortDirection?: 'ascending' | 'descending';
-  /**
-   * The number of lines to show.
-   */
-  numberOfLines?: number;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Text content style of the `DataTableTitle`.
-   */
-  textStyle?: StyleProp<TextStyle>;
-  /**
-   * Specifies the largest possible scale a text font can reach.
-   */
-  maxFontSizeMultiplier?: number;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component to display title in table header.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { DataTable } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *       <DataTable>
- *         <DataTable.Header>
- *           <DataTable.Title
- *             sortDirection='descending'
- *           >
- *             Dessert
- *           </DataTable.Title>
- *           <DataTable.Title numeric>Calories</DataTable.Title>
- *           <DataTable.Title numeric>Fat (g)</DataTable.Title>
- *         </DataTable.Header>
- *       </DataTable>
- * );
- *
- * export default MyComponent;
- * ```
- */
-
-const DataTableTitle = ({
-  numeric,
-  children,
-  onPress,
-  sortDirection,
-  textStyle,
-  style,
-  theme: themeOverrides,
-  numberOfLines = 1,
-  maxFontSizeMultiplier,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: spinAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(sortDirection === 'ascending' ? 0 : 1)
-  );
-
-  React.useEffect(() => {
-    Animated.timing(spinAnim, {
-      toValue: sortDirection === 'ascending' ? 0 : 1,
-      duration: 150,
-      useNativeDriver: true,
-    }).start();
-  }, [sortDirection, spinAnim]);
-
-  const textColor = theme.isV3 ? theme.colors.onSurface : theme?.colors?.text;
-
-  const alphaTextColor = color(textColor).alpha(0.6).rgb().string();
-
-  const spin = spinAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '180deg'],
-  });
-
-  const icon = sortDirection ? (
-    <Animated.View style={[styles.icon, { transform: [{ rotate: spin }] }]}>
-      <MaterialCommunityIcon
-        name="arrow-up"
-        size={16}
-        color={textColor}
-        direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
-      />
-    </Animated.View>
-  ) : null;
-
-  return (
-    <Pressable
-      disabled={!onPress}
-      onPress={onPress}
-      {...rest}
-      style={[styles.container, numeric && styles.right, style]}
-    >
-      {icon}
-
-      <Text
-        style={[
-          styles.cell,
-          // height must scale with numberOfLines
-          { maxHeight: 24 * PixelRatio.getFontScale() * numberOfLines },
-          // if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
-          numberOfLines > 1
-            ? numeric
-              ? I18nManager.getConstants().isRTL
-                ? styles.leftText
-                : styles.rightText
-              : styles.centerText
-            : {},
-          sortDirection ? styles.sorted : { color: alphaTextColor },
-          textStyle,
-        ]}
-        numberOfLines={numberOfLines}
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-      >
-        {children}
-      </Text>
-    </Pressable>
-  );
-};
-
-DataTableTitle.displayName = 'DataTable.Title';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    alignContent: 'center',
-    paddingVertical: 12,
-  },
-
-  rightText: {
-    textAlign: 'right',
-  },
-
-  leftText: {
-    textAlign: 'left',
-  },
-
-  centerText: {
-    textAlign: 'center',
-  },
-
-  right: {
-    justifyContent: 'flex-end',
-  },
-
-  cell: {
-    lineHeight: 24,
-    fontSize: 12,
-    fontWeight: '500',
-    alignItems: 'center',
-  },
-
-  sorted: {
-    marginLeft: 8,
-  },
-
-  icon: {
-    height: 24,
-    justifyContent: 'center',
-  },
-});
-
-export default DataTableTitle;
-
-// @component-docs ignore-next-line
-export { DataTableTitle };

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

@@ -1,191 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
-
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import DialogActions from './DialogActions';
-import DialogContent from './DialogContent';
-import DialogIcon from './DialogIcon';
-import DialogScrollArea from './DialogScrollArea';
-import DialogTitle from './DialogTitle';
-import { useInternalTheme } from '../../core/theming';
-import overlay from '../../styles/overlay';
-import type { ThemeProp } from '../../types';
-import Modal from '../Modal';
-
-export type Props = {
-  /**
-   * Determines whether clicking outside the dialog dismiss it.
-   */
-  dismissable?: boolean;
-  /**
-   * Determines whether clicking Android hardware back button dismiss dialog.
-   */
-  dismissableBackButton?: boolean;
-  /**
-   * Callback that is called when the user dismisses the dialog.
-   */
-  onDismiss?: () => void;
-  /**
-   * Determines Whether the dialog is visible.
-   */
-  visible: boolean;
-  /**
-   * Content of the `Dialog`.
-   */
-  children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-const DIALOG_ELEVATION: number = 24;
-
-/**
- * Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.
- * To render the `Dialog` above other components, you'll need to wrap it with the [`Portal`](../../Portal) component.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [visible, setVisible] = React.useState(false);
- *
- *   const showDialog = () => setVisible(true);
- *
- *   const hideDialog = () => setVisible(false);
- *
- *   return (
- *     <PaperProvider>
- *       <View>
- *         <Button onPress={showDialog}>Show Dialog</Button>
- *         <Portal>
- *           <Dialog visible={visible} onDismiss={hideDialog}>
- *             <Dialog.Title>Alert</Dialog.Title>
- *             <Dialog.Content>
- *               <Text variant="bodyMedium">This is simple dialog</Text>
- *             </Dialog.Content>
- *             <Dialog.Actions>
- *               <Button onPress={hideDialog}>Done</Button>
- *             </Dialog.Actions>
- *           </Dialog>
- *         </Portal>
- *       </View>
- *     </PaperProvider>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const Dialog = ({
-  children,
-  dismissable = true,
-  dismissableBackButton = dismissable,
-  onDismiss,
-  visible = false,
-  style,
-  theme: themeOverrides,
-  testID,
-}: Props) => {
-  const { right, left } = useSafeAreaInsets();
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3, dark, mode, colors, roundness } = theme;
-  const borderRadius = (isV3 ? 7 : 1) * roundness;
-
-  const backgroundColorV2 =
-    dark && mode === 'adaptive'
-      ? overlay(DIALOG_ELEVATION, colors?.surface)
-      : colors?.surface;
-  const backgroundColor = isV3
-    ? theme.colors.elevation.level3
-    : backgroundColorV2;
-
-  return (
-    <Modal
-      dismissable={dismissable}
-      dismissableBackButton={dismissableBackButton}
-      onDismiss={onDismiss}
-      visible={visible}
-      contentContainerStyle={[
-        {
-          borderRadius,
-          backgroundColor,
-          marginHorizontal: Math.max(left, right, 26),
-        },
-        styles.container,
-        style,
-      ]}
-      theme={theme}
-      testID={testID}
-    >
-      {React.Children.toArray(children)
-        .filter((child) => child != null && typeof child !== 'boolean')
-        .map((child, i) => {
-          if (isV3) {
-            if (i === 0 && React.isValidElement(child)) {
-              return React.cloneElement(child as React.ReactElement<any>, {
-                style: [{ marginTop: 24 }, child.props.style],
-              });
-            }
-          }
-
-          if (
-            i === 0 &&
-            React.isValidElement(child) &&
-            child.type === DialogContent
-          ) {
-            // Dialog content is the first item, so we add a top padding
-            return React.cloneElement(child as React.ReactElement<any>, {
-              style: [{ paddingTop: 24 }, child.props.style],
-            });
-          }
-
-          return child;
-        })}
-    </Modal>
-  );
-};
-
-// @component ./DialogContent.tsx
-Dialog.Content = DialogContent;
-// @component ./DialogActions.tsx
-Dialog.Actions = DialogActions;
-// @component ./DialogTitle.tsx
-Dialog.Title = DialogTitle;
-// @component ./DialogScrollArea.tsx
-Dialog.ScrollArea = DialogScrollArea;
-// @component ./DialogIcon.tsx
-Dialog.Icon = DialogIcon;
-
-const styles = StyleSheet.create({
-  container: {
-    /**
-     * This prevents the shadow from being clipped on Android since Android
-     * doesn't support `overflow: visible`.
-     * One downside for this fix is that it will disable clicks on the area
-     * of the shadow around the dialog, consequently, if you click around the
-     * dialog (44 pixel from the top and bottom) it won't be dismissed.
-     */
-    marginVertical: Platform.OS === 'android' ? 44 : 0,
-    elevation: DIALOG_ELEVATION,
-    justifyContent: 'flex-start',
-  },
-});
-
-export default Dialog;

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

@@ -1,94 +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 `DialogActions`.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component to show a list of actions in a Dialog.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Button, Dialog, Portal } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [visible, setVisible] = React.useState(false);
- *
- *   const hideDialog = () => setVisible(false);
- *
- *   return (
- *     <Portal>
- *       <Dialog visible={visible} onDismiss={hideDialog}>
- *         <Dialog.Actions>
- *           <Button onPress={() => console.log('Cancel')}>Cancel</Button>
- *           <Button onPress={() => console.log('Ok')}>Ok</Button>
- *         </Dialog.Actions>
- *       </Dialog>
- *     </Portal>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const DialogActions = (props: Props) => {
-  const { isV3 } = useInternalTheme(props.theme);
-  const actionsLength = React.Children.toArray(props.children).length;
-
-  return (
-    <View
-      {...props}
-      style={[isV3 ? styles.v3Container : styles.container, props.style]}
-    >
-      {React.Children.map(props.children, (child, i) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              compact: true,
-              uppercase: !isV3,
-              style: [
-                isV3 && {
-                  marginRight: i + 1 === actionsLength ? 0 : 8,
-                },
-                child.props.style,
-              ],
-            })
-          : child
-      )}
-    </View>
-  );
-};
-
-DialogActions.displayName = 'Dialog.Actions';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: 8,
-  },
-  v3Container: {
-    flexDirection: 'row',
-    flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    paddingBottom: 24,
-    paddingHorizontal: 24,
-  },
-});
-
-export default DialogActions;

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

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { View, ViewStyle, StyleSheet, StyleProp } from 'react-native';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Content of the `DialogContent`.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * A component to show content 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.Content>
- *           <Text variant="bodyMedium">This is simple dialog</Text>
- *         </Dialog.Content>
- *       </Dialog>
- *     </Portal>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const DialogContent = (props: Props) => (
-  <View {...props} style={[styles.container, props.style]}>
-    {props.children}
-  </View>
-);
-
-DialogContent.displayName = 'Dialog.Content';
-
-const styles = StyleSheet.create({
-  container: {
-    paddingBottom: 24,
-    paddingHorizontal: 24,
-  },
-});
-
-export default DialogContent;

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

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../core/theming';
-import Icon, { IconSource } from '../Icon';
-
-export type Props = {
-  /**
-   *  Custom color for action icon.
-   */
-  color?: string;
-  /**
-   * Name of the icon to show.
-   */
-  icon: IconSource;
-  /**
-   * Optional icon size.
-   */
-  size?: number;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * @supported Available in v5.x with theme version 3
- * A component to show an icon in a Dialog.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { StyleSheet } 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.Icon icon="alert" />
- *         <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
- *         <Dialog.Content>
- *           <Text variant="bodyMedium">This is simple dialog</Text>
- *         </Dialog.Content>
- *       </Dialog>
- *     </Portal>
- *   );
- * };
- *
- * const styles = StyleSheet.create({
- *   title: {
- *     textAlign: 'center',
- *   },
- * })
- *
- * export default MyComponent;
- * ```
- */
-const DialogIcon = ({
-  size = 24,
-  color,
-  icon,
-  theme: themeOverrides,
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  if (!theme.isV3) {
-    return null;
-  }
-
-  //@ts-ignore
-  const iconColor = color || theme.colors.secondary;
-
-  return (
-    <View style={styles.wrapper}>
-      <Icon source={icon} color={iconColor} size={size} />
-    </View>
-  );
-};
-
-DialogIcon.displayName = 'Dialog.Icon';
-
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 24,
-  },
-});
-
-export default DialogIcon;
-
-// @component-docs ignore-next-line
-export { DialogIcon };