react-native-calendar-box/lib/Calendar.js

react-native calendar picker with box

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

exports.default = CalendarView;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

var _Month = require('./Month');

var _Month2 = _interopRequireDefault(_Month);

var _immutableDatetime = require('immutable-datetime');

var _immutableDatetime2 = _interopRequireDefault(_immutableDatetime);

var _Entypo = require('react-native-vector-icons/Entypo');

var _Entypo2 = _interopRequireDefault(_Entypo);

var _CalendarStyle = require('./Calendar-style');

var _calendar = require('./helpers/calendar');

var _reactNativeModalSelectOption = require('react-native-modal-select-option');

var _reactNativeModalSelectOption2 = _interopRequireDefault(_reactNativeModalSelectOption);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function CalendarView(props) {
  var selectedMonth = props.selectedMonth,
      onDateSelect = props.onDateSelect,
      onNext = props.onNext,
      onPrev = props.onPrev,
      onMonthChange = props.onMonthChange,
      onMonthsShow = props.onMonthsShow,
      isMonthsShowing = props.isMonthsShowing;

  if (selectedMonth == null) {
    selectedMonth = _immutableDatetime2.default.now();
  }
  var currentYear = selectedMonth.getYear();
  var yStart = props.yStart ? props.yStart : _immutableDatetime2.default.now().getYear();
  var yEnd = props.yEnd ? props.yEnd : _immutableDatetime2.default.now().getYear();
  var currentMonth = selectedMonth.getMonth();
  var yOptions = [];
  for (yStart; yStart <= yEnd; yStart += 1) {
    yOptions.push({ value: yStart, label: yStart });
  }
  var propsYearsDropdown = {
    selectedOption: { value: currentYear, label: currentYear },
    options: yOptions,
    animationType: 'none'
  };
  var propsMonthsDropdown = {
    selectedOption: { value: currentMonth, label: (0, _calendar.getMonthName)(currentMonth) },
    options: [{ value: 0, label: (0, _calendar.getMonthName)(0) }, { value: 1, label: (0, _calendar.getMonthName)(1) }, { value: 2, label: (0, _calendar.getMonthName)(2) }, { value: 3, label: (0, _calendar.getMonthName)(3) }, { value: 4, label: (0, _calendar.getMonthName)(4) }, { value: 5, label: (0, _calendar.getMonthName)(5) }, { value: 6, label: (0, _calendar.getMonthName)(6) }, { value: 7, label: (0, _calendar.getMonthName)(7) }, { value: 8, label: (0, _calendar.getMonthName)(8) }, { value: 9, label: (0, _calendar.getMonthName)(9) }, { value: 10, label: (0, _calendar.getMonthName)(10) }, { value: 11, label: (0, _calendar.getMonthName)(11) }],
    animationType: 'none'
  };
  var onNextPress = function onNextPress() {
    onNext(selectedMonth);
  };
  var onPrevPress = function onPrevPress() {
    onPrev(selectedMonth);
  };

  return _react2.default.createElement(
    _reactNative.View,
    { style: { flex: 1 } },
    _react2.default.createElement(
      _reactNative.View,
      { style: _CalendarStyle.stylesDate.monthContainer },
      _react2.default.createElement(
        _reactNative.View,
        { style: _CalendarStyle.stylesDate.year },
        _react2.default.createElement(
          _reactNative.View,
          { style: _CalendarStyle.stylesDate.yearText },
          _react2.default.createElement(_reactNativeModalSelectOption2.default, _extends({}, propsYearsDropdown, {
            onSelect: props.onYearChange,
            onShow: props.onYearsShow,
            isShowingOptions: props.isYearsShowing
          }))
        )
      ),
      _react2.default.createElement(
        _reactNative.View,
        { style: _CalendarStyle.stylesDate.month },
        _react2.default.createElement(
          _reactNative.View,
          { style: _CalendarStyle.stylesDate.monthText },
          _react2.default.createElement(_reactNativeModalSelectOption2.default, _extends({}, propsMonthsDropdown, {
            onSelect: onMonthChange,
            onShow: onMonthsShow,
            isShowingOptions: isMonthsShowing
          }))
        ),
        _react2.default.createElement(_reactNative.View, { style: _CalendarStyle.stylesDate.monthSpacer }),
        _react2.default.createElement(
          _reactNative.View,
          null,
          _react2.default.createElement(
            _reactNative.TouchableHighlight,
            { style: _CalendarStyle.stylesDate.arrow, onPress: onPrevPress, underlayColor: '#25aa0f' },
            _react2.default.createElement(
              _reactNative.Text,
              null,
              _react2.default.createElement(_Entypo2.default, { name: 'chevron-thin-left', size: _CalendarStyle.fontDefault * 1.5, color: 'white' })
            )
          )
        ),
        _react2.default.createElement(
          _reactNative.View,
          null,
          _react2.default.createElement(
            _reactNative.TouchableHighlight,
            { style: _CalendarStyle.stylesDate.arrow, onPress: onNextPress, underlayColor: '#25aa0f' },
            _react2.default.createElement(
              _reactNative.Text,
              null,
              _react2.default.createElement(_Entypo2.default, { name: 'chevron-thin-right', size: _CalendarStyle.fontDefault * 1.5, color: 'white' })
            )
          )
        )
      )
    ),
    _react2.default.createElement(_Month2.default, {
      selectedMonth: selectedMonth,
      onDateSelect: onDateSelect
    })
  );
}