@oxyhq/services 5.13.40 → 5.15.0

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

@@ -0,0 +1,488 @@
+import * as React from 'react';
+import {
+  I18nManager,
+  Platform,
+  StyleSheet,
+  TextInput as NativeTextInput,
+  TextStyle,
+  View,
+  Animated,
+} from 'react-native';
+import { useThemeColors } from '../../hooks/useThemeColors';
+
+import { Underline } from './Addons/Underline';
+import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums';
+import TextFieldAdornment, {
+  TextFieldAdornmentProps,
+} from './Adornment/TextFieldAdornment';
+import {
+  getAdornmentConfig,
+  getAdornmentStyleAdjustmentForNativeInput,
+} from './Adornment/TextFieldAdornment';
+import {
+  ADORNMENT_SIZE,
+  LABEL_PADDING_TOP_DENSE,
+  LABEL_WIGGLE_X_OFFSET,
+  MAXIMIZED_LABEL_FONT_SIZE,
+  MINIMIZED_LABEL_FONT_SIZE,
+  MINIMIZED_LABEL_Y_OFFSET,
+  MIN_DENSE_HEIGHT,
+  MIN_DENSE_HEIGHT_WL,
+} from './constants';
+import {
+  adjustPaddingFlat,
+  calculateFlatAffixTopPosition,
+  calculateFlatInputHorizontalPadding,
+  calculateInputHeight,
+  calculateLabelTopPosition,
+  calculatePadding,
+  getConstants,
+  getFlatInputColors,
+  Padding,
+} from './helpers';
+import InputLabel from './Label/InputLabel';
+import type { ChildTextInputProps, RenderProps } from './types';
+
+const TextInputFlat = ({
+  disabled = false,
+  editable = true,
+  label,
+  error = false,
+  selectionColor: customSelectionColor,
+  cursorColor,
+  underlineColor,
+  underlineStyle,
+  activeUnderlineColor,
+  textColor,
+  dense,
+  style,
+  theme,
+  render = (props: RenderProps) => <NativeTextInput {...props} />,
+  multiline = false,
+  parentState,
+  innerRef,
+  onFocus,
+  forceFocus,
+  onBlur,
+  onChangeText,
+  onLayoutAnimatedText,
+  onLabelTextLayout,
+  onLeftAffixLayoutChange,
+  onRightAffixLayoutChange,
+  onInputLayout,
+  left,
+  right,
+  placeholderTextColor,
+  testID = 'text-input-flat',
+  contentStyle,
+  scaledLabel,
+  ...rest
+}: ChildTextInputProps) => {
+  const isAndroid = Platform.OS === 'android';
+  const { isV3, roundness } = theme;
+  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.default;
+  const hasActiveOutline = parentState.focused || error;
+
+  const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT, MIN_WIDTH } =
+    getConstants(isV3);
+
+  const {
+    fontSize: fontSizeStyle,
+    lineHeight: lineHeightStyle,
+    fontWeight,
+    height,
+    paddingHorizontal,
+    textAlign,
+    ...viewStyle
+  } = (StyleSheet.flatten(style) || {}) as TextStyle;
+  const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
+  // Always set a minimum lineHeight to prevent text cutoff
+  // Use at least 1.4x fontSize for better text spacing
+  const lineHeight =
+    lineHeightStyle || fontSize * 1.4;
+
+  const isPaddingHorizontalPassed =
+    paddingHorizontal !== undefined && typeof paddingHorizontal === 'number';
+
+  const adornmentConfig = getAdornmentConfig({
+    left,
+    right,
+  });
+
+  let { paddingLeft, paddingRight } = calculateFlatInputHorizontalPadding({
+    adornmentConfig,
+    isV3,
+  });
+
+  if (isPaddingHorizontalPassed) {
+    paddingLeft = paddingHorizontal as number;
+    paddingRight = paddingHorizontal as number;
+  }
+
+  const { leftLayout, rightLayout } = parentState;
+
+  const rightAffixWidth = right
+    ? rightLayout.width || ADORNMENT_SIZE
+    : ADORNMENT_SIZE;
+
+  const leftAffixWidth = left
+    ? leftLayout.width || ADORNMENT_SIZE
+    : ADORNMENT_SIZE;
+
+  const adornmentStyleAdjustmentForNativeInput =
+    getAdornmentStyleAdjustmentForNativeInput({
+      adornmentConfig,
+      rightAffixWidth,
+      leftAffixWidth,
+      paddingHorizontal,
+      inputOffset: FLAT_INPUT_OFFSET,
+      mode: InputMode.Flat,
+      isV3,
+    });
+
+  const {
+    inputTextColor,
+    activeColor,
+    underlineColorCustom,
+    placeholderColor,
+    errorColor,
+    backgroundColor,
+    selectionColor,
+  } = getFlatInputColors({
+    underlineColor,
+    activeUnderlineColor,
+    customSelectionColor,
+    textColor,
+    disabled,
+    error,
+    theme,
+  });
+
+  const themeColors = useThemeColors();
+
+  const containerStyle = {
+    backgroundColor: themeColors.inputBackground,
+    borderTopLeftRadius: theme.roundness,
+    borderTopRightRadius: theme.roundness,
+  };
+
+  // Override text color with theme color (unless custom textColor prop is provided)
+  // If disabled, keep the original inputTextColor which handles opacity correctly
+  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : themeColors.text);
+
+  const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
+  const fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
+
+  const labelWidth = parentState.labelLayout.width;
+  const labelHeight = parentState.labelLayout.height;
+  const labelHalfWidth = labelWidth / 2;
+  const labelHalfHeight = labelHeight / 2;
+
+  const baseLabelTranslateX =
+    (I18nManager.getConstants().isRTL ? 1 : -1) *
+    (labelHalfWidth - (labelScale * labelWidth) / 2) +
+    (1 - labelScale) *
+    (I18nManager.getConstants().isRTL ? -1 : 1) *
+    paddingLeft;
+
+  const minInputHeight = dense
+    ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) - LABEL_PADDING_TOP_DENSE
+    : MIN_HEIGHT - LABEL_PADDING_TOP;
+
+  const inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
+
+  const topPosition = calculateLabelTopPosition(
+    labelHeight,
+    inputHeight,
+    multiline && height ? 0 : !height ? minInputHeight / 2 : 0
+  );
+
+  if (height && typeof height !== 'number') {
+    // eslint-disable-next-line
+    console.warn('Currently we support only numbers in height prop');
+  }
+
+  const paddingSettings = {
+    height: height ? +height : null,
+    labelHalfHeight,
+    offset: FLAT_INPUT_OFFSET,
+    multiline: multiline ? multiline : null,
+    dense: dense ? dense : null,
+    topPosition,
+    fontSize,
+    lineHeight,
+    label,
+    scale: fontScale,
+    isAndroid,
+    styles: StyleSheet.flatten(
+      dense ? styles.inputFlatDense : styles.inputFlat
+    ) as Padding,
+  };
+
+  const pad = calculatePadding(paddingSettings);
+
+  const paddingFlat = adjustPaddingFlat({
+    ...paddingSettings,
+    pad,
+  });
+
+  const baseLabelTranslateY =
+    -labelHalfHeight - (topPosition + MINIMIZED_LABEL_Y_OFFSET);
+
+  const { current: placeholderOpacityAnims } = React.useRef([
+    new Animated.Value(0),
+    new Animated.Value(1),
+  ]);
+
+  const placeholderOpacity = hasActiveOutline
+    ? parentState.labeled
+    : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
+
+  // We don't want to show placeholder if label is displayed, because they overlap.
+  // Before it was done by setting placeholder's value to " ", but inputs have the same props
+  // what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
+  const placeholderTextColorBasedOnState = parentState.displayPlaceholder
+    ? placeholderTextColor ?? placeholderColor
+    : 'transparent';
+
+  const minHeight =
+    height ||
+    (dense ? (label ? MIN_DENSE_HEIGHT_WL : MIN_DENSE_HEIGHT) : MIN_HEIGHT);
+
+  const flatHeight =
+    inputHeight +
+    (!height ? (dense ? LABEL_PADDING_TOP_DENSE : LABEL_PADDING_TOP) : 0);
+
+  const iconTopPosition = (flatHeight - ADORNMENT_SIZE) / 2;
+
+  const leftAffixTopPosition = leftLayout.height
+    ? calculateFlatAffixTopPosition({
+      height: flatHeight,
+      ...paddingFlat,
+      affixHeight: leftLayout.height,
+    })
+    : null;
+
+  const rightAffixTopPosition = rightLayout.height
+    ? calculateFlatAffixTopPosition({
+      height: flatHeight,
+      ...paddingFlat,
+      affixHeight: rightLayout.height,
+    })
+    : null;
+
+  const labelProps = {
+    label,
+    onLayoutAnimatedText,
+    onLabelTextLayout,
+    placeholderOpacity,
+    labelError: error,
+    placeholderStyle: styles.placeholder,
+    baseLabelTranslateY,
+    baseLabelTranslateX,
+    font,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    labelScale,
+    wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
+    topPosition,
+    paddingLeft: isAndroid
+      ? I18nManager.isRTL
+        ? paddingRight
+        : paddingLeft
+      : paddingLeft,
+    paddingRight: isAndroid
+      ? I18nManager.isRTL
+        ? paddingLeft
+        : paddingRight
+      : paddingRight,
+    hasActiveOutline,
+    activeColor,
+    placeholderColor,
+    errorColor,
+    roundness,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+    testID,
+    contentStyle,
+    inputContainerLayout: parentState.inputContainerLayout,
+    labelTextLayout: parentState.labelTextLayout,
+    opacity:
+      parentState.value || parentState.focused
+        ? parentState.labelLayout.measured
+          ? 1
+          : 0
+        : 1,
+    isV3,
+  };
+
+  const affixTopPosition = {
+    [AdornmentSide.Left]: leftAffixTopPosition,
+    [AdornmentSide.Right]: rightAffixTopPosition,
+  };
+  const onAffixChange = {
+    [AdornmentSide.Left]: onLeftAffixLayoutChange,
+    [AdornmentSide.Right]: onRightAffixLayoutChange,
+  };
+
+  let adornmentProps: TextFieldAdornmentProps = {
+    paddingHorizontal,
+    adornmentConfig,
+    forceFocus,
+    topPosition: {
+      [AdornmentType.Affix]: affixTopPosition,
+      [AdornmentType.Icon]: iconTopPosition,
+    },
+    onAffixChange,
+    isTextInputFocused: parentState.focused,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+    disabled,
+  };
+  if (adornmentConfig.length) {
+    adornmentProps = {
+      ...adornmentProps,
+      left,
+      right,
+      textStyle: { ...font, fontSize, lineHeight, fontWeight },
+      visible: parentState.labeled,
+    };
+  }
+
+  return (
+    <View style={[containerStyle, viewStyle]}>
+      <Underline
+        style={underlineStyle}
+        hasActiveOutline={hasActiveOutline}
+        parentState={parentState}
+        underlineColorCustom={underlineColorCustom}
+        error={error}
+        colors={{ error: errorColor }}
+        activeColor={activeColor}
+        theme={theme}
+      />
+      <View
+        onLayout={onInputLayout}
+        style={[
+          styles.labelContainer,
+          {
+            minHeight,
+            flex: 1,
+            flexShrink: 1,
+          },
+        ]}
+      >
+        {!isAndroid && multiline && !!label && !disabled && (
+          // Workaround for: https://github.com/callstack/react-native-paper/issues/2799
+          // Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
+          <View
+            testID="patch-container"
+            pointerEvents="none"
+            style={[
+              StyleSheet.absoluteFill,
+              dense ? styles.densePatchContainer : styles.patchContainer,
+              {
+                backgroundColor:
+                  viewStyle.backgroundColor || containerStyle.backgroundColor,
+                left: paddingLeft,
+                right: paddingRight,
+              },
+            ]}
+          />
+        )}
+        {label ? (
+          <InputLabel
+            labeled={parentState.labeled}
+            error={parentState.error}
+            focused={parentState.focused}
+            scaledLabel={scaledLabel}
+            wiggle={Boolean(parentState.value && labelProps.labelError)}
+            labelLayoutMeasured={parentState.labelLayout.measured}
+            labelLayoutWidth={parentState.labelLayout.width}
+            labelLayoutHeight={parentState.labelLayout.height}
+            {...labelProps}
+          />
+        ) : null}
+        {render?.({
+          ...rest,
+          ref: innerRef,
+          onChangeText,
+          placeholder: rest.placeholder,
+          editable: !disabled && editable,
+          selectionColor,
+          cursorColor:
+            typeof cursorColor === 'undefined' ? activeColor : cursorColor,
+          placeholderTextColor: placeholderTextColorBasedOnState,
+          onFocus,
+          onBlur,
+          underlineColorAndroid: 'transparent',
+          multiline,
+          style: [
+            styles.input,
+            multiline && height ? { height: flatHeight } : {},
+            paddingFlat,
+            {
+              paddingLeft,
+              paddingRight,
+              ...font,
+              fontSize,
+              lineHeight,
+              fontWeight,
+              color: finalInputTextColor,
+              textAlignVertical: multiline ? 'top' : 'center',
+              textAlign: textAlign
+                ? textAlign
+                : I18nManager.getConstants().isRTL
+                  ? 'right'
+                  : 'left',
+              flex: 1,
+              flexShrink: 1,
+              minWidth: 0,
+            },
+            Platform.OS === 'web' ? { outline: 'none' } : undefined,
+            adornmentStyleAdjustmentForNativeInput,
+            contentStyle,
+          ],
+          testID,
+        })}
+      </View>
+      <TextFieldAdornment {...adornmentProps} />
+    </View>
+  );
+};
+
+export default TextInputFlat;
+
+const styles = StyleSheet.create({
+  placeholder: {
+    position: 'absolute',
+    left: 0,
+  },
+  labelContainer: {
+    paddingTop: 0,
+    paddingBottom: 0,
+    flexGrow: 1,
+    overflow: 'visible',
+  },
+  input: {
+    margin: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  inputFlat: {
+    paddingTop: 24,
+    paddingBottom: 12,
+  },
+  inputFlatDense: {
+    paddingTop: 22,
+    paddingBottom: 10,
+  },
+  patchContainer: {
+    height: 24,
+    zIndex: 2,
+  },
+  densePatchContainer: {
+    height: 22,
+    zIndex: 2,
+  },
+});