Reverts changes to app-modal and changes input window for notes on iOS

This commit is contained in:
tina
2024-10-01 21:24:30 +02:00
parent 4de32e3801
commit f4fa2a7c57
2 changed files with 19 additions and 27 deletions
+6 -23
View File
@@ -1,9 +1,7 @@
import React from 'react' import React from 'react'
import { import {
Dimensions, Dimensions,
KeyboardAvoidingView,
Modal, Modal,
Platform,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
View, View,
@@ -14,10 +12,6 @@ import CloseIcon from './close-icon'
import { Sizes, Spacing } from '../../styles' import { Sizes, Spacing } from '../../styles'
const keyboardVerticalOffsetPlatformDependent = Platform.OS === 'ios' ? 40 : 0
const keyboardBehaviorPlatformDependent =
Platform.OS === 'ios' ? 'position' : 'padding'
const AppModal = ({ children, onClose }) => ( const AppModal = ({ children, onClose }) => (
<Modal <Modal
animationType="fade" animationType="fade"
@@ -25,19 +19,13 @@ const AppModal = ({ children, onClose }) => (
transparent={true} transparent={true}
visible={true} visible={true}
> >
<KeyboardAvoidingView <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
keyboardVerticalOffset={keyboardVerticalOffsetPlatformDependent} <View style={styles.modalWindow}>
behavior={keyboardBehaviorPlatformDependent} <View style={styles.headerContainer}>
style={styles.safeAreaView} <CloseIcon onClose={onClose} />
>
<TouchableOpacity onPress={onClose} style={styles.blackBackground} />
<View style={styles.modalWindow}>
<View style={styles.headerContainer}>
<CloseIcon onClose={onClose} />
</View>
{children}
</View> </View>
</KeyboardAvoidingView> {children}
</View>
</Modal> </Modal>
) )
@@ -74,11 +62,6 @@ const styles = StyleSheet.create({
elevation: 2, // works on android elevation: 2, // works on android
minWidth: '80%', minWidth: '80%',
}, },
safeAreaView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
}) })
export default AppModal export default AppModal
+13 -4
View File
@@ -1,6 +1,12 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { ScrollView, StyleSheet, View } from 'react-native' import {
Dimensions,
Platform,
ScrollView,
StyleSheet,
View,
} from 'react-native'
import AppModal from '../common/app-modal' import AppModal from '../common/app-modal'
import AppSwitch from '../common/app-switch' import AppSwitch from '../common/app-switch'
@@ -111,9 +117,12 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
const noteText = symptom === 'note' ? data.value : data.note const noteText = symptom === 'note' ? data.value : data.note
const inputProps = { const inputProps = {
multiline: true, multiline: true,
numberOfLines: 4, numberOfLines: Platform.OS === 'ios' ? null : 4, // only Android
minHeight: Platform.OS === 'ios' ? styles.input.height : null,
maxHeight:
Platform.OS === 'ios' ? Dimensions.get('window').height * 0.4 : null,
style: symptom === 'note' ? null : styles.input, // overwrites previous 2 lines to fix note space in symptoms
scrollEnabled: true, scrollEnabled: true,
style: styles.input,
textAlignVertical: 'top', textAlignVertical: 'top',
} }
@@ -185,7 +194,7 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
<Segment style={styles.segmentBorder}> <Segment style={styles.segmentBorder}>
<AppText>{symtomPage[symptom].note}</AppText> <AppText>{symtomPage[symptom].note}</AppText>
<AppTextInput <AppTextInput
multiline={true} {...inputProps}
onChangeText={onEditNote} onChangeText={onEditNote}
placeholder={sharedLabels.enter} placeholder={sharedLabels.enter}
testID="noteInput" testID="noteInput"