@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/components/TouchableRipple/TouchableRipple.native.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import {
+  PressableAndroidRippleConfig,
+  StyleProp,
+  Platform,
+  ViewStyle,
+  StyleSheet,
+  GestureResponderEvent,
+  View,
+  ColorValue,
+} from 'react-native';
+
+import type { PressableProps } from './Pressable';
+import { Pressable } from './Pressable';
+import { getTouchableRippleColors } from './utils';
+// Settings context not needed - removed dependency
+const SettingsContext = React.createContext({ rippleEffectEnabled: true });
+import { useInternalTheme } from '../theming';
+import type { ThemeProp } from '../types';
+import { forwardRef } from '../utils/forwardRef';
+import hasTouchHandler from '../utils/hasTouchHandler';
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+const ANDROID_VERSION_PIE = 28;
+
+export type Props = PressableProps & {
+  borderless?: boolean;
+  background?: PressableAndroidRippleConfig;
+  centered?: boolean;
+  disabled?: boolean;
+  onPress?: (e: GestureResponderEvent) => void | null;
+  onLongPress?: (e: GestureResponderEvent) => void;
+  onPressIn?: (e: GestureResponderEvent) => void;
+  onPressOut?: (e: GestureResponderEvent) => void;
+  rippleColor?: ColorValue;
+  underlayColor?: string;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme?: ThemeProp;
+};
+
+const TouchableRipple = (
+  {
+    style,
+    background,
+    borderless = false,
+    disabled: disabledProp,
+    rippleColor,
+    underlayColor,
+    children,
+    theme: themeOverrides,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>
+) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { rippleEffectEnabled } = React.useContext(SettingsContext) as { rippleEffectEnabled: boolean };
+
+  const { onPress, onLongPress, onPressIn, onPressOut } = rest;
+
+  const hasPassedTouchHandler = hasTouchHandler({
+    onPress,
+    onLongPress,
+    onPressIn,
+    onPressOut,
+  });
+
+  const disabled = disabledProp || !hasPassedTouchHandler;
+
+  const { calculatedRippleColor, calculatedUnderlayColor } =
+    getTouchableRippleColors({
+      theme,
+      rippleColor,
+      underlayColor,
+    });
+
+  // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
+  // https://github.com/facebook/react-native/issues/6480
+  const useForeground =
+    Platform.OS === 'android' &&
+    Platform.Version >= ANDROID_VERSION_PIE &&
+    borderless;
+
+  if (TouchableRipple.supported) {
+    const androidRipple = rippleEffectEnabled
+      ? background ?? {
+        color: calculatedRippleColor,
+        borderless,
+        foreground: useForeground,
+      }
+      : undefined;
+
+    return (
+      <Pressable
+        {...rest}
+        ref={ref}
+        disabled={disabled}
+        style={[borderless && styles.overflowHidden, style]}
+        android_ripple={androidRipple}
+      >
+        {React.Children.only(children)}
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      {...rest}
+      ref={ref}
+      disabled={disabled}
+      style={[borderless && styles.overflowHidden, style]}
+    >
+      {({ pressed }) => (
+        <>
+          {pressed && rippleEffectEnabled && (
+            <View
+              testID="touchable-ripple-underlay"
+              style={[
+                styles.underlay,
+                { backgroundColor: calculatedUnderlayColor },
+              ]}
+            />
+          )}
+          {React.Children.only(children)}
+        </>
+      )}
+    </Pressable>
+  );
+};
+
+TouchableRipple.supported =
+  Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
+
+const styles = StyleSheet.create({
+  overflowHidden: {
+    overflow: 'hidden',
+  },
+  underlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 2,
+  },
+});
+
+const Component = forwardRef(TouchableRipple);
+
+export default Component as typeof Component & { supported: boolean };

package/src/ui/components/TouchableRipple/TouchableRipple.tsx

