toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: height for multiple line floating text input (#7688)

Browse source
This commit is contained in:
Tanmay Thole 2023-12-13 14:20:18 +05:30 committed by GitHub
parent 5db18889a1
commit 15fb6363aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/floating_text_input_label/index.tsx
View file

@ -95,6 +95,7 @@ type FloatingTextInputProps = TextInputProps & {
label: string;
labelTextStyle?: TextStyle;
multiline?: boolean;
multilineInputHeight?: number;
onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
onLayout?: (e: LayoutChangeEvent) => void;
@ -117,6 +118,7 @@ const FloatingTextInput = forwardRef<FloatingTextInputRef, FloatingTextInputProp
label = '',
labelTextStyle,
multiline,
multilineInputHeight,
onBlur,
onFocus,
onLayout,
@ -199,21 +201,23 @@ const FloatingTextInput = forwardRef<FloatingTextInputRef, FloatingTextInputProp
res.push(textInputStyle);
if (multiline) {
res.push({height: 100, textAlignVertical: 'top'});
const height = multilineInputHeight || 100;
res.push({height, textAlignVertical: 'top'});
}
return res;
}, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, editable]);
}, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, multilineInputHeight, editable]);
const combinedTextInputStyle = useMemo(() => {
const res: StyleProp<TextStyle> = [styles.textInput, styles.input, textInputStyle];
if (multiline) {
res.push({height: 80, textAlignVertical: 'top'});
const height = multilineInputHeight ? multilineInputHeight - 20 : 80;
res.push({height, textAlignVertical: 'top'});
}
return res;
}, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, editable]);
}, [styles, theme, shouldShowError, focused, textInputStyle, focusedLabel, multiline, multilineInputHeight, editable]);
const textAnimatedTextStyle = useAnimatedStyle(() => {
const inputText = placeholder || value || props.defaultValue;

1
app/screens/settings/notification_auto_responder/notification_auto_responder.tsx
View file

@ -117,6 +117,7 @@ const NotificationAutoResponder = ({currentUser, componentId}: NotificationAutoR
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
label={intl.formatMessage(label)}
multiline={true}
multilineInputHeight={154}
onChangeText={setAutoResponderMessage}
placeholder={intl.formatMessage(label)}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}