Skip to content

Commit 3c2fd3f

Browse files
TinysymphonyTinysymphony
committed
fix(CalendarSelect): lint fix
1 parent 404ef8e commit 3c2fd3f

File tree

18 files changed

+1442
-7
lines changed

18 files changed

+1442
-7
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
DatePicker,
2828
ActionSheet,
2929
LabelSelect,
30+
CalendarSelect
3031
} from 'react-native-ui-xg';
3132
```
3233
### for one by one
@@ -45,7 +46,7 @@ npm install react-native-drawer-menu --save
4546
npm install react-native-label-select --save
4647
npm install react-native-accordion-xg --save
4748
npm install react-native-action-sheet-xg --save
48-
49+
npm install react-native-calendar-select --save
4950
```
5051

5152
## Components
@@ -63,6 +64,7 @@ npm install react-native-action-sheet-xg --save
6364
* [DrawerMenu](https://github.com/xgfe/react-native-ui-xg/blob/master/components/Drawer/README.md)
6465
* [LabelSelect](https://github.com/xgfe/react-native-ui-xg/blob/master/components/LabelSelect/README.md)
6566
* [ActionSheet](https://github.com/xgfe/react-native-ui-xg/blob/master/components/ActionSheet/README.md)
67+
* [ActionSheet](https://github.com/xgfe/react-native-ui-xg/blob/master/components/CalendarSelect/README.md)
6668

6769
## Example
6870

‎components/CalendarSelect/.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
example
2+
__tests__
3+
.*

‎components/CalendarSelect/CalendarStyle.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import {
2+
StyleSheet,
3+
Dimensions
4+
} from 'react-native';
5+
const {scale, width} = Dimensions.get('window');
6+
let iconSize = 22;
7+
let resultFontSize = 24;
8+
let weekTextFontSize = 16;
9+
let slashLength = 80;
10+
if (width < 350) {
11+
resultFontSize = 20;
12+
weekTextFontSize = 14;
13+
iconSize = 20;
14+
slashLength = 70;
15+
}
16+
17+
export default StyleSheet.create({
18+
container: {
19+
flex: 1
20+
},
21+
ctrl: {
22+
flex: 1.5,
23+
justifyContent: 'space-between',
24+
flexDirection: 'row',
25+
alignItems: 'flex-end',
26+
paddingHorizontal: 15
27+
},
28+
result: {
29+
flex: 2.5,
30+
paddingHorizontal: 15,
31+
flexDirection: 'row',
32+
alignItems: 'center',
33+
justifyContent: 'space-between'
34+
},
35+
resultSlash: {
36+
width: slashLength,
37+
height: 1 / scale,
38+
transform: [
39+
{
40+
rotateZ: '-45deg'
41+
}
42+
]
43+
},
44+
resultPart: {
45+
flex: 1
46+
},
47+
resultText: {
48+
fontSize: resultFontSize,
49+
marginVertical: 4,
50+
fontWeight: '200'
51+
},
52+
clearText: {
53+
fontSize: 18,
54+
fontWeight: '400'
55+
},
56+
startText: {
57+
textAlign: 'left'
58+
},
59+
endText: {
60+
textAlign: 'right'
61+
},
62+
week: {
63+
flex: 1,
64+
flexDirection: 'row',
65+
justifyContent: 'space-between',
66+
alignItems: 'center'
67+
},
68+
weekText: {
69+
flex: 1,
70+
fontSize: weekTextFontSize,
71+
textAlign: 'center'
72+
},
73+
scroll: {
74+
flex: 9,
75+
borderTopWidth: 1,
76+
borderBottomWidth: 1
77+
},
78+
scrollArea: {
79+
flex: 1
80+
},
81+
btn: {
82+
flex: 1.5,
83+
justifyContent: 'center',
84+
alignItems: 'center'
85+
},
86+
confirmContainer: {
87+
overflow: 'hidden',
88+
backgroundColor: 'rgba(255, 255, 255, 0.40)',
89+
borderRadius: 4,
90+
margin: 14,
91+
flex: 1,
92+
alignSelf: 'stretch',
93+
justifyContent: 'center'
94+
},
95+
confirmContainerDisabled: {
96+
backgroundColor: 'rgba(255, 255, 255, 0.20)'
97+
},
98+
confirmText: {
99+
fontSize: 16,
100+
fontWeight: 'bold',
101+
textAlign: 'center'
102+
},
103+
confirmTextDisabled: {
104+
color: 'rgba(255, 255, 255, 0.40)'
105+
},
106+
closeIcon: {
107+
width: iconSize,
108+
height: iconSize
109+
}
110+
});

‎components/CalendarSelect/Day/index.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/**
2+
* Created by TinySymphony on 2017-05-11.
3+
*/
4+
5+
import React, {PropTypes, Component} from 'react';
6+
import {
7+
View,
8+
Text,
9+
StyleSheet,
10+
TouchableHighlight
11+
} from 'react-native';
12+
import Moment from 'moment';
13+
import styles from './style';
14+
15+
export default class Day extends Component {
16+
static propTypes = {
17+
onChoose: PropTypes.func
18+
}
19+
constructor (props) {
20+
super(props);
21+
this._chooseDay = this._chooseDay.bind(this);
22+
this._statusCheck = this._statusCheck.bind(this);
23+
this._statusCheck();
24+
}
25+
_chooseDay () {
26+
this.props.onChoose && this.props.onChoose(this.props.date);
27+
}
28+
_statusCheck (props) {
29+
const {
30+
startDate,
31+
endDate,
32+
today,
33+
date = null,
34+
minDate,
35+
maxDate,
36+
empty
37+
} = props || this.props;
38+
this.isToday = today.isSame(date, 'd');
39+
this.isValid = date &&
40+
(date >= minDate || date.isSame(minDate, 'd')) &&
41+
(date <= maxDate || date.isSame(maxDate, 'd'));
42+
this.isMid = date > startDate && date < endDate ||
43+
(!date && empty >= startDate && empty <= endDate);
44+
this.isStart = date && date.isSame(startDate, 'd');
45+
this.isStartPart = this.isStart && endDate;
46+
this.isEnd = date && date.isSame(endDate, 'd');
47+
this.isFocus = this.isMid || this.isStart || this.isEnd;
48+
return this.isFocus;
49+
}
50+
shouldComponentUpdate (nextProps) {
51+
let prevStatus = this.isFocus;
52+
let nextStatus = this._statusCheck(nextProps);
53+
if (prevStatus || nextStatus) return true;
54+
return false;
55+
}
56+
render () {
57+
const {
58+
date,
59+
color
60+
} = this.props;
61+
let text = date ? date.date() : '';
62+
let mainColor = {color: color.mainColor};
63+
let subColor = {color: color.subColor};
64+
let mainBack = {backgroundColor: color.mainColor};
65+
let subBack = {backgroundColor: color.subColor};
66+
return (
67+
<View
68+
style={[
69+
styles.dayContainer,
70+
this.isMid && subBack,
71+
this.isStartPart && styles.startContainer,
72+
this.isEnd && styles.endContainer,
73+
(this.isStartPart || this.isEnd) && subBack
74+
]}>
75+
{this.isValid ?
76+
<TouchableHighlight
77+
style={[styles.day, this.isToday && styles.today, this.isFocus && subBack]}
78+
underlayColor="rgba(255, 255, 255, 0.35)"
79+
onPress={this._chooseDay}>
80+
<Text style={[styles.dayText, subColor, this.isFocus && mainColor]}>{text}</Text>
81+
</TouchableHighlight> :
82+
<View style={[styles.day, this.isToday && styles.today]}>
83+
<Text style={styles.dayTextDisabled}>{text}</Text>
84+
</View>
85+
}
86+
</View>
87+
);
88+
}
89+
}

‎components/CalendarSelect/Day/style.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import {
2+
StyleSheet,
3+
Dimensions
4+
} from 'react-native';
5+
const {scale, width} = Dimensions.get('window');
6+
let dayWidth = width / 7;
7+
let mod = scale * width % 7;
8+
if (mod) {
9+
dayWidth = ((7 - mod) / scale + width) / 7;
10+
}
11+
export default StyleSheet.create({
12+
dayContainer: {
13+
width: dayWidth,
14+
justifyContent: 'center',
15+
alignItems: 'center'
16+
},
17+
startContainer: {
18+
borderTopLeftRadius: 100,
19+
borderBottomLeftRadius: 100
20+
},
21+
endContainer: {
22+
borderTopRightRadius: 100,
23+
borderBottomRightRadius: 100
24+
},
25+
today: {
26+
borderWidth: 1,
27+
borderColor: 'rgba(255, 255, 255, 0.40)'
28+
},
29+
day: {
30+
width: dayWidth,
31+
height: dayWidth,
32+
borderRadius: dayWidth / 2,
33+
overflow: 'hidden',
34+
justifyContent: 'center',
35+
alignItems: 'center'
36+
},
37+
dayText: {
38+
fontSize: 16,
39+
fontWeight: '400',
40+
textAlign: 'center'
41+
},
42+
dayTextDisabled: {
43+
fontSize: 16,
44+
color: 'rgba(255, 255, 255, 0.54)',
45+
textAlign: 'center'
46+
}
47+
});

‎components/CalendarSelect/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 鲜果FE
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

0 commit comments

Comments
 (0)