@@ -0,0 +1,347 @@
+import * as React from 'react';
+import {
+  ColorValue,
+  GestureResponderEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import type { PressableProps, PressableStateCallbackType } from './Pressable';
+import { Pressable } from './Pressable';
+import { getTouchableRippleColors } from './utils';
+import { useInternalTheme } from '../theming';
+import type { ThemeProp } from '../types';
+import { forwardRef } from '../utils/forwardRef';
+import hasTouchHandler from '../utils/hasTouchHandler';
+
+// Settings context not needed - removed dependency
+const SettingsContext = React.createContext({ rippleEffectEnabled: true });
+
+// Color manipulation utilities (simplified without color package)
+const hexToRgb = (hex: string): [number, number, number] => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return [r, g, b];
+};
+
+const fadeColor = (color: string, alpha: number): string => {
+  const [r, g, b] = hexToRgb(color);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+const colorUtil = (hex: string) => ({
+  fade: (alpha: number) => ({
+    rgb: () => ({
+      string: () => fadeColor(hex, alpha),
+    }),
+  }),
+  rgb: () => ({
+    string: () => hex,
+  }),
+});
+
+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 = colorUtil(typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000').fade(0.5).rgb().string();
+  const { rippleEffectEnabled } = React.useContext(SettingsContext) as { rippleEffectEnabled: boolean };
+
+  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 },
+        disabled && styles.disabled,
+        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',
+    }),
+  },
+  disabled: {
+    ...(Platform.OS === 'web' && {
+      cursor: 'auto',
+    }),
+  },
+  borderless: {
+    overflow: 'hidden',
+  },
+});
+
+const Component = forwardRef(TouchableRipple);
+
+export default Component as typeof Component & { supported: boolean };

package/src/ui/components/TouchableRipple/utils.ts

@@ -0,0 +1,66 @@
+import type { ColorValue } from 'react-native';
+
+import colorUtil 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 typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000';
+  }
+
+  return colorUtil(typeof calculatedRippleColor === 'string' ? calculatedRippleColor : '#000000').fade(0.5).rgb().string();
+};
+
+const getRippleColor = ({
+  theme,
+  rippleColor,
+}: {
+  theme: InternalTheme;
+  rippleColor?: ColorValue;
+}) => {
+  if (rippleColor) {
+    return rippleColor;
+  }
+
+  if (theme.isV3) {
+    return colorUtil(theme.colors.onSurface).alpha(0.12).rgb().string();
+  }
+
+  if (theme.dark) {
+    return colorUtil(theme.colors.onSurface || theme.colors.text || '#000000').alpha(0.32).rgb().string();
+  }
+  return colorUtil(theme.colors.text || theme.colors.onSurface || '#000000').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/src/ui/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 '../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.default) : theme.fonts.bodyMedium;
+      const textStyle = {
+        ...font,
+        color: theme.isV3 ? theme.colors.onSurface : (theme.colors.text || theme.colors.onSurface),
+      };
+      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>) => React.ReactElement;
+
+export default AnimatedText;

package/src/ui/components/Typography/types.tsx

@@ -0,0 +1,22 @@
+// MD3TypescaleKey enum for variant types
+export enum MD3TypescaleKey {
+  displayLarge = 'displayLarge',
+  displayMedium = 'displayMedium',
+  displaySmall = 'displaySmall',
+  headlineLarge = 'headlineLarge',
+  headlineMedium = 'headlineMedium',
+  headlineSmall = 'headlineSmall',
+  titleLarge = 'titleLarge',
+  titleMedium = 'titleMedium',
+  titleSmall = 'titleSmall',
+  labelLarge = 'labelLarge',
+  labelMedium = 'labelMedium',
+  labelSmall = 'labelSmall',
+  bodyLarge = 'bodyLarge',
+  bodyMedium = 'bodyMedium',
+  bodySmall = 'bodySmall',
+}
+
+export type VariantProp<T> =
+  | (T extends string ? (string extends T ? never : T) : never)
+  | keyof typeof MD3TypescaleKey;