SaleStatistics.js
2.83 KB
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
'use strict';
import React from 'react-native';
import TrendTextSection from './TrendTextSection';
import Placeholder from './Placeholder';
import DateSelector from './calendar/DateSelector';
import CalendarPicker from './calendar/CalendarPicker';
let {
Component,
View,
Text,
ScrollView,
Platform
} = React;
export default class SaleStatistics extends Component {
static propTypes = {
section1: React.PropTypes.arrayOf(
React.PropTypes.shape({
top: React.PropTypes.string,
bottom: React.PropTypes.string,
style: View.propTypes.style,
arrowUp: React.PropTypes.bool,
})
),
section2: React.PropTypes.arrayOf(
React.PropTypes.shape({
top: React.PropTypes.string,
bottom: React.PropTypes.string,
style: View.propTypes.style,
arrowUp: React.PropTypes.bool,
})
),
};
constructor(props) {
super(props);
this.state = {
showPicker: false,
selectdDate: '2016-01-26',
};
this.toogleSelector = this.toogleSelector.bind(this);
this.onCancel = this.onCancel.bind(this);
this.onOK = this.onOK.bind(this);
}
toogleSelector() {
this.setState({
showPicker: !this.state.showPicker
});
}
onCancel() {
this.toogleSelector();
}
onOK(selected) {
let selectdDate;
if (selected.selectMode === 'day') {
let day = selected.day;
selectdDate = day.getFullYear() + '年' + (day.getMonth() + 1) + '月' + day.getDate() + '日';
} else if (selected.selectMode === 'week') {
let from = selected.from;
let to = selected.to;
selectdDate = from.getFullYear() + '年' + (from.getMonth() + 1) + '月' + from.getDate() + '日'
+ '-' + to.getFullYear() + '年' + (to.getMonth() + 1) + '月' + to.getDate() + '日';
} else if (selected.selectMode === 'month') {
let year = selected.year;
selectdDate = selected.year + '年' + selected.month + '月';
}
this.setState({
showPicker: !this.state.showPicker,
selectdDate
});
}
render() {
return (
<ScrollView>
<DateSelector date={this.state.selectdDate} toogleSelector={this.toogleSelector} />
<Placeholder />
<TrendTextSection content={this.props.section1} />
<Placeholder />
<TrendTextSection content={this.props.section2} />
<Placeholder />
{this.state.showPicker ? <CalendarPicker onCancel={this.onCancel} onOK={this.onOK}/> : <View/>}
</ScrollView>
);
}
}