@momo-kits/calendar 0.73.3-beta.4 → 0.74.2-react-native.1

package/src/calendarPicker/Day.js

@@ -1,146 +0,0 @@
-import React, {Component} from 'react';
-import {TouchableOpacity, View, Text} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from './styles';
-
-export default class Day extends Component {
-  processMinDate() {
-    const {minDate} = this.props;
-    if (minDate) {
-      minDate.setHours(0, 0, 0, 0);
-      if (this.date < minDate) {
-        this.disableTouch = true;
-      }
-    }
-  }
-
-  processMaxDate() {
-    const {maxDate} = this.props;
-    if (maxDate) {
-      maxDate.setHours(0, 0, 0, 0);
-      if (this.date > maxDate) {
-        this.disableTouch = true;
-      }
-    }
-  }
-
-  processDoubleDate() {
-    const {mode, otherMonth, firstDate, secondDate, tabSelected} = this.props;
-    const {date} = this;
-    if (mode === 'doubleDate' && !otherMonth) {
-      if (firstDate && tabSelected === 1) {
-        firstDate.setHours(0, 0, 0, 0);
-        if (date < firstDate) {
-          this.disableTouch = true;
-          this.styleDouble = {};
-        } else if (date.getTime() === firstDate.getTime()) {
-          this.colorCanTouch = '#2eb3e8';
-          this.colorText = 'white';
-          this.styleDouble = {};
-        }
-      }
-      if (secondDate && firstDate) {
-        secondDate.setHours(0, 0, 0, 0);
-        if (date > firstDate && date < secondDate) {
-          this.colorCanTouch = '#90d6f3';
-
-          this.styleDouble = styles.styleBetween;
-
-          this.colorText = 'white';
-        }
-        if (secondDate.getTime() !== firstDate.getTime()) {
-          if (date.getTime() === firstDate.getTime()) {
-            this.colorCanTouch = '#2eb3e8';
-            this.colorText = 'white';
-            this.styleDouble = styles.styleFirstDate;
-          }
-          if (date.getTime() === secondDate.getTime()) {
-            this.styleDouble = styles.styleSecondDate;
-            this.colorCanTouch = '#2eb3e8';
-            this.colorText = 'white';
-          }
-        }
-      }
-    }
-  }
-
-  processSelected() {
-    const {selected} = this.props;
-    if (selected && !this.disableTouch) {
-      this.colorCanTouch = '#2eb3e8';
-      this.colorText = 'white';
-    }
-  }
-
-  processDateNow() {
-    const {selected} = this.props;
-    if (!selected && this.date.getTime() === this.dateNow.getTime()) {
-      this.colorCanTouch = '#8F8E94';
-      this.colorText = 'white';
-    }
-  }
-
-  processOtherMonth() {
-    const {otherMonth} = this.props;
-    if (otherMonth) {
-      this.colorTextDisable = 'white';
-    }
-  }
-
-  processRender() {
-    this.processMinDate();
-    this.processMaxDate();
-    // this.processDateNow()
-    this.processDoubleDate();
-    this.processSelected();
-    this.processOtherMonth();
-  }
-
-  render() {
-    const {day, month, year, otherMonth, onDayChange} = this.props;
-    this.colorCanTouch = 'white';
-    this.colorText = '#393939';
-    this.colorTextDisable = '#DADADA';
-    this.styleDouble = {};
-    this.disableTouch = false;
-    this.dateNow = new Date();
-    this.dateNow.setHours(0, 0, 0, 0);
-    this.date = new Date(year, month, day);
-    this.date.setHours(0, 0, 0, 0);
-    this.processRender();
-    return (
-      <View style={styles.dayWrapper}>
-        <View style={this.styleDouble} />
-        {this.disableTouch || otherMonth ? (
-          <View style={styles.dayButton}>
-            <Text.Title
-              style={[styles.dayLabel, {color: this.colorTextDisable}]}>
-              {day}
-            </Text.Title>
-          </View>
-        ) : (
-          <View
-            style={[
-              styles.dayButtonSelected,
-              {backgroundColor: this.colorCanTouch},
-            ]}>
-            <TouchableOpacity
-              style={styles.dayButton}
-              onPress={() => onDayChange(day, month, year)}>
-              <Text.Title style={[styles.dayLabel, {color: this.colorText}]}>
-                {day}
-              </Text.Title>
-            </TouchableOpacity>
-          </View>
-        )}
-      </View>
-    );
-  }
-}
-Day.propTypes = {
-  day: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  month: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  year: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  otherMonth: PropTypes.bool,
-  onDayChange: PropTypes.func,
-};

