@momo-kits/calendar 0.0.74-beta → 0.72.1

package/src/calendarPicker/HeaderControls.js

@@ -1,158 +1,167 @@
 /* eslint-disable no-param-reassign */
-import React, { Component, } from 'react';
-import {
-    Text, TouchableOpacity, View
-} from 'react-native';
+import React, {Component} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
 import PropTypes from 'prop-types';
-import { IconSource, Image } from '@momo-kits/core';
-import { DatePicker } from '@momo-kits/date-picker';
+import {IconSource, Image} from '@momo-kits/core';
+import {DatePicker} from '@momo-kits/date-picker';
 import styles from './styles';
-import { MONTHS } from './util';
+import {MONTHS} from './util';
 
-const padding = (input) => `${input > 9 ? input : `0${input}`}`;
+const padding = input => `${input > 9 ? input : `0${input}`}`;
 
-const formatDate = (date) => {
-    if (date && typeof date.getDate === 'function') {
-        return `${padding(date.getMonth() + 1)}/${(date.getFullYear()).toString()}`;
-    }
-    return null;
+const formatDate = date => {
+  if (date && typeof date.getDate === 'function') {
+    return `${padding(date.getMonth() + 1)}/${date.getFullYear().toString()}`;
+  }
+  return null;
 };
 
 const makeRange = (min = 0, max = 9999, step = 1) => {
-    const range = [];
-    let entry = `${0}`;
+  const range = [];
+  let entry = `${0}`;
 
-    for (min; min <= max; min += step) {
-        entry = `${min}`;
-        range.push(entry);
-    }
+  for (min; min <= max; min += step) {
+    entry = `${min}`;
+    range.push(entry);
+  }
 
-    return range;
+  return range;
 };
 export default class HeaderControls extends Component {
-    constructor(props) {
-        super(props);
-        const { month } = this.props;
-        this.state = {
-            selectedMonth: month
-        };
-
-        const minYear = 1900 + (new Date()).getYear();
-        const maxYear = minYear + 5;
-        this.months = makeRange(1, 12);
-        this.years = makeRange(minYear, maxYear);
-        this.momoDatePicker = React.createRef();
-    }
-
-    setMonth = (month) => {
-        this.setState({
-            selectedMonth: month,
-        });
-    }
-
-    getNext = () => {
-        const { selectedMonth } = this.state;
-        const { getNextYear, onMonthChange } = this.props;
-        let next = selectedMonth + 1;
-        if (next > 11) {
-            next = 0;
-            this.setState({ selectedMonth: next });
-            getNextYear();
-        } else {
-            this.setState({ selectedMonth: next });
-        }
-
-        onMonthChange(next);
-    }
-
-    getPrevious = () => {
-        const { selectedMonth } = this.state;
-        const {
-            onMonthChange, year, minDate, getPrevYear
-        } = this.props;
-
-        let prev = selectedMonth - 1;
-        if (prev < 0) {
-            prev = 11;
-            this.setState({ selectedMonth: prev });
-            getPrevYear();
-            onMonthChange(prev);
-        } else if (year <= minDate.getFullYear() && prev < minDate.getMonth()) {
-            return null;
-        } else {
-            this.setState({ selectedMonth: prev });
-            onMonthChange(prev);
-        }
-    }
-
-    pickMonthYear = () => {
-        const { navigator, minDate, maxDate } = this.props;
-        navigator.showBottom({
-            screen: DatePicker,
-            params: {
-                dragDisabled: true,
-                onSelected: this.onMonthYearChange,
-                onClose: () => { },
-                selectedDate: formatDate(minDate),
-                minDate: formatDate(minDate),
-                maxDate: formatDate(maxDate),
-                format: 'MM/YYYY',
-            }
-        });
+  constructor(props) {
+    super(props);
+    const {month} = this.props;
+    this.state = {
+      selectedMonth: month,
     };
 
-    onMonthYearChange = (date) => {
-        const { onMonthYearChange } = this.props;
-        const splitDate = date.split('/');
-        const idM = +splitDate[0];
-        const idY = +splitDate[1];
-        this.setState({
-            selectedMonth: idM - 1
-        });
-        if (onMonthYearChange) {
-            onMonthYearChange(idM - 1, idY);
-        }
+    const minYear = 1900 + new Date().getYear();
+    const maxYear = minYear + 5;
+    this.months = makeRange(1, 12);
+    this.years = makeRange(minYear, maxYear);
+    this.momoDatePicker = React.createRef();
+  }
+
+  setMonth = month => {
+    this.setState({
+      selectedMonth: month,
+    });
+  };
+
+  getNext = () => {
+    const {selectedMonth} = this.state;
+    const {getNextYear, onMonthChange} = this.props;
+    let next = selectedMonth + 1;
+    if (next > 11) {
+      next = 0;
+      this.setState({selectedMonth: next});
+      getNextYear();
+    } else {
+      this.setState({selectedMonth: next});
     }
 
-    render() {
-        const { selectedMonth } = this.state;
-        const { year, minDate } = this.props;
-        const previous = selectedMonth - 1 < 0 ? 11 : selectedMonth - 1;
-        const opacity = (previous < minDate.getMonth() && minDate.getFullYear() === year) ? 0.2 : 1;
-        // const monthNow = (new Date()).getMonth() + 1;
-        // const yearNow = (new Date()).getYear() + 1900;
-        return (
-            <View style={styles.headerWrapper}>
-
-                <TouchableOpacity onPress={() => this.getPrevious()} style={{ paddingHorizontal: 20, }}>
-                    <Image style={{ width: 20, height: 20, opacity }} source={IconSource.ic_back_arrow} />
-                </TouchableOpacity>
-
-                <TouchableOpacity onPress={this.pickMonthYear}>
-                    <Text style={styles.monthLabel}>
-                        { MONTHS[selectedMonth] }
-                        /
-                        { year }
-                    </Text>
-                </TouchableOpacity>
-
-                <TouchableOpacity onPress={() => this.getNext()} style={{ paddingHorizontal: 20, }}>
-                    <Image style={{ width: 20, height: 20, }} source={IconSource.ic_arrow_next} />
-                </TouchableOpacity>
-            </View>
-        );
+    onMonthChange(next);
+  };
+
+  getPrevious = () => {
+    const {selectedMonth} = this.state;
+    const {onMonthChange, year, minDate, getPrevYear} = this.props;
+
+    let prev = selectedMonth - 1;
+    if (prev < 0) {
+      prev = 11;
+      this.setState({selectedMonth: prev});
+      getPrevYear();
+      onMonthChange(prev);
+    } else if (year <= minDate.getFullYear() && prev < minDate.getMonth()) {
+      return null;
+    } else {
+      this.setState({selectedMonth: prev});
+      onMonthChange(prev);
     }
+  };
+
+  pickMonthYear = () => {
+    const {navigator, minDate, maxDate} = this.props;
+    navigator.showBottom({
+      screen: DatePicker,
+      params: {
+        dragDisabled: true,
+        onSelected: this.onMonthYearChange,
+        onClose: () => {},
+        selectedDate: formatDate(minDate),
+        minDate: formatDate(minDate),
+        maxDate: formatDate(maxDate),
+        format: 'MM/YYYY',
+      },
+    });
+  };
+
+  onMonthYearChange = date => {
+    const {onMonthYearChange} = this.props;
+    const splitDate = date.split('/');
+    const idM = +splitDate[0];
+    const idY = +splitDate[1];
+    this.setState({
+      selectedMonth: idM - 1,
+    });
+    if (onMonthYearChange) {
+      onMonthYearChange(idM - 1, idY);
+    }
+  };
+
+  render() {
+    const {selectedMonth} = this.state;
+    const {year, minDate} = this.props;
+    const previous = selectedMonth - 1 < 0 ? 11 : selectedMonth - 1;
+    const opacity =
+      previous < minDate.getMonth() && minDate.getFullYear() === year ? 0.2 : 1;
+    // const monthNow = (new Date()).getMonth() + 1;
+    // const yearNow = (new Date()).getYear() + 1900;
+    return (
+      <View style={styles.headerWrapper}>
+        <TouchableOpacity
+          onPress={() => this.getPrevious()}
+          style={{paddingHorizontal: 20}}>
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              opacity,
+            }}
+            source={IconSource.ic_back_arrow}
+          />
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={this.pickMonthYear}>
+          <Text style={styles.monthLabel}>
+            {MONTHS[selectedMonth]}/{year}
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => this.getNext()}
+          style={{paddingHorizontal: 20}}>
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+            }}
+            source={IconSource.ic_arrow_next}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  }
 }
 
 HeaderControls.propTypes = {
-    getNextYear: PropTypes.func,
-    onMonthChange: PropTypes.func,
-    onMonthYearChange: PropTypes.func,
-    getPrevYear: PropTypes.func,
-    year: PropTypes.number,
-    minDate: PropTypes.any,
+  getNextYear: PropTypes.func,
+  onMonthChange: PropTypes.func,
+  onMonthYearChange: PropTypes.func,
+  getPrevYear: PropTypes.func,
+  year: PropTypes.number,
+  minDate: PropTypes.any,
 };
 
