@oxyhq/services 19.0.1 → 19.1.1

package/src/ui/components/TextField/helpers.tsx

@@ -1,611 +0,0 @@
-import { Platform } from 'react-native';
-
-import color from 'color';
-
-import { AdornmentSide, AdornmentType } from './Adornment/enums';
-import type { AdornmentConfig } from './Adornment/types';
-import {
-  MIN_WIDTH,
-  ADORNMENT_SIZE,
-  MD2_ADORNMENT_OFFSET,
-  MD2_AFFIX_OFFSET,
-  MD2_FLAT_INPUT_OFFSET,
-  MD2_ICON_OFFSET,
-  MD2_INPUT_PADDING_HORIZONTAL,
-  MD2_LABEL_PADDING_HORIZONTAL,
-  MD2_LABEL_PADDING_TOP,
-  MD2_MIN_HEIGHT,
-  MD2_OUTLINED_INPUT_OFFSET,
-  MD3_ADORNMENT_OFFSET,
-  MD3_AFFIX_OFFSET,
-  MD3_FLAT_INPUT_OFFSET,
-  MD3_ICON_OFFSET,
-  MD3_INPUT_PADDING_HORIZONTAL,
-  MD3_LABEL_PADDING_HORIZONTAL,
-  MD3_LABEL_PADDING_TOP,
-  MD3_MIN_HEIGHT,
-  MD3_OUTLINED_INPUT_OFFSET,
-} from './constants';
-import type { TextFieldLabelProp } from './types';
-import type { InternalTheme } from "../types";
-
-type PaddingProps = {
-  height: number | null;
-  labelHalfHeight: number;
-  multiline: boolean | null;
-  dense: boolean | null;
-  topPosition: number;
-  fontSize: number;
-  lineHeight?: number;
-  label?: TextFieldLabelProp | null;
-  scale: number;
-  offset: number;
-  isAndroid: boolean;
-  styles: { paddingTop: number; paddingBottom: number };
-};
-
-type AdjProps = PaddingProps & {
-  pad: number;
-};
-
-export type Padding = { paddingTop: number; paddingBottom: number };
-
-export const calculateLabelTopPosition = (
-  labelHeight: number,
-  height = 0,
-  optionalPadding = 0
-): number => {
-  const customHeight = height > 0 ? height : 0;
-
-  return Math.floor((customHeight - labelHeight) / 2 + optionalPadding);
-};
-
-export const calculateInputHeight = (
-  labelHeight: number,
-  height: any,
-  minHeight: number
-): number => {
-  const finalHeight = height > 0 ? height : labelHeight;
-
-  if (height > 0) return height;
-  return finalHeight < minHeight ? minHeight : finalHeight;
-};
-
-export const calculatePadding = (props: PaddingProps): number => {
-  const { height, multiline = false } = props;
-
-  let result = 0;
-
-  if (multiline) {
-    if (height && multiline) {
-      result = calculateTextAreaPadding(props);
-    } else {
-      result = calculateInputPadding(props);
-    }
-  }
-
-  return Math.max(0, result);
-};
-
-const calculateTextAreaPadding = (props: PaddingProps) => {
-  const { dense } = props;
-
-  return dense ? 10 : 20;
-};
-
-const calculateInputPadding = ({
-  topPosition,
-  fontSize,
-  multiline,
-  scale,
-  dense,
-  offset,
-  isAndroid,
-}: PaddingProps): number => {
-  const refFontSize = scale * fontSize;
-  let result = Math.floor(topPosition / 2);
-
-  result =
-    result +
-    Math.floor((refFontSize - fontSize) / 2) -
-    (scale < 1 ? offset / 2 : 0);
-
-  if (multiline && isAndroid)
-    result = Math.min(dense ? offset / 2 : offset, result);
-
-  return result;
-};
-
-export const adjustPaddingOut = ({
-  pad,
-  multiline,
-  label,
-  scale,
-  height,
-  fontSize,
-  lineHeight,
-  dense,
-  offset,
-  isAndroid,
-}: AdjProps): Padding => {
-  const fontHeight = lineHeight ?? fontSize;
-  const refFontHeight = scale * fontSize;
-  let result = pad;
-
-  if (!isAndroid && height && !multiline) {
-    return {
-      paddingTop: Math.max(0, (height - fontHeight) / 2),
-      paddingBottom: Math.max(0, (height - fontHeight) / 2),
-    };
-  }
-  if (!isAndroid && multiline) {
-    if (dense) {
-      if (label) {
-        result += scale < 1 ? Math.min(offset, (refFontHeight / 2) * scale) : 0;
-      } else {
-        result += 0;
-      }
-    }
-    if (!dense) {
-      if (label) {
-        result +=
-          scale < 1
-            ? Math.min(offset, refFontHeight * scale)
-            : Math.min(offset / 2, refFontHeight * scale);
-      } else {
-        result += scale < 1 ? Math.min(offset / 2, refFontHeight * scale) : 0;
-      }
-    }
-    result = Math.floor(result);
-  }
-  return { paddingTop: result, paddingBottom: result };
-};
-
-export const adjustPaddingFlat = ({
-  pad,
-  scale,
-  multiline,
-  label,
-  height,
-  offset,
-  dense,
-  fontSize,
-  isAndroid,
-  styles,
-}: AdjProps): Padding => {
-  let result = pad;
-  let topResult = result;
-  let bottomResult = result;
-  const { paddingTop, paddingBottom } = styles;
-  const refFontSize = scale * fontSize;
-
-  if (!multiline) {
-    // do not modify padding if input is not multiline
-    if (label) {
-      // return const style for flat input with label
-      return { paddingTop, paddingBottom };
-    }
-    // return pad for flat input without label
-    return { paddingTop: result, paddingBottom: result };
-  }
-
-  if (label) {
-    // add paddings passed from styles
-    topResult = paddingTop;
-    bottomResult = paddingBottom;
-
-    // adjust top padding for iOS
-    if (!isAndroid) {
-      if (dense) {
-        topResult +=
-          scale < 1
-            ? Math.min(result, refFontSize * scale) - result / 2
-            : Math.min(result, refFontSize * scale) - result / 2;
-      }
-      if (!dense) {
-        topResult +=
-          scale < 1
-            ? Math.min(offset / 2, refFontSize * scale)
-            : Math.min(result, refFontSize * scale) - offset / 2;
-      }
-    }
-    topResult = Math.floor(topResult);
-  } else {
-    if (height) {
-      // center text when height is passed
-      return {
-        paddingTop: Math.max(0, (height - fontSize) / 2),
-        paddingBottom: Math.max(0, (height - fontSize) / 2),
-      };
-    }
-    // adjust paddings for iOS if no label
-    if (!isAndroid) {
-      if (dense) {
-        result +=
-          scale < 1
-            ? Math.min(offset / 2, (fontSize / 2) * scale)
-            : Math.min(offset / 2, scale);
-      }
-      if (!dense) {
-        result +=
-          scale < 1
-            ? Math.min(offset, fontSize * scale)
-            : Math.min(fontSize, (offset / 2) * scale);
-      }
-
-      result = Math.floor(result);
-      topResult = result;
-      bottomResult = result;
-    }
-  }
-
-  return {
-    paddingTop: Math.max(0, topResult),
-    paddingBottom: Math.max(0, bottomResult),
-  };
-};
-
-export function calculateFlatAffixTopPosition({
-  height,
-  paddingTop,
-  paddingBottom,
-  affixHeight,
-}: {
-  height: number;
-  paddingTop: number;
-  paddingBottom: number;
-  affixHeight: number;
-}): number {
-  const inputHeightWithoutPadding = height - paddingTop - paddingBottom;
-
-  const halfOfTheInputHeightDecreasedByAffixHeight =
-    (inputHeightWithoutPadding - affixHeight) / 2;
-
-  return paddingTop + halfOfTheInputHeightDecreasedByAffixHeight;
-}
-
-export function calculateOutlinedIconAndAffixTopPosition({
-  height,
-  affixHeight,
-  labelYOffset,
-}: {
-  height: number;
-  affixHeight: number;
-  labelYOffset: number;
-}): number {
-  return (height - affixHeight + labelYOffset) / 2;
-}
-
-export const calculateFlatInputHorizontalPadding = ({
-  adornmentConfig,
-  isV3,
-}: {
-  adornmentConfig: AdornmentConfig[];
-  isV3?: boolean;
-}) => {
-  const { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } =
-    getConstants(isV3);
-
-  let paddingLeft = LABEL_PADDING_HORIZONTAL;
-  let paddingRight = LABEL_PADDING_HORIZONTAL;
-
-  adornmentConfig.forEach(({ type, side }) => {
-    if (type === AdornmentType.Icon && side === AdornmentSide.Left) {
-      paddingLeft = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
-    } else if (side === AdornmentSide.Right) {
-      if (type === AdornmentType.Affix) {
-        paddingRight = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
-      } else if (type === AdornmentType.Icon) {
-        paddingRight = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
-      }
-    }
-  });
-
-  return { paddingLeft, paddingRight };
-};
-
-type BaseProps = {
-  theme: InternalTheme;
-  disabled?: boolean;
-};
-
-type Mode = 'flat' | 'outlined';
-
-const getInputTextColor = ({
-  theme,
-  textColor,
-  disabled,
-}: BaseProps & { textColor?: string }) => {
-  if (textColor) {
-    return textColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return theme.colors.onSurface;
-  }
-
-  if (disabled) {
-    return color(theme.colors.text || theme.colors.onSurface).alpha(0.54).rgb().string();
-  }
-
-  return theme.colors.text || theme.colors.onSurface;
-};
-
-const getActiveColor = ({
-  theme,
-  disabled,
-  error,
-  activeUnderlineColor,
-  activeOutlineColor,
-  mode,
-}: BaseProps & {
-  error?: boolean;
-  activeUnderlineColor?: string;
-  activeOutlineColor?: string;
-  mode?: Mode;
-}) => {
-  const isFlat = mode === 'flat';
-  const modeColor = isFlat ? activeUnderlineColor : activeOutlineColor;
-
-  if (error) {
-    return theme.colors.error;
-  }
-
-  if (modeColor) {
-    return modeColor;
-  }
-
-  if (disabled) {
-    if (theme.isV3) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return color(theme.colors.text || theme.colors.onSurface).alpha(0.54).rgb().string();
-  }
-
-  return theme.colors.primary;
-};
-
-const getPlaceholderColor = ({ theme, disabled }: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return theme.colors.onSurfaceVariant;
-  }
-
-  if (disabled) {
-    return theme.colors.disabled || theme.colors.onSurfaceDisabled;
-  }
-
-  return theme.colors.placeholder || theme.colors.onSurfaceVariant;
-};
-
-const getSelectionColor = ({
-  activeColor,
-  customSelectionColor,
-}: {
-  activeColor: string;
-  customSelectionColor?: string;
-}) => {
-  if (typeof customSelectionColor !== 'undefined') {
-    return customSelectionColor;
-  }
-
-  if (Platform.OS === 'android') {
-    return color(activeColor).alpha(0.54).rgb().string();
-  }
-
-  return activeColor;
-};
-
-const getFlatBackgroundColor = ({ theme, disabled }: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return color(theme.colors.onSurface).alpha(0.04).rgb().string();
-    }
-      return theme.colors.surfaceVariant;
-  }
-
-  if (disabled) {
-    return undefined;
-  }
-
-  return theme.dark
-    ? color(theme.colors?.background).lighten(0.24).rgb().string()
-    : color(theme.colors?.background).darken(0.06).rgb().string();
-};
-
-const getFlatUnderlineColor = ({
-  theme,
-  disabled,
-  underlineColor,
-}: BaseProps & { underlineColor?: string }) => {
-  if (!disabled && underlineColor) {
-    return underlineColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    return theme.colors.onSurfaceVariant;
-  }
-
-  if (disabled) {
-    return 'transparent';
-  }
-
-  return theme.colors.disabled || theme.colors.onSurfaceVariant;
-};
-
-const getOutlinedOutlineInputColor = ({
-  theme,
-  disabled,
-  customOutlineColor,
-}: BaseProps & { customOutlineColor?: string }) => {
-  const isTransparent = color(customOutlineColor).alpha() === 0;
-
-  if (!disabled && customOutlineColor) {
-    return customOutlineColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      if (theme.dark) {
-        return 'transparent';
-      }
-      return theme.colors.surfaceDisabled;
-    }
-
-    return theme.colors.outline;
-  }
-
-  if (disabled) {
-    if (isTransparent) {
-      return customOutlineColor;
-    }
-    return theme.colors.disabled || theme.colors.onSurfaceDisabled;
-  }
-  return theme.colors.placeholder || theme.colors.onSurfaceVariant;
-};
-
-export const getFlatInputColors = ({
-  underlineColor,
-  activeUnderlineColor,
-  customSelectionColor,
-  textColor,
-  disabled,
-  error,
-  theme,
-}: {
-  underlineColor?: string;
-  activeUnderlineColor?: string;
-  customSelectionColor?: string;
-  textColor?: string;
-  disabled?: boolean;
-  error?: boolean;
-  theme: InternalTheme;
-}) => {
-  const baseFlatColorProps = { theme, disabled };
-  const activeColor = getActiveColor({
-    ...baseFlatColorProps,
-    error,
-    activeUnderlineColor,
-    mode: 'flat',
-  });
-
-  return {
-    inputTextColor: getInputTextColor({
-      ...baseFlatColorProps,
-      textColor,
-    }),
-    activeColor,
-    underlineColorCustom: getFlatUnderlineColor({
-      ...baseFlatColorProps,
-      underlineColor,
-    }),
-    placeholderColor: getPlaceholderColor(baseFlatColorProps),
-    selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
-    errorColor: theme.colors.error,
-    backgroundColor: getFlatBackgroundColor(baseFlatColorProps),
-  };
-};
-
-export const getOutlinedInputColors = ({
-  activeOutlineColor,
-  customOutlineColor,
-  customSelectionColor,
-  textColor,
-  disabled,
-  error,
-  theme,
-}: {
-  activeOutlineColor?: string;
-  customOutlineColor?: string;
-  customSelectionColor?: string;
-  textColor?: string;
-  disabled?: boolean;
-  error?: boolean;
-  theme: InternalTheme;
-}) => {
-  const baseOutlinedColorProps = { theme, disabled };
-  const activeColor = getActiveColor({
-    ...baseOutlinedColorProps,
-    error,
-    activeOutlineColor,
-    mode: 'outlined',
-  });
-
-  return {
-    inputTextColor: getInputTextColor({
-      ...baseOutlinedColorProps,
-      textColor,
-    }),
-    activeColor,
-    outlineColor: getOutlinedOutlineInputColor({
-      ...baseOutlinedColorProps,
-      customOutlineColor,
-    }),
-    placeholderColor: getPlaceholderColor(baseOutlinedColorProps),
-    selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
-    errorColor: theme.colors.error,
-  };
-};
-
-export const getConstants = (isV3?: boolean) => {
-  // Text input affix
-  let AFFIX_OFFSET;
-  // Text input icon
-  let ICON_OFFSET;
-  //Text input flat
-  let LABEL_PADDING_TOP;
-  let LABEL_PADDING_HORIZONTAL;
-  let FLAT_INPUT_OFFSET;
-  let MIN_HEIGHT;
-  // Text input outlined;
-  let INPUT_PADDING_HORIZONTAL;
-  let ADORNMENT_OFFSET;
-  let OUTLINED_INPUT_OFFSET;
-
-  if (isV3) {
-    AFFIX_OFFSET = MD3_AFFIX_OFFSET;
-    ICON_OFFSET = MD3_ICON_OFFSET;
-    LABEL_PADDING_TOP = MD3_LABEL_PADDING_TOP;
-    LABEL_PADDING_HORIZONTAL = MD3_LABEL_PADDING_HORIZONTAL;
-    FLAT_INPUT_OFFSET = MD3_FLAT_INPUT_OFFSET;
-    MIN_HEIGHT = MD3_MIN_HEIGHT;
-    INPUT_PADDING_HORIZONTAL = MD3_INPUT_PADDING_HORIZONTAL;
-    ADORNMENT_OFFSET = MD3_ADORNMENT_OFFSET;
-    OUTLINED_INPUT_OFFSET = MD3_OUTLINED_INPUT_OFFSET;
-  } else {
-    AFFIX_OFFSET = MD2_AFFIX_OFFSET;
-    ICON_OFFSET = MD2_ICON_OFFSET;
-    LABEL_PADDING_TOP = MD2_LABEL_PADDING_TOP;
-    LABEL_PADDING_HORIZONTAL = MD2_LABEL_PADDING_HORIZONTAL;
-    FLAT_INPUT_OFFSET = MD2_FLAT_INPUT_OFFSET;
-    MIN_HEIGHT = MD2_MIN_HEIGHT;
-    INPUT_PADDING_HORIZONTAL = MD2_INPUT_PADDING_HORIZONTAL;
-    ADORNMENT_OFFSET = MD2_ADORNMENT_OFFSET;
-    OUTLINED_INPUT_OFFSET = MD2_OUTLINED_INPUT_OFFSET;
-  }
-
-  return {
-    AFFIX_OFFSET,
-    ICON_OFFSET,
-    LABEL_PADDING_TOP,
-    LABEL_PADDING_HORIZONTAL,
-    FLAT_INPUT_OFFSET,
-    MIN_HEIGHT,
-    INPUT_PADDING_HORIZONTAL,
-    ADORNMENT_OFFSET,
-    OUTLINED_INPUT_OFFSET,
-    MIN_WIDTH,
-  };
-};