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

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

@@ -0,0 +1,317 @@
+import * as React from 'react';
+import {
+  ColorValue,
+  GestureResponderEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import color from 'color';
+
+import type { PressableProps, PressableStateCallbackType } from './Pressable';
+import { Pressable } from './Pressable';
+import { getTouchableRippleColors } from './utils';
+import { Settings, SettingsContext } from '../../core/settings';
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
+import hasTouchHandler from '../../utils/hasTouchHandler';
+
+export type Props = PressableProps & {
+  /**
+   * Whether to render the ripple outside the view bounds.
+   */
+  borderless?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: Object;
+  /**
+   * Whether to start the ripple at the center (Web).
+   */
+  centered?: boolean;
+  /**
+   * Whether to prevent interaction with the touchable.
+   */
+  disabled?: boolean;
+  /**
+   * Function to execute on press. If not set, will cause the touchable to be disabled.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`.
+   */
+  onPressIn?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute when a touch is released.
+   */
+  onPressOut?: (e: GestureResponderEvent) => void;
+  /**
+   * Color of the ripple effect (Android >= 5.0 and Web).
+   */
+  rippleColor?: ColorValue;
+  /**
+   * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
+   */
+  underlayColor?: string;
+  /**
+   * Content of the `TouchableRipple`.
+   */
+  children:
+    | ((state: PressableStateCallbackType) => React.ReactNode)
+    | React.ReactNode;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
+    | undefined;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * A wrapper for views that should respond to touches.
+ * Provides a material "ink ripple" interaction effect for supported platforms (>= Android Lollipop).
+ * On unsupported platforms, it falls back to a highlight effect.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { Text, TouchableRipple } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <TouchableRipple
+ *     onPress={() => console.log('Pressed')}
+ *     rippleColor="rgba(0, 0, 0, .32)"
+ *   >
+ *     <Text>Press anywhere</Text>
+ *   </TouchableRipple>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends Pressable props https://reactnative.dev/docs/Pressable#props
+ */
+const TouchableRipple = (
+  {
+    style,
+    background: _background,
+    borderless = false,
+    disabled: disabledProp,
+    rippleColor,
+    underlayColor: _underlayColor,
+    children,
+    theme: themeOverrides,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>
+) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { calculatedRippleColor } = getTouchableRippleColors({
+    theme,
+    rippleColor,
+  });
+  const hoverColor = color(calculatedRippleColor).fade(0.5).rgb().string();
+  const { rippleEffectEnabled } = React.useContext<Settings>(SettingsContext);
+
+  const { onPress, onLongPress, onPressIn, onPressOut } = rest;
+
+  const handlePressIn = React.useCallback(
+    (e: any) => {
+      onPressIn?.(e);
+
+      if (rippleEffectEnabled) {
+        const { centered } = rest;
+
+        const button = e.currentTarget;
+        const style = window.getComputedStyle(button);
+        const dimensions = button.getBoundingClientRect();
+
+        let touchX;
+        let touchY;
+
+        const { changedTouches, touches } = e.nativeEvent;
+        const touch = touches?.[0] ?? changedTouches?.[0];
+
+        // If centered or it was pressed using keyboard - enter or space
+        if (centered || !touch) {
+          touchX = dimensions.width / 2;
+          touchY = dimensions.height / 2;
+        } else {
+          touchX = touch.locationX ?? e.pageX;
+          touchY = touch.locationY ?? e.pageY;
+        }
+
+        // Get the size of the button to determine how big the ripple should be
+        const size = centered
+          ? // If ripple is always centered, we don't need to make it too big
+            Math.min(dimensions.width, dimensions.height) * 1.5
+          : // Otherwise make it twice as big so clicking on one end spreads ripple to other
+            Math.max(dimensions.width, dimensions.height) * 2;
+
+        // Create a container for our ripple effect so we don't need to change the parent's style
+        const container = document.createElement('span');
+
+        container.setAttribute('data-paper-ripple', '');
+
+        Object.assign(container.style, {
+          position: 'absolute',
+          pointerEvents: 'none',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          borderTopLeftRadius: style.borderTopLeftRadius,
+          borderTopRightRadius: style.borderTopRightRadius,
+          borderBottomRightRadius: style.borderBottomRightRadius,
+          borderBottomLeftRadius: style.borderBottomLeftRadius,
+          overflow: centered ? 'visible' : 'hidden',
+        });
+
+        // Create span to show the ripple effect
+        const ripple = document.createElement('span');
+
+        Object.assign(ripple.style, {
+          position: 'absolute',
+          pointerEvents: 'none',
+          backgroundColor: calculatedRippleColor,
+          borderRadius: '50%',
+
+          /* Transition configuration */
+          transitionProperty: 'transform opacity',
+          transitionDuration: `${Math.min(size * 1.5, 350)}ms`,
+          transitionTimingFunction: 'linear',
+          transformOrigin: 'center',
+
+          /* We'll animate these properties */
+          transform: 'translate3d(-50%, -50%, 0) scale3d(0.1, 0.1, 0.1)',
+          opacity: '0.5',
+
+          // Position the ripple where cursor was
+          left: `${touchX}px`,
+          top: `${touchY}px`,
+          width: `${size}px`,
+          height: `${size}px`,
+        });
+
+        // Finally, append it to DOM
+        container.appendChild(ripple);
+        button.appendChild(container);
+
+        // rAF runs in the same frame as the event handler
+        // Use double rAF to ensure the transition class is added in next frame
+        // This will make sure that the transition animation is triggered
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            Object.assign(ripple.style, {
+              transform: 'translate3d(-50%, -50%, 0) scale3d(1, 1, 1)',
+              opacity: '1',
+            });
+          });
+        });
+      }
+    },
+    [onPressIn, rest, rippleEffectEnabled, calculatedRippleColor]
+  );
+
+  const handlePressOut = React.useCallback(
+    (e: any) => {
+      onPressOut?.(e);
+
+      if (rippleEffectEnabled) {
+        const containers = e.currentTarget.querySelectorAll(
+          '[data-paper-ripple]'
+        ) as HTMLElement[];
+
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            containers.forEach((container) => {
+              const ripple = container.firstChild as HTMLSpanElement;
+
+              Object.assign(ripple.style, {
+                transitionDuration: '250ms',
+                opacity: 0,
+              });
+
+              // Finally remove the span after the transition
+              setTimeout(() => {
+                const { parentNode } = container;
+
+                if (parentNode) {
+                  parentNode.removeChild(container);
+                }
+              }, 500);
+            });
+          });
+        });
+      }
+    },
+    [onPressOut, rippleEffectEnabled]
+  );
+
+  const hasPassedTouchHandler = hasTouchHandler({
+    onPress,
+    onLongPress,
+    onPressIn,
+    onPressOut,
+  });
+
+  const disabled = disabledProp || !hasPassedTouchHandler;
+
+  return (
+    <Pressable
+      {...rest}
+      ref={ref}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={disabled}
+      style={(state) => [
+        styles.touchable,
+        borderless && styles.borderless,
+        // focused state is not ready yet: https://github.com/necolas/react-native-web/issues/1849
+        // state.focused && { backgroundColor: ___ },
+        state.hovered && { backgroundColor: hoverColor },
+        typeof style === 'function' ? style(state) : style,
+      ]}
+    >
+      {(state) =>
+        React.Children.only(
+          typeof children === 'function' ? children(state) : children
+        )
+      }
+    </Pressable>
+  );
+};
+
+/**
+ * Whether ripple effect is supported.
+ */
+TouchableRipple.supported = true;
+
+const styles = StyleSheet.create({
+  touchable: {
+    position: 'relative',
+    ...(Platform.OS === 'web' && {
+      cursor: 'pointer',
+      transition: '150ms background-color',
+    }),
+  },
+  borderless: {
+    overflow: 'hidden',
+  },
+});
+
+const Component = forwardRef(TouchableRipple);
+
+export default Component as typeof Component & { supported: boolean };

