react-native-acoustic-connect 19.0.9 → 19.0.28

package/Examples/SampleUI/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -1,220 +0,0 @@
-import * as React from 'react';
-import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
-import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
-
-import {
-  Avatar,
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
-  Text,
-} from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-
-import CustomFAB from './CustomFAB';
-import CustomFABControls, {
-  Controls,
-  initialControls,
-} from './CustomFABControls';
-import { useExampleTheme } from '../..';
-import { animatedFABExampleData } from '../../../utils';
-
-type Item = {
-  id: string;
-  sender: string;
-  header: string;
-  message: string;
-  initials: string;
-  date: string;
-  read: boolean;
-  favorite: boolean;
-  bgColor: string;
-};
-
-const AnimatedFABExample = () => {
-  const { colors, isV3 } = useExampleTheme();
-
-  const isIOS = Platform.OS === 'ios';
-
-  const [extended, setExtended] = React.useState<boolean>(true);
-  const [visible, setVisible] = React.useState<boolean>(true);
-
-  const [controls, setControls] = React.useState<Controls>(initialControls);
-
-  const { current: velocity } = React.useRef<Animated.Value>(
-    new Animated.Value(0)
-  );
-
-  const renderItem = React.useCallback(
-    ({ item }: { item: Item }) => {
-      const TextComponent = isV3 ? Text : Paragraph;
-
-      return (
-        <View style={styles.itemContainer}>
-          <Avatar.Text
-            style={[styles.avatar, { backgroundColor: item.bgColor }]}
-            label={item.initials}
-            color={isV3 ? MD3Colors.primary100 : MD2Colors.white}
-            size={40}
-          />
-          <View style={styles.itemTextContentContainer}>
-            <View style={styles.itemHeaderContainer}>
-              <TextComponent
-                variant="labelLarge"
-                style={[styles.header, !item.read && styles.read]}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-              >
-                {item.sender}
-              </TextComponent>
-              <TextComponent
-                variant="labelLarge"
-                style={[styles.date, !item.read && styles.read]}
-              >
-                {item.date}
-              </TextComponent>
-            </View>
-
-            <View style={styles.itemMessageContainer}>
-              <View style={styles.flex}>
-                <TextComponent
-                  variant="labelLarge"
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
-                  style={!item.read && styles.read}
-                >
-                  {item.header}
-                </TextComponent>
-                <TextComponent
-                  variant="labelLarge"
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >
-                  {item.message}
-                </TextComponent>
-              </View>
-
-              <Icon
-                name={item.favorite ? 'star' : 'star-outline'}
-                color={
-                  item.favorite
-                    ? isV3
-                      ? MD3Colors.error70
-                      : MD2Colors.orange500
-                    : isV3
-                    ? MD3Colors.neutralVariant70
-                    : MD2Colors.grey500
-                }
-                size={20}
-                onPress={() => setVisible(!visible)}
-                style={styles.icon}
-              />
-            </View>
-          </View>
-        </View>
-      );
-    },
-    [visible, isV3]
-  );
-
-  const onScroll = ({
-    nativeEvent,
-  }: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const currentScrollPosition =
-      Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
-
-    if (!isIOS) {
-      return velocity.setValue(currentScrollPosition);
-    }
-
-    setExtended(currentScrollPosition <= 0);
-  };
-
-  const _keyExtractor = React.useCallback(
-    (item: { id: string }) => item.id,
-    []
-  );
-
-  const { animateFrom, iconMode } = controls;
-
-  return (
-    <>
-      <CustomFABControls controls={controls} setControls={setControls} />
-      <FlatList
-        data={animatedFABExampleData}
-        renderItem={renderItem}
-        keyExtractor={_keyExtractor}
-        onEndReachedThreshold={0}
-        scrollEventThrottle={16}
-        showsVerticalScrollIndicator={false}
-        style={[
-          styles.flex,
-          {
-            backgroundColor: colors?.background,
-          },
-        ]}
-        contentContainerStyle={styles.container}
-        onScroll={onScroll}
-      />
-
-      <CustomFAB
-        visible={visible}
-        animatedValue={velocity}
-        extended={extended}
-        label={'New Message'}
-        animateFrom={animateFrom}
-        iconMode={iconMode}
-      />
-    </>
-  );
-};
-
-AnimatedFABExample.title = 'Animated Floating Action Button';
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    paddingBottom: 60,
-  },
-  avatar: {
-    marginRight: 16,
-    marginTop: 8,
-  },
-  flex: {
-    flex: 1,
-  },
-  itemContainer: {
-    marginBottom: 16,
-    flexDirection: 'row',
-  },
-  itemTextContentContainer: {
-    flexDirection: 'column',
-    flex: 1,
-  },
-  itemHeaderContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  itemMessageContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flexGrow: 1,
-  },
-  read: {
-    fontWeight: 'bold',
-  },
-  icon: {
-    marginLeft: 16,
-    alignSelf: 'flex-end',
-  },
-  date: {
-    fontSize: 12,
-  },
-  header: {
-    fontSize: 14,
-    marginRight: 8,
-    flex: 1,
-  },
-});
-
-export default AnimatedFABExample;

