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

package/Examples/SampleUI/src/Examples/CheckboxExample.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import {
+  Checkbox,
+  MD2Colors,
+  MD3Colors,
+  Paragraph,
+  Text,
+  TouchableRipple,
+} from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const CheckboxExample = () => {
+  const [checkedNormal, setCheckedNormal] = React.useState<boolean>(true);
+  const [checkedCustom, setCheckedCustom] = React.useState<boolean>(true);
+  const [indeterminate, setIndeterminate] = React.useState<boolean>(true);
+
+  const { isV3 } = useExampleTheme();
+  const TextComponent = isV3 ? Text : Paragraph;
+
+  return (
+    <ScreenWrapper style={styles.container}>
+      <TouchableRipple onPress={() => setCheckedNormal(!checkedNormal)}>
+        <View style={styles.row}>
+          <TextComponent>Normal</TextComponent>
+          <View pointerEvents="none">
+            <Checkbox status={checkedNormal ? 'checked' : 'unchecked'} />
+          </View>
+        </View>
+      </TouchableRipple>
+
+      <TouchableRipple onPress={() => setCheckedCustom(!checkedCustom)}>
+        <View style={styles.row}>
+          <TextComponent>Custom</TextComponent>
+          <View pointerEvents="none">
+            <Checkbox
+              color={isV3 ? MD3Colors.error70 : MD2Colors.blue500}
+              status={checkedCustom ? 'checked' : 'unchecked'}
+            />
+          </View>
+        </View>
+      </TouchableRipple>
+
+      <TouchableRipple onPress={() => setIndeterminate(!indeterminate)}>
+        <View style={styles.row}>
+          <TextComponent>Indeterminate</TextComponent>
+          <View pointerEvents="none">
+            <Checkbox status={indeterminate ? 'indeterminate' : 'unchecked'} />
+          </View>
+        </View>
+      </TouchableRipple>
+
+      <View style={styles.row}>
+        <TextComponent>Checked (Disabled)</TextComponent>
+        <Checkbox status="checked" disabled />
+      </View>
+      <View style={styles.row}>
+        <TextComponent>Unchecked (Disabled)</TextComponent>
+        <Checkbox status="unchecked" disabled />
+      </View>
+      <View style={styles.row}>
+        <TextComponent>Indeterminate (Disabled)</TextComponent>
+        <Checkbox status="indeterminate" disabled />
+      </View>
+    </ScreenWrapper>
+  );
+};
+
+CheckboxExample.title = 'Checkbox';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+});
+
+export default CheckboxExample;

package/Examples/SampleUI/src/Examples/CheckboxItemExample.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Checkbox } from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const CheckboxExample = () => {
+  const [checkedDefault, setCheckedDefault] = React.useState<boolean>(true);
+  const [checkedAndroid, setCheckedAndroid] = React.useState<boolean>(true);
+  const [checkedIOS, setCheckedIOS] = React.useState<boolean>(true);
+  const [checkedLeadingControl, setCheckedLeadingControl] =
+    React.useState<boolean>(true);
+  const [checkedDisabled, setCheckedDisabled] = React.useState<boolean>(true);
+  const [checkedLabelVariant, setCheckedLabelVariant] = React.useState(true);
+
+  const { isV3 } = useExampleTheme();
+
+  return (
+    <ScreenWrapper style={styles.container}>
+      <Checkbox.Item
+        label="Default (will look like whatever system this is running on)"
+        status={checkedDefault ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedDefault(!checkedDefault)}
+      />
+      <Checkbox.Item
+        label="Material Design"
+        mode="android"
+        status={checkedAndroid ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedAndroid(!checkedAndroid)}
+      />
+      <Checkbox.Item
+        label="iOS"
+        mode="ios"
+        status={checkedIOS ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedIOS(!checkedIOS)}
+      />
+      <Checkbox.Item
+        label="Default with leading control"
+        status={checkedLeadingControl ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedLeadingControl(!checkedLeadingControl)}
+        mode="ios"
+        position="leading"
+      />
+      <Checkbox.Item
+        label="Disabled checkbox"
+        status={checkedDisabled ? 'checked' : 'unchecked'}
+        onPress={() => setCheckedDisabled(!checkedDisabled)}
+        disabled
+      />
+      {isV3 && (
+        <Checkbox.Item
+          label="Default with titleLarge title variant"
+          labelVariant="titleLarge"
+          status={checkedLabelVariant ? 'checked' : 'unchecked'}
+          onPress={() => setCheckedLabelVariant(!checkedLabelVariant)}
+        />
+      )}
+    </ScreenWrapper>
+  );
+};
+
+CheckboxExample.title = 'Checkbox Item';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+  },
+});
+
+export default CheckboxExample;

