react-native-acoustic-connect-beta 19.0.26 → 19.0.28

package/Examples/SampleUI/src/Examples/FABExample.tsx

@@ -1,226 +0,0 @@
-import * as React from 'react';
-import { Alert, StyleSheet, View } from 'react-native';
-
-import { FAB, Portal, Text } from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import { isWeb } from '../../utils';
-import ScreenWrapper from '../ScreenWrapper';
-
-type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
-type FABSize = 'small' | 'medium' | 'large';
-type FABMode = 'flat' | 'elevated';
-
-const FABExample = () => {
-  const [visible, setVisible] = React.useState<boolean>(true);
-  const [toggleStackOnLongPress, setToggleStackOnLongPress] =
-    React.useState<boolean>(false);
-  const [open, setOpen] = React.useState<boolean>(false);
-  const { isV3 } = useExampleTheme();
-
-  const variants = ['primary', 'secondary', 'tertiary', 'surface'];
-  const sizes = ['small', 'medium', 'large'];
-  const modes = ['flat', 'elevated'];
-
-  return (
-    <ScreenWrapper style={styles.container}>
-      <View style={styles.column}>
-        <FAB
-          icon={visible ? 'eye-off' : 'eye'}
-          size="small"
-          style={styles.fab}
-          onPress={() => setVisible(!visible)}
-        />
-      </View>
-      {isV3 && (
-        <>
-          <View style={styles.row}>
-            {variants.map((variant) => (
-              <View style={styles.fabVariant} key={variant}>
-                <FAB
-                  icon="pencil"
-                  style={styles.fab}
-                  onPress={() => {}}
-                  visible={visible}
-                  variant={variant as FABVariant}
-                />
-                {visible && <Text variant="bodyMedium">{variant}</Text>}
-              </View>
-            ))}
-          </View>
-          <View style={styles.row}>
-            {sizes.map((size) => (
-              <View style={styles.fabVariant} key={size}>
-                <FAB
-                  icon="pencil"
-                  style={styles.fab}
-                  onPress={() => {}}
-                  visible={visible}
-                  size={size as FABSize}
-                />
-                {visible && <Text variant="bodyMedium">{size}</Text>}
-              </View>
-            ))}
-          </View>
-          <View style={styles.row}>
-            {modes.map((mode) => (
-              <View style={styles.fabVariant} key={mode}>
-                <FAB
-                  icon="pencil"
-                  style={styles.fab}
-                  onPress={() => {}}
-                  visible={visible}
-                  mode={mode as FABMode}
-                />
-                {visible && <Text variant="bodyMedium">{mode}</Text>}
-              </View>
-            ))}
-          </View>
-        </>
-      )}
-      <View style={styles.column}>
-        {!isV3 && (
-          <>
-            <FAB
-              icon="heart"
-              style={styles.fab}
-              onPress={() => {}}
-              visible={visible}
-            />
-            <FAB
-              icon="heart"
-              style={styles.fab}
-              onPress={() => {}}
-              visible={visible}
-            />
-          </>
-        )}
-        <FAB
-          icon="map"
-          style={styles.fab}
-          customSize={64}
-          onPress={() => {}}
-          visible={visible}
-        />
-        <FAB
-          icon="map"
-          label="Extended FAB with custom size"
-          style={styles.fab}
-          customSize={64}
-          onPress={() => {}}
-          visible={visible}
-        />
-        <FAB
-          icon="check"
-          label="Extended FAB"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-        />
-        <FAB
-          icon="cancel"
-          label="Disabled FAB"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-          disabled
-        />
-        <FAB
-          icon="format-letter-case"
-          label="Mixed case"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-          uppercase
-        />
-        <FAB
-          icon="cancel"
-          label="Loading FAB"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-          loading
-        />
-        <Portal>
-          <FAB.Group
-            open={open}
-            icon={open ? 'calendar-today' : 'plus'}
-            accessibilityLabel="Calendar FAB"
-            toggleStackOnLongPress={toggleStackOnLongPress}
-            actions={[
-              { icon: 'plus', onPress: () => {} },
-              { icon: 'star', label: 'Star', onPress: () => {} },
-              { icon: 'email', label: 'Email', onPress: () => {} },
-              {
-                icon: 'bell',
-                label: 'Remind',
-                onPress: () => {},
-                size: isV3 ? 'small' : 'medium',
-              },
-              {
-                icon: toggleStackOnLongPress
-                  ? 'gesture-tap'
-                  : 'gesture-tap-hold',
-                label: toggleStackOnLongPress
-                  ? 'Toggle on Press'
-                  : 'Toggle on Long Press',
-                onPress: () => {
-                  setToggleStackOnLongPress(!toggleStackOnLongPress);
-                },
-              },
-            ]}
-            enableLongPressWhenStackOpened
-            onStateChange={({ open }: { open: boolean }) => setOpen(open)}
-            onPress={() => {
-              if (toggleStackOnLongPress) {
-                isWeb ? alert('Fab is Pressed') : Alert.alert('Fab is Pressed');
-                // do something on press when the speed dial is closed
-              } else if (open) {
-                isWeb ? alert('Fab is Pressed') : Alert.alert('Fab is Pressed');
-                // do something if the speed dial is open
-              }
-            }}
-            onLongPress={() => {
-              if (!toggleStackOnLongPress || open) {
-                isWeb
-                  ? alert('Fab is Long Pressed')
-                  : Alert.alert('Fab is Long Pressed');
-                // do something if the speed dial is open
-              }
-            }}
-            visible={visible}
-          />
-        </Portal>
-      </View>
-    </ScreenWrapper>
-  );
-};
-
-FABExample.title = 'Floating Action Button';
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 4,
-  },
-  row: {
-    marginBottom: 8,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  column: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  fab: {
-    margin: 8,
-  },
-  fabVariant: {
-    flex: 1,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-});
-
-export default FABExample;

