@oxyhq/services 19.0.1 → 19.1.0

package/src/ui/components/TextField/Label/InputLabel.tsx

@@ -1,219 +0,0 @@
-import React from 'react';
-import {
-  Animated,
-  type 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,
-    isV3,
-    inputContainerLayout,
-    scaledLabel,
-  } = props;
-
-  const { INPUT_PADDING_HORIZONTAL } = getConstants(isV3);
-  const { width } = useWindowDimensions();
-
-  const isWeb = Platform.OS === 'web';
-
-  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,
-          !isWeb && { 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/ui/components/TextField/Label/LabelBackground.tsx

@@ -1,100 +0,0 @@
-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',
-  },
-});