Skip to content

Fix/text field right icon alignment #997

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

Merged
merged 8 commits into from
Oct 22, 2020
Merged

Fix/text field right icon alignment #997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ac6e36d
remove duplicated style
Inbal-Tish Oct 19, 2020
8a77451
TextField - fix right icon/button alignment
Inbal-Tish Oct 19, 2020
1e2381c
Merge branch 'master' into fix/TextField_rightIcon_alignment
ethanshar Oct 20, 2020
af24a7e
fix right icon alignment
Inbal-Tish Oct 20, 2020
e1478ee
lint fix
Inbal-Tish Oct 20, 2020
3213c98
fix right icon position when 'useTopError' and 'floatingPlaceholder' …
Inbal-Tish Oct 22, 2020
37ac08f
adding examples
Inbal-Tish Oct 22, 2020
2e6d07c
moving method up
Inbal-Tish Oct 22, 2020
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
31 changes: 21 additions & 10 deletions demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,26 +215,37 @@ export default class InputsScreen extends Component {
<TextField
text70
containerStyle={{marginBottom: INPUT_SPACING}}
floatingPlaceholder
placeholder="With right button"
rightButtonProps={{iconSource: richText, onPress: this.onPressInfo, accessibilityLabel: 'TextField Info'}}
title="Title"
placeholder="With right icon"
rightIconSource={star}
useTopErrors
validate={'required'}
errorMessage="Please fill this input"
/>

<TextField
text70
containerStyle={{marginBottom: INPUT_SPACING, width: 210}}
containerStyle={{marginBottom: INPUT_SPACING}}
floatingPlaceholder
placeholder="Multiline & right button"
multiline
rightButtonProps={{iconSource: richText, onPress: this.onPressInfo, iconColor: Colors.red30}}
placeholder="With right button"
rightButtonProps={{
iconSource: richText,
onPress: this.onPressInfo,
accessibilityLabel: 'TextField Info',
iconColor: Colors.red30
}}
useTopErrors
validate={'required'}
errorMessage="Please fill this input"
/>

<TextField
text70
containerStyle={{marginBottom: INPUT_SPACING}}
containerStyle={{marginBottom: INPUT_SPACING, width: 210}}
floatingPlaceholder
placeholder="With right icon"
rightIconSource={star}
placeholder="Multiline & right button"
multiline
rightButtonProps={{iconSource: richText, onPress: this.onPressInfo}}
/>

<TextField
Expand Down
26 changes: 15 additions & 11 deletions src/components/textField/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,10 @@ export default class TextField extends BaseInput {
return this.shouldFakePlaceholder() ? (this.shouldShowTopError() ? undefined : 25) : undefined;
}

getTopErrorsPosition() {
return !this.props.title && this.shouldShowTopError() ? {top: Constants.isIOS ? -25 : -27} : undefined;
}

isDisabled() {
return this.props.editable === false;
}
Expand Down Expand Up @@ -397,6 +401,11 @@ export default class TextField extends BaseInput {
return !expandable && rightButtonProps && rightButtonProps.iconSource;
}

shouldRenderTitle() {
const {floatingPlaceholder, title} = this.getThemeProps();
return !floatingPlaceholder && title;
}

onPressRightButton = () => {
_.invoke(this.props, 'rightButtonProps.onPress');
};
Expand All @@ -419,6 +428,7 @@ export default class TextField extends BaseInput {
onLayout={this.onPlaceholderLayout}
style={[
this.styles.placeholder,
this.getTopErrorsPosition(),
typography,
// TODO: we need to exclude completely any dependency on line height
// in this component since it always breaks alignments
Expand Down Expand Up @@ -467,10 +477,10 @@ export default class TextField extends BaseInput {
}

renderTitle() {
const {floatingPlaceholder, title, titleColor, titleStyle} = this.getThemeProps();
const {title, titleColor, titleStyle} = this.getThemeProps();
const color = this.getStateColor(titleColor || PLACEHOLDER_COLOR_BY_STATE);

if (!floatingPlaceholder && title) {
if (this.shouldRenderTitle()) {
return <Text style={[{color}, this.styles.topLabel, this.styles.label, titleStyle]}>{title}</Text>;
}
}
Expand Down Expand Up @@ -636,7 +646,7 @@ export default class TextField extends BaseInput {
return (
<TouchableOpacity
{...others} accessibilityLabel={accessibilityLabel}
style={[this.styles.rightButton, style]} onPress={this.onPressRightButton}
style={[this.styles.rightButton, this.getTopErrorsPosition(), style]} onPress={this.onPressRightButton}
>
<Image
pointerEvents="none"
Expand All @@ -654,7 +664,7 @@ export default class TextField extends BaseInput {

if (rightIconSource) {
return (
<View style={this.styles.rightIcon} pointerEvents="none">
<View style={[this.styles.rightButton, this.getTopErrorsPosition()]} pointerEvents="none">
<Image source={rightIconSource} resizeMode={'center'} style={[this.styles.rightButtonImage, rightIconStyle]}/>
</View>
);
Expand Down Expand Up @@ -739,7 +749,7 @@ export default class TextField extends BaseInput {
};
}

function createStyles({centered, multiline, hideUnderline}, rightItemTopPadding = 0) {
function createStyles({centered, multiline, title, floatingPlaceholder}, rightItemTopPadding = 0) {
const itemTopPadding = Constants.isIOS ? (rightItemTopPadding - 3) : (rightItemTopPadding - 1);

return StyleSheet.create({
Expand Down Expand Up @@ -805,12 +815,6 @@ function createStyles({centered, multiline, hideUnderline}, rightItemTopPadding
rightElement: {
paddingRight: ICON_SIZE + ICON_LEFT_PADDING
},
rightIcon: {
position: 'absolute',
right: 0,
alignSelf: 'flex-start',
paddingTop: itemTopPadding
},
rightButton: {
position: 'absolute',
right: 0,
Expand Down