package/Examples/SampleUI/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
-
-import { AnimatedFAB } from 'react-native-paper';
-
-import { useExampleTheme } from '../..';
-
-type CustomFABProps = {
-  animatedValue: Animated.Value;
-  visible: boolean;
-  extended: boolean;
-  label: string;
-  animateFrom: 'left' | 'right';
-  iconMode?: 'static' | 'dynamic';
-  style?: StyleProp<ViewStyle>;
-};
-
-const CustomFAB = ({
-  animatedValue,
-  visible,
-  extended,
-  label,
-  animateFrom,
-  style,
-  iconMode,
-}: CustomFABProps) => {
-  const [isExtended, setIsExtended] = React.useState(true);
-  const { isV3 } = useExampleTheme();
-
-  const isIOS = Platform.OS === 'ios';
-
-  React.useEffect(() => {
-    if (!isIOS) {
-      animatedValue.addListener(({ value }: { value: number }) => {
-        setIsExtended(value <= 0);
-      });
-    } else setIsExtended(extended);
-  }, [animatedValue, extended, isIOS]);
-
-  const fabStyle = { [animateFrom]: 16 };
-
-  return (
-    <AnimatedFAB
-      icon={'plus'}
-      label={label}
-      extended={isExtended}
-      uppercase={!isV3}
-      onPress={() => console.log('Pressed')}
-      visible={visible}
-      animateFrom={animateFrom}
-      iconMode={iconMode}
-      style={[styles.fabStyle, style, fabStyle]}
-    />
-  );
-};
-
-export default CustomFAB;
-
-const styles = StyleSheet.create({
-  fabStyle: {
-    bottom: 16,
-    position: 'absolute',
-  },
-});

package/Examples/SampleUI/src/Examples/AnimatedFABExample/CustomFABControls.tsx

