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

package/Examples/SampleUI/src/Examples/DataTableExample.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { DataTable, Card } from 'react-native-paper';
+
+import ScreenWrapper from '../ScreenWrapper';
+
+type ItemsState = Array<{
+  key: number;
+  name: string;
+  calories: number;
+  fat: number;
+}>;
+
+const DataTableExample = () => {
+  const [sortAscending, setSortAscending] = React.useState<boolean>(true);
+  const [page, setPage] = React.useState<number>(0);
+  const [items] = React.useState<ItemsState>([
+    {
+      key: 1,
+      name: 'Cupcake',
+      calories: 356,
+      fat: 16,
+    },
+    {
+      key: 2,
+      name: 'Eclair',
+      calories: 262,
+      fat: 16,
+    },
+    {
+      key: 3,
+      name: 'Frozen yogurt',
+      calories: 159,
+      fat: 6,
+    },
+    {
+      key: 4,
+      name: 'Gingerbread',
+      calories: 305,
+      fat: 3.7,
+    },
+    {
+      key: 5,
+      name: 'Ice cream sandwich',
+      calories: 237,
+      fat: 9,
+    },
+    {
+      key: 6,
+      name: 'Jelly Bean',
+      calories: 375,
+      fat: 0,
+    },
+  ]);
+  const [numberOfItemsPerPageList] = React.useState([2, 3, 4, 200]);
+  const [itemsPerPage, onItemsPerPageChange] = React.useState(
+    numberOfItemsPerPageList[0]
+  );
+  const sortedItems = items
+    .slice()
+    .sort((item1, item2) =>
+      sortAscending
+        ? item1.name.localeCompare(item2.name)
+        : item2.name.localeCompare(item1.name)
+    );
+  const from = page * itemsPerPage;
+  const to = Math.min((page + 1) * itemsPerPage, items.length);
+
+  React.useEffect(() => {
+    setPage(0);
+  }, [itemsPerPage]);
+
+  return (
+    <ScreenWrapper contentContainerStyle={styles.content}>
+      <Card>
+        <DataTable>
+          <DataTable.Header>
+            <DataTable.Title
+              sortDirection={sortAscending ? 'ascending' : 'descending'}
+              onPress={() => setSortAscending(!sortAscending)}
+              style={styles.first}
+            >
+              Dessert
+            </DataTable.Title>
+            <DataTable.Title numberOfLines={2} numeric>
+              Calories per piece
+            </DataTable.Title>
+            <DataTable.Title numeric>Fat (g)</DataTable.Title>
+          </DataTable.Header>
+
+          {sortedItems.slice(from, to).map((item) => (
+            <DataTable.Row key={item.key}>
+              <DataTable.Cell style={styles.first}>{item.name}</DataTable.Cell>
+              <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
+              <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
+            </DataTable.Row>
+          ))}
+
+          <DataTable.Pagination
+            page={page}
+            numberOfPages={Math.ceil(sortedItems.length / itemsPerPage)}
+            onPageChange={(page) => setPage(page)}
+            label={`${from + 1}-${to} of ${sortedItems.length}`}
+            numberOfItemsPerPageList={numberOfItemsPerPageList}
+            numberOfItemsPerPage={itemsPerPage}
+            onItemsPerPageChange={onItemsPerPageChange}
+            showFastPaginationControls
+            selectPageDropdownLabel={'Rows per page'}
+          />
+        </DataTable>
+      </Card>
+    </ScreenWrapper>
+  );
+};
+
+DataTableExample.title = 'Data Table';
+
+const styles = StyleSheet.create({
+  content: {
+    padding: 8,
+  },
+  first: {
+    flex: 2,
+  },
+});
+
+export default DataTableExample;

