Lisa
130 lines
3.3 KiB
JavaScript
130 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { StyleSheet, View, TouchableOpacity } from 'react-native'
|
|
import { scale } from 'react-native-size-matters'
|
|
|
|
import AppText from '../common/app-text'
|
|
import DripIcon from '../../assets/drip-icons'
|
|
import SymptomEditView from './symptom-edit-view'
|
|
|
|
import { isDateInFuture } from '../helpers/cycle-day'
|
|
|
|
import { Colors, Sizes, Spacing } from '../../styles'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
const SymptomBox = ({
|
|
date,
|
|
symptom,
|
|
symptomData,
|
|
symptomDataToDisplay,
|
|
editedSymptom,
|
|
setEditedSymptom,
|
|
}) => {
|
|
const { t } = useTranslation(null, { keyPrefix: 'cycleDay.symptomBox' })
|
|
const isSymptomEdited = editedSymptom === symptom
|
|
const isSymptomDisabled = isDateInFuture(date) && symptom !== 'note'
|
|
const isExcluded = symptomData !== null ? symptomData.exclude : false
|
|
|
|
const iconColor = isSymptomDisabled ? Colors.greyLight : Colors.grey
|
|
const iconName = `drip-icon-${symptom}`
|
|
const symptomNameStyle = [
|
|
styles.symptomName,
|
|
isSymptomDisabled && styles.symptomNameDisabled,
|
|
isExcluded && styles.symptomNameExcluded,
|
|
]
|
|
const textStyle = [
|
|
styles.text,
|
|
isSymptomDisabled && styles.textDisabled,
|
|
isExcluded && styles.textExcluded,
|
|
]
|
|
|
|
return (
|
|
<>
|
|
{isSymptomEdited && (
|
|
<SymptomEditView
|
|
date={date}
|
|
symptom={symptom}
|
|
symptomData={symptomData}
|
|
onClose={() => setEditedSymptom('')}
|
|
/>
|
|
)}
|
|
|
|
<TouchableOpacity
|
|
disabled={isSymptomDisabled}
|
|
onPress={() => setEditedSymptom(symptom)}
|
|
style={styles.container}
|
|
testID={iconName}
|
|
>
|
|
<DripIcon
|
|
color={iconColor}
|
|
isActive={!isSymptomDisabled}
|
|
name={iconName}
|
|
size={Sizes.icon}
|
|
/>
|
|
<View style={styles.textContainer}>
|
|
<AppText style={symptomNameStyle}>{t(symptom)}</AppText>
|
|
{symptomDataToDisplay && (
|
|
<AppText style={textStyle} numberOfLines={4}>
|
|
{symptomDataToDisplay}
|
|
</AppText>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</>
|
|
)
|
|
}
|
|
|
|
SymptomBox.propTypes = {
|
|
date: PropTypes.string.isRequired,
|
|
symptom: PropTypes.string.isRequired,
|
|
symptomData: PropTypes.object,
|
|
symptomDataToDisplay: PropTypes.string,
|
|
editedSymptom: PropTypes.string.isRequired,
|
|
setEditedSymptom: PropTypes.func.isRequired,
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
backgroundColor: 'white',
|
|
borderRadius: scale(10),
|
|
elevation: 4,
|
|
flexDirection: 'row',
|
|
height: scale(110),
|
|
marginBottom: Spacing.base,
|
|
paddingHorizontal: Spacing.small,
|
|
paddingVertical: Spacing.base,
|
|
width: Spacing.symptomTileWidth,
|
|
},
|
|
symptomName: {
|
|
paddingTop: Sizes.tiny,
|
|
color: Colors.purple,
|
|
fontSize: Sizes.base,
|
|
lineHeight: Sizes.base,
|
|
},
|
|
symptomNameDisabled: {
|
|
color: Colors.grey,
|
|
},
|
|
symptomNameExcluded: {
|
|
color: Colors.greyDark,
|
|
},
|
|
textContainer: {
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
marginLeft: Spacing.tiny,
|
|
maxWidth: Spacing.textWidth,
|
|
},
|
|
text: {
|
|
fontSize: Sizes.small,
|
|
fontStyle: 'italic',
|
|
},
|
|
textDisabled: {
|
|
color: Colors.greyLight,
|
|
},
|
|
textExcluded: {
|
|
color: Colors.grey,
|
|
},
|
|
})
|
|
|
|
export default SymptomBox
|