lucid-ui/lib/components/CalendarMonth/examples/4.select-dates.js

A UI component library from AppNexus.

import _map from "lodash/map";
import _xorWith from "lodash/xorWith";
import React from 'react';
import createClass from 'create-react-class';
import ReactDayPicker from 'react-day-picker';
import { Button } from '../../../index';
import CalendarMonth from '../CalendarMonth';
export default createClass({
  getInitialState: function getInitialState() {
    return {
      offset: 0,
      selectedDays: [],
      cursor: null
    };
  },
  handlePrev: function handlePrev() {
    this.setState({
      offset: this.state.offset - 1
    });
  },
  handleNext: function handleNext() {
    this.setState({
      offset: this.state.offset + 1
    });
  },
  handleDayClick: function handleDayClick(date, _ref) {
    var disabled = _ref.disabled;

    if (disabled) {
      return;
    }

    var selectedDays = this.state.selectedDays;
    this.setState({
      selectedDays: _xorWith(selectedDays, [date], ReactDayPicker.DateUtils.isSameDay),
      cursor: date
    });
  },
  handleDayMouseEnter: function handleDayMouseEnter(day, _ref2) {
    var disabled = _ref2.disabled;

    if (disabled) {
      this.setState({
        cursor: null
      });
    } else {
      this.setState({
        cursor: day
      });
    }
  },
  handleDayMouseLeave: function handleDayMouseLeave() {
    this.setState({
      cursor: null
    });
  },
  render: function render() {
    var _this$state = this.state,
        selectedDays = _this$state.selectedDays,
        cursor = _this$state.cursor,
        offset = _this$state.offset;
    return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        maxWidth: 468
      }
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: this.handlePrev
    }, '<'), /*#__PURE__*/React.createElement(CalendarMonth, {
      monthOffset: offset,
      selectedDays: selectedDays,
      cursor: cursor,
      onDayClick: this.handleDayClick,
      onDayMouseEnter: this.handleDayMouseEnter,
      onDayMouseLeave: this.handleDayMouseLeave,
      disabledDays: ReactDayPicker.DateUtils.isPastDay
    }), /*#__PURE__*/React.createElement(Button, {
      onClick: this.handleNext
    }, '>')), "selectedDays:", ' ', _map(selectedDays, function (selected) {
      return selected.toLocaleDateString('en-US');
    }).join(', '));
  }
});