sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FIX] TextInput breaking line (#2873) 

* Update TextInput's padding

* Chante textAlign to auto and to ellipses longer text than the width

* Added story with changes in text input

* Changed in TextInput stories

Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Gerzon Z 2021-08-27 16:03:59 -04:00 committed by GitHub
parent 0a55467858
commit f5bbdb85cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 229 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -71430,6 +71430,189 @@ Array [
] ]
`; `;
exports[`Storyshots Text Input Short and Long Text 1`] = `
<View
style={
Object {
"paddingHorizontal": 14,
}
}
>
<View
style={
Array [
Object {
"marginBottom": 10,
},
undefined,
]
}
>
<Text
accessibilityLabel={null}
contentDescription={null}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 14,
"fontWeight": "600",
"marginBottom": 10,
"textAlign": "left",
},
Object {
"color": "#0d0e12",
},
undefined,
]
}
>
Short Text
</Text>
<View
style={
Object {
"position": "relative",
}
}
>
<TextInput
accessibilityLabel="placeholder"
allowFontScaling={true}
autoCapitalize="none"
autoCorrect={false}
contentDescription="placeholder"
keyboardAppearance="light"
placeholder="placeholder"
placeholderTextColor="#9ca2a8"
rejectResponderTermination={true}
style={
Array [
Object {
"color": "#0d0e12",
},
Array [
Object {
"backgroundColor": "transparent",
"borderRadius": 2,
"borderWidth": 0.5,
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"height": 48,
"padding": 14,
"textAlign": "left",
},
undefined,
undefined,
Object {
"backgroundColor": "#ffffff",
"borderColor": "#cbcbcc",
"color": "#0d0e12",
},
undefined,
undefined,
],
Object {
"textAlign": "auto",
},
]
}
underlineColorAndroid="transparent"
value="Rocket.Chat"
/>
</View>
</View>
<View
style={
Array [
Object {
"marginBottom": 10,
},
undefined,
]
}
>
<Text
accessibilityLabel={null}
contentDescription={null}
style={
Array [
Object {
"backgroundColor": "transparent",
"fontFamily": "System",
"fontSize": 14,
"fontWeight": "600",
"marginBottom": 10,
"textAlign": "left",
},
Object {
"color": "#0d0e12",
},
undefined,
]
}
>
Long Text
</Text>
<View
style={
Object {
"position": "relative",
}
}
>
<TextInput
accessibilityLabel="placeholder"
allowFontScaling={true}
autoCapitalize="none"
autoCorrect={false}
contentDescription="placeholder"
keyboardAppearance="light"
placeholder="placeholder"
placeholderTextColor="#9ca2a8"
rejectResponderTermination={true}
style={
Array [
Object {
"color": "#0d0e12",
},
Array [
Object {
"backgroundColor": "transparent",
"borderRadius": 2,
"borderWidth": 0.5,
"fontFamily": "System",
"fontSize": 16,
"fontWeight": "400",
"height": 48,
"padding": 14,
"textAlign": "left",
},
undefined,
undefined,
Object {
"backgroundColor": "#ffffff",
"borderColor": "#cbcbcc",
"color": "#0d0e12",
},
undefined,
undefined,
],
Object {
"textAlign": "auto",
},
]
}
underlineColorAndroid="transparent"
value="https://open.rocket.chat/images/logo/android-chrome-512x512.png"
/>
</View>
</View>
</View>
`;
exports[`Storyshots Thread Messages.Item badge 1`] = ` exports[`Storyshots Thread Messages.Item badge 1`] = `
<RCTScrollView> <RCTScrollView>
<View> <View>

2
app/containers/TextInput.js
View File

@ -26,7 +26,7 @@ const styles = StyleSheet.create({
...sharedStyles.textRegular, ...sharedStyles.textRegular,
height: 48, height: 48,
fontSize: 16, fontSize: 16,
paddingHorizontal: 14, padding: 14,
borderWidth: StyleSheet.hairlineWidth, borderWidth: StyleSheet.hairlineWidth,
borderRadius: 2 borderRadius: 2
}, },

43
app/containers/TextInput.stories.js Normal file
View File

@ -0,0 +1,43 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, react/prop-types */
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { View, StyleSheet } from 'react-native';
import TextInput from './TextInput';
const styles = StyleSheet.create({
paddingHorizontal: {
paddingHorizontal: 14
}
});
const stories = storiesOf('Text Input', module);
const item = {
name: 'Rocket.Chat',
longText: 'https://open.rocket.chat/images/logo/android-chrome-512x512.png'
};
const theme = 'light';
stories.add('Short and Long Text', () => (
<>
<View style={styles.paddingHorizontal}>
<TextInput
label='Short Text'
placeholder='placeholder'
value={item.name}
theme={theme}
/>
<TextInput
label='Long Text'
placeholder='placeholder'
value={item.longText}
theme={theme}
/>
</View>
</>
));

2
app/presentation/TextInput.js
View File

@ -8,7 +8,7 @@ const styles = StyleSheet.create({
input: { input: {
...I18nManager.isRTL ...I18nManager.isRTL
? { textAlign: 'right' } ? { textAlign: 'right' }
: { textAlign: 'left' } : { textAlign: 'auto' }
} }
}); });

1
storybook/stories/index.js
View File

@ -15,6 +15,7 @@ import './Avatar';
import '../../app/containers/BackgroundContainer/index.stories.js'; import '../../app/containers/BackgroundContainer/index.stories.js';
import '../../app/containers/RoomHeader/RoomHeader.stories.js'; import '../../app/containers/RoomHeader/RoomHeader.stories.js';
import '../../app/views/RoomView/LoadMore/LoadMore.stories'; import '../../app/views/RoomView/LoadMore/LoadMore.stories';
import '../../app/containers/TextInput.stories';
// Change here to see themed storybook // Change here to see themed storybook
export const theme = 'light'; export const theme = 'light';