sapo-components-ui-rn 1.0.0

package/src/components/TextInput/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/components/TextInput/Adornment/utils.ts

@@ -0,0 +1,39 @@
+
+import type { InternalTheme } from '../../../types';
+
+type BaseProps = {
+  theme: InternalTheme;
+  disabled?: boolean;
+};
+
+export function getTextColor({ theme, disabled }: BaseProps) {
+    if (disabled) {
+      return theme.colors.textSecondary;
+    }
+    return theme.colors.textDefault;
+ 
+}
+
+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 (disabled) {
+    return theme.colors.textBrandDefault;
+  }
+
+  return theme.colors.textDefault;
+}

package/src/components/TextInput/Label/InputLabel.tsx

@@ -0,0 +1,216 @@
+import React from "react";
+import {
+  Animated,
+  ColorValue,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from "react-native";
+
+import AnimatedText from "../../Typography/AnimatedText";
+import { getConstants } from "../helpers";
+import type { InputLabelProps } from "../types";
+
+const InputLabel = (props: InputLabelProps) => {
+  const {
+    labeled,
+    wiggle,
+    error,
+    focused,
+    opacity,
+    labelLayoutWidth,
+    labelLayoutHeight,
+    labelBackground,
+    label,
+    labelError,
+    onLayoutAnimatedText,
+    onLabelTextLayout,
+    hasActiveOutline,
+    activeColor,
+    placeholderStyle,
+    baseLabelTranslateX,
+    baseLabelTranslateY,
+    font,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    placeholderOpacity,
+    wiggleOffsetX,
+    labelScale,
+    topPosition,
+    paddingLeft,
+    paddingRight,
+    backgroundColor,
+    roundness,
+    placeholderColor,
+    errorColor,
+    labelTranslationXOffset,
+    maxFontSizeMultiplier,
+    testID,
+    inputContainerLayout,
+    scaledLabel,
+  } = props;
+
+  const { INPUT_PADDING_HORIZONTAL } = getConstants();
+  const { width } = useWindowDimensions();
+
+  const paddingOffset =
+    paddingLeft && paddingRight ? { paddingLeft, paddingRight } : {};
+
+  const labelTranslationX = {
+    transform: [
+      {
+        // Offset label scale since RN doesn't support transform origin
+        translateX: labeled.interpolate({
+          inputRange: [0, 1],
+          outputRange: [baseLabelTranslateX, labelTranslationXOffset || 0],
+        }),
+      },
+    ],
+  };
+
+  const labelStyle = {
+    ...font,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    opacity: labeled.interpolate({
+      inputRange: [0, 1],
+      outputRange: [hasActiveOutline ? 1 : 0, 0],
+    }),
+    transform: [
+      {
+        // Wiggle the label when there's an error
+        translateX: wiggle
+          ? error.interpolate({
+              inputRange: [0, 0.5, 1],
+              outputRange: [0, wiggleOffsetX, 0],
+            })
+          : 0,
+      },
+      {
+        // Move label to top
+        translateY:
+          baseLabelTranslateY !== 0
+            ? labeled.interpolate({
+                inputRange: [0, 1],
+                outputRange: [baseLabelTranslateY, 0],
+              })
+            : 0,
+      },
+      {
+        // Make label smaller
+        scale:
+          labelScale !== 0
+            ? labeled.interpolate({
+                inputRange: [0, 1],
+                outputRange: [labelScale, 1],
+              })
+            : labeled,
+      },
+    ],
+  };
+
+  const labelWidth =
+    (inputContainerLayout.width + INPUT_PADDING_HORIZONTAL / 2) /
+    (scaledLabel ? labelScale : 1);
+
+  const commonStyles = [
+    placeholderStyle,
+    {
+      top: topPosition,
+    },
+    {
+      maxWidth: labelWidth,
+    },
+    labelStyle,
+    paddingOffset || {},
+  ];
+
+  const textColor = (
+    labelError && errorColor ? errorColor : placeholderColor
+  ) as ColorValue;
+
+  return (
+    // Position colored placeholder and gray placeholder on top of each other and crossfade them
+    // This gives the effect of animating the color, but allows us to use native driver
+    <View
+      pointerEvents="none"
+      style={[StyleSheet.absoluteFill, styles.overflow, styles.labelContainer]}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          StyleSheet.absoluteFill,
+          Platform.OS !== "web" && { width },
+          { opacity },
+          labelTranslationX,
+        ]}
+      >
+        <View
+          style={{
+            width: labelWidth,
+          }}
+        >
+          {labelBackground?.({
+            labeled,
+            labelLayoutWidth,
+            labelLayoutHeight,
+            labelStyle,
+            placeholderStyle,
+            baseLabelTranslateX,
+            topPosition,
+            label,
+            backgroundColor,
+            roundness,
+            maxFontSizeMultiplier: maxFontSizeMultiplier,
+            testID,
+          })}
+          <AnimatedText
+            variant="bodySmall"
+            onLayout={onLayoutAnimatedText}
+            onTextLayout={onLabelTextLayout}
+            style={[
+              commonStyles,
+              {
+                color: activeColor,
+              },
+            ]}
+            numberOfLines={1}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
+            testID={`${testID}-label-active`}
+          >
+            {label}
+          </AnimatedText>
+          <AnimatedText
+            variant={focused ? "bodyLarge" : "bodySmall"}
+            style={[
+              commonStyles,
+              {
+                color: textColor,
+                opacity: placeholderOpacity,
+              },
+            ]}
+            numberOfLines={1}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
+            testID={`${testID}-label-inactive`}
+          >
+            {label}
+          </AnimatedText>
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overflow: {
+    overflow: "hidden",
+  },
+  labelContainer: {
+    zIndex: 3,
+  },
+});
+
+export default React.memo(InputLabel);

