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

package/Examples/SampleUI/src/DrawerItems.tsx

@@ -1,322 +0,0 @@
-import * as React from 'react';
-import { I18nManager, StyleSheet, View, Platform } from 'react-native';
-
-import { DrawerContentScrollView } from '@react-navigation/drawer';
-import Constants, { ExecutionEnvironment } from 'expo-constants';
-// import * as Updates from 'expo-updates';
-import {
-  Badge,
-  Button,
-  Dialog,
-  Drawer,
-  MD2Colors,
-  MD3Colors,
-  Switch,
-  Text,
-  TouchableRipple,
-  Portal,
-} from 'react-native-paper';
-
-import { deviceColorsSupported, isWeb } from '../utils';
-
-import { PreferencesContext, useExampleTheme } from './';
-
-const DrawerItemsData = [
-  {
-    label: 'Inbox',
-    icon: 'inbox',
-    key: 0,
-    right: () => <Text variant="labelLarge">44</Text>,
-  },
-  {
-    label: 'Starred',
-    icon: 'star',
-    key: 1,
-    right: ({ color }: { color: string }) => (
-      <Badge
-        visible
-        size={8}
-        style={[styles.badge, { backgroundColor: color }]}
-      />
-    ),
-  },
-  { label: 'Sent mail', icon: 'send', key: 2 },
-  { label: 'Colored label', icon: 'palette', key: 3 },
-  {
-    label: 'A very long title that will be truncated',
-    icon: 'delete',
-    key: 4,
-    right: () => <Badge visible size={8} style={styles.badge} />,
-  },
-];
-
-const DrawerCollapsedItemsData = [
-  {
-    label: 'Inbox',
-    focusedIcon: 'inbox',
-    unfocusedIcon: 'inbox-outline',
-    key: 0,
-    badge: 44,
-  },
-  {
-    label: 'Starred',
-    focusedIcon: 'star',
-    unfocusedIcon: 'star-outline',
-    key: 1,
-  },
-  {
-    label: 'Sent mail',
-    focusedIcon: 'send',
-    unfocusedIcon: 'send-outline',
-    key: 2,
-  },
-  {
-    label: 'A very long title that will be truncated',
-    focusedIcon: 'delete',
-    unfocusedIcon: 'delete-outline',
-    key: 3,
-  },
-  {
-    label: 'Full width',
-    focusedIcon: 'arrow-all',
-    key: 4,
-  },
-  {
-    focusedIcon: 'bell',
-    unfocusedIcon: 'bell-outline',
-    key: 5,
-    badge: true,
-  },
-];
-
-function DrawerItems() {
-  const [drawerItemIndex, setDrawerItemIndex] = React.useState<number>(0);
-  const [showRTLDialog, setShowRTLDialog] = React.useState(false);
-  const preferences = React.useContext(PreferencesContext);
-
-  const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
-
-  const { isV3, colors } = useExampleTheme();
-  const isIOS = Platform.OS === 'ios';
-  const expoGoExecution =
-    Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
-
-  if (!preferences) throw new Error('PreferencesContext not provided');
-
-  const {
-    toggleShouldUseDeviceColors,
-    toggleTheme,
-    toggleRtl: toggleRTL,
-    toggleThemeVersion,
-    toggleCollapsed,
-    toggleCustomFont,
-    toggleRippleEffect,
-    customFontLoaded,
-    rippleEffectEnabled,
-    collapsed,
-    rtl: isRTL,
-    theme: { dark: isDarkTheme },
-    shouldUseDeviceColors,
-  } = preferences;
-
-  const _handleToggleRTL = () => {
-    if (expoGoExecution) {
-      setShowRTLDialog(true);
-      return;
-    }
-
-    toggleRTL();
-    I18nManager.forceRTL(!isRTL);
-    if (isWeb) {
-      Updates.reloadAsync();
-    }
-  };
-
-  const _handleDismissRTLDialog = () => {
-    setShowRTLDialog(false);
-  };
-
-  const coloredLabelTheme = {
-    colors: isV3
-      ? {
-          secondaryContainer: MD3Colors.tertiary80,
-          onSecondaryContainer: MD3Colors.tertiary20,
-        }
-      : {
-          primary: MD2Colors.tealA200,
-        },
-  };
-
-  return (
-    <DrawerContentScrollView
-      alwaysBounceVertical={false}
-      style={[
-        styles.drawerContent,
-        {
-          backgroundColor: colors.surface,
-        },
-      ]}
-    >
-      {isV3 && collapsed && (
-        <Drawer.Section style={styles.collapsedSection}>
-          {DrawerCollapsedItemsData.map((props, index) => (
-            <Drawer.CollapsedItem
-              {...props}
-              key={props.key}
-              active={drawerItemIndex === index}
-              onPress={() => {
-                _setDrawerItem(index);
-                index === 4 && toggleCollapsed();
-              }}
-            />
-          ))}
-        </Drawer.Section>
-      )}
-      {!collapsed && (
-        <>
-          <Drawer.Section title="Example items">
-            {DrawerItemsData.map((props, index) => (
-              <Drawer.Item
-                {...props}
-                key={props.key}
-                theme={props.key === 3 ? coloredLabelTheme : undefined}
-                active={drawerItemIndex === index}
-                onPress={() => _setDrawerItem(index)}
-              />
-            ))}
-          </Drawer.Section>
-
-          <Drawer.Section title="Preferences">
-            {deviceColorsSupported && isV3 ? (
-              <TouchableRipple onPress={toggleShouldUseDeviceColors}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Use device colors *</Text>
-                  <View pointerEvents="none">
-                    <Switch value={shouldUseDeviceColors} />
-                  </View>
-                </View>
-              </TouchableRipple>
-            ) : null}
-            <TouchableRipple onPress={toggleTheme}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                <Text variant="labelLarge">Dark Theme</Text>
-                <View pointerEvents="none">
-                  <Switch value={isDarkTheme} />
-                </View>
-              </View>
-            </TouchableRipple>
-
-            {!isWeb && (
-              <TouchableRipple onPress={_handleToggleRTL}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">RTL</Text>
-                  <View pointerEvents="none">
-                    <Switch value={isRTL} />
-                  </View>
-                </View>
-              </TouchableRipple>
-            )}
-
-            <TouchableRipple onPress={toggleThemeVersion}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                <Text variant="labelLarge">MD 2</Text>
-                <View pointerEvents="none">
-                  <Switch value={!isV3} />
-                </View>
-              </View>
-            </TouchableRipple>
-
-            {isV3 && (
-              <TouchableRipple onPress={toggleCollapsed}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Collapsed drawer *</Text>
-                  <View pointerEvents="none">
-                    <Switch value={collapsed} />
-                  </View>
-                </View>
-              </TouchableRipple>
-            )}
-
-            {isV3 && (
-              <TouchableRipple onPress={toggleCustomFont}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Custom font *</Text>
-                  <View pointerEvents="none">
-                    <Switch value={customFontLoaded} />
-                  </View>
-                </View>
-              </TouchableRipple>
-            )}
-
-            <TouchableRipple onPress={toggleRippleEffect}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                <Text variant="labelLarge">
-                  {isIOS ? 'Highlight' : 'Ripple'} effect *
-                </Text>
-                <View pointerEvents="none">
-                  <Switch value={rippleEffectEnabled} />
-                </View>
-              </View>
-            </TouchableRipple>
-          </Drawer.Section>
-          {isV3 && !collapsed && (
-            <Text variant="bodySmall" style={styles.annotation}>
-              * - available only for MD3
-            </Text>
-          )}
-          <Text variant="bodySmall" style={styles.annotation}>
-            React Native Paper Version{' '}
-            {require('react-native-paper/package.json').version}
-          </Text>
-        </>
-      )}
-      <Portal>
-        <Dialog visible={showRTLDialog} onDismiss={_handleDismissRTLDialog}>
-          <Dialog.Title>Changing to RTL</Dialog.Title>
-          <Dialog.Content>
-            <Text variant="bodyMedium">
-              Due to Expo Go limitations it is impossible to change RTL
-              dynamically. To do so, you need to create a development build of
-              Example app or change it statically by setting{' '}
-              <Text variant="labelMedium">forcesRTL</Text> property to true in{' '}
-              <Text variant="labelMedium">app.json</Text> within{' '}
-              <Text variant="labelMedium">example</Text> directory.
-            </Text>
-            <Dialog.Actions>
-              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
-            </Dialog.Actions>
-          </Dialog.Content>
-        </Dialog>
-      </Portal>
-    </DrawerContentScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  drawerContent: {
-    flex: 1,
-  },
-  preference: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  v3Preference: {
-    height: 56,
-    paddingHorizontal: 28,
-  },
-  badge: {
-    alignSelf: 'center',
-  },
-  collapsedSection: {
-    marginTop: 16,
-  },
-  annotation: {
-    marginHorizontal: 24,
-    marginVertical: 6,
-  },
-});
-
-export default DrawerItems;