package/src/calendarPicker/Days.js

@@ -1,230 +0,0 @@
-import React, {Component} from 'react';
-import {View} from 'react-native';
-import styles from './styles';
-import {getDaysInMonth, MAX_COLUMNS, MAX_ROWS} from './util';
-import Day from './Day';
-
-export default class Days extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedDay: 0,
-      selectedMonth: 0,
-      selectedYear: 0,
-    };
-    this.selectedDate = null;
-  }
-
-  componentDidMount() {
-    const {selectedDate} = this.props;
-    if (selectedDate) {
-      const temp = selectedDate;
-      if (typeof temp.getDate === 'function') {
-        this.selectedDate = temp;
-      } else {
-        this.selectedDate = new Date(temp);
-      }
-      this.updateSelectedStates(
-        this.selectedDate.getDate(),
-        this.selectedDate.getMonth(),
-        this.selectedDate.getFullYear(),
-      );
-    }
-  }
-
-  updateSelectedStates = (day, month, year) => {
-    const {onDayChange} = this.props;
-    // const monthTmp = month + 1;
-    this.setState({
-      selectedDay: day,
-      selectedMonth: month,
-      selectedYear: year,
-    });
-    if (onDayChange) {
-      onDayChange(day, month, year);
-    }
-  };
-
-  onPressDay = (day, month, year) => {
-    const {minDate, maxDate} = this.props;
-    const selectDate = new Date(year, month, day);
-    selectDate.setHours(0, 0, 0, 0);
-    if (minDate) {
-      minDate.setHours(0, 0, 0, 0);
-      if (selectDate < minDate) {
-        return;
-      }
-    }
-
-    if (maxDate) {
-      maxDate.setHours(0, 0, 0, 0);
-      if (selectDate > maxDate) {
-        return;
-      }
-    }
-    this.updateSelectedStates(day, month, year);
-  };
-
-  getCalendarDays = () => {
-    const {
-      month,
-      year,
-      mode,
-      minDate,
-      maxDate,
-      firstDate,
-      secondDate,
-      tabSelected,
-    } = this.props;
-    const {selectedMonth, selectedDay, selectedYear} = this.state;
-    let columns;
-    const matrix = [];
-    let i;
-    let j;
-    let currentDay = 0;
-    const thisMonthFirstDay = new Date(year, month, 1);
-    let slotsAccumulator = 1;
-
-    let goNextMonth = false;
-    for (i = 0; i < MAX_ROWS; i += 1) {
-      // Week rows
-      columns = [];
-      if (goNextMonth) {
-        break;
-      }
-      for (j = 0; j < MAX_COLUMNS; j += 1) {
-        // Day columns
-        // HungHC: getDay() Sunday is 0, Monday is 1, and so on.
-        let tmp = thisMonthFirstDay.getDay();
-        if (tmp === 0) {
-          tmp = 7;
-        }
-        if (slotsAccumulator >= tmp) {
-          if (currentDay < getDaysInMonth(month, year)) {
-            const day = currentDay + 1;
-            const selected =
-              selectedDay === day &&
-              selectedMonth === month &&
-              selectedYear === year;
-            const date = Date(year, month, day);
-
-            columns.push(
-              <Day
-                mode={mode}
-                key={j.toString()}
-                column={j}
-                day={day}
-                month={month}
-                year={year}
-                selected={selected}
-                date={date}
-                minDate={minDate}
-                maxDate={maxDate}
-                firstDate={firstDate}
-                secondDate={secondDate}
-                tabSelected={tabSelected}
-                otherMonth={false}
-                onDayChange={this.onPressDay}
-              />,
-            );
-            currentDay += 1;
-          } else {
-            // HungHC: show next month
-            goNextMonth = true;
-            if (j === 0) {
-              break;
-            }
-
-            let nextMonth = month + 1;
-            const day = currentDay + 1 - getDaysInMonth(month, year);
-            let yearTmp = year;
-            if (nextMonth > 11) {
-              nextMonth = 0;
-              yearTmp = year + 1;
-            }
-            const date = Date(yearTmp, nextMonth, day);
-            const selected =
-              selectedDay === day &&
-              selectedMonth === nextMonth &&
-              selectedYear === yearTmp;
-            columns.push(
-              <Day
-                mode={mode}
-                key={j.toString()}
-                column={j}
-                day={day}
-                month={nextMonth}
-                year={yearTmp}
-                selected={selected}
-                date={date}
-                minDate={minDate}
-                maxDate={maxDate}
-                firstDate={firstDate}
-                secondDate={secondDate}
-                tabSelected={tabSelected}
-                otherMonth
-                onDayChange={this.onPressDay}
-              />,
-            );
-            currentDay += 1;
-          }
-        } else {
-          // HungHC: show prev month
-          let prevMonth = month - 1;
-          let yearTmp = year;
-          if (prevMonth < 0) {
-            prevMonth = 11;
-            yearTmp = year - 1;
-          }
-          const daysPrev = getDaysInMonth(prevMonth, yearTmp);
-          let tmpDay = thisMonthFirstDay.getDay();
-          if (tmpDay === 0) {
-            tmpDay = 7;
-          }
-          const delta = slotsAccumulator - tmpDay + 1;
-          const day = daysPrev + delta;
-
-          const selected =
-            selectedDay === day &&
-            selectedMonth === prevMonth &&
-            selectedYear === yearTmp;
-
-          const date = Date(yearTmp, prevMonth, day);
-          columns.push(
-            <Day
-              mode={mode}
-              key={j.toString()}
-              column={j}
-              day={day}
-              month={prevMonth}
-              year={yearTmp}
-              selected={selected}
-              date={date}
-              minDate={minDate}
-              maxDate={maxDate}
-              firstDate={firstDate}
-              secondDate={secondDate}
-              tabSelected={tabSelected}
-              otherMonth
-              onDayChange={this.onPressDay}
-            />,
-          );
-        }
-
-        slotsAccumulator += 1;
-      }
-      matrix[i] = [];
-      matrix[i].push(
-        <View key={i.toString()} style={styles.weekRow}>
-          {columns}
-        </View>,
-      );
-    }
-
-    return matrix;
-  };
-
-  render() {
-    return <View style={styles.daysWrapper}>{this.getCalendarDays()}</View>;
-  }
-}