-HeaderControls.defaultProps = {
-
-};
+HeaderControls.defaultProps = {};

package/src/calendarPicker/WeekDaysLabels.js

@@ -1,22 +1,27 @@
 import React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 
-import { Text } from '@momo-kits/core';
+import {Text} from '@momo-kits/core';
 import styles from './styles';
-import { WEEKDAYS, } from './util';
+import {WEEKDAYS} from './util';
 
 const colorDay = '#9199a2';
 const WeekDaysLabels = () => (
-    <View style={styles.dayLabelsWrapper}>
-        { WEEKDAYS.map((day, key) => (
-            <Text.Title
-                key={key.toString()}
-                style={[styles.dayLabels, { color: colorDay, fontSize: 16 }]}
-            >
-                {day}
-            </Text.Title>
-        )) }
-    </View>
+  <View style={styles.dayLabelsWrapper}>
+    {WEEKDAYS.map((day, key) => (
+      <Text.Title1
+        key={key.toString()}
+        style={[
+          styles.dayLabels,
+          {
+            color: colorDay,
+            fontSize: 16,
+          },
+        ]}>
+        {day}
+      </Text.Title1>
+    ))}
+  </View>
 );
 
 export default WeekDaysLabels;

package/src/calendarPicker/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-typos */
-import React, { Component, } from 'react';
-import { View, } from 'react-native';
+import React, {Component} from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from './styles';
 import HeaderControls from './HeaderControls';
