Skip to content

Commit de7cbbd

Browse files
Inbal-Tishethanshar
Inbal-Tish
authored and
ethanshar
committed
TextField - Right Icon (#462)
* Move right icon to text input render to allow on both expandable and non-expandable inputs * PR fix * merge fix
1 parent 4e57c5c commit de7cbbd

File tree

2 files changed

+64
-32
lines changed

2 files changed

+64
-32
lines changed

‎demo/src/screens/componentScreens/InputsScreen.js

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React, {Component} from 'react';
2-
import {ScrollView, StyleSheet} from 'react-native';
2+
import {ScrollView, StyleSheet, Alert} from 'react-native';
33
import {Colors, Typography, View, Text, TextField, TextArea, Modal, Button} from 'react-native-ui-lib'; //eslint-disable-line
44
import {KeyboardAwareInsetsView} from 'react-native-keyboard-tracking-view';
5-
import icon from '../../assets/icons/richText.png';
6-
import dropDown from '../../assets/icons/chevronDown.png';
75

86

7+
const richText = require('../../assets/icons/richText.png');
8+
const dropDown = require('../../assets/icons/chevronDown.png');
9+
const star = require('../../assets/icons/star.png');
10+
911
const LONG_TEXT =
1012
'Concept, edition and design direction for the editorial piece “La Forma Bruta” by the photographer' +
1113
'Martín Bollati. In this piece';
@@ -37,7 +39,7 @@ export default class InputsScreen extends Component {
3739
}
3840

3941
onPressInfo = () => {
40-
console.warn('onPressInfo');
42+
Alert.alert('Info button press');
4143
}
4244

4345
onChangeText = (text) => {
@@ -60,6 +62,7 @@ export default class InputsScreen extends Component {
6062
<View flex>
6163
<ScrollView
6264
contentContainerStyle={styles.container}
65+
showsVerticalScrollIndicator={false}
6366
keyboardShouldPersistTaps="always"
6467
getTextInputRefs={() => [this.noUnderline, this.hugeText]}
6568
>
@@ -78,7 +81,7 @@ export default class InputsScreen extends Component {
7881
text70
7982
containerStyle={{marginBottom: INPUT_SPACING}}
8083
floatingPlaceholder
81-
placeholder="floatingPlaceholder & error"
84+
placeholder="FloatingPlaceholder & error"
8285
onChangeText={this.onChangeText}
8386
error={this.state.error}
8487
useTopErrors={this.state.topError}
@@ -102,7 +105,7 @@ export default class InputsScreen extends Component {
102105
text70
103106
containerStyle={{marginBottom: INPUT_SPACING}}
104107
floatingPlaceholder
105-
placeholder="& helperText"
108+
placeholder="With helperText"
106109
helperText="this is an helper text"
107110
onChangeText={this.onChangeText}
108111
error={this.state.error}
@@ -113,7 +116,7 @@ export default class InputsScreen extends Component {
113116
text70
114117
containerStyle={{marginBottom: INPUT_SPACING}}
115118
floatingPlaceholder
116-
placeholder="multiline & helperText"
119+
placeholder="Multiline & helperText"
117120
multiline
118121
helperText="this is an helper text"
119122
/>
@@ -122,7 +125,7 @@ export default class InputsScreen extends Component {
122125
text70
123126
containerStyle={{marginBottom: INPUT_SPACING}}
124127
title="title"
125-
placeholder="character counter & error"
128+
placeholder="Character counter & error"
126129
maxLength={3}
127130
showCharacterCounter
128131
onChangeText={this.onChangeText}
@@ -135,7 +138,7 @@ export default class InputsScreen extends Component {
135138
containerStyle={{marginBottom: INPUT_SPACING}}
136139
title="Title"
137140
titleStyle={{fontSize: Typography.text70.fontSize}}
138-
placeholder="multiline & titleStyle"
141+
placeholder="Multiline & titleStyle"
139142
multiline
140143
maxLength={32}
141144
showCharacterCounter
@@ -149,7 +152,7 @@ export default class InputsScreen extends Component {
149152
text70
150153
containerStyle={{marginBottom: INPUT_SPACING}}
151154
floatingPlaceholder
152-
placeholder="character counter & expandable"
155+
placeholder="Character counter & expandable"
153156
expandable
154157
maxLength={20}
155158
showCharacterCounter
@@ -161,7 +164,7 @@ export default class InputsScreen extends Component {
161164
floatingPlaceholder
162165
placeholderTextColor={Colors.cyan30}
163166
floatingPlaceholderColor={Colors.cyan30}
164-
placeholder="underline colors & error"
167+
placeholder="Underline colors & error"
165168
onChangeText={this.onChangeText}
166169
error={this.state.error}
167170
useTopErrors={this.state.topError}
@@ -171,14 +174,14 @@ export default class InputsScreen extends Component {
171174
<TextField
172175
text40
173176
containerStyle={{marginBottom: INPUT_SPACING}}
174-
placeholder="write something.."
177+
placeholder="Write something.."
175178
hideUnderline
176179
/>
177180

178181
<TextField
179182
text30
180183
containerStyle={{marginBottom: INPUT_SPACING}}
181-
placeholder="write something.."
184+
placeholder="Write something.."
182185
centered
183186
hideUnderline
184187
/>
@@ -234,7 +237,7 @@ export default class InputsScreen extends Component {
234237
text70
235238
containerStyle={{marginBottom: INPUT_SPACING}}
236239
floatingPlaceholder
237-
placeholder="with price transformer"
240+
placeholder="With price transformer"
238241
value={this.state.value}
239242
transformer={transformPrice}
240243
/>
@@ -243,24 +246,32 @@ export default class InputsScreen extends Component {
243246
text70
244247
containerStyle={{marginBottom: INPUT_SPACING}}
245248
floatingPlaceholder
246-
placeholder="Right button"
247-
rightButtonProps={{iconSource: icon, onPress: this.onPressInfo}}
249+
placeholder="With right button"
250+
rightButtonProps={{iconSource: richText, onPress: this.onPressInfo}}
248251
/>
249252

250253
<TextField
251254
text70
252255
containerStyle={{marginBottom: INPUT_SPACING, width: 210}}
253256
floatingPlaceholder
254-
placeholder="Multiline & Right button"
257+
placeholder="Multiline & right button"
255258
multiline
256-
rightButtonProps={{iconSource: icon, onPress: this.onPressInfo, style: {tintColor: Colors.red30}}}
259+
rightButtonProps={{iconSource: richText, onPress: this.onPressInfo, iconColor: Colors.red30}}
257260
/>
258261

259262
<TextField
260263
text70
261264
containerStyle={{marginBottom: INPUT_SPACING}}
262265
floatingPlaceholder
263-
placeholder="Expandable & rightIconSource"
266+
placeholder="With right icon"
267+
rightIconSource={star}
268+
/>
269+
270+
<TextField
271+
text70
272+
containerStyle={{marginBottom: INPUT_SPACING}}
273+
floatingPlaceholder
274+
placeholder="Expandable & right icon"
264275
expandable
265276
rightIconSource={dropDown}
266277
/>
@@ -275,7 +286,7 @@ export default class InputsScreen extends Component {
275286
borderColor: Colors.dark60,
276287
}}
277288
>
278-
<TextArea placeholder="write something.."/>
289+
<TextArea placeholder="Write something.."/>
279290
</View>
280291

281292
<TextField

‎src/components/inputs/TextField.js

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ export default class TextField extends BaseInput {
137137
*/
138138
rightButtonProps: PropTypes.shape({
139139
iconSource: PropTypes.number,
140+
iconColor: PropTypes.string,
140141
onPress: PropTypes.func,
141142
style: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
142143
})
@@ -433,7 +434,7 @@ export default class TextField extends BaseInput {
433434
}
434435

435436
renderExpandableInput() {
436-
const {renderExpandableInput, rightIconSource, testID} = this.getThemeProps();
437+
const {renderExpandableInput, testID} = this.getThemeProps();
437438

438439
if (_.isFunction(renderExpandableInput)) {
439440
return renderExpandableInput(this.getThemeProps());
@@ -447,7 +448,6 @@ export default class TextField extends BaseInput {
447448
testID={`${testID}.expandable`}
448449
>
449450
{this.renderTextInput()}
450-
{rightIconSource && <Image pointerEvents="none" source={rightIconSource} style={this.styles.rightIcon}/>}
451451
</TouchableOpacity>
452452
);
453453
}
@@ -465,13 +465,15 @@ export default class TextField extends BaseInput {
465465
numberOfLines,
466466
helperText,
467467
expandable,
468+
rightIconSource,
468469
...others
469470
} = this.getThemeProps();
470471
const typography = this.getTypography();
471472
const {lineHeight, ...typographyStyle} = typography;
472473
const color = this.getStateColor(this.props.color || this.extractColorValue());
474+
const hasRightElement = this.shouldDisplayRightButton() || rightIconSource;
473475
const inputStyle = [
474-
this.shouldDisplayRightButton() && {paddingRight: (ICON_SIZE + ICON_RIGHT_PADDING + ICON_LEFT_PADDING)},
476+
hasRightElement && this.styles.rightElement,
475477
this.styles.input,
476478
hideUnderline && this.styles.inputWithoutUnderline,
477479
{...typographyStyle},
@@ -509,23 +511,35 @@ export default class TextField extends BaseInput {
509511
}
510512

511513
renderRightButton() {
512-
const {rightButtonProps} = this.getThemeProps();
513-
const tintColor = _.get(rightButtonProps, 'style.tintColor', Colors.blue30);
514-
515514
if (this.shouldDisplayRightButton()) {
515+
const {rightButtonProps} = this.getThemeProps();
516+
const {style, iconSource, iconColor} = rightButtonProps;
517+
516518
return (
517-
<TouchableOpacity style={[this.styles.rightButton, rightButtonProps.style]} onPress={this.onPressRightButton}>
519+
<TouchableOpacity style={[this.styles.rightButton, style]} onPress={this.onPressRightButton}>
518520
<Image
519521
pointerEvents="none"
520-
source={rightButtonProps.iconSource}
522+
source={iconSource}
521523
resizeMode={'contain'}
522-
style={[this.styles.rightButtonImage, {tintColor}]}
524+
style={[this.styles.rightButtonImage, {tintColor: iconColor || Colors.blue30}]}
523525
/>
524526
</TouchableOpacity>
525527
);
526528
}
527529
}
528530

531+
renderRightIcon() {
532+
const {rightIconSource} = this.getThemeProps();
533+
534+
if (rightIconSource) {
535+
return (
536+
<View style={this.styles.rightIcon} pointerEvents="none">
537+
<Image source={rightIconSource} resizeMode={'center'} style={this.styles.rightButtonImage}/>
538+
</View>
539+
);
540+
}
541+
}
542+
529543
render() {
530544
const {expandable, containerStyle, underlineColor, useTopErrors, hideUnderline} = this.getThemeProps();
531545
const underlineStateColor = this.getStateColor(underlineColor, true);
@@ -545,6 +559,7 @@ export default class TextField extends BaseInput {
545559
{this.renderPlaceholder()}
546560
{expandable ? this.renderExpandableInput() : this.renderTextInput()}
547561
{this.renderRightButton()}
562+
{this.renderRightIcon()}
548563
{expandable && this.renderExpandableModal()}
549564
</View>
550565

@@ -600,8 +615,9 @@ export default class TextField extends BaseInput {
600615
}
601616
}
602617

603-
function createStyles({placeholderTextColor, centered, multiline}) {
618+
function createStyles({placeholderTextColor, centered, multiline, expandable}) {
604619
const inputTextAlign = (Constants.isRTL ? 'right' : 'left');
620+
605621
return StyleSheet.create({
606622
container: {
607623
},
@@ -661,9 +677,14 @@ function createStyles({placeholderTextColor, centered, multiline}) {
661677
...LABEL_TYPOGRAPHY,
662678
height: LABEL_TYPOGRAPHY.lineHeight
663679
},
680+
rightElement: {
681+
paddingRight: ICON_SIZE + ICON_RIGHT_PADDING + ICON_LEFT_PADDING
682+
},
664683
rightIcon: {
665-
alignSelf: 'center',
666-
marginLeft: 8
684+
position: 'absolute',
685+
right: ICON_RIGHT_PADDING,
686+
alignSelf: 'flex-end',
687+
paddingBottom: expandable ? 14 : 8
667688
},
668689
rightButton: {
669690
position: 'absolute',

0 commit comments

Comments
 (0)