package/src/calendarPicker/HeaderControls.js

@@ -1,167 +0,0 @@
-/* eslint-disable no-param-reassign */
-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 styles from './styles';
-import {MONTHS} from './util';
-
-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 makeRange = (min = 0, max = 9999, step = 1) => {
-  const range = [];
-  let entry = `${0}`;
-
-  for (min; min <= max; min += step) {
-    entry = `${min}`;
-    range.push(entry);
-  }
-
-  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',
-      },
-    });
-  };
-
-  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,
-};
-
-HeaderControls.defaultProps = {};

package/src/calendarPicker/WeekDaysLabels.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-
-import {Text} from '@momo-kits/core';
-import styles from './styles';
-import {WEEKDAYS} from './util';
-
-const colorDay = '#9199a2';
-const WeekDaysLabels = () => (
-  <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,125 +0,0 @@
-/* eslint-disable react/no-typos */
-import React, {Component} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from './styles';
-import HeaderControls from './HeaderControls';
-import Days from './Days';
-import WeekDaysLabels from './WeekDaysLabels';
-
-class CalendarPicker extends Component {
-  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,
-    };
-  }
-
-  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,
-    });
-  };
-
-  onMonthYearChange = (month, year) => {
-    this.setState({
-      month,
-      year,
-    });
-  };
-
-  onMonthChange = month => {
-    this.setState({month});
-  };
-
-  getNextYear = () => {
-    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,
-    });
-  };
-
-  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>
-    );
-  }
-}
-
-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,
-};