@@ -8,118 +8,118 @@ import Days from './Days';
 import WeekDaysLabels from './WeekDaysLabels';
 
 class CalendarPicker extends Component {
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
 
-        this.selectedDate = null;
-        const temp = props.selectedDate;
-        try {
-            if (typeof temp.getDate === 'function') {
-                this.selectedDate = temp;
-            } else {
-                this.selectedDate = new Date(temp);
-            }
-        } catch (e) {
-            this.selectedDate = new Date();
-        }
-        this.state = {
-            // date: this.selectedDate,
-            month: this.selectedDate.getMonth(),
-            day: this.selectedDate.getDate(),
-            year: this.selectedDate.getFullYear(),
-            // selectedDay: [],
-            tabSelected: 0,
-        };
+    this.selectedDate = null;
+    const temp = props.selectedDate;
+    try {
+      if (typeof temp.getDate === 'function') {
+        this.selectedDate = temp;
+      } else {
+        this.selectedDate = new Date(temp);
+      }
+    } catch (e) {
+      this.selectedDate = new Date();
     }
+    this.state = {
+      // date: this.selectedDate,
+      month: this.selectedDate.getMonth(),
+      day: this.selectedDate.getDate(),
+      year: this.selectedDate.getFullYear(),
+      // selectedDay: [],
+      tabSelected: 0,
+    };
+  }
 
