react-np-datepicker/dist/DayView.js

Integrate Nepali Datepicker in your React app easily.

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import moment from 'moment';
import cs from 'classnames';
import BSMoment from './BSDate';
import ViewHeader from './ViewHeader';
import Cell from './Cell';

var DayView = /*#__PURE__*/function (_React$Component) {
  _inherits(DayView, _React$Component);

  var _super = _createSuper(DayView);

  function DayView() {
    _classCallCheck(this, DayView);

    return _super.apply(this, arguments);
  }

  _createClass(DayView, [{
    key: "getDays",
    value: function getDays() {
      var date = this.props.date,
          month = date.month(),
          today = new BSMoment().now(),
          currDay = date.date(),
          year = date.year(),
          start = date.startOf('month').weekday(0),
          end = date.endOf('month').weekday(6);
      var daysArrays = BSMoment.range(start, end);
      return daysArrays.map(function (day) {
        return day ? {
          label: day.date(),
          prev: day.month() < month && !(day.year() > year) || day.year() < year,
          next: day.month() > month || day.year() > year,
          curr: day.date() === currDay && day.month() === month,
          today: day.date() === today.date() && day.month() === today.month() && day.year() === today.year()
        } : {
          label: '--',
          next: true,
          disabled: true
        };
      });
    }
  }, {
    key: "getDaysTitles",
    value: function getDaysTitles() {
      return [0, 1, 2, 3, 4, 5, 6].map(function (i) {
        return {
          label: moment().weekday(i).format('dd')
        };
      });
    }
  }, {
    key: "cellClick",
    value: function cellClick(e) {
      var cell = e.target,
          cellDate = parseInt(cell.innerHTML, 10),
          date = this.props.date;
      var newDate = date || new BSMoment().now();
      if (isNaN(cellDate)) return;

      if (cell.className.indexOf('prev') > -1) {
        newDate = newDate.subtract(1, 'month');
      } else if (cell.className.indexOf('next') > -1) {
        newDate = newDate.add(1, 'month');
      }

      this.props.setInputDate(newDate.date(cellDate), true);
    }
  }, {
    key: "next",
    value: function next() {
      var date = this.props.date;
      /*if (this.props.maxDate && nextDate.isAfter(this.props.maxDate, 'day')) {
        nextDate = this.props.maxDate
      }*/

      this.props.setInternalDate(date.add(1, 'month'));
    }
  }, {
    key: "prev",
    value: function prev() {
      var date = this.props.date; // if (this.props.minDate && prevDate.isBefore(this.props.minDate, 'day')) {
      //   prevDate = this.props.minDate
      // }

      this.props.setInternalDate(date.subtract(1, 'month'));
    }
  }, {
    key: "render",
    value: function render() {
      var titles = this.getDaysTitles().map(function (item, i) {
        return /*#__PURE__*/React.createElement(Cell, {
          className: "day title",
          key: i,
          value: item.label
        });
      });
      var days = this.getDays().map(function (item, i) {
        return /*#__PURE__*/React.createElement(Cell, {
          className: cs({
            day: true,
            next: item.next,
            prev: item.prev,
            current: item.curr,
            today: item.today
          }),
          key: i,
          value: item.label
        });
      });
      var currentDate = this.props.date.getMonthName();
      return /*#__PURE__*/React.createElement("div", {
        className: "view days-view"
      }, /*#__PURE__*/React.createElement(ViewHeader, {
        data: currentDate,
        next: this.next.bind(this),
        prev: this.prev.bind(this),
        titleAction: this.props.nextView
      }), /*#__PURE__*/React.createElement("div", {
        className: "days-title"
      }, titles), /*#__PURE__*/React.createElement("div", {
        className: "days",
        onClick: this.cellClick.bind(this)
      }, days));
    }
  }]);

  return DayView;
}(React.Component);

export { DayView as default };