package/Examples/SampleUI/src/ExampleList.tsx

@@ -1,175 +0,0 @@
-import * as React from 'react';
-import { FlatList } from 'react-native';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
-import { Divider, List } from 'react-native-paper';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
-import AnimatedFABExample from './Examples/AnimatedFABExample';
-import AppbarExample from './Examples/AppbarExample';
-import AvatarExample from './Examples/AvatarExample';
-import BadgeExample from './Examples/BadgeExample';
-import BannerExample from './Examples/BannerExample';
-import BottomNavigationBarExample from './Examples/BottomNavigationBarExample';
-import BottomNavigationExample from './Examples/BottomNavigationExample';
-import ButtonExample from './Examples/ButtonExample';
-import CardExample from './Examples/CardExample';
-import CheckboxExample from './Examples/CheckboxExample';
-import CheckboxItemExample from './Examples/CheckboxItemExample';
-import ChipExample from './Examples/ChipExample';
-import DataTableExample from './Examples/DataTableExample';
-import DialogExample from './Examples/DialogExample';
-import DividerExample from './Examples/DividerExample';
-import FABExample from './Examples/FABExample';
-import IconButtonExample from './Examples/IconButtonExample';
-import IconExample from './Examples/IconExample';
-import ListAccordionExample from './Examples/ListAccordionExample';
-import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
-import ListItemExample from './Examples/ListItemExample';
-import ListSectionExample from './Examples/ListSectionExample';
-import MaterialBottomTabNavigatorExample from './Examples/MaterialBottomTabNavigatorExample';
-import MenuExample from './Examples/MenuExample';
-import ProgressBarExample from './Examples/ProgressBarExample';
-import RadioButtonExample from './Examples/RadioButtonExample';
-import RadioButtonGroupExample from './Examples/RadioButtonGroupExample';
-import RadioButtonItemExample from './Examples/RadioButtonItemExample';
-import SearchbarExample from './Examples/SearchbarExample';
-import SegmentedButtonMultiselectRealCase from './Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase';
-import SegmentedButtonRealCase from './Examples/SegmentedButtons/SegmentedButtonRealCase';
-import SegmentedButtonExample from './Examples/SegmentedButtonsExample';
-import SnackbarExample from './Examples/SnackbarExample';
-import SurfaceExample from './Examples/SurfaceExample';
-import SwitchExample from './Examples/SwitchExample';
-import TeamDetails from './Examples/TeamDetails';
-import TeamsList from './Examples/TeamsList';
-import TextExample from './Examples/TextExample';
-import TextInputExample from './Examples/TextInputExample';
-import ThemeExample from './Examples/ThemeExample';
-import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
-import ToggleButtonExample from './Examples/ToggleButtonExample';
-import TooltipExample from './Examples/TooltipExample';
-import TouchableRippleExample from './Examples/TouchableRippleExample';
-
-import { useExampleTheme } from '.';
-
-export const mainExamples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
-  animatedFab: AnimatedFABExample,
-  activityIndicator: ActivityIndicatorExample,
-  appbar: AppbarExample,
-  avatar: AvatarExample,
-  badge: BadgeExample,
-  banner: BannerExample,
-  bottomNavigationBarExample: BottomNavigationBarExample,
-  bottomNavigation: BottomNavigationExample,
-  button: ButtonExample,
-  card: CardExample,
-  checkbox: CheckboxExample,
-  checkboxItem: CheckboxItemExample,
-  chip: ChipExample,
-  dataTable: DataTableExample,
-  dialog: DialogExample,
-  divider: DividerExample,
-  fab: FABExample,
-  iconButton: IconButtonExample,
-  icon: IconExample,
-  listAccordion: ListAccordionExample,
-  listAccordionGroup: ListAccordionExampleGroup,
-  listSection: ListSectionExample,
-  listItem: ListItemExample,
-  materialBottomTabNavigator: MaterialBottomTabNavigatorExample,
-  menu: MenuExample,
-  progressbar: ProgressBarExample,
-  radio: RadioButtonExample,
-  radioGroup: RadioButtonGroupExample,
-  radioItem: RadioButtonItemExample,
-  searchbar: SearchbarExample,
-  segmentedButton: SegmentedButtonExample,
-  snackbar: SnackbarExample,
-  surface: SurfaceExample,
-  switch: SwitchExample,
-  text: TextExample,
-  textInput: TextInputExample,
-  toggleButton: ToggleButtonExample,
-  tooltipExample: TooltipExample,
-  touchableRipple: TouchableRippleExample,
-  theme: ThemeExample,
-  themingWithReactNavigation: ThemingWithReactNavigation,
-};
-
-export const nestedExamples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
-  themingWithReactNavigation: ThemingWithReactNavigation,
-  teamDetails: TeamDetails,
-  teamsList: TeamsList,
-  segmentedButtonRealCase: SegmentedButtonRealCase,
-  segmentedButtonMultiselectRealCase: SegmentedButtonMultiselectRealCase,
-};
-
-export const examples: Record<
-  string,
-  React.ComponentType<any> & { title: string }
-> = {
-  ...mainExamples,
-  ...nestedExamples,
-};
-
-type Props = {
-  navigation: StackNavigationProp<{ [key: string]: undefined }>;
-};
-
-type Item = {
-  id: string;
-  data: (typeof mainExamples)[string];
-};
-
-const data = Object.keys(mainExamples).map(
-  (id): Item => ({ id, data: mainExamples[id] })
-);
-
-export default function ExampleList({ navigation }: Props) {
-  const keyExtractor = (item: { id: string }) => item.id;
-
-  const { colors, isV3 } = useExampleTheme();
-  const safeArea = useSafeAreaInsets();
-
-  const renderItem = ({ item }: { item: Item }) => {
-    const { data, id } = item;
-
-    if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) {
-      return null;
-    }
-
-    return (
-      <List.Item
-        unstable_pressDelay={65}
-        title={data.title}
-        onPress={() => navigation.navigate(id)}
-      />
-    );
-  };
-
-  return (
-    <FlatList
-      contentContainerStyle={{
-        backgroundColor: colors.background,
-        paddingBottom: safeArea.bottom,
-        paddingLeft: safeArea.left,
-        paddingRight: safeArea.right,
-      }}
-      style={{
-        backgroundColor: colors.background,
-      }}
-      showsVerticalScrollIndicator={false}
-      ItemSeparatorComponent={Divider}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
-      data={data}
-    />
-  );
-}

