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

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

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

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

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

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

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

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

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

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