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

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

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

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

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

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

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