sapo-components-ui-rn 1.0.0

package/src/components/TextInput/helpers.tsx

@@ -0,0 +1,546 @@
+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 { TextInputLabelProp } 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?: TextInputLabelProp | 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: number = 0,
+  optionalPadding: number = 0
+): number => {
+  const customHeight = height > 0 ? height : 0;
+
+  return Math.floor((customHeight - labelHeight) / 2 + optionalPadding);
+};
+
+export const calculateInputHeight = (
+  labelHeight: number,
+  height: any = 0,
+  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,
+}: {
+  adornmentConfig: AdornmentConfig[];
+}) => {
+  const { ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } = getConstants();
+
+  let paddingLeft = 0;
+  let paddingRight = 0;
+
+  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 (disabled) {
+    return theme.colors.textSecondary;
+  }
+
+  return theme.colors.textDefault;
+};
+
+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.surfaceErrorDefault;
+  }
+
+  if (modeColor) {
+    return modeColor;
+  }
+
+  if (disabled) {
+    return theme.colors.surfaceCriticalDisabled;
+  }
+
+  return theme.colors.surfaceBrandDefault;
+};
+
+const getPlaceholderColor = ({ theme, disabled }: BaseProps) => {
+  if (disabled) {
+    return theme.colors.textPlaceholder;
+  }
+
+  return theme.colors.textSecondary;
+};
+
+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 (disabled) {
+    return theme.colors.surfacePrimaryDisabled;
+  } else {
+    return theme.colors.surfacePrimaryDefault;
+  }
+};
+
+const getFlatUnderlineColor = ({
+  theme,
+  disabled,
+  underlineColor,
+}: BaseProps & { underlineColor?: string }) => {
+  if (!disabled && underlineColor) {
+    return underlineColor;
+  }
+
+  if (disabled) {
+    return theme.colors.surfacePrimaryDisabled;
+  }
+
+  return theme.colors.surfacePrimaryDefault;
+};
+
+const getOutlinedOutlineInputColor = ({
+  theme,
+  disabled,
+  customOutlineColor,
+}: BaseProps & { customOutlineColor?: string }) => {
+  if (!disabled && customOutlineColor) {
+    return customOutlineColor;
+  }
+
+  if (disabled) {
+    if (theme.dark) {
+      return "transparent";
+    }
+    return theme.colors.surfacePrimaryDisabled;
+  }
+
+  return theme.colors.borderPrimaryDefault;
+};
+
+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.surfaceErrorDefault,
+    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.surfaceErrorDefault,
+  };
+};
+
+export const getConstants = () => {
+  // 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;
+
+  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;
+
+  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,
+  };
+};

