@6thquake/react-material/Picker/CalendarPicker.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _compose = _interopRequireDefault(require("recompose/compose"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _moment = _interopRequireDefault(require("moment"));

var _pickers = require("@material-ui/pickers");

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _LocaleProvider = require("../LocaleProvider");

/**
 * @ignore - do not document.
 */
var sort = function sort(_ref) {
  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
      a = _ref2[0],
      b = _ref2[1];

  if (!(a && b)) {
    return [a, b];
  }

  if (b.isBefore(a)) {
    return [b, a];
  }

  return [a, b];
};

var isWithinRange = function isWithinRange(day, _ref3) {
  var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
      min = _ref4[0],
      max = _ref4[1];

  max = max || min;
  var isAfterMin = day.diff(min) >= 0;
  var isBeforeMax = day.diff(max) <= 0;
  return isAfterMin && isBeforeMax;
};

var CalendarPicker = _react.default.forwardRef(function CalendarPicker(props, ref) {
  var classNamePro = props.className,
      classes = props.classes,
      value = props.value,
      onChange = props.onChange,
      other = (0, _objectWithoutProperties2.default)(props, ["className", "classes", "value", "onChange"]);
  var className = (0, _classnames.default)(classNamePro);
  var classesPro = (0, _extends2.default)({}, classes);

  var _ref5 = value || {},
      startDate = _ref5.start,
      endDate = _ref5.end;

  var _useState = (0, _react.useState)(null),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      preBegin = _useState2[0],
      setPreBegin = _useState2[1];

  var _useState3 = (0, _react.useState)(null),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      preEnd = _useState4[0],
      setPreEnd = _useState4[1];

  var _useState5 = (0, _react.useState)((0, _moment.default)(startDate)),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      begin = _useState6[0],
      setBegin = _useState6[1];

  var _useState7 = (0, _react.useState)((0, _moment.default)(endDate)),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      end = _useState8[0],
      setEnd = _useState8[1];

  var utils = (0, _react.useContext)(_pickers.MuiPickersContext);

  if (preBegin !== startDate) {
    setPreBegin(startDate);
    setBegin((0, _moment.default)(startDate));
  }

  if (preEnd !== endDate) {
    setPreEnd(endDate);
    setEnd((0, _moment.default)(endDate));
  }

  var _sort = sort([begin, end]),
      _sort2 = (0, _slicedToArray2.default)(_sort, 2),
      min = _sort2[0],
      max = _sort2[1];

  function renderDay(day, selectedDate, dayInCurrentMonth, dayComponent) {
    var _classNames;

    return _react.default.cloneElement(dayComponent, {
      onClick: function onClick(e) {
        e.stopPropagation();

        if (!begin) {
          setBegin(day);
        } else if (!end) {
          setEnd(day);
          var days = sort([begin, day]).map(function (item) {
            return item.format('YYYY-MM-DD');
          });

          var _days = (0, _slicedToArray2.default)(days, 2),
              start = _days[0],
              _end = _days[1];

          onChange({
            start: start,
            end: _end
          });
        } else {
          setBegin(day);
          setEnd(undefined);
        }
      },
      // onMouseEnter: e => setHover(day),
      className: (0, _classnames.default)(classes.day, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.hidden, dayComponent.props.hidden), (0, _defineProperty2.default)(_classNames, classes.current, dayComponent.props.current), (0, _defineProperty2.default)(_classNames, classes.dayDisabled, dayComponent.props.disabled), (0, _defineProperty2.default)(_classNames, classes.daySelected, isWithinRange(day, [min, max])), (0, _defineProperty2.default)(_classNames, classes.beginCap, utils.isSameDay(day, min)), (0, _defineProperty2.default)(_classNames, classes.endCap, utils.isSameDay(day, max)), _classNames))
    });
  }

  return _react.default.createElement(_pickers.Calendar, (0, _extends2.default)({
    date: begin,
    renderDay: renderDay,
    classes: classesPro,
    className: className,
    ref: ref
  }, other));
});

var styles = function styles(theme) {
  var base = {
    day: {
      width: 36,
      height: 36,
      fontSize: theme.typography.caption.fontSize,
      margin: '0 2px',
      color: theme.palette.text.primary,
      fontWeight: theme.typography.fontWeightMedium,
      padding: 0
    },
    hidden: {
      opacity: 0,
      pointerEvents: 'none'
    },
    current: {
      color: theme.palette.primary.main,
      fontWeight: 600
    },
    daySelected: {
      color: theme.palette.primary.contrastText,
      backgroundColor: theme.palette.primary.main,
      fontWeight: theme.typography.fontWeightMedium,
      '&:hover': {
        backgroundColor: theme.palette.primary.main
      }
    },
    dayDisabled: {
      pointerEvents: 'none',
      color: theme.palette.text.hint
    }
  };
  return (0, _extends2.default)({}, base, {
    day: (0, _extends2.default)({}, base.day, {
      margin: 0,
      width: 40,
      borderRadius: '0'
    }),
    beginCap: {
      borderTopLeftRadius: '50%',
      borderBottomLeftRadius: '50%'
    },
    endCap: {
      borderTopRightRadius: '50%',
      borderBottomRightRadius: '50%'
    }
  });
};

exports.styles = styles;
CalendarPicker.propTypes = {
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: _propTypes.default.object,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * Calendar onChange
   */
  onChange: _propTypes.default.func,

  /**
   * the start date and end date of calendar
   */
  value: _propTypes.default.shape({
    end: _propTypes.default.string,
    start: _propTypes.default.string
  })
};
CalendarPicker.defaultProps = {
  onChange: function onChange() {}
};

var _default = (0, _compose.default)((0, _LocaleProvider.withLocale)({
  name: 'CalendarPicker'
}), (0, _withStyles.default)(styles, {
  name: 'CalendarPicker'
}))(CalendarPicker);

exports.default = _default;