Merge branch 'chore/batch-prettify' into 'main'

Chore/batch prettify

See merge request bloodyhealth/drip!501
This commit is contained in:
Lisa
2022-09-04 13:57:01 +00:00
36 changed files with 222 additions and 229 deletions
+9 -7
View File
@@ -23,14 +23,16 @@ export default function License({ setLicense }) {
return ( return (
<AppPage testID="licensePage"> <AppPage testID="licensePage">
<Segment last testID="test" title={t("settings.license.title")}> <Segment last testID="test" title={t('settings.license.title')}>
<AppText testID="test">{t("settings.license.text", { currentYear })}</AppText> <AppText testID="test">
{t('settings.license.text', { currentYear })}
</AppText>
<View style={styles.container}> <View style={styles.container}>
<Button onPress={BackHandler.exitApp} testID="licenseCancelButton"> <Button onPress={BackHandler.exitApp} testID="licenseCancelButton">
{t("labels.shared.cancel")} {t('labels.shared.cancel')}
</Button> </Button>
<Button isCTA onPress={onAcceptLicense} testID="licenseOkButton"> <Button isCTA onPress={onAcceptLicense} testID="licenseOkButton">
{t("labels.shared.ok")} {t('labels.shared.ok')}
</Button> </Button>
</View> </View>
</Segment> </Segment>
@@ -39,11 +41,11 @@ export default function License({ setLicense }) {
} }
License.propTypes = { License.propTypes = {
setLicense: PropTypes.func.isRequired setLicense: PropTypes.func.isRequired,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...Containers.rowContainer ...Containers.rowContainer,
} },
}) })
+4 -4
View File
@@ -18,21 +18,21 @@ const ChartLegend = ({ height }) => {
} }
ChartLegend.propTypes = { ChartLegend.propTypes = {
height: PropTypes.number.isRequired height: PropTypes.number.isRequired,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
width: CHART_YAXIS_WIDTH width: CHART_YAXIS_WIDTH,
}, },
text: { text: {
...Typography.label, ...Typography.label,
}, },
textBold: { textBold: {
...Typography.labelBold ...Typography.labelBold,
} },
}) })
export default ChartLegend export default ChartLegend
+10 -9
View File
@@ -5,18 +5,19 @@ import { StyleSheet, View } from 'react-native'
import { getTickPositions } from '../helpers/chart' import { getTickPositions } from '../helpers/chart'
import { Colors } from '../../styles' import { Colors } from '../../styles'
import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config' import {
CHART_GRID_LINE_HORIZONTAL_WIDTH,
CHART_YAXIS_WIDTH,
} from '../../config'
const HorizontalGrid = ({ height }) => { const HorizontalGrid = ({ height }) => {
return getTickPositions(height).map(tick => { return getTickPositions(height).map((tick) => {
return ( return <View key={tick} top={tick} {...styles.line} />
<View key={tick} top={tick} {...styles.line}/>
)
}) })
} }
HorizontalGrid.propTypes = { HorizontalGrid.propTypes = {
height: PropTypes.number height: PropTypes.number,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@@ -25,9 +26,9 @@ const styles = StyleSheet.create({
borderBottomColor: Colors.grey, borderBottomColor: Colors.grey,
borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH, borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
left: CHART_YAXIS_WIDTH, left: CHART_YAXIS_WIDTH,
position:'absolute', position: 'absolute',
right: 0 right: 0,
} },
}) })
export default HorizontalGrid export default HorizontalGrid
+14 -17
View File
@@ -6,7 +6,7 @@ import { Colors, Containers } from '../../styles'
import { import {
CHART_COLUMN_WIDTH, CHART_COLUMN_WIDTH,
CHART_DOT_RADIUS, CHART_DOT_RADIUS,
CHART_GRID_LINE_HORIZONTAL_WIDTH CHART_GRID_LINE_HORIZONTAL_WIDTH,
} from '../../config' } from '../../config'
const SymptomCell = ({ const SymptomCell = ({
@@ -14,22 +14,22 @@ const SymptomCell = ({
index, index,
symptom, symptom,
symptomValue, symptomValue,
isSymptomDataComplete isSymptomDataComplete,
}) => { }) => {
const shouldDrawDot = symptomValue !== false const shouldDrawDot = symptomValue !== false
const styleCell = index !== 0 const styleCell =
? [styles.cell, { height, width: CHART_COLUMN_WIDTH }] index !== 0
: [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder] ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
: [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
let styleDot let styleDot
if (shouldDrawDot) { if (shouldDrawDot) {
const styleSymptom = Colors.iconColors[symptom] const styleSymptom = Colors.iconColors[symptom]
const symptomColor = styleSymptom.shades[symptomValue] const symptomColor = styleSymptom.shades[symptomValue]
const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix') const isMucusOrCervix = symptom === 'mucus' || symptom === 'cervix'
const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ? const backgroundColor =
'white' : symptomColor isMucusOrCervix && !isSymptomDataComplete ? 'white' : symptomColor
const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0 const borderWidth = isMucusOrCervix && !isSymptomDataComplete ? 2 : 0
const borderColor = symptomColor const borderColor = symptomColor
styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }] styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
} }
@@ -45,10 +45,7 @@ SymptomCell.propTypes = {
height: PropTypes.number, height: PropTypes.number,
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
symptom: PropTypes.string, symptom: PropTypes.string,
symptomValue: PropTypes.oneOfType([ symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
PropTypes.bool,
PropTypes.number,
]),
isSymptomDataComplete: PropTypes.bool, isSymptomDataComplete: PropTypes.bool,
} }
@@ -59,7 +56,7 @@ const styles = StyleSheet.create({
borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH, borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
borderLeftColor: Colors.grey, borderLeftColor: Colors.grey,
borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH, borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
...Containers.centerItems ...Containers.centerItems,
}, },
topBorder: { topBorder: {
borderTopColor: Colors.grey, borderTopColor: Colors.grey,
@@ -68,7 +65,7 @@ const styles = StyleSheet.create({
dot: { dot: {
width: CHART_DOT_RADIUS * 2, width: CHART_DOT_RADIUS * 2,
height: CHART_DOT_RADIUS * 2, height: CHART_DOT_RADIUS * 2,
borderRadius: 50 borderRadius: 50,
} },
}) })
export default SymptomCell export default SymptomCell
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StyleSheet , View } from 'react-native' import { StyleSheet, View } from 'react-native'
import DripIcon from '../../assets/drip-icons' import DripIcon from '../../assets/drip-icons'
@@ -26,8 +26,8 @@ SymptomIcon.propTypes = {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...Containers.centerItems ...Containers.centerItems,
} },
}) })
export default SymptomIcon export default SymptomIcon
+16 -18
View File
@@ -7,24 +7,22 @@ import Tick from './tick'
import { getTickList } from '../helpers/chart' import { getTickList } from '../helpers/chart'
const TickList = ({ height }) => { const TickList = ({ height }) => {
return ( return (
<View style={[styles.container, height]}> <View style={[styles.container, height]}>
{ {getTickList(height).map(
getTickList(height) ({ isBold, label, position, shouldShowLabel, tickHeight }) => {
.map(({ isBold, label, position, shouldShowLabel, tickHeight}) => { return (
return ( <Tick
<Tick height={tickHeight}
height={tickHeight} isBold={isBold}
isBold={isBold} key={label}
key={label} label={label}
label={label} shouldShowLabel={shouldShowLabel}
shouldShowLabel={shouldShowLabel} yPosition={position}
yPosition={position} />
/> )
) }
}) )}
}
</View> </View>
) )
} }
@@ -35,8 +33,8 @@ TickList.propTypes = {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1 flex: 1,
} },
}) })
export default TickList export default TickList
+6 -7
View File
@@ -9,10 +9,10 @@ import { CHART_TICK_WIDTH } from '../../config'
const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => { const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
const top = yPosition - height / 2 const top = yPosition - height / 2
const containerStyle = [ styles.container, { flexBasis: height, height, top }] const containerStyle = [styles.container, { flexBasis: height, height, top }]
const textStyle = isBold ? styles.textBold : styles.textNormal const textStyle = isBold ? styles.textBold : styles.textNormal
return( return (
<View style={containerStyle}> <View style={containerStyle}>
<AppText style={textStyle}>{shouldShowLabel && label}</AppText> <AppText style={textStyle}>{shouldShowLabel && label}</AppText>
</View> </View>
@@ -27,7 +27,6 @@ Tick.propTypes = {
label: PropTypes.string, label: PropTypes.string,
} }
const text = { const text = {
textAlign: 'right', textAlign: 'right',
} }
@@ -36,17 +35,17 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
position: 'absolute', position: 'absolute',
right: 0, right: 0,
width: CHART_TICK_WIDTH width: CHART_TICK_WIDTH,
}, },
textBold: { textBold: {
fontSize: Sizes.base, fontSize: Sizes.base,
fontWeight: 'bold', fontWeight: 'bold',
...text ...text,
}, },
textNormal: { textNormal: {
fontSize: Sizes.small, fontSize: Sizes.small,
...text ...text,
} },
}) })
export default Tick export default Tick
+7 -7
View File
@@ -13,7 +13,7 @@ const image = require('../../assets/swipe.png')
const Tutorial = ({ onClose }) => { const Tutorial = ({ onClose }) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Image resizeMode='contain' source={image} style={styles.image} /> <Image resizeMode="contain" source={image} style={styles.image} />
<View style={styles.textContainer}> <View style={styles.textContainer}>
<AppText>{chart.tutorial}</AppText> <AppText>{chart.tutorial}</AppText>
</View> </View>
@@ -23,20 +23,20 @@ const Tutorial = ({ onClose }) => {
} }
Tutorial.propTypes = { Tutorial.propTypes = {
onClose: PropTypes.func.isRequired onClose: PropTypes.func.isRequired,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...Containers.rowContainer, ...Containers.rowContainer,
padding: Spacing.large padding: Spacing.large,
}, },
image: { image: {
height: 40 height: 40,
}, },
textContainer: { textContainer: {
width: '70%' width: '70%',
} },
}) })
export default Tutorial export default Tutorial
+7 -8
View File
@@ -13,7 +13,7 @@ const YAxis = ({
symptomsToDisplay, symptomsToDisplay,
symptomsSectionHeight, symptomsSectionHeight,
shouldShowTemperatureColumn, shouldShowTemperatureColumn,
xAxisHeight xAxisHeight,
}) => { }) => {
const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
@@ -21,15 +21,14 @@ const YAxis = ({
<View> <View>
{shouldShowTemperatureColumn && <TickList height={height} />} {shouldShowTemperatureColumn && <TickList height={height} />}
<ChartLegend height={xAxisHeight} /> <ChartLegend height={xAxisHeight} />
<View style={[styles.yAxis, {height: symptomsSectionHeight}]}> <View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
{symptomsToDisplay.map(symptom => ( {symptomsToDisplay.map((symptom) => (
<SymptomIcon <SymptomIcon
key={symptom} key={symptom}
symptom={symptom} symptom={symptom}
height={symptomIconHeight} height={symptomIconHeight}
/> />
) ))}
)}
</View> </View>
</View> </View>
) )
@@ -40,13 +39,13 @@ YAxis.propTypes = {
symptomsToDisplay: PropTypes.array, symptomsToDisplay: PropTypes.array,
symptomsSectionHeight: PropTypes.number, symptomsSectionHeight: PropTypes.number,
shouldShowTemperatureColumn: PropTypes.bool, shouldShowTemperatureColumn: PropTypes.bool,
xAxisHeight: PropTypes.number.isRequired xAxisHeight: PropTypes.number.isRequired,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
yAxis: { yAxis: {
width: CHART_YAXIS_WIDTH width: CHART_YAXIS_WIDTH,
} },
}) })
export default YAxis export default YAxis
+5 -5
View File
@@ -14,17 +14,17 @@ const AppIcon = ({ color, name, style, ...props }) => {
AppIcon.propTypes = { AppIcon.propTypes = {
color: PropTypes.string, color: PropTypes.string,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
style: PropTypes.object style: PropTypes.object,
} }
AppIcon.defaultProps = { AppIcon.defaultProps = {
color: 'black' color: 'black',
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
icon: { icon: {
fontSize: Sizes.subtitle fontSize: Sizes.subtitle,
} },
}) })
export default AppIcon export default AppIcon
+2 -2
View File
@@ -17,8 +17,8 @@ const AppLoadingView = () => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...Containers.centerItems ...Containers.centerItems,
} },
}) })
export default AppLoadingView export default AppLoadingView
+4 -4
View File
@@ -3,9 +3,9 @@ import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
const AppModal = ({ children, onClose }) => { const AppModal = ({ children, onClose }) => {
return( return (
<Modal <Modal
animationType='fade' animationType="fade"
onRequestClose={onClose} onRequestClose={onClose}
transparent={true} transparent={true}
visible={true} visible={true}
@@ -18,7 +18,7 @@ const AppModal = ({ children, onClose }) => {
AppModal.propTypes = { AppModal.propTypes = {
children: PropTypes.node, children: PropTypes.node,
onClose: PropTypes.func onClose: PropTypes.func,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
backgroundColor: 'black', backgroundColor: 'black',
flex: 1, flex: 1,
opacity: 0.5, opacity: 0.5,
} },
}) })
export default AppModal export default AppModal
+7 -7
View File
@@ -13,7 +13,7 @@ const AppPage = ({
title, title,
...props ...props
}) => { }) => {
return( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView <ScrollView
contentContainerStyle={[styles.scrollView, contentContainerStyle]} contentContainerStyle={[styles.scrollView, contentContainerStyle]}
@@ -31,21 +31,21 @@ AppPage.propTypes = {
children: PropTypes.node, children: PropTypes.node,
contentContainerStyle: PropTypes.object, contentContainerStyle: PropTypes.object,
scrollViewStyle: PropTypes.object, scrollViewStyle: PropTypes.object,
title: PropTypes.string title: PropTypes.string,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: Colors.turquoiseLight, backgroundColor: Colors.turquoiseLight,
flex: 1 flex: 1,
}, },
scrollView: { scrollView: {
backgroundColor: Colors.turquoiseLight, backgroundColor: Colors.turquoiseLight,
flexGrow: 1 flexGrow: 1,
}, },
title: { title: {
...Typography.title ...Typography.title,
} },
}) })
export default AppPage export default AppPage
+1 -1
View File
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
statusBar: { statusBar: {
backgroundColor: Colors.purple, backgroundColor: Colors.purple,
height: STATUSBAR_HEIGHT, height: STATUSBAR_HEIGHT,
} },
}) })
export default AppStatusBar export default AppStatusBar
+4 -4
View File
@@ -20,19 +20,19 @@ const AppSwitch = ({ onToggle, text, value }) => {
AppSwitch.propTypes = { AppSwitch.propTypes = {
onToggle: PropTypes.func.isRequired, onToggle: PropTypes.func.isRequired,
text: PropTypes.string, text: PropTypes.string,
value: PropTypes.bool value: PropTypes.bool,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
...Containers.rowContainer ...Containers.rowContainer,
}, },
switch: { switch: {
flex: 1, flex: 1,
}, },
textContainer: { textContainer: {
flex: 4, flex: 4,
} },
}) })
export default AppSwitch export default AppSwitch
+3 -3
View File
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
import { Colors, Spacing, Typography } from '../../styles' import { Colors, Spacing, Typography } from '../../styles'
const AppTextInput = ({ style, isKeyboardOffset, ...props }) => { const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
const behavior = isKeyboardOffset ? "padding" : "height" const behavior = isKeyboardOffset ? 'padding' : 'height'
const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0 const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
return ( return (
@@ -39,8 +39,8 @@ const styles = StyleSheet.create({
minWidth: '80%', minWidth: '80%',
paddingHorizontal: Spacing.base, paddingHorizontal: Spacing.base,
paddingVertical: Spacing.tiny, paddingVertical: Spacing.tiny,
...Typography.mainText ...Typography.mainText,
} },
}) })
export default AppTextInput export default AppTextInput
+3 -3
View File
@@ -26,8 +26,8 @@ AppText.propTypes = {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
text: { text: {
color: Colors.greyDark, color: Colors.greyDark,
...Typography.mainText ...Typography.mainText,
} },
}) })
export default AppText export default AppText
+4 -4
View File
@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
import AppIcon from './app-icon' import AppIcon from './app-icon'
import { HIT_SLOP} from '../../config' import { HIT_SLOP } from '../../config'
import { Colors, Sizes } from '../../styles' import { Colors, Sizes } from '../../styles'
const CloseIcon = ({ onClose, color, ...props }) => { const CloseIcon = ({ onClose, color, ...props }) => {
@@ -15,21 +15,21 @@ const CloseIcon = ({ onClose, color, ...props }) => {
style={styles.container} style={styles.container}
{...props} {...props}
> >
<AppIcon name='cross' color={color ? color : Colors.orange} /> <AppIcon name="cross" color={color ? color : Colors.orange} />
</TouchableOpacity> </TouchableOpacity>
) )
} }
CloseIcon.propTypes = { CloseIcon.propTypes = {
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
color: PropTypes.string color: PropTypes.string,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
alignSelf: 'flex-start', alignSelf: 'flex-start',
marginBottom: Sizes.base, marginBottom: Sizes.base,
} },
}) })
export default CloseIcon export default CloseIcon
+4 -4
View File
@@ -21,7 +21,7 @@ const Link = ({ children, style }) => {
Link.propTypes = { Link.propTypes = {
children: PropTypes.node, children: PropTypes.node,
style: PropTypes.object style: PropTypes.object,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@@ -29,12 +29,12 @@ const styles = StyleSheet.create({
color: Colors.purple, color: Colors.purple,
textDecorationLine: 'underline', textDecorationLine: 'underline',
...Typography.mainText, ...Typography.mainText,
} },
}) })
function replaceUrlWithText(url) { function replaceUrlWithText(url) {
const link = Object.values(links).find(l => l.url === url) const link = Object.values(links).find((l) => l.url === url)
return (link && link.text) || url return (link && link.text) || url
} }
export default Link export default Link
+2 -2
View File
@@ -15,7 +15,7 @@ const MenuIcon = ({ isActive, name }) => {
MenuIcon.propTypes = { MenuIcon.propTypes = {
isActive: PropTypes.bool, isActive: PropTypes.bool,
name: PropTypes.string.isRequired name: PropTypes.string.isRequired,
} }
export default MenuIcon export default MenuIcon
+2 -2
View File
@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
}, },
title: { title: {
...Typography.subtitle, ...Typography.subtitle,
} },
}) })
export default Segment export default Segment
+11 -11
View File
@@ -7,17 +7,17 @@ import AppText from './app-text'
import { Sizes, Spacing, Typography } from '../../styles' import { Sizes, Spacing, Typography } from '../../styles'
const Table = ({ tableContent }) => { const Table = ({ tableContent }) => {
return ( return tableContent.map((rowContent, i) => (
tableContent.map((rowContent, i) => <Row key={i} rowContent={rowContent} />) <Row key={i} rowContent={rowContent} />
) ))
} }
Table.propTypes = { Table.propTypes = {
tableContent: PropTypes.array.isRequired tableContent: PropTypes.array.isRequired,
} }
const Row = ({ rowContent }) => { const Row = ({ rowContent }) => {
return( return (
<View style={styles.row}> <View style={styles.row}>
<Cell content={rowContent[0]} isLeft /> <Cell content={rowContent[0]} isLeft />
<Cell content={rowContent[1]} /> <Cell content={rowContent[1]} />
@@ -26,7 +26,7 @@ const Row = ({ rowContent }) => {
} }
Row.propTypes = { Row.propTypes = {
rowContent: PropTypes.array.isRequired rowContent: PropTypes.array.isRequired,
} }
const Cell = ({ content, isLeft }) => { const Cell = ({ content, isLeft }) => {
@@ -35,7 +35,7 @@ const Cell = ({ content, isLeft }) => {
const numberOfLines = isLeft ? 1 : 2 const numberOfLines = isLeft ? 1 : 2
const ellipsizeMode = isLeft ? 'clip' : 'tail' const ellipsizeMode = isLeft ? 'clip' : 'tail'
return( return (
<View style={styleContainer}> <View style={styleContainer}>
<AppText <AppText
numberOfLines={numberOfLines} numberOfLines={numberOfLines}
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
}, },
accentPurpleBig: { accentPurpleBig: {
...Typography.accentPurpleBig, ...Typography.accentPurpleBig,
marginRight: Spacing.tiny marginRight: Spacing.tiny,
}, },
cellLeft: { cellLeft: {
alignItems: 'flex-end', alignItems: 'flex-end',
@@ -75,8 +75,8 @@ const styles = StyleSheet.create({
row: { row: {
flexDirection: 'row', flexDirection: 'row',
marginBottom: Spacing.tiny, marginBottom: Spacing.tiny,
marginLeft: Spacing.tiny marginLeft: Spacing.tiny,
} },
}) })
export default Table export default Table
+8 -8
View File
@@ -9,7 +9,7 @@ import { Colors, Containers } from '../../styles'
const SelectBoxGroup = ({ labels, optionsState, onSelect }) => { const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
return ( return (
<View style={styles.container}> <View style={styles.container}>
{Object.keys(labels).map(key => { {Object.keys(labels).map((key) => {
const isActive = optionsState[key] const isActive = optionsState[key]
const boxStyle = [styles.box, isActive && styles.boxActive] const boxStyle = [styles.box, isActive && styles.boxActive]
const textStyle = [styles.text, isActive && styles.textActive] const textStyle = [styles.text, isActive && styles.textActive]
@@ -31,25 +31,25 @@ const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
SelectBoxGroup.propTypes = { SelectBoxGroup.propTypes = {
labels: PropTypes.object.isRequired, labels: PropTypes.object.isRequired,
onSelect: PropTypes.func.isRequired, onSelect: PropTypes.func.isRequired,
optionsState: PropTypes.object.isRequired optionsState: PropTypes.object.isRequired,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
box: { box: {
...Containers.box ...Containers.box,
}, },
boxActive: { boxActive: {
...Containers.boxActive ...Containers.boxActive,
}, },
container: { container: {
...Containers.selectGroupContainer ...Containers.selectGroupContainer,
}, },
text: { text: {
color: Colors.orange color: Colors.orange,
}, },
textActive: { textActive: {
color: 'white' color: 'white',
} },
}) })
export default SelectBoxGroup export default SelectBoxGroup
+22 -24
View File
@@ -9,23 +9,21 @@ import { Colors, Containers } from '../../styles'
export default function SelectTabGroup({ activeButton, buttons, onSelect }) { export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
{ {buttons.map(({ label, value }, i) => {
buttons.map(({ label, value }, i) => { const isActive = value === activeButton
const isActive = value === activeButton const boxStyle = [styles.box, isActive && styles.boxActive]
const boxStyle = [styles.box, isActive && styles.boxActive] const textStyle = [styles.text, isActive && styles.textActive]
const textStyle = [styles.text, isActive && styles.textActive]
return ( return (
<TouchableOpacity <TouchableOpacity
onPress={() => onSelect(value)} onPress={() => onSelect(value)}
key={i} key={i}
style={boxStyle} style={boxStyle}
> >
<AppText style={textStyle}>{label}</AppText> <AppText style={textStyle}>{label}</AppText>
</TouchableOpacity> </TouchableOpacity>
) )
}) })}
}
</View> </View>
) )
} }
@@ -33,23 +31,23 @@ export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
SelectTabGroup.propTypes = { SelectTabGroup.propTypes = {
activeButton: PropTypes.number, activeButton: PropTypes.number,
buttons: PropTypes.array.isRequired, buttons: PropTypes.array.isRequired,
onSelect: PropTypes.func.isRequired onSelect: PropTypes.func.isRequired,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
box: { box: {
...Containers.box ...Containers.box,
}, },
boxActive: { boxActive: {
...Containers.boxActive ...Containers.boxActive,
}, },
container: { container: {
...Containers.selectGroupContainer ...Containers.selectGroupContainer,
}, },
text: { text: {
color: Colors.orange color: Colors.orange,
}, },
textActive: { textActive: {
color: 'white' color: 'white',
} },
}) })
+6 -7
View File
@@ -8,29 +8,28 @@ import HamburgerMenu from './hamburger-menu'
import { Colors, Containers, Sizes } from '../../styles' import { Colors, Containers, Sizes } from '../../styles'
const Header = ({ isSideMenuEnabled }) => { const Header = ({ isSideMenuEnabled }) => {
return ( return (
<View style={styles.header}> <View style={styles.header}>
<Logo /> <Logo />
{isSideMenuEnabled && <HamburgerMenu />} {isSideMenuEnabled && <HamburgerMenu />}
</View > </View>
) )
} }
Header.propTypes = { Header.propTypes = {
isSideMenuEnabled: PropTypes.bool isSideMenuEnabled: PropTypes.bool,
} }
Header.defaultProps = { Header.defaultProps = {
isSideMenuEnabled: true isSideMenuEnabled: true,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
header: { header: {
backgroundColor: Colors.purple, backgroundColor: Colors.purple,
padding: Sizes.base, padding: Sizes.base,
...Containers.rowContainer ...Containers.rowContainer,
} },
}) })
export default Header export default Header
+5 -3
View File
@@ -1,5 +1,7 @@
import Toast from 'react-native-simple-toast' import Toast from 'react-native-simple-toast'
export const showToast = (text) => Toast.show( export const showToast = (text) =>
text, Toast.SHORT, ['RCTModalHostViewController', 'UIAlertController'] Toast.show(text, Toast.SHORT, [
) 'RCTModalHostViewController',
'UIAlertController',
])
+2 -2
View File
@@ -1,2 +1,2 @@
export const getLabelsList = export const getLabelsList = (categories) =>
(categories) => categories.map((label, i) => ({ label, value: i })) categories.map((label, i) => ({ label, value: i }))
+9 -8
View File
@@ -1,10 +1,11 @@
export default function (jsDate) { export default function (jsDate) {
const vals = [jsDate.getHours(), jsDate.getMinutes()] const vals = [jsDate.getHours(), jsDate.getMinutes()]
return vals.map(val => { return vals
if (parseInt(val) < 10) { .map((val) => {
val = `0${val}` if (parseInt(val) < 10) {
} val = `0${val}`
return val }
}).join(':') return val
} })
.join(':')
}
+8 -8
View File
@@ -7,11 +7,11 @@ import { Containers } from '../../styles'
import { pages } from '../pages' import { pages } from '../pages'
const Menu = () => { const Menu = () => {
const menuItems = pages.filter(page => page.isInMenu) const menuItems = pages.filter((page) => page.isInMenu)
return ( return (
<View style={styles.container}> <View style={styles.container}>
{ menuItems.map(({ icon, label, component }) => { {menuItems.map(({ icon, label, component }) => {
return ( return (
<MenuItem <MenuItem
component={component} component={component}
@@ -19,17 +19,17 @@ const Menu = () => {
key={label} key={label}
label={label} label={label}
/> />
)} )
)} })}
</View > </View>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: 'white', backgroundColor: 'white',
...Containers.rowContainer ...Containers.rowContainer,
} },
}) })
export default Menu export default Menu
+1 -1
View File
@@ -3,4 +3,4 @@ import { shared as sharedLabels } from '../../../i18n/en/labels'
export default function alertError(msg) { export default function alertError(msg) {
Alert.alert(sharedLabels.errorTitle, msg) Alert.alert(sharedLabels.errorTitle, msg)
} }
+2 -6
View File
@@ -6,11 +6,7 @@ import styles from '../../../styles'
export default function PasswordField(props) { export default function PasswordField(props) {
return ( return (
<AppTextInput <AppTextInput style={styles.passwordField} secureTextEntry {...props} />
style={ styles.passwordField }
secureTextEntry
{...props}
/>
) )
} }
@@ -18,5 +14,5 @@ PasswordField.propTypes = {
placeholder: PropTypes.string, placeholder: PropTypes.string,
value: PropTypes.string, value: PropTypes.string,
onChangeText: PropTypes.func, onChangeText: PropTypes.func,
autoFocus: PropTypes.bool autoFocus: PropTypes.bool,
} }
+11 -9
View File
@@ -12,15 +12,17 @@ const SettingsButton = ({ children, style, secondary, ...props }) => {
styles.settingsButton, styles.settingsButton,
secondary ? null : styles.settingsButtonAccent, secondary ? null : styles.settingsButtonAccent,
props.disabled ? styles.settingsButtonDisabled : null, props.disabled ? styles.settingsButtonDisabled : null,
style style,
]} ]}
{ ...props } {...props}
> >
<AppText style={ <AppText
secondary ? style={
styles.settingsButtonSecondaryText : secondary
styles.settingsButtonText ? styles.settingsButtonSecondaryText
}> : styles.settingsButtonText
}
>
{children} {children}
</AppText> </AppText>
</TouchableOpacity> </TouchableOpacity>
@@ -32,7 +34,7 @@ SettingsButton.propTypes = {
disabled: PropTypes.bool, disabled: PropTypes.bool,
onPress: PropTypes.func.isRequired, onPress: PropTypes.func.isRequired,
secondary: PropTypes.bool, secondary: PropTypes.bool,
style: PropTypes.object style: PropTypes.object,
} }
export default SettingsButton export default SettingsButton
@@ -1 +1 @@
export const EXPORT_FILE_NAME = 'drip-data.csv' export const EXPORT_FILE_NAME = 'drip-data.csv'
+2 -2
View File
@@ -10,9 +10,9 @@ const License = () => {
const currentYear = new Date().getFullYear() const currentYear = new Date().getFullYear()
return ( return (
<AppPage title={t("settings.license.title")}> <AppPage title={t('settings.license.title')}>
<Segment last> <Segment last>
<AppText>{t("settings.license.text", { currentYear })}</AppText> <AppText>{t('settings.license.text', { currentYear })}</AppText>
</Segment> </Segment>
</AppPage> </AppPage>
) )
@@ -17,14 +17,14 @@ const SliderLabel = ({
oneMarkerValue, oneMarkerValue,
twoMarkerValue, twoMarkerValue,
oneMarkerLeftPosition, oneMarkerLeftPosition,
twoMarkerLeftPosition twoMarkerLeftPosition,
}) => { }) => {
const minCoordinate = getMarkerCoordinate(oneMarkerLeftPosition) const minCoordinate = getMarkerCoordinate(oneMarkerLeftPosition)
const maxCoordinate = getMarkerCoordinate(twoMarkerLeftPosition) const maxCoordinate = getMarkerCoordinate(twoMarkerLeftPosition)
const isMinNumber = Number.isFinite(oneMarkerLeftPosition) && const isMinNumber =
Number.isFinite(oneMarkerValue) Number.isFinite(oneMarkerLeftPosition) && Number.isFinite(oneMarkerValue)
const isMaxNumber = Number.isFinite(twoMarkerLeftPosition) && const isMaxNumber =
Number.isFinite(twoMarkerValue) Number.isFinite(twoMarkerLeftPosition) && Number.isFinite(twoMarkerValue)
const minStyle = [styles.label, { left: minCoordinate }] const minStyle = [styles.label, { left: minCoordinate }]
const maxStyle = [styles.label, { left: maxCoordinate }] const maxStyle = [styles.label, { left: maxCoordinate }]
@@ -40,15 +40,15 @@ SliderLabel.propTypes = {
oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), oneMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), twoMarkerValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
oneMarkerLeftPosition: PropTypes.number, oneMarkerLeftPosition: PropTypes.number,
twoMarkerLeftPosition: PropTypes.number twoMarkerLeftPosition: PropTypes.number,
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
label: { label: {
fontFamily: Fonts.bold, fontFamily: Fonts.bold,
position: 'absolute', position: 'absolute',
marginTop: (-1) * Sizes.base marginTop: -1 * Sizes.base,
} },
}) })
export default SliderLabel export default SliderLabel
+8 -9
View File
@@ -7,23 +7,22 @@ import settingsLabels from '../../i18n/en/settings'
const { menuItems } = settingsLabels const { menuItems } = settingsLabels
const menu = [ const menu = [
{ ...menuItems.reminders, component: 'Reminders'}, { ...menuItems.reminders, component: 'Reminders' },
{ ...menuItems.nfpSettings, component: 'NfpSettings'}, { ...menuItems.nfpSettings, component: 'NfpSettings' },
{ ...menuItems.dataManagement, component: 'DataManagement'}, { ...menuItems.dataManagement, component: 'DataManagement' },
{ ...menuItems.password, component: 'Password'} { ...menuItems.password, component: 'Password' },
] ]
const SettingsMenu = () => { const SettingsMenu = () => {
return ( return (
<AppPage title={settingsLabels.title}> <AppPage title={settingsLabels.title}>
{menu.map((menuItem, i) => { {menu.map((menuItem, i) => {
const last = (menu.length === i + 1) const last = menu.length === i + 1
return <MenuItem item={menuItem} key={i} last={last}/> return <MenuItem item={menuItem} key={i} last={last} />
} })}
)}
</AppPage> </AppPage>
) )
} }
export default SettingsMenu export default SettingsMenu