Skip to content

fix: RN0.62 & new Arabic Language & one day #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: npm
Choose a base branch
from
Open

fix: RN0.62 & new Arabic Language & one day #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
77c8c5f
fix: prop-types & new devdependencies
Tinysymphony Dec 9, 2017
5f88dfe
fix: RN0.62 & new Arabic Language & one day
powerinthepocket Apr 26, 2020
826725f
Update Calendar.js
powerinthepocket Aug 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 182 additions & 69 deletions Calendar.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
* Created by TinySymphony on 2017-05-08.
*/

import React, {PropTypes, Component} from 'react';
import React, { Component } from "react";
import PropTypes from "prop-types";

import {
View,
Text,
Expand All @@ -12,67 +14,133 @@ import {
ScrollView,
Dimensions,
TouchableHighlight
} from 'react-native';
import Moment from 'moment';
import styles from './CalendarStyle';
import MonthList from './MonthList';
} from "react-native";
import Moment from "moment";
import styles from "./CalendarStyle";
import MonthList from "./MonthList";
const ICON = {
close: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADGklEQVR4Xu3b3XXTMBTAcV1Leu8I3YAyAWECygSlE9BOQJmAdAK6QWGCphNQNmAE+mzZl6Mc5xzXtiLJ1r0STfLqJM3/Z9muPwTiwF9w4P3iCHAcAQ4BRDxt2/aDEOKkqqqfAPD0P2EZYy6EEJ/sbwaATVVVtwDwd9gwuQkYY+wHv9n43QcQca21vi4dARFPmqa5F0Ks+r8VEZ+UUu+HCCMAu+abpvnVj+990Z1S6rJUBBtvjHkAgLOp34iIX7XWN/1lI4Cmaa4Q0a5916tIBF+8jUHER631i5ExAqjr+gYAvnjWclEIIfHBAIh41m0CvpFeBEJofBdzqZS627sJ2IV1Xa8B4LNPQAiRFSEmfmr4b48QrkhjjJWyhxLfKwtCZPxvpdQq+DC4Ky4VIVX83hFQKkLK+CAA+6ZSRkLq+GCAEhAo4qMAciJQxUcD5ECgjJ8FwIlAHT8bgAOBI34RACUCV/xiAAoEzvgkACkRuOOTAaRAyBGfFGAJQq745ABzEHLGkwDEItgLMK5reP3zcER0ntL6ztf3LSe7MRJxAuX9/VTxZCNgxqm0E4EynhwgcnMYIVDHswDMReCIZwOIReCKZwOIOdR12wHbhVayo8Bug54Rv/soCwIpwIJ4NgQygATxLAgkAAnjyRGSA8TE27199+BFtjtQSQFi43e3qyL+bU6+Y0wGMDd+xr/NSRGSACyNz4mwGCBVfC6ERQCp43MgzAagiudGmAVAHc+JEA3AFc+FEAXAHc+BEAyQK54aIQggdzwlgheglHgqhL0ApcVTIDgBSo1PjTAJUHp8SgTXfIGH4fP2U3cuOK/euu6chJ5KI+Kt1vpq+D0jgG6yxHfnrZpuQQnxsSNBSvl2OPNl6nH5DQC82wdQUnwMAgBcSynX/bZogBLjIxA+KqV++ACcEyZKjg9AeJZSnobMGbLzbuxm8KYvZZ+3V0qdTz1y7ttfcC+fmO/wjIjnWuuNdydo39AdBu0eczu/BgDsdbgXMy24o2L/nn3wom3bFSL+kVLaFTqaMrdti/3i1/b+I8BrW6OxPQc/Av4BDSZYbnPWwJkAAAAASUVORK5CYII='
close:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADGklEQVR4Xu3b3XXTMBTAcV1Leu8I3YAyAWECygSlE9BOQJmAdAK6QWGCphNQNmAE+mzZl6Mc5xzXtiLJ1r0STfLqJM3/Z9muPwTiwF9w4P3iCHAcAQ4BRDxt2/aDEOKkqqqfAPD0P2EZYy6EEJ/sbwaATVVVtwDwd9gwuQkYY+wHv9n43QcQca21vi4dARFPmqa5F0Ks+r8VEZ+UUu+HCCMAu+abpvnVj+990Z1S6rJUBBtvjHkAgLOp34iIX7XWN/1lI4Cmaa4Q0a5916tIBF+8jUHER631i5ExAqjr+gYAvnjWclEIIfHBAIh41m0CvpFeBEJofBdzqZS627sJ2IV1Xa8B4LNPQAiRFSEmfmr4b48QrkhjjJWyhxLfKwtCZPxvpdQq+DC4Ky4VIVX83hFQKkLK+CAA+6ZSRkLq+GCAEhAo4qMAciJQxUcD5ECgjJ8FwIlAHT8bgAOBI34RACUCV/xiAAoEzvgkACkRuOOTAaRAyBGfFGAJQq745ABzEHLGkwDEItgLMK5reP3zcER0ntL6ztf3LSe7MRJxAuX9/VTxZCNgxqm0E4EynhwgcnMYIVDHswDMReCIZwOIReCKZwOIOdR12wHbhVayo8Bug54Rv/soCwIpwIJ4NgQygATxLAgkAAnjyRGSA8TE27199+BFtjtQSQFi43e3qyL+bU6+Y0wGMDd+xr/NSRGSACyNz4mwGCBVfC6ERQCp43MgzAagiudGmAVAHc+JEA3AFc+FEAXAHc+BEAyQK54aIQggdzwlgheglHgqhL0ApcVTIDgBSo1PjTAJUHp8SgTXfIGH4fP2U3cuOK/euu6chJ5KI+Kt1vpq+D0jgG6yxHfnrZpuQQnxsSNBSvl2OPNl6nH5DQC82wdQUnwMAgBcSynX/bZogBLjIxA+KqV++ACcEyZKjg9AeJZSnobMGbLzbuxm8KYvZZ+3V0qdTz1y7ttfcC+fmO/wjIjnWuuNdydo39AdBu0eczu/BgDsdbgXMy24o2L/nn3wom3bFSL+kVLaFTqaMrdti/3i1/b+I8BrW6OxPQc/Av4BDSZYbnPWwJkAAAAASUVORK5CYII="
};
export default class Calendar extends Component {
static propTypes = {
i18n: PropTypes.string,
format: PropTypes.string,
customI18n: PropTypes.object,
color: PropTypes.object,
minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
singleDate: PropTypes.bool,
minDate: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date)
]),
maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
}
};
static defaultProps = {
format: 'YYYY-MM-DD',
i18n: 'en',
format: "YYYY-MM-DD",
i18n: "en",
customI18n: {},
color: {}
}
color: {
subColor: "#fff"
},

