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

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

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

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