package/Examples/SampleUI/src/Examples/IconButtonExample.tsx

@@ -1,230 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { IconButton, List, MD2Colors, MD3Colors } from 'react-native-paper';
-
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-
-const ButtonExample = () => {
-  const { isV3 } = useExampleTheme();
-  if (!isV3) {
-    return (
-      <ScreenWrapper contentContainerStyle={styles.v2Container}>
-        <IconButton icon="camera" size={24} onPress={() => {}} />
-        <IconButton
-          icon="lock"
-          size={24}
-          iconColor={MD2Colors.green500}
-          onPress={() => {}}
-        />
-        <IconButton icon="" size={24} onPress={() => {}} loading />
-        <IconButton icon="camera" size={36} onPress={() => {}} />
-        <IconButton
-          icon="lock"
-          size={36}
-          onPress={() => {}}
-          style={{ backgroundColor: MD2Colors.lightGreen200 }}
-        />
-        <IconButton icon="heart" size={60} onPress={() => {}} />
-      </ScreenWrapper>
-    );
-  }
-
-  return (
-    <ScreenWrapper contentContainerStyle={styles.v3Container}>
-      <List.Section title="Default">
-        <View style={styles.row}>
-          <IconButton icon="camera" size={24} onPress={() => {}} />
-          <IconButton icon="camera" selected size={24} onPress={() => {}} />
-          <IconButton icon="camera" disabled size={24} onPress={() => {}} />
-          <IconButton icon="camera" size={24} onPress={() => {}} loading />
-        </View>
-      </List.Section>
-
-      <List.Section title="Contained">
-        <View style={styles.row}>
-          <IconButton
-            icon="camera"
-            mode="contained"
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="camera"
-            mode="contained"
-            selected
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="camera"
-            mode="contained"
-            disabled
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon=""
-            mode="contained"
-            selected
-            loading
-            size={24}
-            onPress={() => {}}
-          />
-        </View>
-      </List.Section>
-
-      <List.Section title="Contained-tonal">
-        <View style={styles.row}>
-          <IconButton
-            icon="camera"
-            mode="contained-tonal"
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="camera"
-            selected
-            mode="contained-tonal"
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="camera"
-            mode="contained-tonal"
-            disabled
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon=""
-            mode="contained-tonal"
-            disabled
-            size={24}
-            onPress={() => {}}
-            loading
-          />
-        </View>
-      </List.Section>
-
-      <List.Section title="Outlined">
-        <View style={styles.row}>
-          <IconButton
-            icon="camera-outline"
-            mode="outlined"
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            selected
-            icon="camera"
-            mode="outlined"
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="camera"
-            mode="outlined"
-            disabled
-            size={24}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon=""
-            mode="outlined"
-            disabled
-            size={24}
-            onPress={() => {}}
-            loading
-          />
-        </View>
-      </List.Section>
-
-      <List.Section title="Custom">
-        <View style={styles.row}>
-          <IconButton
-            icon="lock"
-            size={24}
-            iconColor={MD3Colors.tertiary50}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="eye"
-            mode="contained"
-            style={styles.square}
-            size={24}
-            iconColor={MD3Colors.tertiary50}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="eye"
-            mode="contained"
-            style={styles.slightlyRounded}
-            size={24}
-            contentStyle={{ padding: 8 }}
-            iconColor={MD3Colors.tertiary50}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="heart"
-            mode="contained-tonal"
-            style={styles.differentBorderRadius}
-            size={24}
-            iconColor={MD3Colors.tertiary50}
-            onPress={() => {}}
-          />
-          <IconButton
-            icon="heart"
-            mode="outlined"
-            style={styles.differentBorderRadius}
-            size={24}
-            iconColor={MD3Colors.tertiary50}
-            onPress={() => {}}
-          />
-          <IconButton icon="camera" size={36} onPress={() => {}} />
-          <IconButton
-            icon="lock"
-            size={36}
-            onPress={() => {}}
-            containerColor={MD3Colors.tertiary60}
-          />
-          <IconButton icon="heart" size={60} onPress={() => {}} />
-          <IconButton icon="" size={60} onPress={() => {}} loading />
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-ButtonExample.title = 'Icon Button';
-
-const styles = StyleSheet.create({
-  v2Container: {
-    flexDirection: 'row',
-    padding: 8,
-  },
-  v3Container: {
-    flexDirection: 'column',
-  },
-  row: {
-    flexDirection: 'row',
-    paddingHorizontal: 12,
-  },
-  square: {
-    borderRadius: 0,
-  },
-  slightlyRounded: {
-    borderRadius: 4,
-    width: 48,
-    height: 48,
-  },
-  differentBorderRadius: {
-    borderTopLeftRadius: 2,
-    borderTopRightRadius: 4,
-    borderBottomLeftRadius: 8,
-    borderBottomRightRadius: 6,
-  },
-});
-
-export default ButtonExample;

package/Examples/SampleUI/src/Examples/IconExample.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, View, Image } from 'react-native';
-
-import { Icon, List } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-const AssetIcon = ({ size, testID }: { size: number; testID: string }) => (
-  <Image
-    accessibilityIgnoresInvertColors
-    source={require('../../assets/images/paper-icon.png')}
-    style={{ width: size, height: size }}
-    testID={testID}
-  />
-);
-
-const IconExample = () => {
-  return (
-    <ScreenWrapper>
-      <List.Section title="Default icon (MaterialCommunityIcon)">
-        <View style={styles.row}>
-          <Icon source="camera" size={24} />
-        </View>
-      </List.Section>
-      <List.Section title="Image icon">
-        <View style={styles.row}>
-          <Icon source={{ uri: 'https://picsum.photos/700' }} size={48} />
-        </View>
-      </List.Section>
-      <List.Section title="Render function icon">
-        <View style={styles.row}>
-          <Icon source={AssetIcon} size={48} />
-        </View>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-IconExample.title = 'Icon';
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    marginLeft: 16,
-  },
-});
-
-export default IconExample;