singleDate:false
};
static I18N_MAP = {
'zh': {
'w': ['', '一', '二', '三', '四', '五', '六', '日'],
'weekday': ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
'text': {
'start': '开 始',
'end': '结 束',
'date': '日 期',
'save': '保 存',
'clear': '清除'
zh: {
w: ["", "一", "二", "三", "四", "五", "六", "日"],
weekday: [
"",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日"
],
text: {
start: "开 始",
end: "结 束",
date: "日 期",
save: "保 存",
clear: "清除"
},
date: "M月D日"
},
en: {
w: ["", "Mon", "Tues", "Wed", "Thur", "Fri", "Sat", "Sun"],
weekday: [
"",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
text: {
start: "Start",
end: "End",
date: "Date",
save: "Save",
clear: "Reset"
},
'date': 'M月D日'
date: "DD / MM"
},
'en': {
'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
'text': {
'start': 'Start',
'end': 'End',
'date': 'Date',
'save': 'Save',
'clear': 'Reset'
ar: {
w: [
"",
"الإثنين",
"الثلاثاء",
"الإربعاء",
"الخميس",
"الجمعة",
"السبت",
"الأحد"
],
weekday: [
"",
"الإثنين",
"الثلاثاء",
"الإربعاء",
"الخميس",
"الجمعة",
"السبت",
"الأحد"
],
text: {
start: "تاريخ البداية",
end: "تاريخ النهاية",
date: "اليوم",
save: "تأكيد",
clear: "من جديد"
},
'date': 'DD / MM'
date: "DD / MM"
},
'jp': {
'w': ['', '月', '火', '水', '木', '金', '土', '日'],
'weekday': ['', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
'text': {
'start': 'スタート',
'end': 'エンド',
'date': '時　間',
'save': '確　認',
'clear': 'クリア'
jp: {
w: ["", "月", "火", "水", "木", "金", "土", "日"],
weekday: [
"",
"月曜日",
"火曜日",
"水曜日",
"木曜日",
"金曜日",
"土曜日",
"日曜日"
],
text: {
start: "スタート",
end: "エンド",
date: "時　間",
save: "確　認",
clear: "クリア"
},
'date': 'M月D日'
date: "M月D日"
}
}
constructor (props) {
};
constructor(props) {
super(props);
this.state = {
isModalVisible: false
Expand Down Expand Up @@ -135,14 +203,14 @@ export default class Calendar extends Component {
let maxValid = max.isValid();
let minValid = min.isValid();
if (!maxValid && !minValid) {
max = Moment().add(3, 'months');
min = Moment();
max = Moment().add(24, 'months');
min = Moment().subtract(11,'months');
}
if (!maxValid && minValid) {
max = min.add(3, 'months');
max = min.add(36, 'months');
}
if (maxValid && !minValid) {
min = max.subtract(3, 'months');
min = max.subtract(36, 'months');
}
if (min.isSameOrAfter(max)) return {};
this._minDate = min;
Expand All @@ -153,6 +221,16 @@ export default class Calendar extends Component {
startDate,
endDate
} = this.state;
if(this.props.singleDate==true){
this.setState({
startDate: day,
startDateText: this._i18n(day, 'date'),
startWeekdayText: this._i18n(day.isoWeekday(), 'weekday'),
endDate: day,
endDateText: this._i18n(day, 'date'),
endWeekdayText: this._i18n(day.isoWeekday(), 'weekday')
});
}else{
if ((!startDate && !endDate) || day < startDate || (startDate && endDate)) {
this.setState({
startDate: day,
Expand All @@ -169,6 +247,7 @@ export default class Calendar extends Component {
endWeekdayText: this._i18n(day.isoWeekday(), 'weekday')
});
}
}
}
cancel () {
this.close();
Expand All @@ -194,6 +273,7 @@ export default class Calendar extends Component {
endWeekdayText: ''
});
}

confirm () {
const {
startDate,
Expand All @@ -209,6 +289,57 @@ export default class Calendar extends Component {
});
this.close();
}
_renderReturn(){
const {
startDate,
endDate,
startDateText,
startWeekdayText,
endDateText,
endWeekdayText
} = this.state;
const {
mainColor = '#15aaaa',
subColor = '#fff',
borderColor = 'rgba(255, 255, 255, 0.50)'
} = this.props.color;
let color = {mainColor, subColor, borderColor};
let subFontColor = {color: subColor};
let subBack = {backgroundColor: subColor};
if(this.props.singleDate==true){
return ( <View style={styles.result}>

<View style={styles.resultPart}>
<Text style={[styles.resultText, styles.endText, subFontColor]}>
{endDateText || this._i18n('selected', 'text')}
</Text>
<Text style={[styles.resultText, styles.endText, subFontColor]}>
{endWeekdayText || this._i18n('date', 'text')}
</Text>
</View>
</View>)
}else{
return ( <View style={styles.result}>
<View style={styles.resultPart}>
<Text style={[styles.resultText, styles.startText, subFontColor]}>
{startDateText || this._i18n('start', 'text')}
</Text>
<Text style={[styles.resultText, styles.startText, subFontColor]}>
{startWeekdayText || this._i18n('date', 'text')}
</Text>
</View>
<View style={[styles.resultSlash, subBack]}/>
<View style={styles.resultPart}>
<Text style={[styles.resultText, styles.endText, subFontColor]}>
{endDateText || this._i18n('end', 'text')}
</Text>
<Text style={[styles.resultText, styles.endText, subFontColor]}>
{endWeekdayText || this._i18n('date', 'text')}
</Text>
</View>
</View>)
}
}
render () {
const {
startDate,
Expand All @@ -228,11 +359,11 @@ export default class Calendar extends Component {
let subBack = {backgroundColor: subColor};
let mainFontColor = {color: mainColor};
let subFontColor = {color: subColor};
let isValid = !startDate || endDate;
let isValid = (this.props.singleDate==true)? startDate!=null : !startDate || endDate;
let isClearVisible = startDate || endDate;
return (
<Modal
animationType={'slide'}
animationType={'none'}
visible={this.state.isModalVisible}
onRequestClose={this.close}>
<View style={[styles.container, mainBack]}>
Expand All @@ -253,25 +384,7 @@ export default class Calendar extends Component {
<Text style={[styles.clearText, subFontColor]}>{this._i18n('clear', 'text')}</Text>
</TouchableHighlight>}
</View>
<View style={styles.result}>
<View style={styles.resultPart}>
<Text style={[styles.resultText, styles.startText, subFontColor]}>
{startDateText || this._i18n('start', 'text')}
</Text>
<Text style={[styles.resultText, styles.startText, subFontColor]}>
{startWeekdayText || this._i18n('date', 'text')}
</Text>
</View>
<View style={[styles.resultSlash, subBack]}/>
<View style={styles.resultPart}>
<Text style={[styles.resultText, styles.endText, subFontColor]}>
{endDateText || this._i18n('end', 'text')}
</Text>
<Text style={[styles.resultText, styles.endText, subFontColor]}>
{endWeekdayText || this._i18n('date', 'text')}
</Text>
</View>
</View>
{this._renderReturn()}
<View style={styles.week}>
{[7, 1, 2, 3, 4, 5, 6].map(item =>
<Text style={[styles.weekText, subFontColor]}　key={item}>{this._i18n(item, 'w')}</Text>
Expand Down
Empty file modified CalendarStyle.js
100644 → 100755
View file
Open in desktop
Empty file.
4 changes: 3 additions & 1 deletion Day/index.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
* Created by TinySymphony on 2017-05-11.
*/

import React, {PropTypes, Component} from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import {
View,
Text,
Expand Down
Empty file modified Day/style.js
100644 → 100755
View file
Open in desktop
Empty file.
Loading