@oxyhq/services 19.0.1 → 19.1.0

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

@@ -1,205 +0,0 @@
-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> {
-  const 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;
-  }
-    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}
-              />
-            );
-          }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}
-              />
-            );
-          }
-            return null;
-        })}
-      </>
-    );
-  }
-    return null;
-};
-
-export default TextFieldAdornment;

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

@@ -1,212 +0,0 @@
-import React from 'react';
-import {
-  Animated,
-  type DimensionValue,
-  type GestureResponderEvent,
-  type LayoutChangeEvent,
-  Pressable,
-  type StyleProp,
-  StyleSheet,
-  Text,
-  type TextStyle,
-  type 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

@@ -1,195 +0,0 @@
-import React from 'react';
-import {
-  type ColorValue,
-  type GestureResponderEvent,
-  type StyleProp,
-  StyleSheet,
-  View,
-  type 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

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

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

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

@@ -1,66 +0,0 @@
-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 = Number.parseInt(hex.slice(1, 3), 16);
-  const g = Number.parseInt(hex.slice(3, 5), 16);
-  const b = Number.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;
-}