@@ -1,146 +0,0 @@
-import React from 'react';
-import { FlatList, ListRenderItemInfo, StyleSheet, View } from 'react-native';
-
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import type {
-  AnimatedFABAnimateFrom,
-  AnimatedFABIconMode,
-} from 'react-native-paper';
-import { Paragraph, RadioButton, Text } from 'react-native-paper';
-
-import { useExampleTheme } from '../..';
-
-export type Controls = {
-  iconMode: AnimatedFABIconMode;
-  animateFrom: AnimatedFABAnimateFrom;
-};
-
-export const initialControls: Controls = {
-  iconMode: 'static',
-  animateFrom: 'right',
-};
-
-type Props = {
-  controls: Controls;
-  setControls(controls: React.SetStateAction<Controls>): void;
-};
-
-type ControlValue = AnimatedFABIconMode | AnimatedFABAnimateFrom;
-
-type CustomControlProps = {
-  name: string;
-  options: ControlValue[];
-  value: ControlValue;
-  onChange(newValue: ControlValue): void;
-};
-
-const CustomControl = ({
-  name,
-  options,
-  value,
-  onChange,
-}: CustomControlProps) => {
-  const { isV3 } = useExampleTheme();
-
-  const _renderItem = React.useCallback(
-    ({ item }: ListRenderItemInfo<(typeof options)[number]>) => {
-      const TextComponent = isV3 ? Text : Paragraph;
-
-      return (
-        <TouchableOpacity
-          accessibilityRole="button"
-          onPress={() => onChange(item)}
-          style={styles.controlItem}
-        >
-          <TextComponent variant="labelLarge">{item}</TextComponent>
-
-          <RadioButton
-            value="dynamic"
-            status={value === item ? 'checked' : 'unchecked'}
-          />
-        </TouchableOpacity>
-      );
-    },
-    [value, onChange, isV3]
-  );
-
-  const _keyExtractor = React.useCallback(
-    (item: (typeof options)[number]) => item,
-    []
-  );
-  const TextComponent = isV3 ? Text : Paragraph;
-
-  return (
-    <View style={styles.controlWrapper}>
-      <TextComponent variant="labelLarge">{name}</TextComponent>
-
-      <FlatList
-        horizontal
-        scrollEnabled={false}
-        data={options}
-        renderItem={_renderItem}
-        keyExtractor={_keyExtractor}
-        contentContainerStyle={styles.controlItemsList}
-      />
-    </View>
-  );
-};
-
-const CustomFABControls = ({
-  setControls,
-  controls: { animateFrom, iconMode },
-}: Props) => {
-  const { colors } = useExampleTheme();
-
-  const setIconMode = (newIconMode: AnimatedFABIconMode) =>
-    setControls((state) => ({ ...state, iconMode: newIconMode }));
-
-  const setAnimateFrom = (newAnimateFrom: AnimatedFABAnimateFrom) =>
-    setControls((state) => ({ ...state, animateFrom: newAnimateFrom }));
-
-  return (
-    <View
-      style={[
-        styles.controlsWrapper,
-        {
-          backgroundColor: colors.background,
-        },
-      ]}
-    >
-      <CustomControl
-        name="iconMode"
-        options={['static', 'dynamic']}
-        value={iconMode}
-        onChange={setIconMode}
-      />
-
-      <CustomControl
-        name="animateFrom"
-        options={['left', 'right']}
-        value={animateFrom}
-        onChange={setAnimateFrom}
-      />
-    </View>
-  );
-};
-
-export default CustomFABControls;
-
-const styles = StyleSheet.create({
-  controlsWrapper: {
-    paddingHorizontal: 16,
-  },
-  controlWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  controlItemsList: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  controlItem: {
-    marginLeft: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});

package/Examples/SampleUI/src/Examples/AnimatedFABExample/index.ts

@@ -1 +0,0 @@
-export { default } from './AnimatedFABExample';

package/Examples/SampleUI/src/Examples/AppbarExample.tsx

@@ -1,263 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
-
-import type { StackNavigationProp } from '@react-navigation/stack';
-import {
-  Appbar,
-  FAB,
-  List,
-  Paragraph,
-  RadioButton,
-  Snackbar,
-  Switch,
-  Text,
-} from 'react-native-paper';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { useExampleTheme } from '..';
-import { yellowA200 } from '../styles/themes/v2/colors';
-import ScreenWrapper from '../ScreenWrapper';
-
-type Props = {
-  navigation: StackNavigationProp<{}>;
-};
-
-type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
-
-const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
-const MEDIUM_FAB_HEIGHT = 56;
-
-const AppbarExample = ({ navigation }: Props) => {
-  const [showLeftIcon, setShowLeftIcon] = React.useState(true);
-  const [showSubtitle, setShowSubtitle] = React.useState(true);
-  const [showSearchIcon, setShowSearchIcon] = React.useState(true);
-  const [showMoreIcon, setShowMoreIcon] = React.useState(true);
-  const [showCustomColor, setShowCustomColor] = React.useState(false);
-  const [showExactTheme, setShowExactTheme] = React.useState(false);
-  const [appbarMode, setAppbarMode] = React.useState<AppbarModes>('small');
-  const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
-  const [showElevated, setShowElevated] = React.useState(false);
-  const [showSnackbar, setShowSnackbar] = React.useState(false);
-
-  const theme = useExampleTheme();
-  const { bottom, left, right } = useSafeAreaInsets();
-  const height = theme.isV3 ? 80 : 56;
-
-  const isCenterAlignedMode = appbarMode === 'center-aligned';
-
-  React.useLayoutEffect(() => {
-    navigation.setOptions({
-      header: () => (
-        <Appbar.Header
-          style={showCustomColor ? styles.customColor : null}
-          theme={{
-            mode: showExactTheme ? 'exact' : 'adaptive',
-          }}
-          mode={appbarMode}
-          elevated={showElevated}
-        >
-          {showLeftIcon && (
-            <Appbar.BackAction onPress={() => navigation.goBack()} />
-          )}
-          <Appbar.Content
-            title="Title"
-            subtitle={showSubtitle ? 'Subtitle' : null}
-            onPress={() => setShowSnackbar(true)}
-          />
-          {isCenterAlignedMode
-            ? false
-            : showCalendarIcon && (
-                <Appbar.Action icon="calendar" onPress={() => {}} />
-              )}
-          {showSearchIcon && (
-            <Appbar.Action icon="magnify" onPress={() => {}} />
-          )}
-          {showMoreIcon && (
-            <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
-          )}
-        </Appbar.Header>
-      ),
-    });
-  }, [
-    navigation,
-    showLeftIcon,
-    showSubtitle,
-    showSearchIcon,
-    showMoreIcon,
-    showCustomColor,
-    showExactTheme,
-    appbarMode,
-    showCalendarIcon,
-    isCenterAlignedMode,
-    showElevated,
-  ]);
-
-  const TextComponent = theme.isV3 ? Text : Paragraph;
-
-  const renderFAB = () => {
-    return (
-      <FAB
-        mode={theme.isV3 ? 'flat' : 'elevated'}
-        size="medium"
-        icon="plus"
-        onPress={() => {}}
-        style={[
-          styles.fab,
-          theme.isV3
-            ? { top: (height - MEDIUM_FAB_HEIGHT) / 2 }
-            : { bottom: height / 2 + bottom },
-        ]}
-      />
-    );
-  };
-
-  const renderDefaultOptions = () => (
-    <>
-      <View style={styles.row}>
-        <TextComponent>Left icon</TextComponent>
-        <Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
-      </View>
-      {!theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Subtitle</TextComponent>
-          <Switch value={showSubtitle} onValueChange={setShowSubtitle} />
-        </View>
-      )}
-      <View style={styles.row}>
-        <TextComponent>Search icon</TextComponent>
-        <Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
-      </View>
-      <View style={styles.row}>
-        <TextComponent>More icon</TextComponent>
-        <Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
-      </View>
-      {theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Calendar icon</TextComponent>
-          <Switch
-            value={isCenterAlignedMode ? false : showCalendarIcon}
-            disabled={isCenterAlignedMode}
-            onValueChange={setShowCalendarIcon}
-          />
-        </View>
-      )}
-      <View style={styles.row}>
-        <TextComponent>Custom Color</TextComponent>
-        <Switch value={showCustomColor} onValueChange={setShowCustomColor} />
-      </View>
-      {!theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Exact Dark Theme</TextComponent>
-          <Switch value={showExactTheme} onValueChange={setShowExactTheme} />
-        </View>
-      )}
-      {theme.isV3 && (
-        <View style={styles.row}>
-          <TextComponent>Elevated</TextComponent>
-          <Switch value={showElevated} onValueChange={setShowElevated} />
-        </View>
-      )}
-    </>
-  );
-
-  return (
-    <>
-      <ScreenWrapper
-        style={{ marginBottom: height + bottom }}
-        contentContainerStyle={styles.contentContainer}
-      >
-        {theme.isV3 ? (
-          <List.Section title="Default options">
-            {renderDefaultOptions()}
-          </List.Section>
-        ) : (
-          renderDefaultOptions()
-        )}
-        {theme.isV3 && (
-          <List.Section title="Appbar Modes">
-            <RadioButton.Group
-              value={appbarMode}
-              onValueChange={(value: string) =>
-                setAppbarMode(value as AppbarModes)
-              }
-            >
-              <View style={styles.row}>
-                <TextComponent>Small (default)</TextComponent>
-                <RadioButton value="small" />
-              </View>
-              <View style={styles.row}>
-                <TextComponent>Medium</TextComponent>
-                <RadioButton value="medium" />
-              </View>
-              <View style={styles.row}>
-                <TextComponent>Large</TextComponent>
-                <RadioButton value="large" />
-              </View>
-              <View style={styles.row}>
-                <TextComponent>Center-aligned</TextComponent>
-                <RadioButton value="center-aligned" />
-              </View>
-            </RadioButton.Group>
-          </List.Section>
-        )}
-      </ScreenWrapper>
-      <Appbar
-        style={[
-          styles.bottom,
-          {
-            height: height + bottom,
-          },
-          theme.isV3 && {
-            backgroundColor: theme.colors.elevation.level2,
-          },
-        ]}
-        safeAreaInsets={{ bottom, left, right }}
-        theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }}
-      >
-        <Appbar.Action icon="archive" onPress={() => {}} />
-        <Appbar.Action icon="email" onPress={() => {}} />
-        <Appbar.Action icon="label" onPress={() => {}} />
-        <Appbar.Action icon="delete" onPress={() => {}} />
-        {theme.isV3 && renderFAB()}
-      </Appbar>
-      {!theme.isV3 && renderFAB()}
-      <Snackbar
-        visible={showSnackbar}
-        onDismiss={() => setShowSnackbar(false)}
-        duration={Snackbar.DURATION_SHORT}
-      >
-        Heading pressed
-      </Snackbar>
-    </>
-  );
-};
-
-AppbarExample.title = 'Appbar';
-
-export default AppbarExample;
-
-const styles = StyleSheet.create({
-  contentContainer: {
-    paddingVertical: 8,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  bottom: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  fab: {
-    position: 'absolute',
-    right: 16,
-  },
-  customColor: {
-    backgroundColor: yellowA200,
-  },
-});