From 611e9057b4903cc88c3aac825b6011d6e461e791 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 10 Aug 2018 13:17:51 +0200
Subject: [PATCH] Back to FlatList and try loading screen
---
components/chart/chart.js | 75 ++++++++++++++++------------------
components/chart/config.js | 4 +-
components/chart/day-column.js | 47 +++++++++++----------
package-lock.json | 5 +++
package.json | 2 +-
5 files changed, 66 insertions(+), 67 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index ffc311f3..604966eb 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -1,6 +1,5 @@
import React, { Component } from 'react'
-import { View } from 'react-native'
-import { RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview"
+import { View, FlatList, Dimensions } from 'react-native'
import range from 'date-range'
import { LocalDate } from 'js-joda'
import { yAxis, normalizeToScale } from './y-axis'
@@ -11,19 +10,6 @@ import config from './config'
const yAxisView = <View {...styles.yAxis}>{yAxis.labels}</View>
-const dataProvider = new DataProvider((a,b) => {
- return Object.keys(a).some(key => a[key] != b[key])
-})
-
-const layoutProvider = new LayoutProvider(
- () => DayColumn,
- (_, item) => {
- item.height = config.chartHeight
- item.width = config.columnWidth
- return item
- }
-)
-
function getInfoForNeighborColumns(index, cols) {
const ret = {}
const right = index > 0 ? cols[index - 1] : undefined
@@ -39,25 +25,24 @@ function getInfoForNeighborColumns(index, cols) {
return ret
}
-function rowRenderer (_, item, index) {
- return (
- <DayColumn
- item={item}
- index={index}
- navigate={this.props.navigation.navigate}
- {...getInfoForNeighborColumns(index, this.columns)}
- />
- )
-}
-
export default class CycleChart extends Component {
constructor(props) {
super(props)
- this.columns = makeColumnInfo(config.xAxisRangeInDays)
this.state = {
- dataProvider: dataProvider.cloneWithRows(this.columns)
+ columns: makeColumnInfo(config.xAxisRangeInDays),
+ loading: true
+ }
+ this.renderColumn = ({item, index}) => {
+ if (index === 15 + 1 && this.state.loading) this.setState({loading: false})
+ return (
+ <DayColumn
+ item={item}
+ index={index}
+ navigate={this.props.navigation.navigate}
+ {...getInfoForNeighborColumns(index, this.state.columns)}
+ />
+ )
}
- this.rowRenderer = rowRenderer.bind(this)
this.reCalculateChartInfo = (function(Chart) {
return function() {
@@ -74,24 +59,34 @@ export default class CycleChart extends Component {
render() {
+ const {height, width} = Dimensions.get('window')
return (
- <View style={{flexDirection: 'row'}}>
- { yAxisView }
- <RecyclerListView
- layoutProvider={layoutProvider}
- dataProvider={this.state.dataProvider}
- rowRenderer={this.rowRenderer}
- isHorizontal={true}
- initialNumToRender={15}
- >
- </RecyclerListView>
+ <View>
+ {this.state.loading &&
+ <View
+ width={width}
+ height={height}
+ backgroundColor='lightblue'
+ />}
+ <View style={{ flexDirection: 'row' }}>
+ {yAxisView}
+ <FlatList
+ horizontal={true}
+ inverted={true}
+ showsHorizontalScrollIndicator={false}
+ data={this.state.columns}
+ renderItem={this.renderColumn}
+ keyExtractor={item => item.dateString}
+ >
+ </FlatList>
+ </View>
</View>
)
}
}
function makeColumnInfo(n) {
- const xAxisDates = getPreviousDays(n).reverse().map(jsDate => {
+ const xAxisDates = getPreviousDays(n).map(jsDate => {
return LocalDate.of(
jsDate.getFullYear(),
jsDate.getMonth() + 1,
diff --git a/components/chart/config.js b/components/chart/config.js
index d18c722e..e9d5f95e 100644
--- a/components/chart/config.js
+++ b/components/chart/config.js
@@ -2,10 +2,10 @@ const config = {
chartHeight: 350,
columnWidth: 30,
temperatureScale: {
- low: 33,
+ low: 35,
high: 40
},
- xAxisRangeInDays: 40
+ xAxisRangeInDays: 50
}
const margin = 3
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 2fda9610..a24899af 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -13,10 +13,17 @@ import { getOrCreateCycleDay } from '../../db'
import cycleModule from '../../lib/cycle'
import setUpFertilityStatusFunc from './nfp-lines'
import { horizontalGrid } from './y-axis'
+import slowlog from 'react-native-slowlog'
const getCycleDayNumber = cycleModule().getCycleDayNumber
+const label = styles.column.label
export default class DayColumn extends Component {
+ constructor(props) {
+ super(props)
+ this.getFhmAndLtlInfo = setUpFertilityStatusFunc()
+ // slowlog(this, /.*/)
+ }
makeDayColumn(data, index) {
const {
dateString,
@@ -27,10 +34,9 @@ export default class DayColumn extends Component {
mucus
} = data
const cycleDayNumber = getCycleDayNumber(dateString)
- const label = styles.column.label
const dateLabel = dateString.split('-').slice(1).join('-')
- const getFhmAndLtlInfo = setUpFertilityStatusFunc()
- const nfpLineInfo = getFhmAndLtlInfo(dateString, cycleDay)
+ // const nfpLineInfo = this.getFhmAndLtlInfo(dateString, temperature)
+ const nfpLineInfo = {}
return (
<G onPress={() => this.passDateToDayView(dateString)}>
@@ -53,7 +59,7 @@ export default class DayColumn extends Component {
{dateLabel}
</Text>
- {cycleDay && cycleDay.bleeding ?
+ {bleeding ?
<Path {...styles.bleedingIcon}
d="M15 3
Q16.5 6.8 25 18
@@ -71,17 +77,18 @@ export default class DayColumn extends Component {
/> : null}
{y ?
- this.drawDotAndLines(y, cycleDay.temperature.exclude, index)
+ this.drawDotAndLines(y, temperatureExclude, index)
: null
}
- {cycleDay && cycleDay.mucus ?
+
+ {mucus ?
<Circle
{...styles.mucusIcon}
- fill={styles.mucusIconShades[cycleDay.mucus.value]}
+ fill={styles.mucusIconShades[mucus]}
/> : null}
{y ?
- this.drawDotAndLines(y, cycleDay.temperature.exclude)
+ this.drawDotAndLines(y, temperatureExclude)
: null}
</G>
)
@@ -105,18 +112,13 @@ export default class DayColumn extends Component {
/>
}
- const thereIsADotToTheRight = this.props.rightNeighbor && this.props.rightNeighbor.y
- const thereIsADotToTheLeft = this.props.leftNeighbor && this.props.leftNeighbor.y
-
- if (thereIsADotToTheRight) {
- const neighbor = this.props.rightNeighbor
- const excludedLine = neighbor.cycleDay.temperature.exclude || exclude
- lineToRight = makeLine(neighbor.y, config.columnWidth, excludedLine)
+ if (this.props.rightY) {
+ const excludedLine = this.props.rightTemperatureExclude || exclude
+ lineToRight = makeLine(this.props.rightY, config.columnWidth, excludedLine)
}
- if (thereIsADotToTheLeft) {
- const neighbor = this.props.leftNeighbor
- const excludedLine = neighbor.cycleDay.temperature.exclude || exclude
- lineToLeft = makeLine(neighbor.y, 0, excludedLine)
+ if (this.props.leftY) {
+ const excludedLine = this.props.leftTemperatureExclude || exclude
+ lineToLeft = makeLine(this.props.leftY, 0, excludedLine)
}
const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
@@ -131,19 +133,16 @@ export default class DayColumn extends Component {
</G>)
}
-
passDateToDayView(dateString) {
const cycleDay = getOrCreateCycleDay(dateString)
this.props.navigate('cycleDay', { cycleDay })
}
- shouldComponentUpdate() {
- // for now, until we've solved the mysterious re-rendering
- return false
+ shouldComponentUpdate(newProps) {
+ return Object.keys(newProps).some(key => newProps[key] != this.props[key])
}
render() {
- console.log(this.props.index)
return (
<Svg width={config.columnWidth} height={config.chartHeight}>
{this.makeDayColumn(this.props.item, this.props.index)}
diff --git a/package-lock.json b/package-lock.json
index a9e59b5e..29d452f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6444,6 +6444,11 @@
"resolved": "https://registry.npmjs.org/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.2.tgz",
"integrity": "sha512-BdlllHsC/gYJtxPJ2tshDWN8CzmlGg1G9uB+Lu4FRGvGkwhvMtJ/uNShMbvxu134xosH/feri6HQgLGlIT202Q=="
},
+ "react-native-slowlog": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/react-native-slowlog/-/react-native-slowlog-1.0.2.tgz",
+ "integrity": "sha1-VSCXnj751Sc0ldQx/zvjTwLjXIk="
+ },
"react-native-svg": {
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.5.1.tgz",
diff --git a/package.json b/package.json
index d54f08b6..20dc57d2 100644
--- a/package.json
+++ b/package.json
@@ -27,10 +27,10 @@
"react-native-modal-datetime-picker-nevo": "^4.11.0",
"react-native-share": "^1.1.0",
"react-native-simple-radio-button": "^2.7.1",
+ "react-native-slowlog": "^1.0.2",
"react-native-svg": "^6.3.1",
"react-navigation": "^2.0.4",
"realm": "^2.7.1",
- "recyclerlistview": "^1.3.4",
"uuid": "^3.2.1"
},
"devDependencies": {
--
GitLab