package/Examples/SampleUI/src/Examples/ListAccordionExample.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-
-import { List, Divider } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-const ListAccordionExample = () => {
-  const [expanded, setExpanded] = React.useState<boolean>(true);
-
-  const _handlePress = () => {
-    setExpanded(!expanded);
-  };
-
-  return (
-    <ScreenWrapper>
-      <List.Section title="Expandable list item">
-        <List.Accordion
-          left={(props) => <List.Icon {...props} icon="folder" />}
-          title="Expandable list item"
-        >
-          <List.Item title="List item 1" />
-          <List.Item title="List item 2" />
-        </List.Accordion>
-        <List.Accordion
-          left={(props) => <List.Icon {...props} icon="folder" />}
-          title="Start expanded"
-          expanded={expanded}
-          onPress={_handlePress}
-        >
-          <List.Item title="List item 1" />
-        </List.Accordion>
-      </List.Section>
-      <Divider />
-      <List.Section title="Expandable & multiline list item">
-        <List.Accordion
-          title="Expandable list item"
-          description="Describes the expandable list item"
-        >
-          <List.Item title="List item 1" />
-          <List.Item title="List item 2" />
-        </List.Accordion>
-      </List.Section>
-      <Divider />
-      <List.Section title="Expandable list with icons">
-        <List.Accordion
-          left={(props) => <List.Icon {...props} icon="star" />}
-          title="Accordion item 1"
-        >
-          <List.Item
-            left={(props) => <List.Icon {...props} icon="thumb-up" />}
-            title="List item 1"
-          />
-          <List.Item
-            left={(props) => <List.Icon {...props} icon="thumb-down" />}
-            title="List item 2"
-          />
-        </List.Accordion>
-      </List.Section>
-    </ScreenWrapper>
-  );
-};
-
-ListAccordionExample.title = 'List.Accordion';
-
-export default ListAccordionExample;

