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