Chore/make function components 7
This commit is contained in:
Sofiya Tepikin
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { TouchableOpacity } from 'react-native'
|
||||
|
||||
@@ -14,115 +14,103 @@ import {
|
||||
isSymptomDataComplete,
|
||||
} from '../helpers/chart'
|
||||
|
||||
class DayColumn extends Component {
|
||||
static propTypes = {
|
||||
dateString: PropTypes.string.isRequired,
|
||||
chartSymptoms: PropTypes.array,
|
||||
columnHeight: PropTypes.number.isRequired,
|
||||
getFhmAndLtlInfo: PropTypes.func.isRequired,
|
||||
navigate: PropTypes.func.isRequired,
|
||||
setDate: PropTypes.func.isRequired,
|
||||
shouldShowTemperatureColumn: PropTypes.bool,
|
||||
symptomHeight: PropTypes.number.isRequired,
|
||||
symptomRowSymptoms: PropTypes.array,
|
||||
xAxisHeight: PropTypes.number,
|
||||
}
|
||||
const DayColumn = ({
|
||||
dateString,
|
||||
chartSymptoms,
|
||||
columnHeight,
|
||||
getFhmAndLtlInfo,
|
||||
setDate,
|
||||
navigate,
|
||||
shouldShowTemperatureColumn,
|
||||
symptomHeight,
|
||||
symptomRowSymptoms,
|
||||
xAxisHeight,
|
||||
}) => {
|
||||
const cycleDayData = getCycleDay(dateString)
|
||||
let data = {}
|
||||
|
||||
constructor(props) {
|
||||
super()
|
||||
if (cycleDayData) {
|
||||
data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
|
||||
const symptomData = cycleDayData[symptom]
|
||||
|
||||
const { dateString, chartSymptoms, columnHeight } = props
|
||||
const cycleDayData = getCycleDay(dateString)
|
||||
this.data = {}
|
||||
if (symptomData && symptom === 'temperature') {
|
||||
symptomDataToDisplay[symptom] = getTemperatureProps(
|
||||
symptomData,
|
||||
columnHeight,
|
||||
dateString
|
||||
)
|
||||
} else {
|
||||
if (symptomData && !symptomData.exclude) {
|
||||
// if symptomColorMethods entry doesn't exist for given symptom,
|
||||
// use 'default'
|
||||
const getSymptomColorIndex =
|
||||
symptomColorMethods[symptom] || symptomColorMethods['default']
|
||||
|
||||
if (cycleDayData) {
|
||||
this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
|
||||
const symptomData = cycleDayData[symptom]
|
||||
|
||||
if (symptomData && symptom === 'temperature') {
|
||||
symptomDataToDisplay[symptom] = getTemperatureProps(
|
||||
symptomData,
|
||||
columnHeight,
|
||||
dateString
|
||||
)
|
||||
} else {
|
||||
if (symptomData && !symptomData.exclude) {
|
||||
// if symptomColorMethods entry doesn't exist for given symptom,
|
||||
// use 'default'
|
||||
const getSymptomColorIndex =
|
||||
symptomColorMethods[symptom] || symptomColorMethods['default']
|
||||
|
||||
symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
|
||||
}
|
||||
symptomDataToDisplay[symptom] = getSymptomColorIndex(symptomData)
|
||||
}
|
||||
}
|
||||
|
||||
return symptomDataToDisplay
|
||||
}, this.data)
|
||||
}
|
||||
|
||||
this.fhmAndLtl = props.getFhmAndLtlInfo(
|
||||
props.dateString,
|
||||
this.data.temperature ? this.data.temperature.value : null,
|
||||
props.columnHeight
|
||||
)
|
||||
return symptomDataToDisplay
|
||||
}, data)
|
||||
}
|
||||
|
||||
onDaySelect = (date) => {
|
||||
this.props.setDate(date)
|
||||
this.props.navigate('CycleDay')
|
||||
const fhmAndLtl = getFhmAndLtlInfo(
|
||||
dateString,
|
||||
data.temperature ? data.temperature.value : null,
|
||||
columnHeight
|
||||
)
|
||||
|
||||
const onDaySelect = (date) => {
|
||||
setDate(date)
|
||||
navigate('CycleDay')
|
||||
}
|
||||
|
||||
shouldComponentUpdate() {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity onPress={() => onDaySelect(dateString)} activeOpacity={1}>
|
||||
{shouldShowTemperatureColumn && (
|
||||
<TemperatureColumn
|
||||
horizontalLinePosition={fhmAndLtl.drawLtlAt}
|
||||
isVerticalLine={fhmAndLtl.drawFhmLine}
|
||||
data={data && data.temperature}
|
||||
columnHeight={columnHeight}
|
||||
/>
|
||||
)}
|
||||
|
||||
render() {
|
||||
const {
|
||||
columnHeight,
|
||||
dateString,
|
||||
shouldShowTemperatureColumn,
|
||||
symptomHeight,
|
||||
symptomRowSymptoms,
|
||||
xAxisHeight,
|
||||
} = this.props
|
||||
<CycleDayLabel height={xAxisHeight} date={dateString} />
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => this.onDaySelect(dateString)}
|
||||
activeOpacity={1}
|
||||
>
|
||||
{shouldShowTemperatureColumn && (
|
||||
<TemperatureColumn
|
||||
horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
|
||||
isVerticalLine={this.fhmAndLtl.drawFhmLine}
|
||||
data={this.data && this.data.temperature}
|
||||
columnHeight={columnHeight}
|
||||
{symptomRowSymptoms.map((symptom, i) => {
|
||||
const hasSymptomData = Object.prototype.hasOwnProperty.call(
|
||||
data,
|
||||
symptom
|
||||
)
|
||||
return (
|
||||
<SymptomCell
|
||||
index={i}
|
||||
key={symptom}
|
||||
symptom={symptom}
|
||||
symptomValue={hasSymptomData && data[symptom]}
|
||||
isSymptomDataComplete={
|
||||
hasSymptomData && isSymptomDataComplete(symptom, dateString)
|
||||
}
|
||||
height={symptomHeight}
|
||||
/>
|
||||
)}
|
||||
)
|
||||
})}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
<CycleDayLabel height={xAxisHeight} date={dateString} />
|
||||
|
||||
{symptomRowSymptoms.map((symptom, i) => {
|
||||
const hasSymptomData = Object.prototype.hasOwnProperty.call(
|
||||
this.data,
|
||||
symptom
|
||||
)
|
||||
return (
|
||||
<SymptomCell
|
||||
index={i}
|
||||
key={symptom}
|
||||
symptom={symptom}
|
||||
symptomValue={hasSymptomData && this.data[symptom]}
|
||||
isSymptomDataComplete={
|
||||
hasSymptomData && isSymptomDataComplete(symptom, dateString)
|
||||
}
|
||||
height={symptomHeight}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
DayColumn.propTypes = {
|
||||
dateString: PropTypes.string.isRequired,
|
||||
chartSymptoms: PropTypes.array,
|
||||
columnHeight: PropTypes.number.isRequired,
|
||||
getFhmAndLtlInfo: PropTypes.func.isRequired,
|
||||
navigate: PropTypes.func.isRequired,
|
||||
setDate: PropTypes.func.isRequired,
|
||||
shouldShowTemperatureColumn: PropTypes.bool,
|
||||
symptomHeight: PropTypes.number.isRequired,
|
||||
symptomRowSymptoms: PropTypes.array,
|
||||
xAxisHeight: PropTypes.number,
|
||||
}
|
||||
|
||||
export default DayColumn
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Path, Shape } from '@react-native-community/art'
|
||||
|
||||
@@ -11,78 +11,73 @@ import {
|
||||
CHART_STROKE_WIDTH,
|
||||
} from '../../config'
|
||||
|
||||
export default class DotAndLine extends Component {
|
||||
static propTypes = {
|
||||
exclude: PropTypes.bool,
|
||||
leftY: PropTypes.number,
|
||||
leftTemperatureExclude: PropTypes.bool,
|
||||
rightY: PropTypes.number,
|
||||
rightTemperatureExclude: PropTypes.bool,
|
||||
y: PropTypes.number.isRequired,
|
||||
const DotAndLine = ({
|
||||
exclude,
|
||||
leftTemperatureExclude,
|
||||
leftY,
|
||||
rightTemperatureExclude,
|
||||
rightY,
|
||||
y,
|
||||
}) => {
|
||||
let excludeLeftLine, excludeRightLine, lineLeft, lineRight
|
||||
|
||||
if (leftY) {
|
||||
const middleY = (leftY - y) / 2 + y
|
||||
excludeLeftLine = leftTemperatureExclude || exclude
|
||||
lineLeft = new Path().moveTo(CHART_COLUMN_MIDDLE, y).lineTo(0, middleY)
|
||||
}
|
||||
if (rightY) {
|
||||
const middleY = (y - rightY) / 2 + rightY
|
||||
excludeRightLine = rightTemperatureExclude || exclude
|
||||
lineRight = new Path()
|
||||
.moveTo(CHART_COLUMN_MIDDLE, y)
|
||||
.lineTo(CHART_COLUMN_WIDTH, middleY)
|
||||
}
|
||||
|
||||
shouldComponentUpdate(newProps) {
|
||||
return Object.keys(newProps).some((key) => newProps[key] != this.props[key])
|
||||
}
|
||||
const dot = new Path()
|
||||
.moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS)
|
||||
.arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
|
||||
.arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
|
||||
const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
|
||||
const lineColorLeft = excludeLeftLine
|
||||
? Colors.turquoise
|
||||
: Colors.turquoiseDark
|
||||
const lineColorRight = excludeRightLine
|
||||
? Colors.turquoise
|
||||
: Colors.turquoiseDark
|
||||
|
||||
render() {
|
||||
const {
|
||||
exclude,
|
||||
leftTemperatureExclude,
|
||||
leftY,
|
||||
rightTemperatureExclude,
|
||||
rightY,
|
||||
y,
|
||||
} = this.props
|
||||
let excludeLeftLine, excludeRightLine, lineLeft, lineRight
|
||||
|
||||
if (leftY) {
|
||||
const middleY = (leftY - y) / 2 + y
|
||||
excludeLeftLine = leftTemperatureExclude || exclude
|
||||
lineLeft = new Path().moveTo(CHART_COLUMN_MIDDLE, y).lineTo(0, middleY)
|
||||
}
|
||||
if (rightY) {
|
||||
const middleY = (y - rightY) / 2 + rightY
|
||||
excludeRightLine = rightTemperatureExclude || exclude
|
||||
lineRight = new Path()
|
||||
.moveTo(CHART_COLUMN_MIDDLE, y)
|
||||
.lineTo(CHART_COLUMN_WIDTH, middleY)
|
||||
}
|
||||
|
||||
const dot = new Path()
|
||||
.moveTo(CHART_COLUMN_MIDDLE, y - CHART_DOT_RADIUS)
|
||||
.arc(0, CHART_DOT_RADIUS * 2, CHART_DOT_RADIUS)
|
||||
.arc(0, CHART_DOT_RADIUS * -2, CHART_DOT_RADIUS)
|
||||
const dotColor = exclude ? Colors.turquoise : Colors.turquoiseDark
|
||||
const lineColorLeft = excludeLeftLine
|
||||
? Colors.turquoise
|
||||
: Colors.turquoiseDark
|
||||
const lineColorRight = excludeRightLine
|
||||
? Colors.turquoise
|
||||
: Colors.turquoiseDark
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Shape
|
||||
d={lineLeft}
|
||||
stroke={lineColorLeft}
|
||||
strokeWidth={CHART_STROKE_WIDTH}
|
||||
key={y}
|
||||
/>
|
||||
<Shape
|
||||
d={lineRight}
|
||||
stroke={lineColorRight}
|
||||
strokeWidth={CHART_STROKE_WIDTH}
|
||||
key={y + CHART_DOT_RADIUS}
|
||||
/>
|
||||
<Shape
|
||||
d={dot}
|
||||
stroke={dotColor}
|
||||
strokeWidth={CHART_STROKE_WIDTH}
|
||||
fill="white"
|
||||
key="dot"
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Shape
|
||||
d={lineLeft}
|
||||
stroke={lineColorLeft}
|
||||
strokeWidth={CHART_STROKE_WIDTH}
|
||||
key={y}
|
||||
/>
|
||||
<Shape
|
||||
d={lineRight}
|
||||
stroke={lineColorRight}
|
||||
strokeWidth={CHART_STROKE_WIDTH}
|
||||
key={y + CHART_DOT_RADIUS}
|
||||
/>
|
||||
<Shape
|
||||
d={dot}
|
||||
stroke={dotColor}
|
||||
strokeWidth={CHART_STROKE_WIDTH}
|
||||
fill="white"
|
||||
key="dot"
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
DotAndLine.propTypes = {
|
||||
exclude: PropTypes.bool,
|
||||
leftY: PropTypes.number,
|
||||
leftTemperatureExclude: PropTypes.bool,
|
||||
rightY: PropTypes.number,
|
||||
rightTemperatureExclude: PropTypes.bool,
|
||||
y: PropTypes.number.isRequired,
|
||||
}
|
||||
|
||||
export default DotAndLine
|
||||
|
||||
Reference in New Issue
Block a user