fix: pass maxFontSizeMultiplier to input label and adornments (#3131)

callstack · Mar 30, 2022 · 6299657 · 6299657
1 parent 40bb45b
commit 6299657
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 3 deletions.
diff --git a/src/components/HelperText.tsx b/src/components/HelperText.tsx
@@ -94,6 +94,8 @@ const HelperText = ({
 
   const { scale } = theme.animation;
 
+  const { maxFontSizeMultiplier = 1.5 } = rest;
+
   React.useEffect(() => {
     if (visible) {
       // show text
@@ -150,6 +152,7 @@ const HelperText = ({
         },
         style,
       ]}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
       {...rest}
     >
       {rest.children}

diff --git a/src/components/TextInput/Adornment/TextInputAdornment.tsx b/src/components/TextInput/Adornment/TextInputAdornment.tsx
@@ -124,6 +124,7 @@ export interface TextInputAdornmentProps {
   visible?: Animated.Value;
   isTextInputFocused: boolean;
   paddingHorizontal?: number | string;
+  maxFontSizeMultiplier?: number | undefined | null;
 }
 
 const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
@@ -137,6 +138,7 @@ const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
   isTextInputFocused,
   forceFocus,
   paddingHorizontal,
+  maxFontSizeMultiplier,
 }) => {
   if (adornmentConfig.length) {
     return (
@@ -174,6 +176,7 @@ const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
                 textStyle={textStyle}
                 onLayout={onAffixChange[side]}
                 visible={visible}
+                maxFontSizeMultiplier={maxFontSizeMultiplier}
               />
             );
           } else {

diff --git a/src/components/TextInput/Adornment/TextInputAffix.tsx b/src/components/TextInput/Adornment/TextInputAffix.tsx
@@ -38,6 +38,7 @@ type ContextState = {
   textStyle?: StyleProp<TextStyle>;
   side: AdornmentSide;
   paddingHorizontal?: number | string;
+  maxFontSizeMultiplier?: number | undefined | null;
 };
 
 const AffixContext = React.createContext<ContextState>({
@@ -59,6 +60,7 @@ const AffixAdornment: React.FunctionComponent<
   onLayout,
   visible,
   paddingHorizontal,
+  maxFontSizeMultiplier,
 }) => {
   return (
     <AffixContext.Provider
@@ -69,6 +71,7 @@ const AffixAdornment: React.FunctionComponent<
         onLayout,
         visible,
         paddingHorizontal,
+        maxFontSizeMultiplier,
       }}
     >
       {affix}
@@ -108,8 +111,15 @@ const AffixAdornment: React.FunctionComponent<
  */
 
 const TextInputAffix = ({ text, textStyle: labelStyle, theme }: Props) => {
-  const { textStyle, onLayout, topPosition, side, visible, paddingHorizontal } =
-    React.useContext(AffixContext);
+  const {
+    textStyle,
+    onLayout,
+    topPosition,
+    side,
+    visible,
+    paddingHorizontal,
+    maxFontSizeMultiplier,
+  } = React.useContext(AffixContext);
   const textColor = color(theme.colors.text)
     .alpha(theme.dark ? 0.7 : 0.54)
     .rgb()
@@ -138,7 +148,12 @@ const TextInputAffix = ({ text, textStyle: labelStyle, theme }: Props) => {
       ]}
       onLayout={onLayout}
     >
-      <Text style={[{ color: textColor }, textStyle, labelStyle]}>{text}</Text>
+      <Text
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+        style={[{ color: textColor }, textStyle, labelStyle]}
+      >
+        {text}
+      </Text>
     </Animated.View>
   );
 };

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -27,6 +27,7 @@ const InputLabel = (props: InputLabelProps) => {
     placeholderColor,
     errorColor,
     labelTranslationXOffset,
+    maxFontSizeMultiplier,
   } = props.labelProps;
 
   const labelTranslationX = {
@@ -94,6 +95,7 @@ const InputLabel = (props: InputLabelProps) => {
         parentState,
         labelStyle,
         labelProps: props.labelProps,
+        maxFontSizeMultiplier: maxFontSizeMultiplier,
       })}
       <AnimatedText
         onLayout={onLayoutAnimatedText}
@@ -113,6 +115,7 @@ const InputLabel = (props: InputLabelProps) => {
           },
         ]}
         numberOfLines={1}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
       >
         {label}
       </AnimatedText>
@@ -130,6 +133,7 @@ const InputLabel = (props: InputLabelProps) => {
           },
         ]}
         numberOfLines={1}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
       >
         {label}
       </AnimatedText>

diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -17,6 +17,7 @@ const LabelBackground = ({
     roundness,
   },
   labelStyle,
+  maxFontSizeMultiplier,
 }: LabelBackgroundProps) => {
   const hasFocus = hasActiveOutline || parentState.value;
   const opacity = parentState.labeled.interpolate({
@@ -77,6 +78,7 @@ const LabelBackground = ({
             },
           ]}
           numberOfLines={1}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {label}
         </AnimatedText>,

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -389,6 +389,8 @@ const TextInput = React.forwardRef<TextInputHandles, TextInputProps>(
     };
     const forceFocus = () => root.current?.focus();
 
+    const { maxFontSizeMultiplier = 1.5 } = rest;
+
     if (mode === 'outlined') {
       return (
         <TextInputOutlined
@@ -420,6 +422,7 @@ const TextInput = React.forwardRef<TextInputHandles, TextInputProps>(
           onLayoutAnimatedText={handleLayoutAnimatedText}
           onLeftAffixLayoutChange={onLeftAffixLayoutChange}
           onRightAffixLayoutChange={onRightAffixLayoutChange}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
         />
       );
     }
@@ -454,6 +457,7 @@ const TextInput = React.forwardRef<TextInputHandles, TextInputProps>(
         onLayoutAnimatedText={handleLayoutAnimatedText}
         onLeftAffixLayoutChange={onLeftAffixLayoutChange}
         onRightAffixLayoutChange={onRightAffixLayoutChange}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
       />
     );
   }

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -263,6 +263,7 @@ const TextInputFlat = ({
     placeholderColor,
     errorColor,
     roundness: theme.roundness,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
   };
   const affixTopPosition = {
     [AdornmentSide.Left]: leftAffixTopPosition,
@@ -283,6 +284,7 @@ const TextInputFlat = ({
     },
     onAffixChange,
     isTextInputFocused: parentState.focused,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
   };
   if (adornmentConfig.length) {
     adornmentProps = {
@@ -331,6 +333,7 @@ const TextInputFlat = ({
         )}
         <InputLabel parentState={parentState} labelProps={labelProps} />
         {render?.({
+          testID: 'text-input-flat',
           ...rest,
           ref: innerRef,
           onChangeText,

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -198,6 +198,7 @@ const TextInputOutlined = ({
     errorColor,
     labelTranslationXOffset,
     roundness: theme.roundness,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
   };
 
   const minHeight = (height ||
@@ -255,6 +256,7 @@ const TextInputOutlined = ({
     },
     onAffixChange,
     isTextInputFocused: parentState.focused,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
   };
   if (adornmentConfig.length) {
     adornmentProps = {
@@ -295,6 +297,7 @@ const TextInputOutlined = ({
             parentState={parentState}
             labelProps={labelProps}
             labelBackground={LabelBackground}
+            maxFontSizeMultiplier={rest.maxFontSizeMultiplier}
           />
           {render?.({
             testID: 'text-input-outlined',

diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
@@ -71,14 +71,18 @@ export type LabelProps = {
   error?: boolean | null;
   onLayoutAnimatedText: (args: any) => void;
   roundness: number;
+  maxFontSizeMultiplier?: number | undefined | null;
 };
 export type InputLabelProps = {
   parentState: State;
   labelProps: LabelProps;
   labelBackground?: any;
+  maxFontSizeMultiplier?: number | undefined | null;
 };
+
 export type LabelBackgroundProps = {
   labelProps: LabelProps;
   labelStyle: any;
   parentState: State;
+  maxFontSizeMultiplier?: number | undefined | null;
 };
diff --git a/src/components/__tests__/TextInput.test.js b/src/components/__tests__/TextInput.test.js
@@ -174,3 +174,57 @@ it('correctly applies a component as the text label', () => {
 
   expect(toJSON()).toMatchSnapshot();
 });
+
+describe('maxFontSizeMultiplier', () => {
+  const createInput = (type, maxFontSizeMultiplier) => {
+    return (
+      <TextInput mode={type} maxFontSizeMultiplier={maxFontSizeMultiplier} />
+    );
+  };
+
+  it('should have default value in flat input', () => {
+    const { getByTestId } = render(createInput('flat'));
+
+    expect(getByTestId('text-input-flat').props.maxFontSizeMultiplier).toBe(
+      1.5
+    );
+  });
+
+  it('should have default value in outlined input', () => {
+    const { getByTestId } = render(createInput('outlined'));
+
+    expect(getByTestId('text-input-outlined').props.maxFontSizeMultiplier).toBe(
+      1.5
+    );
+  });
+
+  it('should have correct passed value in flat input', () => {
+    const { getByTestId } = render(createInput('flat', 2));
+
+    expect(getByTestId('text-input-flat').props.maxFontSizeMultiplier).toBe(2);
+  });
+
+  it('should have correct passed value in outlined input', () => {
+    const { getByTestId } = render(createInput('outlined', 2));
+
+    expect(getByTestId('text-input-outlined').props.maxFontSizeMultiplier).toBe(
+      2
+    );
+  });
+
+  it('should have passed null value in flat input', () => {
+    const { getByTestId } = render(createInput('flat', null));
+
+    expect(getByTestId('text-input-flat').props.maxFontSizeMultiplier).toBe(
+      null
+    );
+  });
+
+  it('should have passed null value in outlined input', () => {
+    const { getByTestId } = render(createInput('outlined', null));
+
+    expect(getByTestId('text-input-outlined').props.maxFontSizeMultiplier).toBe(
+      null
+    );
+  });
+});