package/src/components/TextInput/types.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import type {
+  TextInput as NativeTextInput,
+  Animated,
+  TextStyle,
+  LayoutChangeEvent,
+  ColorValue,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+  NativeSyntheticEvent,
+  TextLayoutEventData,
+} from "react-native";
+
+import type { $Omit, InternalTheme, ThemeProp } from "./../../types";
+
+export type TextInputLabelProp = string | React.ReactElement;
+
+type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+  mode?: "flat" | "outlined";
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  disabled?: boolean;
+  label?: TextInputLabelProp;
+  placeholder?: string;
+  error?: boolean;
+  onChangeText?: Function;
+  selectionColor?: string;
+  cursorColor?: string;
+  underlineColor?: string;
+  activeUnderlineColor?: string;
+  outlineColor?: string;
+  activeOutlineColor?: string;
+  textColor?: string;
+  dense?: boolean;
+  multiline?: boolean;
+  numberOfLines?: number;
+  onFocus?: (args: any) => void;
+  onBlur?: (args: any) => void;
+  render?: (props: RenderProps) => React.ReactNode;
+  value?: string;
+  style?: StyleProp<TextStyle>;
+  theme?: ThemeProp;
+  testID?: string;
+  contentStyle?: StyleProp<TextStyle>;
+  outlineStyle?: StyleProp<ViewStyle>;
+  underlineStyle?: StyleProp<ViewStyle>;
+  scaledLabel?: boolean;
+};
+
+export type RenderProps = {
+  ref: (a?: NativeTextInput | null) => void;
+  onChangeText?: (a: string) => void;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  editable?: boolean;
+  selectionColor?: string;
+  cursorColor?: string;
+  onFocus?: (args: any) => void;
+  onBlur?: (args: any) => void;
+  underlineColorAndroid?: string;
+  onLayout?: (args: any) => void;
+  style: any;
+  multiline?: boolean;
+  numberOfLines?: number;
+  value?: string;
+  adjustsFontSizeToFit?: boolean;
+  testID?: string;
+};
+type TextInputTypesWithoutMode = $Omit<TextInputProps, "mode">;
+export type State = {
+  labeled: Animated.Value;
+  error: Animated.Value;
+  focused: boolean;
+  displayPlaceholder: boolean;
+  value?: string;
+  labelTextLayout: { width: number };
+  labelLayout: { measured: boolean; width: number; height: number };
+  leftLayout: { height: number | null; width: number | null };
+  rightLayout: { height: number | null; width: number | null };
+  inputContainerLayout: { width: number };
+  contentStyle?: StyleProp<ViewProps>;
+};
+export type ChildTextInputProps = {
+  parentState: State;
+  innerRef: (ref?: NativeTextInput | null) => void;
+  onFocus?: (args: any) => void;
+  onBlur?: (args: any) => void;
+  forceFocus: () => void;
+  onChangeText?: (value: string) => void;
+  onInputLayout: (event: LayoutChangeEvent) => void;
+  onLayoutAnimatedText: (args: any) => void;
+  onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+  onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;
+  onRightAffixLayoutChange: (event: LayoutChangeEvent) => void;
+  clearButton?: boolean;
+} & $Omit<TextInputTypesWithoutMode, "theme"> & { theme: InternalTheme };
+
+export type LabelProps = {
+  mode?: "flat" | "outlined";
+  placeholderStyle: any;
+  placeholderOpacity:
+    | number
+    | Animated.Value
+    | Animated.AnimatedInterpolation<number>;
+  baseLabelTranslateX: number;
+  baseLabelTranslateY: number;
+  wiggleOffsetX: number;
+  labelScale: number;
+  fontSize: number;
+  lineHeight?: number | undefined;
+  fontWeight: TextStyle["fontWeight"];
+  font: any;
+  topPosition: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  labelTranslationXOffset?: number;
+  placeholderColor: string | null;
+  backgroundColor?: ColorValue;
+  label?: TextInputLabelProp | null;
+  hasActiveOutline?: boolean | null;
+  activeColor: string;
+  errorColor?: string;
+  labelError?: boolean | null;
+  onLayoutAnimatedText: (args: any) => void;
+  onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+  roundness: number;
+  maxFontSizeMultiplier?: number | undefined | null;
+  testID?: string;
+  contentStyle?: StyleProp<ViewProps>;
+  theme?: ThemeProp;
+};
+export type InputLabelProps = {
+  labeled: Animated.Value;
+  error: Animated.Value;
+  focused: boolean;
+  wiggle: boolean;
+  opacity: number;
+  labelLayoutMeasured: boolean;
+  labelLayoutWidth: number;
+  labelLayoutHeight: number;
+  inputContainerLayout: { width: number };
+  labelBackground?: any;
+  maxFontSizeMultiplier?: number | undefined | null;
+  scaledLabel?: boolean;
+} & LabelProps;
+
+export type LabelBackgroundProps = {
+  labelStyle: any;
+  labeled: Animated.Value;
+  labelLayoutWidth: number;
+  labelLayoutHeight: number;
+  maxFontSizeMultiplier?: number | undefined | null;
+  theme?: ThemeProp;
+} & LabelProps;