package/src/components/TextInput/Label/LabelBackground.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+import AnimatedText from '../../Typography/AnimatedText';
+import type { LabelBackgroundProps } from '../types';
+
+const LabelBackground = ({
+  labeled,
+  labelLayoutWidth,
+  labelLayoutHeight,
+  placeholderStyle,
+  baseLabelTranslateX,
+  topPosition,
+  backgroundColor,
+  roundness,
+  labelStyle,
+  maxFontSizeMultiplier,
+  testID,
+}: LabelBackgroundProps) => {
+  const opacity = labeled.interpolate({
+    inputRange: [0, 0.6],
+    outputRange: [1, 0],
+  });
+
+  const labelTranslationX = {
+    translateX: labeled.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-baseLabelTranslateX, 0],
+    }),
+  };
+
+  const labelTextScaleY = {
+    scaleY: labeled.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0.2, 1],
+    }),
+  };
+
+  const labelTextTransform = [...labelStyle.transform, labelTextScaleY];
+
+  const isRounded = roundness > 6;
+  const roundedEdgeCover = isRounded ? (
+    <Animated.View
+      key="labelBackground-view"
+      pointerEvents="none"
+      style={[
+        StyleSheet.absoluteFill,
+        styles.view,
+        {
+          backgroundColor,
+          maxHeight: Math.max(roundness / 3, 2),
+          bottom: Math.max(roundness, 2),
+          transform: [labelTranslationX],
+          opacity,
+        },
+      ]}
+    />
+  ) : null;
+
+  return [
+    roundedEdgeCover,
+    <AnimatedText
+      key="labelBackground-text"
+      testID={`${testID}-label-background`}
+      style={[
+        placeholderStyle,
+        labelStyle,
+        styles.outlinedLabel,
+        {
+          top: topPosition + 1,
+          width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
+          height: labelLayoutHeight,
+          backgroundColor,
+          opacity,
+          transform: labelTextTransform,
+        },
+      ]}
+      numberOfLines={1}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+    />,
+  ];
+};
+
+export default LabelBackground;
+
+const styles = StyleSheet.create({
+  view: {
+    position: 'absolute',
+    top: 6,
+    left: 10,
+    width: 12,
+  },
+  // eslint-disable-next-line react-native/no-color-literals
+  outlinedLabel: {
+    position: 'absolute',
+    left: 8,
+    paddingHorizontal: 0,
+    color: 'transparent',
+  },
+});