package/Examples/SampleUI/src/components/TouchableRipple/utils.ts

@@ -0,0 +1,66 @@
+import type { ColorValue } from 'react-native';
+
+import color from 'color';
+
+import type { InternalTheme } from '../../types';
+
+const getUnderlayColor = ({
+  theme,
+  calculatedRippleColor,
+  underlayColor,
+}: {
+  theme: InternalTheme;
+  calculatedRippleColor: ColorValue;
+  underlayColor?: string;
+}) => {
+  if (underlayColor != null) {
+    return underlayColor;
+  }
+
+  if (theme.isV3) {
+    return color(calculatedRippleColor).rgb().string();
+  }
+
+  return color(calculatedRippleColor).fade(0.5).rgb().string();
+};
+
+const getRippleColor = ({
+  theme,
+  rippleColor,
+}: {
+  theme: InternalTheme;
+  rippleColor?: ColorValue;
+}) => {
+  if (rippleColor) {
+    return rippleColor;
+  }
+
+  if (theme.isV3) {
+    return color(theme.colors.onSurface).alpha(0.12).rgb().string();
+  }
+
+  if (theme.dark) {
+    return color(theme.colors.text).alpha(0.32).rgb().string();
+  }
+  return color(theme.colors.text).alpha(0.2).rgb().string();
+};
+
+export const getTouchableRippleColors = ({
+  theme,
+  rippleColor,
+  underlayColor,
+}: {
+  theme: InternalTheme;
+  rippleColor?: ColorValue;
+  underlayColor?: string;
+}) => {
+  const calculatedRippleColor = getRippleColor({ theme, rippleColor });
+  return {
+    calculatedRippleColor,
+    calculatedUnderlayColor: getUnderlayColor({
+      theme,
+      calculatedRippleColor,
+      underlayColor,
+    }),
+  };
+};