package/Examples/SampleUI/src/Examples/DialogExample.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+import { Button } from 'react-native-paper';
+
+import {
+  DialogWithCustomColors,
+  DialogWithDismissableBackButton,
+  DialogWithIcon,
+  DialogWithLoadingIndicator,
+  DialogWithLongText,
+  DialogWithRadioBtns,
+  UndismissableDialog,
+} from './Dialogs';
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+type ButtonVisibility = {
+  [key: string]: boolean | undefined;
+};
+
+const DialogExample = () => {
+  const [visible, setVisible] = React.useState<ButtonVisibility>({});
+  const { isV3 } = useExampleTheme();
+
+  const _toggleDialog = (name: string) => () =>
+    setVisible({ ...visible, [name]: !visible[name] });
+
+  const _getVisible = (name: string) => !!visible[name];
+
+  return (
+    <ScreenWrapper style={styles.container}>
+      <Button
+        mode="outlined"
+        onPress={_toggleDialog('dialog1')}
+        style={styles.button}
+      >
+        Long text
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={_toggleDialog('dialog2')}
+        style={styles.button}
+      >
+        Radio buttons
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={_toggleDialog('dialog3')}
+        style={styles.button}
+      >
+        Progress indicator
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={_toggleDialog('dialog4')}
+        style={styles.button}
+      >
+        Undismissable Dialog
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={_toggleDialog('dialog5')}
+        style={styles.button}
+      >
+        Custom colors
+      </Button>
+      {isV3 && (
+        <Button
+          mode="outlined"
+          onPress={_toggleDialog('dialog6')}
+          style={styles.button}
+        >
+          With icon
+        </Button>
+      )}
+      {Platform.OS === 'android' && (
+        <Button
+          mode="outlined"
+          onPress={_toggleDialog('dialog7')}
+          style={styles.button}
+        >
+          Dismissable back button
+        </Button>
+      )}
+      <DialogWithLongText
+        visible={_getVisible('dialog1')}
+        close={_toggleDialog('dialog1')}
+      />
+      <DialogWithRadioBtns
+        visible={_getVisible('dialog2')}
+        close={_toggleDialog('dialog2')}
+      />
+      <DialogWithLoadingIndicator
+        visible={_getVisible('dialog3')}
+        close={_toggleDialog('dialog3')}
+      />
+      <UndismissableDialog
+        visible={_getVisible('dialog4')}
+        close={_toggleDialog('dialog4')}
+      />
+      <DialogWithCustomColors
+        visible={_getVisible('dialog5')}
+        close={_toggleDialog('dialog5')}
+      />
+      {isV3 && (
+        <DialogWithIcon
+          visible={_getVisible('dialog6')}
+          close={_toggleDialog('dialog6')}
+        />
+      )}
+      <DialogWithDismissableBackButton
+        visible={_getVisible('dialog7')}
+        close={_toggleDialog('dialog7')}
+      />
+    </ScreenWrapper>
+  );
+};
+
+DialogExample.title = 'Dialog';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+  },
+  button: {
+    margin: 4,
+  },
+});
+
+export default DialogExample;

package/Examples/SampleUI/src/Examples/Dialogs/DialogTextComponent.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import {
+  Paragraph,
+  Subheading,
+  Text as NativeText,
+  Text,
+} from 'react-native-paper';
+
+import { useExampleTheme } from '../..';
+
+type Props = React.ComponentProps<typeof NativeText> & {
+  isSubheading?: boolean;
+};
+
+export const TextComponent = ({ isSubheading = false, ...props }: Props) => {
+  const theme = useExampleTheme();
+
+  if (theme.isV3) {
+    return (
+      <Text
+        variant={isSubheading ? 'bodyLarge' : 'bodyMedium'}
+        style={{ color: theme.colors.onSurfaceVariant }}
+        {...props}
+      />
+    );
+  } else if (isSubheading) {
+    return <Subheading {...props} />;
+  }
+  return <Paragraph {...props} />;
+};

