-
Notifications
You must be signed in to change notification settings - Fork 18
/
AppFooter.js
102 lines (92 loc) · 2.96 KB
/
AppFooter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
* Copyright (c) 2017-present, Justin Nguyen.
* All rights reserved.
*
* @author tuan3.nguyen@gmail.com
*
* @flow
* @format
*/
"use strict"
import React, { Component } from "react"
import { PropTypes } from "prop-types"
import { Text } from "react-native"
import { Footer, FooterTab, Button } from "native-base"
import Icon from "react-native-vector-icons/MaterialCommunityIcons"
import { isFareStructureEquals } from "../../../global"
import { taxiTypes } from "../../../global"
const styles = {
footerContainer: {
backgroundColor: "#fff"
},
type: {
fontSize: 12
},
title: {
fontSize: 6
}
}
export default class AppFooter extends Component {
onTaxiTypeSelected = taxiType => {
if (taxiType.type !== this.props.selectedTaxiType.type) {
this.props.setSelectedTaxiType(taxiType)
}
}
componentDidMount() {
this.props.setSelectedTaxiType(taxiTypes[0])
}
formatTabElement(tabInfo, style = {}) {
// Clone the styles so that customization will not impacted to template
const elementStyle = { ...style }
const tabIsActive = this.props.selectedTaxiType === tabInfo
elementStyle.color = tabIsActive ? "#FF5E3A" : "grey"
return elementStyle
}
renderTab(tabInfo) {
// FIXME using anonymous function is not the good practices,
// are there anyway to pass arguments via onPress event?
const subTitle = tabInfo.pricing ? `$${tabInfo.pricing}` : tabInfo.title
return (
<Button vertical key={tabInfo.type} onPress={() => this.onTaxiTypeSelected(tabInfo)}>
<Icon size={25} name={tabInfo.icon} style={this.formatTabElement(tabInfo)} />
<Text style={this.formatTabElement(tabInfo, styles.type)}>{tabInfo.type}</Text>
<Text style={this.formatTabElement(tabInfo, styles.title)}>{subTitle}</Text>
</Button>
)
}
render() {
return (
<Footer>
<FooterTab style={styles.footerContainer}>
{taxiTypes.map(type => this.renderTab(type))}
</FooterTab>
</Footer>
)
}
componentWillUpdate = (nextProps, nextState) => {
// Recalculate price when new fare structure is applied.
const newFare = nextProps.fareStructure
if (!isFareStructureEquals(this.props.fareStructure, newFare)) {
taxiTypes.forEach(type => {
// Travel < 5km will be priced as 5 km.
const distance = Math.max(3, newFare.distance.value / 1000)
const standardDuration = distance * type.standardDurationPerKm
const durationRate = newFare.duration.value / standardDuration
const price = durationRate * type.pricePerKm * distance
type.pricing = Math.round(price * 100) / 100
})
}
}
}
AppFooter.propTypes = {
setSelectedTaxiType: PropTypes.func.isRequired,
selectedTaxiType: PropTypes.object,
fareStructure: PropTypes.shape({
distance: PropTypes.shape({
value: PropTypes.number.isRequired
}).isRequired,
duration: PropTypes.shape({
value: PropTypes.number.isRequired
}).isRequired
})
}