tag input size, sticky bar fix

This commit is contained in:
feruz 2020-01-22 10:01:21 +02:00
parent 40a3b60e70
commit d058924e76
3 changed files with 22 additions and 24 deletions

View File

@ -1,6 +1,9 @@
import EStyleSheet from 'react-native-extended-stylesheet'; import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({ export default EStyleSheet.create({
container: {
height: 60,
},
textInput: { textInput: {
color: '$primaryBlack', color: '$primaryBlack',
fontSize: 15, fontSize: 15,

View File

@ -21,7 +21,6 @@ const TagInput = ({
}) => { }) => {
const [text, setText] = useState(''); const [text, setText] = useState('');
const [warning, setWarning] = useState(null); const [warning, setWarning] = useState(null);
const [height, setHeight] = useState(0);
useEffect(() => { useEffect(() => {
if (typeof value === 'string') { if (typeof value === 'string') {
@ -38,21 +37,21 @@ const TagInput = ({
let cats = _text.split(' '); let cats = _text.split(' ');
if (handleTagChanged && cats.length > 0) { if (handleTagChanged && cats.length > 0) {
cats.length > 10 cats.length > 10
? (setWarning(intl.formatMessage({ id: 'editor.limited_tags' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_tags' }))
: cats.find(c => c.length > 24) : cats.find(c => c.length > 24)
? (setWarning(intl.formatMessage({ id: 'editor.limited_length' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_length' }))
: cats.find(c => c.split('-').length > 2) : cats.find(c => c.split('-').length > 2)
? (setWarning(intl.formatMessage({ id: 'editor.limited_dash' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_dash' }))
: cats.find(c => c.indexOf(',') >= 0) : cats.find(c => c.indexOf(',') >= 0)
? (setWarning(intl.formatMessage({ id: 'editor.limited_space' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_space' }))
: cats.find(c => /[A-Z]/.test(c)) : cats.find(c => /[A-Z]/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_lowercase' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_lowercase' }))
: cats.find(c => !/^[a-z0-9-#]+$/.test(c)) : cats.find(c => !/^[a-z0-9-#]+$/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_characters' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_characters' }))
: cats.find(c => !/^[a-z-#]/.test(c)) : cats.find(c => !/^[a-z-#]/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_firstchar' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_firstchar' }))
: cats.find(c => !/[a-z0-9]$/.test(c)) : cats.find(c => !/[a-z0-9]$/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_lastchar' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_lastchar' }))
: setWarning(null); : setWarning(null);
handleTagChanged([...cats]); handleTagChanged([...cats]);
@ -64,21 +63,21 @@ const TagInput = ({
cats = text.trim().split(' '); cats = text.trim().split(' ');
if (handleTagChanged && cats.length > 0) { if (handleTagChanged && cats.length > 0) {
cats.length > 10 cats.length > 10
? (setWarning(intl.formatMessage({ id: 'editor.limited_tags' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_tags' }))
: cats.find(c => c.length > 24) : cats.find(c => c.length > 24)
? (setWarning(intl.formatMessage({ id: 'editor.limited_length' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_length' }))
: cats.find(c => c.split('-').length > 2) : cats.find(c => c.split('-').length > 2)
? (setWarning(intl.formatMessage({ id: 'editor.limited_dash' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_dash' }))
: cats.find(c => c.indexOf(',') >= 0) : cats.find(c => c.indexOf(',') >= 0)
? (setWarning(intl.formatMessage({ id: 'editor.limited_space' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_space' }))
: cats.find(c => /[A-Z]/.test(c)) : cats.find(c => /[A-Z]/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_lowercase' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_lowercase' }))
: cats.find(c => !/^[a-z0-9-#]+$/.test(c)) : cats.find(c => !/^[a-z0-9-#]+$/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_characters' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_characters' }))
: cats.find(c => !/^[a-z-#]/.test(c)) : cats.find(c => !/^[a-z-#]/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_firstchar' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_firstchar' }))
: cats.find(c => !/[a-z0-9]$/.test(c)) : cats.find(c => !/[a-z0-9]$/.test(c))
? (setWarning(intl.formatMessage({ id: 'editor.limited_lastchar' })), setHeight(60)) ? setWarning(intl.formatMessage({ id: 'editor.limited_lastchar' }))
: setWarning(null); : setWarning(null);
handleTagChanged([...cats]); handleTagChanged([...cats]);
} }
@ -86,11 +85,11 @@ const TagInput = ({
} }
}; };
return ( return (
<View style={[globalStyles.containerHorizontal16, { height: Math.max(35, height) }]}> <View style={[globalStyles.containerHorizontal16, styles.container]}>
<ThemeContainer> <ThemeContainer>
{({ isDarkTheme }) => ( {({ isDarkTheme }) => (
<TextInput <TextInput
style={[styles.textInput, { height: Math.max(35, height) }]} style={styles.textInput}
placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'} placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
editable={!isPreviewActive} editable={!isPreviewActive}
maxLength={100} maxLength={100}
@ -98,10 +97,6 @@ const TagInput = ({
id: 'editor.tags', id: 'editor.tags',
})} })}
multiline multiline
numberOfLines={2}
onContentSizeChange={event => {
setHeight(event.nativeEvent.contentSize.height);
}}
autoFocus={autoFocus} autoFocus={autoFocus}
onChangeText={textT => _handleOnChange(textT)} onChangeText={textT => _handleOnChange(textT)}
onBlur={() => _handleOnBlur()} onBlur={() => _handleOnBlur()}

View File

@ -213,7 +213,7 @@ const MarkdownEditorView = ({
return ( return (
<KeyboardAvoidingView <KeyboardAvoidingView
style={styles.container} style={styles.container}
keyboardVerticalOffset={Platform.select({ ios: 0, android: 40 })} keyboardVerticalOffset={Platform.select({ ios: 0, android: 30 })}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
> >
{!isPreviewActive ? ( {!isPreviewActive ? (