@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/components/TextField/Adornment/TextFieldAdornment.tsx

@@ -0,0 +1,208 @@
+import React from 'react';
+import type {
+  LayoutChangeEvent,
+  TextStyle,
+  StyleProp,
+  Animated,
+  DimensionValue,
+} from 'react-native';
+
+import type { ThemeProp } from '../../types';
+
+import { AdornmentSide, AdornmentType, InputMode } from './enums';
+import TextFieldAffix, { AffixAdornment } from './TextFieldAffix';
+import TextFieldIcon, { IconAdornment } from './TextFieldIcon';
+import type {
+  AdornmentConfig,
+  AdornmentStyleAdjustmentForNativeInput,
+} from './types';
+import { getConstants } from '../helpers';
+
+export function getAdornmentConfig({
+  left,
+  right,
+}: {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+}): Array<AdornmentConfig> {
+  let adornmentConfig: any[] = [];
+  if (left || right) {
+    [
+      { side: AdornmentSide.Left, adornment: left },
+      { side: AdornmentSide.Right, adornment: right },
+    ].forEach(({ side, adornment }) => {
+      if (adornment && React.isValidElement(adornment)) {
+        let type;
+        if (adornment.type === TextFieldAffix) {
+          type = AdornmentType.Affix;
+        } else if (adornment.type === TextFieldIcon) {
+          type = AdornmentType.Icon;
+        }
+        adornmentConfig.push({
+          side,
+          type,
+        });
+      }
+    });
+  }
+
+  return adornmentConfig;
+}
+
+export function getAdornmentStyleAdjustmentForNativeInput({
+  adornmentConfig,
+  leftAffixWidth,
+  rightAffixWidth,
+  paddingHorizontal,
+  inputOffset = 0,
+  mode,
+  isV3,
+}: {
+  inputOffset?: number;
+  adornmentConfig: AdornmentConfig[];
+  leftAffixWidth: number;
+  rightAffixWidth: number;
+  mode?: 'outlined' | 'flat';
+  paddingHorizontal?: DimensionValue;
+  isV3?: boolean;
+}): AdornmentStyleAdjustmentForNativeInput | {} {
+  const { OUTLINED_INPUT_OFFSET, ADORNMENT_OFFSET } = getConstants(isV3);
+
+  if (adornmentConfig.length) {
+    const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(
+      ({ type, side }: AdornmentConfig) => {
+        const isLeftSide = side === AdornmentSide.Left;
+        const inputModeAdornemntOffset =
+          mode === InputMode.Outlined
+            ? ADORNMENT_OFFSET + OUTLINED_INPUT_OFFSET
+            : ADORNMENT_OFFSET;
+        const paddingKey = `padding${captalize(side)}`;
+        const affixWidth = isLeftSide ? leftAffixWidth : rightAffixWidth;
+        const padding =
+          typeof paddingHorizontal === 'number'
+            ? paddingHorizontal
+            : inputModeAdornemntOffset;
+        const offset = affixWidth + padding;
+
+        const isAffix = type === AdornmentType.Affix;
+        const marginKey = `margin${captalize(side)}`;
+
+        return {
+          [marginKey]: isAffix ? 0 : offset,
+          [paddingKey]: isAffix ? offset : inputOffset,
+        };
+      }
+    );
+    const allStyleAdjustmentsMerged =
+      adornmentStyleAdjustmentForNativeInput.reduce(
+        (mergedStyles, currentStyle) => {
+          return {
+            ...mergedStyles,
+            ...currentStyle,
+          };
+        },
+        {}
+      );
+    return allStyleAdjustmentsMerged;
+  } else {
+    return [{}];
+  }
+}
+
+const captalize = (text: string) =>
+  text.charAt(0).toUpperCase() + text.slice(1);
+
+export interface TextFieldAdornmentProps {
+  forceFocus: () => void;
+  adornmentConfig: AdornmentConfig[];
+  topPosition: {
+    [AdornmentType.Affix]: {
+      [AdornmentSide.Left]: number | null;
+      [AdornmentSide.Right]: number | null;
+    };
+    [AdornmentType.Icon]: number;
+  };
+  onAffixChange: {
+    [AdornmentSide.Left]: (event: LayoutChangeEvent) => void;
+    [AdornmentSide.Right]: (event: LayoutChangeEvent) => void;
+  };
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  textStyle?: StyleProp<TextStyle>;
+  visible?: Animated.Value;
+  isTextInputFocused: boolean;
+  paddingHorizontal?: DimensionValue;
+  maxFontSizeMultiplier?: number | undefined | null;
+  theme?: ThemeProp;
+  disabled?: boolean;
+}
+
+const TextFieldAdornment: React.FunctionComponent<TextFieldAdornmentProps> = ({
+  adornmentConfig,
+  left,
+  right,
+  onAffixChange,
+  textStyle,
+  visible,
+  topPosition,
+  isTextInputFocused,
+  forceFocus,
+  paddingHorizontal,
+  maxFontSizeMultiplier,
+  theme,
+  disabled,
+}) => {
+  if (adornmentConfig.length) {
+    return (
+      <>
+        {adornmentConfig.map(({ type, side }: AdornmentConfig) => {
+          let inputAdornmentComponent;
+          if (side === AdornmentSide.Left) {
+            inputAdornmentComponent = left;
+          } else if (side === AdornmentSide.Right) {
+            inputAdornmentComponent = right;
+          }
+
+          const commonProps = {
+            side: side,
+            testID: `${side}-${type}-adornment`,
+            isTextInputFocused,
+            paddingHorizontal,
+            disabled,
+          };
+          if (type === AdornmentType.Icon) {
+            return (
+              <IconAdornment
+                {...commonProps}
+                theme={theme}
+                key={side}
+                icon={inputAdornmentComponent}
+                topPosition={topPosition[AdornmentType.Icon]}
+                forceFocus={forceFocus}
+              />
+            );
+          } else if (type === AdornmentType.Affix) {
+            return (
+              <AffixAdornment
+                {...commonProps}
+                key={side}
+                topPosition={topPosition[AdornmentType.Affix][side]}
+                affix={inputAdornmentComponent}
+                textStyle={textStyle}
+                onLayout={onAffixChange[side]}
+                visible={visible}
+                maxFontSizeMultiplier={maxFontSizeMultiplier}
+              />
+            );
+          } else {
+            return null;
+          }
+        })}
+      </>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default TextFieldAdornment;

package/src/ui/components/TextField/Adornment/TextFieldAffix.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import {
+  Animated,
+  DimensionValue,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import { AdornmentSide } from './enums';
+import { getTextColor } from './utils';
+import { useInternalTheme } from '../../theming';
+import type { ThemeProp } from "../../types";
+import { getConstants } from '../helpers';
+
+export type Props = {
+  /**
+   * Text to show.
+   */
+  text: string;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Accessibility label for the affix. This is read by the screen reader when the user taps the affix.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Style that is passed to the Text element.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+type ContextState = {
+  topPosition: number | null;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  visible?: Animated.Value;
+  textStyle?: StyleProp<TextStyle>;
+  side: AdornmentSide;
+  paddingHorizontal?: DimensionValue;
+  maxFontSizeMultiplier?: number | undefined | null;
+  testID?: string;
+  disabled?: boolean;
+};
+
+const AffixContext = React.createContext<ContextState>({
+  textStyle: { fontFamily: '', color: '' },
+  topPosition: null,
+  side: AdornmentSide.Left,
+});
+
+const AffixAdornment: React.FunctionComponent<
+  {
+    affix: React.ReactNode;
+    testID: string;
+  } & ContextState
+> = ({
+  affix,
+  side,
+  textStyle,
+  topPosition,
+  onLayout,
+  visible,
+  paddingHorizontal,
+  maxFontSizeMultiplier,
+  testID,
+  disabled,
+}) => {
+    return (
+      <AffixContext.Provider
+        value={{
+          side,
+          textStyle,
+          topPosition,
+          onLayout,
+          visible,
+          paddingHorizontal,
+          maxFontSizeMultiplier,
+          testID,
+          disabled,
+        }}
+      >
+        {affix}
+      </AffixContext.Provider>
+    );
+  };
+
+/**
+ * A component to render a leading / trailing text in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       mode="outlined"
+ *       label="Outlined input"
+ *       placeholder="Type something"
+ *       right={<TextInput.Affix text="/100" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+const TextFieldAffix = ({
+  text,
+  textStyle: labelStyle,
+  theme: themeOverrides,
+  onLayout: onTextLayout,
+  onPress,
+  accessibilityLabel = text,
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { AFFIX_OFFSET } = getConstants(theme.isV3);
+
+  const {
+    textStyle,
+    onLayout,
+    topPosition,
+    side,
+    visible,
+    paddingHorizontal,
+    maxFontSizeMultiplier,
+    testID,
+    disabled,
+  } = React.useContext(AffixContext);
+
+  const offset =
+    typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
+
+  const style = {
+    top: topPosition,
+    [side]: offset,
+  } as ViewStyle;
+
+  const textColor = getTextColor({ theme, disabled });
+
+  const content = (
+    <Text
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      style={[{ color: textColor }, textStyle, labelStyle]}
+      onLayout={onTextLayout}
+      testID={`${testID}-text`}
+    >
+      {text}
+    </Text>
+  );
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        style,
+        {
+          opacity:
+            visible?.interpolate({
+              inputRange: [0, 1],
+              outputRange: [1, 0],
+            }) || 1,
+        },
+      ]}
+      onLayout={onLayout}
+      testID={testID}
+    >
+      {onPress ? (
+        <Pressable
+          onPress={onPress}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+        >
+          {content}
+        </Pressable>
+      ) : (
+        content
+      )}
+    </Animated.View>
+  );
+};
+
+TextFieldAffix.displayName = 'TextField.Affix';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default TextFieldAffix;
+
+// @component-docs ignore-next-line
+export { TextFieldAffix, AffixAdornment };

package/src/ui/components/TextField/Adornment/TextFieldIcon.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import {
+  ColorValue,
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { getIconColor } from './utils';
+import { useInternalTheme } from '../../theming';
+import type { $Omit, ThemeProp } from "../../types";
+import type { IconSource } from '../../Icon';
+import IconButton from '../../IconButton/IconButton';
+import { ICON_SIZE } from '../constants';
+import { getConstants } from '../helpers';
+
+export type Props = $Omit<
+  React.ComponentProps<typeof IconButton>,
+  'icon' | 'theme' | 'color' | 'iconColor'
+> & {
+  /**
+   * @renamed Renamed from 'name' to 'icon` in v5.x
+   * Icon to show.
+   */
+  icon: IconSource;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Whether the TextInput will focus after onPress.
+   */
+  forceTextInputFocus?: boolean;
+  /**
+   * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color.
+   */
+  color?: ((isTextInputFocused: boolean) => string | undefined) | string;
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
+  style?: StyleProp<ViewStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+type StyleContextType = {
+  style: StyleProp<ViewStyle>;
+  isTextInputFocused: boolean;
+  forceFocus: () => void;
+  testID: string;
+  disabled?: boolean;
+};
+
+const StyleContext = React.createContext<StyleContextType>({
+  style: {},
+  isTextInputFocused: false,
+  forceFocus: () => { },
+  testID: '',
+});
+
+const IconAdornment: React.FunctionComponent<
+  {
+    testID: string;
+    icon: React.ReactNode;
+    topPosition: number;
+    side: 'left' | 'right';
+    theme?: ThemeProp;
+    disabled?: boolean;
+  } & Omit<StyleContextType, 'style'>
+> = ({
+  icon,
+  topPosition,
+  side,
+  isTextInputFocused,
+  forceFocus,
+  testID,
+  theme: themeOverrides,
+  disabled,
+}) => {
+    const { isV3 } = useInternalTheme(themeOverrides);
+    const { ICON_OFFSET } = getConstants(isV3);
+
+    const style = {
+      top: topPosition,
+      [side]: ICON_OFFSET,
+    };
+    const contextState = {
+      style,
+      isTextInputFocused,
+      forceFocus,
+      testID,
+      disabled,
+    };
+
+    return (
+      <StyleContext.Provider value={contextState}>{icon}</StyleContext.Provider>
+    );
+  };
+
+/**
+ * A component to render a leading / trailing icon in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       label="Password"
+ *       secureTextEntry
+ *       right={<TextInput.Icon icon="eye" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+const TextFieldIcon = ({
+  icon,
+  onPress,
+  forceTextInputFocus = true,
+  color: customColor,
+  theme: themeOverrides,
+  rippleColor,
+  ...rest
+}: Props) => {
+  const { style, isTextInputFocused, forceFocus, testID, disabled } =
+    React.useContext(StyleContext);
+
+  const onPressWithFocusControl = React.useCallback(
+    (e: GestureResponderEvent) => {
+      if (forceTextInputFocus && !isTextInputFocused) {
+        forceFocus();
+      }
+
+      onPress?.(e);
+    },
+    [forceTextInputFocus, forceFocus, isTextInputFocused, onPress]
+  );
+
+  const theme = useInternalTheme(themeOverrides);
+
+  const iconColor = getIconColor({
+    theme,
+    disabled,
+    isTextInputFocused,
+    customColor,
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      <IconButton
+        icon={icon}
+        style={styles.iconButton}
+        size={ICON_SIZE}
+        onPress={onPressWithFocusControl}
+        iconColor={iconColor}
+        testID={testID}
+        theme={themeOverrides}
+        rippleColor={rippleColor}
+        {...rest}
+      />
+    </View>
+  );
+};
+TextFieldIcon.displayName = 'TextField.Icon';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconButton: {
+    margin: 0,
+  },
+});
+
+export default TextFieldIcon;
+
+// @component-docs ignore-next-line
+export { IconAdornment };

package/src/ui/components/TextField/Adornment/enums.tsx

@@ -0,0 +1,12 @@
+export enum AdornmentType {
+  Icon = 'icon',
+  Affix = 'affix',
+}
+export enum AdornmentSide {
+  Right = 'right',
+  Left = 'left',
+}
+export enum InputMode {
+  Outlined = 'outlined',
+  Flat = 'flat',
+}

package/src/ui/components/TextField/Adornment/types.tsx

@@ -0,0 +1,11 @@
+import type { AdornmentSide, AdornmentType } from './enums';
+
+export type AdornmentConfig = {
+  side: AdornmentSide;
+  type: AdornmentType;
+};
+export type AdornmentStyleAdjustmentForNativeInput = {
+  adornmentStyleAdjustmentForNativeInput: Array<
+    { paddingRight: number; paddingLeft: number } | {}
+  >;
+};

package/src/ui/components/TextField/Adornment/utils.ts

@@ -0,0 +1,66 @@
+import type { InternalTheme } from "../../types";
+
+type BaseProps = {
+  theme: InternalTheme;
+  disabled?: boolean;
+};
+
+// Simple hex to rgba conversion
+const hexToRgba = (hex: string, alpha: number): string => {
+  // Handle rgba strings
+  if (hex.startsWith('rgba')) {
+    return hex;
+  }
+  // Handle rgb strings
+  if (hex.startsWith('rgb')) {
+    const match = hex.match(/\d+/g);
+    if (match && match.length >= 3) {
+      return `rgba(${match[0]}, ${match[1]}, ${match[2]}, ${alpha})`;
+    }
+  }
+  // Handle hex strings
+  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 `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export function getTextColor({ theme, disabled }: BaseProps) {
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    }
+    return theme.colors.onSurfaceVariant;
+  }
+  // For non-V3 themes, apply opacity to text color
+  const textColor = theme?.colors?.onSurface || theme?.colors?.text || '#000000';
+  const opacity = theme.dark ? 0.7 : 0.54;
+  return hexToRgba(textColor, opacity);
+}
+
+export function getIconColor({
+  theme,
+  isTextInputFocused,
+  disabled,
+  customColor,
+}: BaseProps & {
+  isTextInputFocused: boolean;
+  customColor?: ((isTextInputFocused: boolean) => string | undefined) | string;
+}) {
+  if (typeof customColor === 'function') {
+    return customColor(isTextInputFocused);
+  }
+  if (customColor) {
+    return customColor;
+  }
+
+  if (!theme.isV3) {
+    return theme.colors.text || theme.colors.onSurface;
+  }
+
+  if (disabled) {
+    return theme.colors.onSurfaceDisabled;
+  }
+
+  return theme.colors.onSurfaceVariant;
+}