package/Examples/SampleUI/src/components/Typography/AnimatedText.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+  Animated,
+  I18nManager,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  Text,
+} from 'react-native';
+
+import type { VariantProp } from './types';
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
+
+type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
+  /**
+   * Variant defines appropriate text styles for type role and its size.
+   * Available variants:
+   *
+   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+   *
+   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+   *
+   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+   *
+   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+   *
+   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+   */
+  variant?: VariantProp<T>;
+  style?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+const AnimatedText = forwardRef<Text & HTMLElement, Props<never>>(
+  function AnimatedText(
+    { style, theme: themeOverrides, variant, ...rest },
+    ref
+  ) {
+    const theme = useInternalTheme(themeOverrides);
+    const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
+
+    if (theme.isV3 && variant) {
+      const font = theme.fonts[variant];
+      if (typeof font !== 'object') {
+        throw new Error(
+          `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
+            theme.fonts
+          ).join(', ')}.`
+        );
+      }
+
+      return (
+        <Animated.Text
+          ref={ref}
+          {...rest}
+          style={[
+            font,
+            styles.text,
+            { writingDirection, color: theme.colors.onSurface },
+            style,
+          ]}
+        />
+      );
+    } else {
+      const font = !theme.isV3 ? theme.fonts.regular : theme.fonts.bodyMedium;
+      const textStyle = {
+        ...font,
+        color: theme.isV3 ? theme.colors.onSurface : theme.colors.text,
+      };
+      return (
+        <Animated.Text
+          ref={ref}
+          {...rest}
+          style={[
+            styles.text,
+            textStyle,
+            {
+              writingDirection,
+            },
+            style,
+          ]}
+        />
+      );
+    }
+  }
+);
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'left',
+  },
+});
+
+export const customAnimatedText = <T,>() =>
+  AnimatedText as (props: Props<T>) => JSX.Element;
+
+export default AnimatedText;