package/Examples/SampleUI/src/Examples/ActivityIndicatorExample.tsx

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import {
-  ActivityIndicator,
-  FAB,
-  List,
-  MD2Colors,
-  MD3Colors,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const ActivityIndicatorExample = () => {
-  const [animating, setAnimating] = React.useState<boolean>(true);
-  const { isV3 } = useExampleTheme();
-
-  return (
-    <ScreenWrapper style={styles.container}>
-      <View style={styles.row}>
-        <FAB
-          size="small"
-          icon={animating ? 'pause' : 'play'}
-          onPress={() => setAnimating(!animating)}
-        />
-      </View>
-
-      <List.Section title="Default">
-        <ActivityIndicator animating={animating} hidesWhenStopped={false} />
-      </List.Section>
-
-      <List.Section title="Large">
-        <ActivityIndicator
-          animating={animating}
-          size="large"
-          hidesWhenStopped={false}
-        />
-      </List.Section>
-
-      <List.Section title="Custom size">
-        <ActivityIndicator
-          animating={animating}
-          size={100}
-          hidesWhenStopped={false}
-        />
-      </List.Section>
-
-      <List.Section title="Custom color">
-        <ActivityIndicator
-          animating={animating}
-          color={isV3 ? MD3Colors.error20 : MD2Colors.red500}
-          hidesWhenStopped={false}
-        />
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-ActivityIndicatorExample.title = 'Activity Indicator';
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 4,
-  },
-  row: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 10,
-  },
-});
-
-export default ActivityIndicatorExample;