package/Examples/SampleUI/src/Examples/ListAccordionGroupExample.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react';
-
-import { List } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-type State = string | number | undefined;
-
-const ListAccordionGroupExample = () => {
-  const [expandedId, setExpandedId] = React.useState<State>(undefined);
-
-  const _onAccordionPress = (newExpandedId: string | number) =>
-    expandedId === newExpandedId
-      ? setExpandedId(undefined)
-      : setExpandedId(newExpandedId);
-
-  return (
-    <ScreenWrapper>
-      <List.AccordionGroup>
-        <List.Section title="Uncontrolled Accordion Group example">
-          <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
-            title="Expandable list item"
-            id="1"
-          >
-            <List.Item title="List item 1" />
-            <List.Item title="List item 2" />
-          </List.Accordion>
-          <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
-            title="Expandable list item 2"
-            id="2"
-          >
-            <List.Item title="List item 1" />
-          </List.Accordion>
-          <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
-            title="Expandable list item 2"
-            id="3"
-          >
-            <List.Item title="Another item" />
-          </List.Accordion>
-        </List.Section>
-      </List.AccordionGroup>
-      <List.AccordionGroup
-        expandedId={expandedId}
-        onAccordionPress={_onAccordionPress}
-      >
-        <List.Section title="Controlled Accordion Group example">
-          <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
-            title="Expandable list item"
-            id="1"
-          >
-            <List.Item title="List item 1" />
-            <List.Item title="List item 2" />
-          </List.Accordion>
-          <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
-            title="Expandable list item 2"
-            id="2"
-          >
-            <List.Item title="List item 1" />
-          </List.Accordion>
-          <List.Accordion
-            left={(props) => <List.Icon {...props} icon="folder" />}
-            title="Expandable list item 2"
-            id="3"
-          >
-            <List.Item title="Another item" />
-          </List.Accordion>
-        </List.Section>
-      </List.AccordionGroup>
-    </ScreenWrapper>
-  );
-};
-
-ListAccordionGroupExample.title = 'List.AccordionGroup';
-
-export default ListAccordionGroupExample;