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

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

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

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

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

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

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