-    onDayChange = (day, month, year) => {
-        const { onDateChange } = this.props;
-        const date = new Date(year, month, day);
-        if (onDateChange) { onDateChange(date); }
-        if (this.refs.header) { this.refs.header.setMonth(month); }
-        this.setState({
-            year,
-            month,
-            day,
-        });
+  onDayChange = (day, month, year) => {
+    const {onDateChange} = this.props;
+    const date = new Date(year, month, day);
+    if (onDateChange) {
+      onDateChange(date);
     }
-
-    onMonthYearChange = (month, year) => {
-        this.setState({
-            month,
-            year
-        });
+    if (this.refs.header) {
+      this.refs.header.setMonth(month);
     }
+    this.setState({
+      year,
+      month,
+      day,
+    });
+  };
 
-    onMonthChange = (month) => {
-        this.setState({ month, });
-    }
+  onMonthYearChange = (month, year) => {
+    this.setState({
+      month,
+      year,
+    });
+  };
 
+  onMonthChange = month => {
+    this.setState({month});
+  };
 
-    getNextYear = () => {
-        const { year } = this.state;
-        this.setState({ year: parseInt(year) + 1, });
-    }
+  getNextYear = () => {
+    const {year} = this.state;
+    this.setState({year: parseInt(year) + 1});
+  };
 
-    getPrevYear =() => {
-        const { year } = this.state;
-        this.setState({ year: parseInt(year) - 1, });
-    }
+  getPrevYear = () => {
+    const {year} = this.state;
+    this.setState({year: parseInt(year) - 1});
+  };
 
-    setDoubleDateAndTabIndex = (first, second, tabSelected) => {
-        this.setState({
-            firstDate: first,
-            secondDate: second,
-            tabSelected
-        });
-    }
+  setDoubleDateAndTabIndex = (first, second, tabSelected) => {
+    this.setState({
+      firstDate: first,
+      secondDate: second,
+      tabSelected,
+    });
+  };
 
-    render() {
-        const {
-            day, year, month, firstDate, secondDate, tabSelected
-        } = this.state;
-        const {
-            minDate, maxDate, mode, navigator
-        } = this.props;
-        return (
-            <View style={styles.calendar}>
-                <HeaderControls
-                    ref="header"
-                    year={year}
-                    month={month}
-                    navigator={navigator}
-                    onMonthYearChange={this.onMonthYearChange}
-                    onMonthChange={this.onMonthChange}
-                    getNextYear={this.getNextYear}
-                    getPrevYear={this.getPrevYear}
-                    minDate={minDate || null}
-                />
-                <WeekDaysLabels />
+  render() {
+    const {day, year, month, firstDate, secondDate, tabSelected} = this.state;
+    const {minDate, maxDate, mode, navigator} = this.props;
+    return (
+      <View style={styles.calendar}>
+        <HeaderControls
+          ref="header"
+          year={year}
+          month={month}
+          navigator={navigator}
+          onMonthYearChange={this.onMonthYearChange}
+          onMonthChange={this.onMonthChange}
+          getNextYear={this.getNextYear}
+          getPrevYear={this.getPrevYear}
+          minDate={minDate || null}
+        />
+        <WeekDaysLabels />
 
-                <Days
-                    mode={mode}
-                    firstDate={firstDate}
-                    secondDate={secondDate}
-                    tabSelected={tabSelected}
-                    month={month}
-                    year={year}
-                    day={day}
-                    minDate={minDate || new Date()}
-                    maxDate={maxDate}
-                    selectedDate={this.selectedDate}
-                    onDayChange={this.onDayChange}
-                />
-            </View>
-        );
-    }
+        <Days
+          mode={mode}
+          firstDate={firstDate}
+          secondDate={secondDate}
+          tabSelected={tabSelected}
+          month={month}
+          year={year}
+          day={day}
+          minDate={minDate || new Date()}
+          maxDate={maxDate}
+          selectedDate={this.selectedDate}
+          onDayChange={this.onDayChange}
+        />
+      </View>
+    );
+  }
 }
+
 export default CalendarPicker;
 
 CalendarPicker.propTypes = {
-    navigator: PropTypes.object.isRequired,
-    minDate: PropTypes.any,
-    maxDate: PropTypes.any,
-    mode: PropTypes.oneOf(['doubleDate', 'signleDate']),
-    selectedDate: PropTypes.any,
-    onDateChange: PropTypes.func,
+  navigator: PropTypes.object.isRequired,
+  minDate: PropTypes.any,
+  maxDate: PropTypes.any,
+  mode: PropTypes.oneOf(['doubleDate', 'signleDate']),
+  selectedDate: PropTypes.any,
+  onDateChange: PropTypes.func,
 };