Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix pronouns input label is not aligned to the left when activated #49789

Merged
merged 2 commits into from
Oct 3, 2024
Merged

Fix pronouns input label is not aligned to the left when activated #49789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9144c6e
fix input label is not aligned to the left when activated
bernhardoj Sep 26, 2024
7fb059c
remove unused prop
bernhardoj Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/components/TextInput/BaseTextInput/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,6 @@ function BaseTextInput(
to prevent text overlapping with label when scrolling */}
{isMultiline && <View style={[styles.textInputLabelBackground, styles.pointerEventsNone]} />}
<TextInputLabel
isLabelActive={isLabelActive.current}
label={label}
labelTranslateY={labelTranslateY}
labelScale={labelScale}
Expand Down
1 change: 0 additions & 1 deletion src/components/TextInput/BaseTextInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,6 @@ function BaseTextInput(
to prevent text overlapping with label when scrolling */}
{isMultiline && <View style={[styles.textInputLabelBackground, styles.pointerEventsNone]} />}
<TextInputLabel
isLabelActive={isLabelActive.current}
label={label}
labelTranslateY={labelTranslateY}
labelScale={labelScale}
Expand Down
28 changes: 3 additions & 25 deletions src/components/TextInput/TextInputLabel/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,15 @@
import React, {useState} from 'react';
import React from 'react';
import {Animated} from 'react-native';
import * as styleConst from '@components/TextInput/styleConst';
import useThemeStyles from '@hooks/useThemeStyles';
import type TextInputLabelProps from './types';

function TextInputLabel({isLabelActive, label, labelScale, labelTranslateY}: TextInputLabelProps) {
function TextInputLabel({label, labelScale, labelTranslateY}: TextInputLabelProps) {
const styles = useThemeStyles();
const [width, setWidth] = useState(0);

return (
<Animated.Text
allowFontScaling={false}
onLayout={({nativeEvent}) => {
setWidth(nativeEvent.layout.width);
}}
style={[
styles.textInputLabel,
styles.textInputLabelTransformation(
labelTranslateY,
labelScale.interpolate({
inputRange: [styleConst.ACTIVE_LABEL_SCALE, styleConst.INACTIVE_LABEL_SCALE],
outputRange: [-(width - width * styleConst.ACTIVE_LABEL_SCALE) / 2, 0],
}),
labelScale,
),
// If the label is active but the width is not ready yet, the above translateX value will be 0,
// making the label sits at the top center instead of the top left of the input. To solve it
// move the label by a percentage value with left style as translateX doesn't support percentage value.
width === 0 &&
isLabelActive && {
left: `${-((1 - styleConst.ACTIVE_LABEL_SCALE) * 100) / 2}%`,
},
]}
style={[styles.textInputLabel, styles.textInputLabelTransformation(labelTranslateY, labelScale)]}
>
{label}
</Animated.Text>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TextInput/TextInputLabel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale}:
<Animated.Text
ref={textRef(labelRef)}
role={CONST.ROLE.PRESENTATION}
style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(labelTranslateY, 0, labelScale), styles.pointerEventsNone]}
style={[styles.textInputLabel, styles.textInputLabelTransformation(labelTranslateY, labelScale), styles.pointerEventsNone]}
>
{label}
</Animated.Text>
Expand Down
3 changes: 0 additions & 3 deletions src/components/TextInput/TextInputLabel/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ type TextInputLabelProps = {
/** Label scale */
labelScale: Animated.Value;

/** Whether the label is currently active or not */
isLabelActive: boolean;

/** For attribute for label */
for?: string;
};
Expand Down
9 changes: 3 additions & 6 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1191,6 +1191,7 @@ const styles = (theme: ThemeColors) =>
...FontUtils.fontFamily.platform.EXP_NEUE,
width: '100%',
zIndex: 1,
transformOrigin: 'left center',
},

textInputLabelBackground: {
Expand All @@ -1201,13 +1202,9 @@ const styles = (theme: ThemeColors) =>
backgroundColor: theme.componentBG,
},

textInputLabelDesktop: {
transformOrigin: 'left center',
},

textInputLabelTransformation: (translateY: AnimatableNumericValue, translateX: AnimatableNumericValue, scale: AnimatableNumericValue) =>
textInputLabelTransformation: (translateY: AnimatableNumericValue, scale: AnimatableNumericValue) =>
({
transform: [{translateY}, {translateX}, {scale}],
transform: [{translateY}, {scale}],
} satisfies TextStyle),

baseTextInput: {
Expand Down
Loading