react-native-acoustic-connect-beta 19.0.25 → 19.0.27

package/Examples/SampleUI/src/components/ActivityIndicator.tsx

@@ -1,254 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  Easing,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Whether to show the indicator or hide it.
-   */
-  animating?: boolean;
-  /**
-   * The color of the spinner.
-   */
-  color?: string;
-  /**
-   * Size of the indicator.
-   */
-  size?: 'small' | 'large' | number;
-  /**
-   * Whether the indicator should hide when not animating.
-   */
-  hidesWhenStopped?: boolean;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-const DURATION = 2400;
-
-/**
- * Activity indicator is used to present progress of some activity in the app.
- * It can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
- * );
- *
- * export default MyComponent;
- * ```
- */
-const ActivityIndicator = ({
-  animating = true,
-  color: indicatorColor,
-  hidesWhenStopped = true,
-  size: indicatorSize = 'small',
-  style,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: timer } = React.useRef<Animated.Value>(
-    new Animated.Value(0)
-  );
-  const { current: fade } = React.useRef<Animated.Value>(
-    new Animated.Value(!animating && hidesWhenStopped ? 0 : 1)
-  );
-
-  const rotation = React.useRef<Animated.CompositeAnimation | undefined>(
-    undefined
-  );
-
-  const {
-    animation: { scale },
-  } = theme;
-
-  const startRotation = React.useCallback(() => {
-    // Show indicator
-    Animated.timing(fade, {
-      duration: 200 * scale,
-      toValue: 1,
-      isInteraction: false,
-      useNativeDriver: true,
-    }).start();
-
-    // Circular animation in loop
-    if (rotation.current) {
-      timer.setValue(0);
-      // $FlowFixMe
-      Animated.loop(rotation.current).start();
-    }
-  }, [scale, fade, timer]);
-
-  const stopRotation = () => {
-    if (rotation.current) {
-      rotation.current.stop();
-    }
-  };
-
-  React.useEffect(() => {
-    if (rotation.current === undefined) {
-      // Circular animation in loop
-      rotation.current = Animated.timing(timer, {
-        duration: DURATION,
-        easing: Easing.linear,
-        // Animated.loop does not work if useNativeDriver is true on web
-        useNativeDriver: Platform.OS !== 'web',
-        toValue: 1,
-        isInteraction: false,
-      });
-    }
-
-    if (animating) {
-      startRotation();
-    } else if (hidesWhenStopped) {
-      // Hide indicator first and then stop rotation
-      Animated.timing(fade, {
-        duration: 200 * scale,
-        toValue: 0,
-        useNativeDriver: true,
-        isInteraction: false,
-      }).start(stopRotation);
-    } else {
-      stopRotation();
-    }
-  }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);
-
-  const color = indicatorColor || theme.colors?.primary;
-  const size =
-    typeof indicatorSize === 'string'
-      ? indicatorSize === 'small'
-        ? 24
-        : 48
-      : indicatorSize
-      ? indicatorSize
-      : 24;
-
-  const frames = (60 * DURATION) / 1000;
-  const easing = Easing.bezier(0.4, 0.0, 0.7, 1.0);
-  const containerStyle = {
-    width: size,
-    height: size / 2,
-    overflow: 'hidden' as const,
-  };
-
-  return (
-    <View
-      style={[styles.container, style]}
-      {...rest}
-      accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: animating }}
-    >
-      <Animated.View
-        style={[{ width: size, height: size, opacity: fade }]}
-        collapsable={false}
-      >
-        {[0, 1].map((index) => {
-          // Thanks to https://github.com/n4kz/react-native-indicators for the great work
-          const inputRange = Array.from(
-            new Array(frames),
-            (_, frameIndex) => frameIndex / (frames - 1)
-          );
-          const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
-            let progress = (2 * frameIndex) / (frames - 1);
-            const rotation = index ? +(360 - 15) : -(180 - 15);
-
-            if (progress > 1.0) {
-              progress = 2.0 - progress;
-            }
-
-            const direction = index ? -1 : +1;
-
-            return `${direction * (180 - 30) * easing(progress) + rotation}deg`;
-          });
-
-          const layerStyle = {
-            width: size,
-            height: size,
-            transform: [
-              {
-                rotate: timer.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],
-                }),
-              },
-            ],
-          };
-
-          const viewportStyle = {
-            width: size,
-            height: size,
-            transform: [
-              {
-                translateY: index ? -size / 2 : 0,
-              },
-              {
-                rotate: timer.interpolate({ inputRange, outputRange }),
-              },
-            ],
-          };
-
-          const offsetStyle = index ? { top: size / 2 } : null;
-
-          const lineStyle = {
-            width: size,
-            height: size,
-            borderColor: color,
-            borderWidth: size / 10,
-            borderRadius: size / 2,
-          };
-
-          return (
-            <Animated.View key={index} style={[styles.layer]}>
-              <Animated.View style={layerStyle}>
-                <Animated.View
-                  style={[containerStyle, offsetStyle]}
-                  collapsable={false}
-                >
-                  <Animated.View style={viewportStyle}>
-                    <Animated.View style={containerStyle} collapsable={false}>
-                      <Animated.View style={lineStyle} />
-                    </Animated.View>
-                  </Animated.View>
-                </Animated.View>
-              </Animated.View>
-            </Animated.View>
-          );
-        })}
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-
-  layer: {
-    ...StyleSheet.absoluteFillObject,
-
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default ActivityIndicator;

package/Examples/SampleUI/src/components/Appbar/Appbar.tsx

@@ -1,364 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-  ColorValue,
-} from 'react-native';
-
-import color from 'color';
-
-import AppbarContent from './AppbarContent';
-import {
-  AppbarModes,
-  DEFAULT_APPBAR_HEIGHT,
-  getAppbarBackgroundColor,
-  modeAppbarHeight,
-  renderAppbarContent,
-} from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { MD3Elevation, ThemeProp } from '../../types';
-import Surface from '../Surface';
-
-export type Props = Omit<
-  Partial<React.ComponentPropsWithRef<typeof View>>,
-  'style'
-> & {
-  /**
-   * Whether the background color is a dark color. A dark appbar will render light text and vice-versa.
-   */
-  dark?: boolean;
-  /**
-   * Content of the `Appbar`.
-   */
-  children: React.ReactNode;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Mode of the Appbar.
-   * - `small` - Appbar with default height (64).
-   * - `medium` - Appbar with medium height (112).
-   * - `large` - Appbar with large height (152).
-   * - `center-aligned` - Appbar with default height and center-aligned title.
-   */
-  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Whether Appbar background should have the elevation along with primary color pigment.
-   */
-  elevated?: boolean;
-  /**
-   * Safe area insets for the Appbar. This can be used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
-   */
-  safeAreaInsets?: {
-    bottom?: number;
-    top?: number;
-    left?: number;
-    right?: number;
-  };
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-};
-
-/**
- * A component to display action items in a bar. It can be placed at the top or bottom.
- * The top bar usually contains the screen title, controls such as navigation buttons, menu button etc.
- * The bottom bar usually provides access to a drawer and up to four actions.
- *
- * By default Appbar uses primary color as a background, in dark theme with `adaptive` mode it will use surface colour instead.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more informations
- *
- * ## Usage
- * ### Top bar
- * ```js
- * import * as React from 'react';
- * import { Appbar } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Appbar.Header>
- *     <Appbar.BackAction onPress={() => {}} />
- *     <Appbar.Content title="Title" />
- *     <Appbar.Action icon="calendar" onPress={() => {}} />
- *     <Appbar.Action icon="magnify" onPress={() => {}} />
- *   </Appbar.Header>
- * );
- *
- * export default MyComponent;
- * ```
- *
- * ### Bottom bar
- * ```js
- * import * as React from 'react';
- * import { StyleSheet } from 'react-native';
- * import { Appbar, FAB, useTheme } from 'react-native-paper';
- * import { useSafeAreaInsets } from 'react-native-safe-area-context';
- *
- * const BOTTOM_APPBAR_HEIGHT = 80;
- * const MEDIUM_FAB_HEIGHT = 56;
- *
- * const MyComponent = () => {
- *   const { bottom } = useSafeAreaInsets();
- *   const theme = useTheme();
- *
- *   return (
- *     <Appbar
- *       style={[
- *         styles.bottom,
- *         {
- *           height: BOTTOM_APPBAR_HEIGHT + bottom,
- *           backgroundColor: theme.colors.elevation.level2,
- *         },
- *       ]}
- *       safeAreaInsets={{ bottom }}
- *     >
- *       <Appbar.Action icon="archive" onPress={() => {}} />
- *       <Appbar.Action icon="email" onPress={() => {}} />
- *       <Appbar.Action icon="label" onPress={() => {}} />
- *       <Appbar.Action icon="delete" onPress={() => {}} />
- *       <FAB
- *         mode="flat"
- *         size="medium"
- *         icon="plus"
- *         onPress={() => {}}
- *         style={[
- *           styles.fab,
- *           { top: (BOTTOM_APPBAR_HEIGHT - MEDIUM_FAB_HEIGHT) / 2 },
- *         ]}
- *       />
- *     </Appbar>
- *   );
- * };
- *
- * const styles = StyleSheet.create({
- *   bottom: {
- *     backgroundColor: 'aquamarine',
- *     position: 'absolute',
- *     left: 0,
- *     right: 0,
- *     bottom: 0,
- *   },
- *   fab: {
- *     position: 'absolute',
- *     right: 16,
- *   },
- * });
- *
- * export default MyComponent;
- * ```
- */
-const Appbar = ({
-  children,
-  dark,
-  style,
-  mode = 'small',
-  elevated,
-  safeAreaInsets,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
-  const flattenedStyle = StyleSheet.flatten(style);
-  const {
-    backgroundColor: customBackground,
-    elevation = isV3 ? (elevated ? 2 : 0) : 4,
-    ...restStyle
-  } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
-    elevation?: number;
-    backgroundColor?: ColorValue;
-  };
-
-  const backgroundColor = getAppbarBackgroundColor(
-    theme,
-    elevation,
-    customBackground,
-    elevated
-  );
-
-  const isMode = (modeToCompare: AppbarModes) => {
-    return isV3 && mode === modeToCompare;
-  };
-
-  let isDark = false;
-
-  if (typeof dark === 'boolean') {
-    isDark = dark;
-  } else if (!isV3) {
-    isDark =
-      backgroundColor === 'transparent'
-        ? false
-        : typeof backgroundColor === 'string'
-        ? !color(backgroundColor).isLight()
-        : true;
-  }
-
-  const isV3CenterAlignedMode = isV3 && isMode('center-aligned');
-
-  let shouldCenterContent = false;
-  let shouldAddLeftSpacing = false;
-  let shouldAddRightSpacing = false;
-  if ((!isV3 && Platform.OS === 'ios') || isV3CenterAlignedMode) {
-    let hasAppbarContent = false;
-    let leftItemsCount = 0;
-    let rightItemsCount = 0;
-
-    React.Children.forEach(children, (child) => {
-      if (React.isValidElement(child)) {
-        if (child.type === AppbarContent) {
-          hasAppbarContent = true;
-        } else if (hasAppbarContent) {
-          rightItemsCount++;
-        } else {
-          leftItemsCount++;
-        }
-      }
-    });
-
-    shouldCenterContent =
-      hasAppbarContent &&
-      leftItemsCount < 2 &&
-      rightItemsCount < (isV3 ? 3 : 2);
-    shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
-    shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
-  }
-
-  const filterAppbarActions = React.useCallback(
-    (isLeading = false) =>
-      React.Children.toArray(children).filter((child) =>
-        // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-        isLeading ? child.props.isLeading : !child.props.isLeading
-      ),
-    [children]
-  );
-
-  const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing;
-
-  const insets = {
-    paddingBottom: safeAreaInsets?.bottom,
-    paddingTop: safeAreaInsets?.top,
-    paddingLeft: safeAreaInsets?.left,
-    paddingRight: safeAreaInsets?.right,
-  };
-
-  return (
-    <Surface
-      style={[
-        { backgroundColor },
-        styles.appbar,
-        {
-          height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
-        },
-        insets,
-        restStyle,
-        !theme.isV3 && { elevation },
-      ]}
-      elevation={elevation as MD3Elevation}
-      {...rest}
-    >
-      {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
-      {(!isV3 || isMode('small') || isMode('center-aligned')) &&
-        renderAppbarContent({
-          children,
-          isDark,
-          theme,
-          isV3,
-          shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
-        })}
-      {(isMode('medium') || isMode('large')) && (
-        <View
-          style={[
-            styles.columnContainer,
-            isMode('center-aligned') && styles.centerAlignedContainer,
-          ]}
-        >
-          {/* Appbar top row with controls */}
-          <View style={styles.controlsRow}>
-            {/* Left side of row container, can contain AppbarBackAction or AppbarAction if it's leading icon  */}
-            {renderAppbarContent({
-              children,
-              isDark,
-              isV3,
-              renderOnly: ['Appbar.BackAction'],
-              mode,
-            })}
-            {renderAppbarContent({
-              children: filterAppbarActions(true),
-              isDark,
-              isV3,
-              renderOnly: ['Appbar.Action'],
-              mode,
-            })}
-            {/* Right side of row container, can contain other AppbarAction if they are not leading icons */}
-            <View style={styles.rightActionControls}>
-              {renderAppbarContent({
-                children: filterAppbarActions(false),
-                isDark,
-                isV3,
-                renderExcept: [
-                  'Appbar',
-                  'Appbar.BackAction',
-                  'Appbar.Content',
-                  'Appbar.Header',
-                ],
-                mode,
-              })}
-            </View>
-          </View>
-          {/* Middle of the row, can contain only AppbarContent */}
-          {renderAppbarContent({
-            children,
-            isDark,
-            isV3,
-            renderOnly: ['Appbar.Content'],
-            mode,
-          })}
-        </View>
-      )}
-      {shouldAddRightSpacing ? <View style={spacingStyle} /> : null}
-    </Surface>
-  );
-};
-
-const styles = StyleSheet.create({
-  appbar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 4,
-  },
-  spacing: {
-    width: 48,
-  },
-  v3Spacing: {
-    width: 52,
-  },
-  controlsRow: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  rightActionControls: {
-    flexDirection: 'row',
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  columnContainer: {
-    flexDirection: 'column',
-    flex: 1,
-    paddingTop: 8,
-  },
-  centerAlignedContainer: {
-    paddingTop: 0,
-  },
-});
-
-export default Appbar;
-
-// @component-docs ignore-next-line
-export { Appbar };