react-native-acoustic-connect 19.0.9 → 19.0.28

package/Examples/SampleUI/src/Examples/SearchbarExample.tsx

@@ -1,249 +0,0 @@
-import * as React from 'react';
-import { Keyboard, StyleSheet } from 'react-native';
-
-import type { DrawerNavigationProp } from '@react-navigation/drawer';
-import type { StackNavigationProp } from '@react-navigation/stack';
-import {
-  List,
-  MD3Colors,
-  Searchbar,
-  Snackbar,
-  Avatar,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
-const SearchExample = ({ navigation }: Props) => {
-  const [isVisible, setIsVisible] = React.useState(false);
-  const [searchQueries, setSearchQuery] = React.useState({
-    searchBarMode: '',
-    traileringIcon: '',
-    traileringIconWithRightItem: '',
-    rightItem: '',
-    loadingBarMode: '',
-    searchViewMode: '',
-    searchWithoutBottomLine: '',
-    loadingViewMode: '',
-    clickableBack: '',
-    clickableDrawer: '',
-    clickableLoading: '',
-  });
-
-  const { isV3, colors } = useExampleTheme();
-
-  return (
-    <>
-      <ScreenWrapper>
-        {!isV3 && (
-          <Searchbar
-            placeholder="Search"
-            onChangeText={(query) =>
-              setSearchQuery({ ...searchQueries, searchBarMode: query })
-            }
-            value={searchQueries.searchBarMode}
-            style={styles.searchbar}
-          />
-        )}
-        {isV3 && (
-          <List.Section title="Bar mode">
-            <Searchbar
-              placeholder="Search"
-              onChangeText={(query) =>
-                setSearchQuery({ ...searchQueries, searchBarMode: query })
-              }
-              value={searchQueries.searchBarMode}
-              style={styles.searchbar}
-              mode="bar"
-            />
-            <Searchbar
-              placeholder="Trailering icon"
-              onChangeText={(query) =>
-                setSearchQuery({ ...searchQueries, traileringIcon: query })
-              }
-              value={searchQueries.traileringIcon}
-              traileringIcon={'microphone'}
-              traileringIconColor={
-                isVisible ? MD3Colors.error40 : colors.onSurfaceVariant
-              }
-              traileringIconAccessibilityLabel={'microphone button'}
-              onTraileringIconPress={() => setIsVisible(true)}
-              style={styles.searchbar}
-              mode="bar"
-            />
-            <Searchbar
-              mode="bar"
-              placeholder="Trailering icon with right item"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  traileringIconWithRightItem: query,
-                })
-              }
-              value={searchQueries.traileringIconWithRightItem}
-              traileringIcon={'microphone'}
-              traileringIconColor={
-                isVisible ? MD3Colors.error40 : colors.onSurfaceVariant
-              }
-              traileringIconAccessibilityLabel={'microphone button'}
-              onTraileringIconPress={() => setIsVisible(true)}
-              right={(props) => (
-                <Avatar.Image
-                  {...props}
-                  size={30}
-                  source={require('../../assets/images/avatar.png')}
-                />
-              )}
-              style={styles.searchbar}
-            />
-            <Searchbar
-              mode="bar"
-              placeholder="Right item"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  rightItem: query,
-                })
-              }
-              value={searchQueries.rightItem}
-              right={(props) => (
-                <Avatar.Image
-                  {...props}
-                  size={30}
-                  source={require('../../assets/images/avatar.png')}
-                />
-              )}
-              style={styles.searchbar}
-            />
-            <Searchbar
-              placeholder="Loading"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  loadingBarMode: query,
-                })
-              }
-              value={searchQueries.loadingBarMode}
-              style={styles.searchbar}
-              mode="bar"
-              loading
-              traileringIcon={'microphone'}
-            />
-          </List.Section>
-        )}
-        {isV3 && (
-          <List.Section title="View mode">
-            <Searchbar
-              placeholder="Search"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  searchViewMode: query,
-                })
-              }
-              value={searchQueries.searchViewMode}
-              style={styles.searchbar}
-              mode="view"
-            />
-            <Searchbar
-              placeholder="Search without bottom line"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  searchWithoutBottomLine: query,
-                })
-              }
-              value={searchQueries.searchWithoutBottomLine}
-              style={styles.searchbar}
-              mode="view"
-              showDivider={false}
-            />
-            <Searchbar
-              placeholder="Loading"
-              onChangeText={(query) =>
-                setSearchQuery({
-                  ...searchQueries,
-                  loadingViewMode: query,
-                })
-              }
-              value={searchQueries.loadingViewMode}
-              style={styles.searchbar}
-              mode="view"
-              loading
-            />
-          </List.Section>
-        )}
-        <List.Section title="Clickable icon">
-          <Searchbar
-            placeholder="Search"
-            onChangeText={(query) =>
-              setSearchQuery({
-                ...searchQueries,
-                clickableBack: query,
-              })
-            }
-            value={searchQueries.clickableBack}
-            onIconPress={() => {
-              Keyboard.dismiss();
-              navigation.goBack();
-            }}
-            onClearIconPress={() => {
-              Keyboard.dismiss();
-            }}
-            icon={{ source: 'arrow-left', direction: 'auto' }}
-            style={styles.searchbar}
-          />
-          <Searchbar
-            placeholder="Search"
-            onChangeText={(query) =>
-              setSearchQuery({
-                ...searchQueries,
-                clickableDrawer: query,
-              })
-            }
-            value={searchQueries.clickableDrawer}
-            onIconPress={() => {
-              Keyboard.dismiss();
-              (navigation as any as DrawerNavigationProp<{}>).openDrawer();
-            }}
-            icon="menu"
-            style={styles.searchbar}
-          />
-          <Searchbar
-            placeholder="Search"
-            onChangeText={(query) =>
-              setSearchQuery({
-                ...searchQueries,
-                clickableLoading: query,
-              })
-            }
-            value={searchQueries.clickableLoading}
-            loading
-            style={styles.searchbar}
-          />
-        </List.Section>
-      </ScreenWrapper>
-      <Snackbar
-        visible={isVisible}
-        onDismiss={() => setIsVisible(false)}
-        duration={Snackbar.DURATION_SHORT}
-      >
-        Microphone button pressed
-      </Snackbar>
-    </>
-  );
-};
-
-SearchExample.title = 'Searchbar';
-
-const styles = StyleSheet.create({
-  searchbar: {
-    margin: 4,
-  },
-});
-
-export default SearchExample;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'train' | 'drive';
-
-const themeMock = {
-  colors: {
-    onSurface: '#3700B3',
-    secondaryContainer: '#3700B3',
-    onSecondaryContainer: '#FFFFFF',
-  },
-};
-
-const SegmentButtonCustomColorCheck = () => {
-  const [themeValue, setThemeValue] = React.useState<TransportMode>('walk');
-  const [colorValue, setColorValue] = React.useState<TransportMode>('walk');
-
-  return (
-    <List.Section title={`Segmented Button - Custom Colors`}>
-      <List.Subheader>Via Theme</List.Subheader>
-      <SegmentedButtons
-        value={themeValue}
-        onValueChange={setThemeValue}
-        theme={themeMock}
-        buttons={[
-          {
-            value: 'walk',
-            icon: 'walk',
-            label: 'Walking',
-            disabled: true,
-            style: styles.button,
-          },
-          {
-            value: 'train',
-            icon: 'train',
-            label: 'Transit',
-            style: styles.button,
-          },
-          {
-            value: 'drive',
-            icon: 'car',
-            label: 'Driving',
-            style: styles.button,
-          },
-        ]}
-        style={styles.group}
-      />
-      <List.Subheader>Via Props</List.Subheader>
-      <SegmentedButtons<TransportMode>
-        value={colorValue}
-        onValueChange={setColorValue}
-        theme={themeMock}
-        buttons={[
-          {
-            value: 'walk',
-            icon: 'walk',
-            label: 'Walking',
-            checkedColor: '#F9AA33',
-            style: styles.button,
-          },
-          {
-            value: 'train',
-            icon: 'train',
-            showSelectedCheck: true,
-            checkedColor: '#F9AA33',
-            uncheckedColor: '#000000',
-            label: 'Transit',
-            style: styles.button,
-          },
-          {
-            value: 'drive',
-            icon: 'car',
-            checkedColor: '#F9AA33',
-            label: 'Driving',
-            style: styles.button,
-          },
-        ]}
-        style={styles.group}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-  },
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentButtonCustomColorCheck;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'train' | 'drive';
-
-const SegmentedButtonDefault = () => {
-  const [value, setValue] = React.useState<TransportMode>('walk');
-
-  return (
-    <List.Section title={`Segmented Button`}>
-      <SegmentedButtons
-        value={value}
-        onValueChange={setValue}
-        buttons={[
-          {
-            value: 'walk',
-            icon: 'walk',
-            label: 'Walking',
-            style: styles.button,
-          },
-          {
-            value: 'train',
-            icon: 'train',
-            label: 'Transit',
-            style: styles.button,
-          },
-          {
-            value: 'drive',
-            icon: 'car',
-            label: 'Driving',
-            style: styles.button,
-          },
-        ]}
-        style={styles.group}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-  },
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentedButtonDefault;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'disabled' | 'drive';
-
-const SegmentedButtonDisabled = () => {
-  const [value, setValue] = React.useState<TransportMode>('walk');
-
-  return (
-    <List.Section title={`Segmented Button - disabled`}>
-      <SegmentedButtons
-        onValueChange={setValue}
-        buttons={[
-          {
-            value: 'walk',
-            label: 'Walking',
-            style: styles.button,
-          },
-          {
-            value: 'disabled',
-            label: 'Disabled',
-            disabled: true,
-            style: styles.button,
-          },
-          {
-            value: 'drive',
-            label: 'Driving',
-            style: styles.button,
-          },
-        ]}
-        value={value}
-        style={styles.group}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-  },
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentedButtonDisabled;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'transit' | 'drive';
-
-const SegmentedButtonMultiselect = () => {
-  const [value, setValue] = React.useState<TransportMode[]>([]);
-
-  return (
-    <List.Section title={`Segmented Button - multiselect`}>
-      <SegmentedButtons
-        multiSelect
-        onValueChange={setValue}
-        value={value}
-        style={styles.group}
-        buttons={[
-          {
-            style: styles.button,
-            value: 'walk',
-            label: 'Walking',
-            showSelectedCheck: true,
-          },
-          {
-            style: styles.button,
-            value: 'transit',
-            label: 'Transit',
-            showSelectedCheck: true,
-          },
-          {
-            style: styles.button,
-            value: 'drive',
-            label: 'Driving',
-            showSelectedCheck: true,
-          },
-        ]}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-  button: {
-    flex: 1,
-  },
-});
-
-export default SegmentedButtonMultiselect;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type Size = 'size-s' | 'size-m' | 'size-l' | 'size-xl' | 'size-xxl';
-
-const SegmentedButtonMultiselectIcons = () => {
-  const [value, setValue] = React.useState<Size[]>([]);
-
-  return (
-    <List.Section title={`Segmented Button - multiselect only icons`}>
-      <SegmentedButtons
-        multiSelect
-        onValueChange={setValue}
-        value={value}
-        style={styles.group}
-        buttons={[
-          {
-            value: 'size-s',
-            icon: 'size-s',
-          },
-          {
-            value: 'size-m',
-            icon: 'size-m',
-          },
-          {
-            value: 'size-l',
-            icon: 'size-l',
-          },
-          {
-            value: 'size-xl',
-            icon: 'size-xl',
-          },
-          {
-            value: 'size-xxl',
-            icon: 'size-xxl',
-          },
-        ]}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentedButtonMultiselectIcons;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx

@@ -1,114 +0,0 @@
-import * as React from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
-
-import { Card, IconButton, SegmentedButtons } from 'react-native-paper';
-
-import { restaurantsData } from '../../../utils';
-
-type PriceRange = '1' | '2' | '3' | '4';
-
-const SegmentedButtonMultiselectRealCase = () => {
-  const [value, setValue] = React.useState<PriceRange[]>([]);
-
-  const filteredData = React.useMemo(
-    () =>
-      restaurantsData.filter((item) =>
-        value.includes(item.price.toString() as PriceRange)
-      ),
-    [value]
-  );
-
-  return (
-    <View style={styles.container}>
-      <SegmentedButtons
-        value={value}
-        onValueChange={setValue}
-        multiSelect
-        buttons={[
-          {
-            value: '1',
-            label: '$',
-            style: styles.button,
-            showSelectedCheck: true,
-          },
-          {
-            value: '2',
-            label: '$$',
-            style: styles.button,
-            showSelectedCheck: true,
-          },
-          {
-            value: '3',
-            label: '$$$',
-            style: styles.button,
-            showSelectedCheck: true,
-          },
-          {
-            value: '4',
-            label: '$$$$',
-            style: styles.button,
-            showSelectedCheck: true,
-          },
-        ]}
-        style={styles.group}
-      />
-      <FlatList
-        data={value.length > 0 ? filteredData : restaurantsData}
-        keyExtractor={(item) => item.id}
-        contentContainerStyle={styles.contentContainer}
-        renderItem={({ item }) => {
-          return (
-            <Card mode="contained" style={styles.card}>
-              <Card.Content style={styles.content}>
-                <Card.Cover style={styles.cover} source={item.cover} />
-                <Card.Title
-                  title={item.name}
-                  subtitle={'$'.repeat(item.price)}
-                  titleVariant="titleMedium"
-                  style={styles.title}
-                  right={() => <IconButton icon={'bookmark-outline'} />}
-                />
-              </Card.Content>
-            </Card>
-          );
-        }}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 16,
-    flex: 1,
-  },
-  contentContainer: {
-    paddingBottom: 16,
-  },
-  card: {
-    marginHorizontal: 16,
-    marginTop: 16,
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
-  cover: {
-    width: 72,
-    height: 72,
-  },
-  title: {
-    flexShrink: 1,
-    marginVertical: 0,
-  },
-  button: {
-    flex: 1,
-  },
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-SegmentedButtonMultiselectRealCase.title = 'Restaurants';
-
-export default SegmentedButtonMultiselectRealCase;

package/Examples/SampleUI/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { List, SegmentedButtons } from 'react-native-paper';
-
-type TransportMode = 'walk' | 'train' | 'drive';
-
-const SegmentedButtonOnlyIcons = () => {
-  const [value, setValue] = React.useState<TransportMode>('walk');
-
-  return (
-    <List.Section title={`Segmented Button - only icons`}>
-      <SegmentedButtons
-        onValueChange={setValue}
-        style={styles.group}
-        value={value}
-        buttons={[
-          {
-            icon: 'walk',
-            value: 'walk',
-          },
-          {
-            icon: 'train',
-            value: 'train',
-          },
-          {
-            icon: 'car',
-            value: 'drive',
-          },
-        ]}
-      />
-    </List.Section>
-  );
-};
-
-const styles = StyleSheet.create({
-  group: { paddingHorizontal: 20, justifyContent: 'center' },
-});
-
-export default SegmentedButtonOnlyIcons;