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

react-native calendar picker with box

'use strict';

exports.__esModule = true;
exports.default = MonthView;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _immutableDatetime2 = _interopRequireDefault(_immutableDatetime);

var _Date = require('./Date');

var _Date2 = _interopRequireDefault(_Date);

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

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

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

function MonthView(props) {
  var selectedMonth = props.selectedMonth,
      onDateSelect = props.onDateSelect;

  if (selectedMonth == null) {
    selectedMonth = _immutableDatetime2.default.now();
  }
  var currentYear = selectedMonth.getYear();
  var currentMonth = selectedMonth.getMonth();
  var weeks = (0, _calendar.getCalendarArray)(currentYear, currentMonth);
  var spinner = _react2.default.createElement(
    _reactNative.View,
    { style: _CalendarStyle.stylesDate.calendarBody },
    weeks.map(RenderWeek)
  );
  function RenderWeek(week, i) {
    return _react2.default.createElement(
      _reactNative.View,
      { key: i.toString(), style: _CalendarStyle.stylesDate.weeks },
      week.map(RenderDate)
    );
  }
  function RenderDate(day, i) {
    return _react2.default.createElement(_Date2.default, {
      day: day,
      key: i.toString(),
      onDateSelect: onDateSelect
    });
  }
  return _react2.default.createElement(
    _reactNative.View,
    { style: _CalendarStyle.stylesDate.calendarContainer },
    _react2.default.createElement(
      _reactNative.View,
      { style: _CalendarStyle.stylesDate.calendarHeader },
      _react2.default.createElement(
        _reactNative.Text,
        { style: _CalendarStyle.stylesDate.dayText },
        'SUN'
      ),
      _react2.default.createElement(
        _reactNative.Text,
        { style: _CalendarStyle.stylesDate.dayText },
        'MON'
      ),
      _react2.default.createElement(
        _reactNative.Text,
        { style: _CalendarStyle.stylesDate.dayText },
        'TUE'
      ),
      _react2.default.createElement(
        _reactNative.Text,
        { style: _CalendarStyle.stylesDate.dayText },
        'WED'
      ),
      _react2.default.createElement(
        _reactNative.Text,
        { style: _CalendarStyle.stylesDate.dayText },
        'THU'
      ),
      _react2.default.createElement(
        _reactNative.Text,
        { style: _CalendarStyle.stylesDate.dayText },
        'FRI'
      ),
      _react2.default.createElement(
        _reactNative.Text,
        { style: _CalendarStyle.stylesDate.dayText },
        'SAT'
      )
    ),
    spinner
  );
}