package/Examples/SampleUI/src/Examples/ChipExample.tsx

@@ -0,0 +1,432 @@
+import * as React from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+
+import color from 'color';
+import {
+  Chip,
+  List,
+  MD2Colors,
+  MD3Colors,
+  Snackbar,
+  Text,
+} from 'react-native-paper';
+
+import { useExampleTheme } from '..';
+import ScreenWrapper from '../ScreenWrapper';
+
+const ChipExample = () => {
+  const [snackbarProperties, setSnackbarProperties] = React.useState({
+    visible: false,
+    text: '',
+  });
+  const { isV3 } = useExampleTheme();
+  const customColor = isV3 ? MD3Colors.error50 : MD2Colors.purple900;
+
+  return (
+    <>
+      <ScreenWrapper>
+        <List.Section title="Flat chip">
+          <View style={styles.row}>
+            <Chip selected onPress={() => {}} style={styles.chip}>
+              Simple
+            </Chip>
+            {isV3 && (
+              <>
+                <Chip
+                  selected
+                  showSelectedOverlay
+                  onPress={() => {}}
+                  style={styles.chip}
+                >
+                  With selected overlay
+                </Chip>
+                <Chip elevated onPress={() => {}} style={styles.chip}>
+                  Elevated
+                </Chip>
+                <Chip compact style={styles.chip} onPress={() => {}}>
+                  Compact chip
+                </Chip>
+              </>
+            )}
+            <Chip
+              onPress={() => {}}
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Close button pressed',
+                })
+              }
+              style={styles.chip}
+              closeIconAccessibilityLabel="Close icon accessibility label"
+            >
+              Close button
+            </Chip>
+            <Chip
+              icon="heart"
+              onPress={() => {}}
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Heart icon close button pressed',
+                })
+              }
+              style={styles.chip}
+            >
+              Icon
+            </Chip>
+            <Chip
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              onPress={() => {}}
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Avatar close button pressed',
+                })
+              }
+              style={styles.chip}
+            >
+              Avatar
+            </Chip>
+            <Chip
+              selected
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              onPress={() => {}}
+              style={styles.chip}
+            >
+              Avatar (selected)
+            </Chip>
+            <Chip
+              disabled
+              icon="heart"
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Disabled heart icon close button pressed',
+                })
+              }
+              style={styles.chip}
+            >
+              Icon (disabled)
+            </Chip>
+            <Chip
+              disabled
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              style={styles.chip}
+            >
+              Avatar (disabled)
+            </Chip>
+          </View>
+        </List.Section>
+        <List.Section title="Outlined chip">
+          <View style={styles.row}>
+            <Chip mode="outlined" onPress={() => {}} style={styles.chip}>
+              Simple
+            </Chip>
+            {isV3 && (
+              <>
+                <Chip
+                  mode="outlined"
+                  selected
+                  showSelectedOverlay
+                  onPress={() => {}}
+                  style={styles.chip}
+                >
+                  With selected overlay
+                </Chip>
+                <Chip
+                  mode="outlined"
+                  elevated
+                  onPress={() => {}}
+                  style={styles.chip}
+                >
+                  Elevated
+                </Chip>
+                <Chip
+                  mode="outlined"
+                  compact
+                  onPress={() => {}}
+                  style={styles.chip}
+                >
+                  Compact chip
+                </Chip>
+              </>
+            )}
+            <Chip
+              mode="outlined"
+              onPress={() => {}}
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Close button pressed',
+                })
+              }
+              style={styles.chip}
+            >
+              Close button
+            </Chip>
+            <Chip
+              mode="outlined"
+              icon="heart"
+              onPress={() => {}}
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Heart icon close button pressed',
+                })
+              }
+              style={styles.chip}
+            >
+              Icon
+            </Chip>
+            <Chip
+              mode="outlined"
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              onPress={() => {}}
+              style={styles.chip}
+            >
+              Avatar
+            </Chip>
+            <Chip
+              selected
+              mode="outlined"
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              onPress={() => {}}
+              style={styles.chip}
+            >
+              Avatar (selected)
+            </Chip>
+            <Chip
+              disabled
+              mode="outlined"
+              icon="heart"
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Disabled close button pressed',
+                })
+              }
+              style={styles.chip}
+            >
+              Icon (disabled)
+            </Chip>
+            <Chip
+              disabled
+              mode="outlined"
+              avatar={
+                <Image
+                  source={require('../../assets/images/avatar.png')}
+                  accessibilityIgnoresInvertColors
+                />
+              }
+              style={styles.chip}
+            >
+              Avatar (disabled)
+            </Chip>
+          </View>
+        </List.Section>
+        <List.Section title="Custom chip">
+          <View style={styles.row}>
+            {isV3 && (
+              <>
+                <Chip
+                  mode="outlined"
+                  onPress={() => {}}
+                  compact
+                  avatar={
+                    <Image
+                      source={require('../../assets/images/avatar.png')}
+                      accessibilityIgnoresInvertColors
+                    />
+                  }
+                  style={[styles.chip, styles.customBorderRadius]}
+                >
+                  Compact with custom border radius
+                </Chip>
+                <Chip
+                  mode="flat"
+                  onPress={() => {}}
+                  compact
+                  avatar={
+                    <Image
+                      source={require('../../assets/images/avatar.png')}
+                      accessibilityIgnoresInvertColors
+                    />
+                  }
+                  style={[styles.chip, styles.customBorderRadius]}
+                >
+                  Compact with custom border radius
+                </Chip>
+              </>
+            )}
+            <Chip
+              mode="outlined"
+              onPress={() => {}}
+              onLongPress={() =>
+                setSnackbarProperties({ visible: true, text: '' })
+              }
+              style={styles.chip}
+            >
+              With onLongPress
+            </Chip>
+            <Chip
+              selected
+              onPress={() => {}}
+              style={[
+                styles.chip,
+                {
+                  backgroundColor: color(customColor).alpha(0.2).rgb().string(),
+                },
+              ]}
+              selectedColor={customColor}
+            >
+              Flat selected chip with custom color
+            </Chip>
+            <Chip
+              onPress={() => {}}
+              style={styles.chip}
+              selectedColor={customColor}
+            >
+              Flat unselected chip with custom color
+            </Chip>
+            <Chip
+              selected
+              mode="outlined"
+              onPress={() => {}}
+              style={[
+                styles.chip,
+                {
+                  backgroundColor: color(customColor).alpha(0.2).rgb().string(),
+                },
+              ]}
+              selectedColor={customColor}
+            >
+              Outlined selected chip with custom color
+            </Chip>
+            <Chip
+              mode="outlined"
+              onPress={() => {}}
+              style={styles.chip}
+              selectedColor={customColor}
+            >
+              Outlined unselected chip with custom color
+            </Chip>
+            <Chip
+              onPress={() => {}}
+              style={styles.chip}
+              textStyle={styles.tiny}
+            >
+              With custom size
+            </Chip>
+            <Chip
+              onPress={() => {}}
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Close button pressed',
+                })
+              }
+              style={styles.bigTextFlex}
+              textStyle={styles.bigTextStyle}
+              ellipsizeMode="middle"
+            >
+              With a very big text: React Native Paper is a high-quality,
+              standard-compliant Material Design library that has you covered in
+              all major use-cases.
+            </Chip>
+            <Chip
+              onPress={() => {}}
+              onClose={() =>
+                setSnackbarProperties({
+                  visible: true,
+                  text: 'Custom icon close button pressed',
+                })
+              }
+              closeIcon="arrow-down"
+              style={styles.chip}
+              closeIconAccessibilityLabel="Custom Close icon accessibility label"
+            >
+              With custom close icon
+            </Chip>
+            <Chip
+              onPress={() => {}}
+              style={styles.chip}
+              textStyle={styles.tiny}
+            >
+              <Text variant="titleLarge">With custom text</Text>
+            </Chip>
+          </View>
+          <Chip mode="outlined" onPress={() => {}} style={styles.fullWidthChip}>
+            Full width chip
+          </Chip>
+        </List.Section>
+      </ScreenWrapper>
+      <Snackbar
+        visible={snackbarProperties.visible}
+        onDismiss={() => setSnackbarProperties({ visible: false, text: '' })}
+        duration={Snackbar.DURATION_SHORT}
+      >
+        {snackbarProperties.text}
+      </Snackbar>
+    </>
+  );
+};
+
+ChipExample.title = 'Chip';
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 12,
+  },
+  chip: {
+    margin: 4,
+  },
+  tiny: {
+    marginVertical: 2,
+    marginRight: 2,
+    marginLeft: 2,
+    minHeight: 19,
+    lineHeight: 19,
+  },
+  bigTextFlex: {
+    flex: 1,
+  },
+  bigTextStyle: {
+    flex: -1,
+  },
+  fullWidthChip: {
+    marginVertical: 4,
+    marginHorizontal: 12,
+  },
+  customBorderRadius: {
+    borderRadius: 16,
+  },
+});
+
+export default ChipExample;