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

package/Examples/SampleUI/src/components/Portal/PortalConsumer.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-
-import type { PortalMethods } from './PortalHost';
-
-type Props = {
-  manager: PortalMethods;
-  children: React.ReactNode;
-};
-
-export default class PortalConsumer extends React.Component<Props> {
-  componentDidMount() {
-    this.checkManager();
-
-    this.key = this.props.manager.mount(this.props.children);
-  }
-
-  componentDidUpdate() {
-    this.checkManager();
-
-    this.props.manager.update(this.key, this.props.children);
-  }
-
-  componentWillUnmount() {
-    this.checkManager();
-
-    this.props.manager.unmount(this.key);
-  }
-
-  private key: any;
-
-  private checkManager() {
-    if (!this.props.manager) {
-      throw new Error(
-        'Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n' +
-          "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" +
-          'https://callstack.github.io/react-native-paper/docs/guides/getting-started'
-      );
-    }
-  }
-
-  render() {
-    return null;
-  }
-}

package/Examples/SampleUI/src/components/Portal/PortalHost.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import PortalManager from './PortalManager';
-
-export type Props = {
-  children: React.ReactNode;
-};
-
-type Operation =
-  | { type: 'mount'; key: number; children: React.ReactNode }
-  | { type: 'update'; key: number; children: React.ReactNode }
-  | { type: 'unmount'; key: number };
-
-export type PortalMethods = {
-  mount: (children: React.ReactNode) => number;
-  update: (key: number, children: React.ReactNode) => void;
-  unmount: (key: number) => void;
-};
-
-export const PortalContext = React.createContext<PortalMethods>(null as any);
-
-/**
- * Portal host renders all of its children `Portal` elements.
- * For example, you can wrap a screen in `Portal.Host` to render items above the screen.
- * If you're using the `Provider` component, it already includes `Portal.Host`.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Text } from 'react-native';
- * import { Portal } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Portal.Host>
- *     <Text>Content of the app</Text>
- *   </Portal.Host>
- * );
- *
- * export default MyComponent;
- * ```
- *
- * Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.
- */
-export default class PortalHost extends React.Component<Props> {
-  static displayName = 'Portal.Host';
-
-  componentDidMount() {
-    const manager = this.manager;
-    const queue = this.queue;
-
-    while (queue.length && manager) {
-      const action = queue.pop();
-      if (action) {
-        // eslint-disable-next-line default-case
-        switch (action.type) {
-          case 'mount':
-            manager.mount(action.key, action.children);
-            break;
-          case 'update':
-            manager.update(action.key, action.children);
-            break;
-          case 'unmount':
-            manager.unmount(action.key);
-            break;
-        }
-      }
-    }
-  }
-
-  private setManager = (manager: PortalManager | undefined | null) => {
-    this.manager = manager;
-  };
-
-  private mount = (children: React.ReactNode) => {
-    const key = this.nextKey++;
-
-    if (this.manager) {
-      this.manager.mount(key, children);
-    } else {
-      this.queue.push({ type: 'mount', key, children });
-    }
-
-    return key;
-  };
-
-  private update = (key: number, children: React.ReactNode) => {
-    if (this.manager) {
-      this.manager.update(key, children);
-    } else {
-      const op: Operation = { type: 'mount', key, children };
-      const index = this.queue.findIndex(
-        (o) => o.type === 'mount' || (o.type === 'update' && o.key === key)
-      );
-
-      if (index > -1) {
-        this.queue[index] = op;
-      } else {
-        this.queue.push(op as Operation);
-      }
-    }
-  };
-
-  private unmount = (key: number) => {
-    if (this.manager) {
-      this.manager.unmount(key);
-    } else {
-      this.queue.push({ type: 'unmount', key });
-    }
-  };
-
-  private nextKey = 0;
-  private queue: Operation[] = [];
-  private manager: PortalManager | null | undefined;
-
-  render() {
-    return (
-      <PortalContext.Provider
-        value={{
-          mount: this.mount,
-          update: this.update,
-          unmount: this.unmount,
-        }}
-      >
-        {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
-        <View
-          style={styles.container}
-          collapsable={false}
-          pointerEvents="box-none"
-        >
-          {this.props.children}
-        </View>
-        <PortalManager ref={this.setManager} />
-      </PortalContext.Provider>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

package/Examples/SampleUI/src/components/Portal/PortalManager.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-
-type State = {
-  portals: Array<{
-    key: number;
-    children: React.ReactNode;
-  }>;
-};
-
-/**
- * Portal host is the component which actually renders all Portals.
- */
-export default class PortalManager extends React.PureComponent<{}, State> {
-  state: State = {
-    portals: [],
-  };
-
-  mount = (key: number, children: React.ReactNode) => {
-    this.setState((state) => ({
-      portals: [...state.portals, { key, children }],
-    }));
-  };
-
-  update = (key: number, children: React.ReactNode) =>
-    this.setState((state) => ({
-      portals: state.portals.map((item) => {
-        if (item.key === key) {
-          return { ...item, children };
-        }
-        return item;
-      }),
-    }));
-
-  unmount = (key: number) =>
-    this.setState((state) => ({
-      portals: state.portals.filter((item) => item.key !== key),
-    }));
-
-  render() {
-    return this.state.portals.map(({ key, children }) => (
-      <View
-        key={key}
-        collapsable={
-          false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
-        }
-        pointerEvents="box-none"
-        style={StyleSheet.absoluteFill}
-      >
-        {children}
-      </View>
-    ));
-  }
-}

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

@@ -1,292 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  I18nManager,
-  LayoutChangeEvent,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import setColor from 'color';
-
-import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Animated value (between 0 and 1). This tells the progress bar to rely on this value to animate it.
-   * Note: It should not be used in parallel with the `progress` prop.
-   */
-  animatedValue?: number;
-  /**
-   * Progress value (between 0 and 1).
-   * Note: It should not be used in parallel with the `animatedValue` prop.
-   */
-  progress?: number;
-  /**
-   * Color of the progress bar. The background color will be calculated based on this but you can change it by passing `backgroundColor` to `style` prop.
-   */
-  color?: string;
-  /**
-   * If the progress bar will show indeterminate progress.
-   */
-  indeterminate?: boolean;
-  /**
-   * Whether to show the ProgressBar (true, the default) or hide it (false).
-   */
-  visible?: boolean;
-  /**
-   * Style of filled part of the ProgresBar.
-   */
-  fillStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-const INDETERMINATE_DURATION = 2000;
-const INDETERMINATE_MAX_WIDTH = 0.6;
-const { isRTL } = I18nManager;
-
-/**
- * Progress bar is an indicator used to present progress of some activity in the app.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { ProgressBar, MD3Colors } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <ProgressBar progress={0.5} color={MD3Colors.error50} />
- * );
- *
- * export default MyComponent;
- * ```
- */
-const ProgressBar = ({
-  color,
-  indeterminate,
-  progress = 0,
-  visible = true,
-  theme: themeOverrides,
-  animatedValue,
-  style,
-  fillStyle,
-  testID = 'progress-bar',
-  ...rest
-}: Props) => {
-  const isWeb = Platform.OS === 'web';
-  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(0));
-  const passedAnimatedValue =
-    React.useRef<Props['animatedValue']>(animatedValue);
-  const [width, setWidth] = React.useState<number>(0);
-  const [prevWidth, setPrevWidth] = React.useState<number>(0);
-
-  const indeterminateAnimation =
-    React.useRef<Animated.CompositeAnimation | null>(null);
-
-  const { scale } = theme.animation;
-
-  React.useEffect(() => {
-    passedAnimatedValue.current = animatedValue;
-  });
-
-  const startAnimation = React.useCallback(() => {
-    // Show progress bar
-    Animated.timing(fade, {
-      duration: 200 * scale,
-      toValue: 1,
-      useNativeDriver: true,
-      isInteraction: false,
-    }).start();
-
-    /**
-     * We shouldn't add @param animatedValue to the
-     * deps array, to avoid the unnecessary loop.
-     * We can only check if the prop is passed initially,
-     * and we do early return.
-     */
-    const externalAnimation =
-      typeof passedAnimatedValue.current !== 'undefined' &&
-      passedAnimatedValue.current >= 0;
-
-    if (externalAnimation) {
-      return;
-    }
-
-    // Animate progress bar
-    if (indeterminate) {
-      if (!indeterminateAnimation.current) {
-        indeterminateAnimation.current = Animated.timing(timer, {
-          duration: INDETERMINATE_DURATION,
-          toValue: 1,
-          // Animated.loop does not work if useNativeDriver is true on web
-          useNativeDriver: !isWeb,
-          isInteraction: false,
-        });
-      }
-
-      // Reset timer to the beginning
-      timer.setValue(0);
-
-      Animated.loop(indeterminateAnimation.current).start();
-    } else {
-      Animated.timing(timer, {
-        duration: 200 * scale,
-        toValue: progress ? progress : 0,
-        useNativeDriver: true,
-        isInteraction: false,
-      }).start();
-    }
-  }, [fade, scale, indeterminate, timer, progress, isWeb]);
-
-  const stopAnimation = React.useCallback(() => {
-    // Stop indeterminate animation
-    if (indeterminateAnimation.current) {
-      indeterminateAnimation.current.stop();
-    }
-
-    Animated.timing(fade, {
-      duration: 200 * scale,
-      toValue: 0,
-      useNativeDriver: true,
-      isInteraction: false,
-    }).start();
-  }, [fade, scale]);
-
-  React.useEffect(() => {
-    if (visible) startAnimation();
-    else stopAnimation();
-  }, [visible, startAnimation, stopAnimation]);
-
-  React.useEffect(() => {
-    if (animatedValue && animatedValue >= 0) {
-      timer.setValue(animatedValue);
-    }
-  }, [animatedValue, timer]);
-
-  React.useEffect(() => {
-    // Start animation the very first time when previously the width was unclear
-    if (visible && prevWidth === 0) {
-      startAnimation();
-    }
-  }, [prevWidth, startAnimation, visible]);
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    setPrevWidth(width);
-    setWidth(event.nativeEvent.layout.width);
-  };
-
-  const tintColor = color || theme.colors?.primary;
-  const trackTintColor = theme.isV3
-    ? theme.colors.surfaceVariant
-    : setColor(tintColor).alpha(0.38).rgb().string();
-
-  return (
-    <View
-      onLayout={onLayout}
-      {...rest}
-      accessible
-      accessibilityRole="progressbar"
-      accessibilityState={{ busy: visible }}
-      accessibilityValue={
-        indeterminate
-          ? {}
-          : { min: 0, max: 100, now: Math.round(progress * 100) }
-      }
-      style={isWeb && styles.webContainer}
-      testID={testID}
-    >
-      <Animated.View
-        style={[
-          styles.container,
-          { backgroundColor: trackTintColor, opacity: fade },
-          style,
-        ]}
-      >
-        {width ? (
-          <Animated.View
-            testID={`${testID}-fill`}
-            style={[
-              styles.progressBar,
-              {
-                width,
-                backgroundColor: tintColor,
-                transform: [
-                  {
-                    translateX: timer.interpolate(
-                      indeterminate
-                        ? {
-                            inputRange: [0, 0.5, 1],
-                            outputRange: [
-                              (isRTL ? 1 : -1) * 0.5 * width,
-                              (isRTL ? 1 : -1) *
-                                0.5 *
-                                INDETERMINATE_MAX_WIDTH *
-                                width,
-                              (isRTL ? -1 : 1) * 0.7 * width,
-                            ],
-                          }
-                        : {
-                            inputRange: [0, 1],
-                            outputRange: [(isRTL ? 1 : -1) * 0.5 * width, 0],
-                          }
-                    ),
-                  },
-                  {
-                    // Workaround for workaround for https://github.com/facebook/react-native/issues/6278
-                    scaleX: timer.interpolate(
-                      indeterminate
-                        ? {
-                            inputRange: [0, 0.5, 1],
-                            outputRange: [
-                              0.0001,
-                              INDETERMINATE_MAX_WIDTH,
-                              0.0001,
-                            ],
-                          }
-                        : {
-                            inputRange: [0, 1],
-                            outputRange: [0.0001, 1],
-                          }
-                    ),
-                  },
-                ],
-              },
-              fillStyle,
-            ]}
-          />
-        ) : null}
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    height: 4,
-    overflow: 'hidden',
-  },
-  webContainer: {
-    width: '100%',
-    height: '100%',
-  },
-  progressBar: {
-    flex: 1,
-  },
-});
-
-export default ProgressBar;

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

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { GestureResponderEvent, Platform } from 'react-native';
-
-import RadioButtonAndroid from './RadioButtonAndroid';
-import RadioButtonIOS from './RadioButtonIOS';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-
-export type Props = {
-  /**
-   * Value of the radio button
-   */
-  value: string;
-  /**
-   * Status of radio button.
-   */
-  status?: 'checked' | 'unchecked';
-  /**
-   * Whether radio is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Custom color for unchecked radio.
-   */
-  uncheckedColor?: string;
-  /**
-   * Custom color for radio.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Radio buttons allow the selection a single option from a set.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { RadioButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [checked, setChecked] = React.useState('first');
- *
- *   return (
- *     <View>
- *       <RadioButton
- *         value="first"
- *         status={ checked === 'first' ? 'checked' : 'unchecked' }
- *         onPress={() => setChecked('first')}
- *       />
- *       <RadioButton
- *         value="second"
- *         status={ checked === 'second' ? 'checked' : 'unchecked' }
- *         onPress={() => setChecked('second')}
- *       />
- *     </View>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const RadioButton = ({ theme: themeOverrides, ...props }: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  const Button = Platform.select({
-    default: RadioButtonAndroid,
-    ios: RadioButtonIOS,
-  });
-
-  return <Button {...props} theme={theme} />;
-};
-
-export default RadioButton;