From ad83a0844b1b3a2cc39f3ccb10501234b47d6602 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Thu, 16 Aug 2018 10:59:56 +0200
Subject: [PATCH] Flatten props and add keys to array elements
---
components/chart/chart.js | 2 +-
components/chart/day-column.js | 17 ++++++++++-------
components/chart/dot-and-line.js | 6 ++++++
3 files changed, 17 insertions(+), 8 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index 2bb8097b..f60b63cb 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -18,7 +18,7 @@ export default class CycleChart extends Component {
this.renderColumn = ({item, index}) => {
return (
<DayColumn
- item={item}
+ {...item}
index={index}
navigate={this.props.navigation.navigate}
{...getInfoForNeighborColumns(index, this.state.columns)}
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 8d70e66a..c9fb5fe0 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -15,10 +15,6 @@ const label = styles.column.label
const getFhmAndLtlInfo = setUpFertilityStatusFunc()
export default class DayColumn extends Component {
- constructor(props) {
- super(props)
- }
-
passDateToDayView(dateString) {
const cycleDay = getOrCreateCycleDay(dateString)
this.props.navigate('cycleDay', { cycleDay })
@@ -36,7 +32,7 @@ export default class DayColumn extends Component {
temperatureExclude,
bleeding,
mucus
- } = this.props.item
+ } = this.props
const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
const columnElements = []
@@ -50,6 +46,7 @@ export default class DayColumn extends Component {
size={30}
color='#900'
style={{ marginTop: 20 }}
+ key='bleeding'
/>
)
}
@@ -62,6 +59,7 @@ export default class DayColumn extends Component {
left = {config.columnMiddle - styles.mucusIcon.width / 2}
{...styles.mucusIcon}
backgroundColor={styles.mucusIconShades[mucus]}
+ key='mucus'
/>
)
columnElements.push(mucusIcon)
@@ -74,6 +72,7 @@ export default class DayColumn extends Component {
width={styles.nfpLine.strokeWidth}
height={200}
{...styles.nfpLine}
+ key='fhm'
/>)
columnElements.push(fhmLine)
}
@@ -84,6 +83,7 @@ export default class DayColumn extends Component {
width={'100%'}
top={nfpLineInfo.drawLtlAt}
{...styles.nfpLine}
+ key='ltl'
/>)
columnElements.push(ltlLine)
}
@@ -93,8 +93,11 @@ export default class DayColumn extends Component {
<DotAndLine
y={y}
exclude={temperatureExclude}
+ rightY={this.props.rightY}
+ rightTemperatureExclude={this.props.rightTemperatureExclude}
leftY={this.props.leftY}
- rightY={this.props.righty}
+ leftTemperatureExclude={this.props.leftTemperatureExclude}
+ key='dotandline'
/>
)
}
@@ -111,7 +114,7 @@ export default class DayColumn extends Component {
</Text>
)
columnElements.push(
- <View position='absolute' bottom={0}>
+ <View position='absolute' bottom={0} key='date'>
{cycleDayLabel}
{dateLabel}
</View>
diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js
index 92e5f63a..d626c948 100644
--- a/components/chart/dot-and-line.js
+++ b/components/chart/dot-and-line.js
@@ -4,6 +4,10 @@ import styles from './styles'
import config from './config'
export default class DotAndLine extends Component {
+ shouldComponentUpdate(newProps) {
+ return Object.keys(newProps).some(key => newProps[key] != this.props[key])
+ }
+
render() {
const y = this.props.y
const exclude = this.props.exclude
@@ -28,6 +32,7 @@ export default class DotAndLine extends Component {
top={y - (dotStyle.height / 2)}
left={config.columnMiddle - (dotStyle.width / 2)}
style={dotStyle}
+ key='dot'
/>
)
return [lineToLeft, lineToRight, dot]
@@ -61,5 +66,6 @@ function makeLine(leftY, rightY, direction, excludeLine) {
],
}}
{...lineStyle}
+ key ={direction}
/>)
}
\ No newline at end of file
--
GitLab