package/Examples/SampleUI/src/Examples/Dialogs/DialogWithCustomColors.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import {
+  Button,
+  Portal,
+  Dialog,
+  MD2Colors,
+  MD3Colors,
+} from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+import { useExampleTheme } from '../..';
+
+const DialogWithCustomColors = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => {
+  const { isV3 } = useExampleTheme();
+
+  return (
+    <Portal>
+      <Dialog
+        onDismiss={close}
+        style={{
+          backgroundColor: isV3 ? MD3Colors.primary10 : MD2Colors.purple900,
+        }}
+        visible={visible}
+      >
+        <Dialog.Title
+          style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
+        >
+          Alert
+        </Dialog.Title>
+        <Dialog.Content>
+          <TextComponent
+            style={{ color: isV3 ? MD3Colors.primary95 : MD2Colors.white }}
+          >
+            This is a dialog with custom colors
+          </TextComponent>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button
+            color={isV3 ? MD3Colors.primary95 : MD2Colors.white}
+            onPress={close}
+          >
+            Ok
+          </Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+export default DialogWithCustomColors;

package/Examples/SampleUI/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+
+const DialogWithDismissableBackButton = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => (
+  <Portal>
+    <Dialog
+      onDismiss={close}
+      visible={visible}
+      dismissable={false}
+      dismissableBackButton
+    >
+      <Dialog.Title>Alert</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent>
+          This is an undismissable dialog, however you can use hardware back
+          button to close it!
+        </TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button color={MD2Colors.teal500} disabled>
+          Disagree
+        </Button>
+        <Button onPress={close}>Agree</Button>
+      </Dialog.Actions>
+    </Dialog>
+  </Portal>
+);
+
+export default DialogWithDismissableBackButton;

package/Examples/SampleUI/src/Examples/Dialogs/DialogWithIcon.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Button, Portal, Dialog, MD3Colors } from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+
+const DialogWithIcon = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => {
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Icon icon="alert" />
+        <Dialog.Title style={styles.title}>Dialog with Icon</Dialog.Title>
+        <Dialog.Content>
+          <TextComponent>
+            This is a dialog with new component called DialogIcon. When icon is
+            displayed you should center the header.
+          </TextComponent>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={close} color={MD3Colors.error50}>
+            Disagree
+          </Button>
+          <Button onPress={close}>Agree</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+  },
+});
+export default DialogWithIcon;

package/Examples/SampleUI/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
+
+import { Dialog, MD2Colors, MD3Colors, Portal } from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+import { useExampleTheme } from '../..';
+
+const isIOS = Platform.OS === 'ios';
+
+const DialogWithLoadingIndicator = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => {
+  const { isV3 } = useExampleTheme();
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Title>Progress Dialog</Dialog.Title>
+        <Dialog.Content>
+          <View style={styles.flexing}>
+            <ActivityIndicator
+              color={isV3 ? MD3Colors.tertiary30 : MD2Colors.indigo500}
+              size={isIOS ? 'large' : 48}
+              style={styles.marginRight}
+            />
+            <TextComponent>Loading.....</TextComponent>
+          </View>
+        </Dialog.Content>
+      </Dialog>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  flexing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  marginRight: {
+    marginRight: 16,
+  },
+});
+
+export default DialogWithLoadingIndicator;

package/Examples/SampleUI/src/Examples/Dialogs/DialogWithLongText.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Dimensions, ScrollView, StyleSheet } from 'react-native';
+
+import { Button, Portal, Dialog } from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+
+const DialogWithLongText = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => (
+  <Portal>
+    <Dialog
+      onDismiss={close}
+      visible={visible}
+      style={{ maxHeight: 0.6 * Dimensions.get('window').height }}
+    >
+      <Dialog.Title>Alert</Dialog.Title>
+      <Dialog.ScrollArea style={styles.smallPadding}>
+        <ScrollView contentContainerStyle={styles.biggerPadding}>
+          <TextComponent>
+            Material is the metaphor
+            {'\n'}
+            {'\n'}A material metaphor is the unifying theory of a rationalized
+            space and a system of motion. The material is grounded in tactile
+            reality, inspired by the study of paper and ink, yet technologically
+            advanced and open to imagination and magic.
+            {'\n'}
+            {'\n'}
+            Surfaces and edges of the material provide visual cues that are
+            grounded in reality. The use of familiar tactile attributes helps
+            users quickly understand affordances. Yet the flexibility of the
+            material creates new affordances that supersede those in the
+            physical world, without breaking the rules of physics.
+            {'\n'}
+            {'\n'}
+            The fundamentals of light, surface, and movement are key to
+            conveying how objects move, interact, and exist in space and in
+            relation to each other. Realistic lighting shows seams, divides
+            space, and indicates moving parts.
+            {'\n'}
+            {'\n'}A material metaphor is the unifying theory of a rationalized
+            space and a system of motion. The material is grounded in tactile
+            reality, inspired by the study of paper and ink, yet technologically
+            advanced and open to imagination and magic.
+            {'\n'}
+            {'\n'}
+            Surfaces and edges of the material provide visual cues that are
+            grounded in reality. The use of familiar tactile attributes helps
+            users quickly understand affordances. Yet the flexibility of the
+            material creates new affordances that supersede those in the
+            physical world, without breaking the rules of physics.
+            {'\n'}
+            {'\n'}
+            The fundamentals of light, surface, and movement are key to
+            conveying how objects move, interact, and exist in space and in
+            relation to each other. Realistic lighting shows seams, divides
+            space, and indicates moving parts.
+          </TextComponent>
+        </ScrollView>
+      </Dialog.ScrollArea>
+      <Dialog.Actions>
+        <Button onPress={close}>Ok</Button>
+      </Dialog.Actions>
+    </Dialog>
+  </Portal>
+);
+
+const styles = StyleSheet.create({
+  smallPadding: {
+    paddingHorizontal: 0,
+  },
+  biggerPadding: {
+    paddingHorizontal: 24,
+  },
+});
+
+export default DialogWithLongText;