package/Examples/SampleUI/src/components/Typography/Text.tsx

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import {
+  I18nManager,
+  StyleProp,
+  StyleSheet,
+  Text as NativeText,
+  TextStyle,
+} from 'react-native';
+
+import AnimatedText from './AnimatedText';
+import type { VariantProp } from './types';
+import StyledText from './v2/StyledText';
+import { useInternalTheme } from '../../core/theming';
+import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
+
+export type Props<T> = React.ComponentProps<typeof NativeText> & {
+  /**
+   * @supported Available in v5.x with theme version 3
+   *
+   * Variant defines appropriate text styles for type role and its size.
+   * Available variants:
+   *
+   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+   *
+   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+   *
+   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+   *
+   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+   *
+   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+   */
+  variant?: VariantProp<T>;
+  children: React.ReactNode;
+  theme?: ThemeProp;
+  style?: StyleProp<TextStyle>;
+};
+
+export type TextRef = React.ForwardedRef<{
+  setNativeProps(args: Object): void;
+}>;
+
+// @component-group Typography
+
+/**
+ * Typography component showing styles complied with passed `variant` prop and supported by the type system.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Text } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <>
+ *     <Text variant="displayLarge">Display Large</Text>
+ *     <Text variant="displayMedium">Display Medium</Text>
+ *     <Text variant="displaySmall">Display small</Text>
+ *
+ *     <Text variant="headlineLarge">Headline Large</Text>
+ *     <Text variant="headlineMedium">Headline Medium</Text>
+ *     <Text variant="headlineSmall">Headline Small</Text>
+ *
+ *     <Text variant="titleLarge">Title Large</Text>
+ *     <Text variant="titleMedium">Title Medium</Text>
+ *     <Text variant="titleSmall">Title Small</Text>
+ *
+ *     <Text variant="bodyLarge">Body Large</Text>
+ *     <Text variant="bodyMedium">Body Medium</Text>
+ *     <Text variant="bodySmall">Body Small</Text>
+ *
+ *     <Text variant="labelLarge">Label Large</Text>
+ *     <Text variant="labelMedium">Label Medium</Text>
+ *     <Text variant="labelSmall">Label Small</Text>
+ *  </>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+const Text = (
+  { style, variant, theme: initialTheme, ...rest }: Props<string>,
+  ref: TextRef
+) => {
+  const root = React.useRef<NativeText | null>(null);
+  // FIXME: destructure it in TS 4.6+
+  const theme = useInternalTheme(initialTheme);
+  const writingDirection = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr';
+
+  React.useImperativeHandle(ref, () => ({
+    setNativeProps: (args: Object) => root.current?.setNativeProps(args),
+  }));
+
+  if (theme.isV3 && variant) {
+    let font = theme.fonts[variant];
+    let textStyle = [font, style];
+
+    if (
+      React.isValidElement(rest.children) &&
+      (rest.children.type === Component ||
+        rest.children.type === AnimatedText ||
+        rest.children.type === StyledText)
+    ) {
+      const { props } = rest.children;
+
+      // Context:   Some components have the built-in `Text` component with a predefined variant,
+      //            that also accepts `children` as a `React.Node`. This can result in a situation,
+      //            where another `Text` component is rendered within the built-in `Text` component.
+      //            By doing that, we assume that user doesn't want to consume pre-defined font properties.
+      // Case one:  Nested `Text` has different `variant` that specified in parent. For example:
+      //              <Chip>
+      //                <Text variant="displayMedium">Nested</Text>
+      //              </Chip>
+      // Solution:  To address the following scenario, the code below overrides the `variant`
+      //            specified in a parent in favor of children's variant:
+      if (props.variant) {
+        font = theme.fonts[props.variant as VariantProp<typeof props.variant>];
+        textStyle = [style, font];
+      }
+
+      // Case two:  Nested `Text` has specified `styles` which intefere
+      //            with font properties, from the parent's `variant`. For example:
+      //              <Chip>
+      //                <Text style={{fontSize: 30}}>Nested</Text>
+      //              </Chip>
+      // Solution:  To address the following scenario, the code below overrides the
+      //            parent's style with children's style:
+      if (!props.variant) {
+        textStyle = [style, props.style];
+      }
+    }
+
+    if (typeof font !== 'object') {
+      throw new Error(
+        `Variant ${variant} was not provided properly. Valid variants are ${Object.keys(
+          theme.fonts
+        ).join(', ')}.`
+      );
+    }
+
+    return (
+      <NativeText
+        ref={root}
+        style={[
+          styles.text,
+          { writingDirection, color: theme.colors.onSurface },
+          textStyle,
+        ]}
+        {...rest}
+      />
+    );
+  } else {
+    const font = theme.isV3 ? theme.fonts.default : theme.fonts?.regular;
+    const textStyle = {
+      ...font,
+      color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,
+    };
+    return (
+      <NativeText
+        {...rest}
+        ref={root}
+        style={[styles.text, textStyle, { writingDirection }, style]}
+      />
+    );
+  }
+};
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'left',
+  },
+});
+
+type TextComponent<T> = (
+  props: Props<T> & { ref?: React.RefObject<TextRef> }
+) => JSX.Element;
+
+const Component = forwardRef(Text) as TextComponent<never>;
+
+export const customText = <T,>() => Component as unknown as TextComponent<T>;
+
+export default Component;

package/Examples/SampleUI/src/components/Typography/types.tsx

@@ -0,0 +1,5 @@
+import type { MD3TypescaleKey } from '../../types';
+
+export type VariantProp<T> =
+  | (T extends string ? (string extends T ? never : T) : never)
+  | keyof typeof MD3TypescaleKey;