package/Examples/SampleUI/src/Examples/Dialogs/DialogWithRadioBtns.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { ScrollView, View, StyleSheet } from 'react-native';
+
+import {
+  Button,
+  Portal,
+  Dialog,
+  RadioButton,
+  TouchableRipple,
+} from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+
+type Props = {
+  visible: boolean;
+  close: () => void;
+};
+
+type CheckedState = 'normal' | 'first' | 'second' | 'third' | 'fourth';
+
+const DialogWithRadioBtns = ({ visible, close }: Props) => {
+  const [checked, setChecked] = React.useState<CheckedState>('normal');
+
+  return (
+    <Portal>
+      <Dialog onDismiss={close} visible={visible}>
+        <Dialog.Title>Choose an option</Dialog.Title>
+        <Dialog.ScrollArea style={styles.container}>
+          <ScrollView>
+            <View>
+              <TouchableRipple onPress={() => setChecked('normal')}>
+                <View style={styles.row}>
+                  <View pointerEvents="none">
+                    <RadioButton
+                      value="normal"
+                      status={checked === 'normal' ? 'checked' : 'unchecked'}
+                    />
+                  </View>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 1
+                  </TextComponent>
+                </View>
+              </TouchableRipple>
+              <TouchableRipple onPress={() => setChecked('second')}>
+                <View style={styles.row}>
+                  <View pointerEvents="none">
+                    <RadioButton
+                      value="second"
+                      status={checked === 'second' ? 'checked' : 'unchecked'}
+                    />
+                  </View>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 2
+                  </TextComponent>
+                </View>
+              </TouchableRipple>
+              <TouchableRipple onPress={() => setChecked('third')}>
+                <View style={styles.row}>
+                  <View pointerEvents="none">
+                    <RadioButton
+                      value="third"
+                      status={checked === 'third' ? 'checked' : 'unchecked'}
+                    />
+                  </View>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 3
+                  </TextComponent>
+                </View>
+              </TouchableRipple>
+              <TouchableRipple onPress={() => setChecked('fourth')}>
+                <View style={styles.row}>
+                  <View pointerEvents="none">
+                    <RadioButton
+                      value="fourth"
+                      status={checked === 'fourth' ? 'checked' : 'unchecked'}
+                    />
+                  </View>
+                  <TextComponent isSubheading style={styles.text}>
+                    Option 4
+                  </TextComponent>
+                </View>
+              </TouchableRipple>
+            </View>
+          </ScrollView>
+        </Dialog.ScrollArea>
+        <Dialog.Actions>
+          <Button onPress={close}>Cancel</Button>
+          <Button onPress={close}>Ok</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+export default DialogWithRadioBtns;
+
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: 170,
+    paddingHorizontal: 0,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  text: {
+    paddingLeft: 8,
+  },
+});

package/Examples/SampleUI/src/Examples/Dialogs/UndismissableDialog.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import { Button, Portal, Dialog, MD2Colors } from 'react-native-paper';
+
+import { TextComponent } from './DialogTextComponent';
+
+const UndismissableDialog = ({
+  visible,
+  close,
+}: {
+  visible: boolean;
+  close: () => void;
+}) => (
+  <Portal>
+    <Dialog onDismiss={close} visible={visible} dismissable={false}>
+      <Dialog.Title>Alert</Dialog.Title>
+      <Dialog.Content>
+        <TextComponent>This is an undismissable dialog!!</TextComponent>
+      </Dialog.Content>
+      <Dialog.Actions>
+        <Button color={MD2Colors.teal500} disabled>
+          Disagree
+        </Button>
+        <Button onPress={close}>Agree</Button>
+      </Dialog.Actions>
+    </Dialog>
+  </Portal>
+);
+
+export default UndismissableDialog;