zarm/es/calendar/Month.js

基于 React 的移动端UI库

import _typeof from "@babel/runtime/helpers/typeof";
import { createBEM } from '@zarm-design/bem';
import dayjs from 'dayjs';
import React, { forwardRef, isValidElement, useCallback, useContext, useImperativeHandle, useRef } from 'react';
import { ConfigContext } from '../config-provider';
var CalendarMonthView = /*#__PURE__*/forwardRef(function (props, ref) {
  var _globalLocal$Calendar;

  var dateRender = props.dateRender,
      min = props.min,
      max = props.max,
      disabledDate = props.disabledDate,
      onDateClick = props.onDateClick,
      dateMonth = props.dateMonth,
      value = props.value,
      mode = props.mode;

  var _useContext = useContext(ConfigContext),
      prefixCls = _useContext.prefixCls,
      globalLocal = _useContext.locale;

  var weekStartsOn = globalLocal === null || globalLocal === void 0 ? void 0 : globalLocal.Calendar.weekStartsOn;
  var bem = createBEM('calendar', {
    prefixCls: prefixCls
  });
  var monthRef = useRef();
  var isDisabled = useCallback(function (date) {
    return dayjs(date).isBefore(dayjs(min), 'day') || dayjs(date).isAfter(dayjs(max), 'day') || typeof disabledDate === 'function' && disabledDate(date);
  }, [min, max, disabledDate]);
  var isSelected = useCallback(function (date) {
    var currentDate = dayjs(date);
    return mode === 'single' ? value[0] && currentDate.isSame(dayjs(value[0]), 'day') : value.some(function (item) {
      return item ? currentDate.isSame(dayjs(item), 'day') : false;
    });
  }, [mode, value]);
  var range = useCallback(function (date) {
    if (mode !== 'range') {
      return '';
    }

    var currentDate = dayjs(date);
    var start = value[0];
    var end = value[value.length - 1];

    if (currentDate.isAfter(dayjs(start)) && currentDate.isBefore(dayjs(end))) {
      return 'range';
    }

    if (value.length > 1 && !dayjs(start).isSame(dayjs(end))) {
      if (currentDate.isSame(dayjs(start), 'day') && start) {
        return 'start';
      }

      if (currentDate.isSame(dayjs(end), 'day') && end) {
        return 'end';
      }
    }

    return '';
  }, [mode, value]);
  var hanlerDateClick = useCallback(function (date) {
    if (!isDisabled(date) && typeof onDateClick === 'function') {
      onDateClick(date);
    }
  }, [onDateClick]);

  var renderDay = function renderDay(day, year, month, firstDay) {
    var date = new Date(year, month, day);
    var dayjsDate = dayjs(date);
    var isToday = dayjs().isSame(dayjsDate, 'day');
    var text = '';

    if (typeof dateRender === 'function') {
      text = dateRender(date, value);

      if (_typeof(text) === 'object' && ! /*#__PURE__*/isValidElement(text)) {
        console.warn('dateRender函数返回数据类型错误，请返回基本数据类型或者reactNode');
        text = '';
      }
    }

    var style = day === 1 ? {
      marginLeft: "".concat(14.28571 * firstDay, "%")
    } : {};
    var rangeStatus = range(date);
    var className = bem('day', [{
      disabled: isDisabled(date),
      today: isToday,
      selected: isSelected(date) && rangeStatus !== 'range',
      range: rangeStatus === 'range',
      d6: (day + firstDay) % 7 === 0 && !!rangeStatus,
      d7: (day + firstDay) % 7 === 1 && !!rangeStatus,
      start: rangeStatus === 'start',
      end: rangeStatus === 'end',
      last: rangeStatus === 'end' && (day === 1 || (day + firstDay) % 7 === 1),
      first: rangeStatus === 'start' && (dayjsDate.daysInMonth() === day || (day + firstDay) % 7 === 0)
    }]);
    return /*#__PURE__*/React.createElement("li", {
      key: "".concat(year, "-").concat(month, "-").concat(day),
      className: className,
      style: style,
      onClick: function onClick() {
        return hanlerDateClick(date);
      }
    }, text && /*#__PURE__*/React.createElement("div", {
      className: bem('day__content')
    }, text) || '');
  };

  var renderDays = function renderDays(year, month) {
    var date = dayjs().year(year).month(month).date(1);
    var daysInMonth = date.daysInMonth();
    var firstDay = date.day();

    if (weekStartsOn !== 'Sunday') {
      firstDay = firstDay === 0 ? firstDay + 6 : firstDay - 1;
    }

    var days = [];
    var i = 1;

    while (i <= daysInMonth) {
      days.push(renderDay(i, year, month, firstDay));
      i += 1;
    }

    return days;
  };

  useImperativeHandle(ref, function () {
    return {
      el: function el() {
        return monthRef.current;
      }
    };
  });
  var year = dateMonth.getFullYear();
  var month = dateMonth.getMonth();
  var monthKey = "".concat(year, "-").concat(month);
  var title = dayjs().year(year).month(month).format(globalLocal === null || globalLocal === void 0 ? void 0 : (_globalLocal$Calendar = globalLocal.Calendar) === null || _globalLocal$Calendar === void 0 ? void 0 : _globalLocal$Calendar.yearMonthFormat);
  return /*#__PURE__*/React.createElement("div", {
    key: monthKey,
    className: bem('month__wrapper'),
    ref: monthRef,
    title: title
  }, /*#__PURE__*/React.createElement("div", {
    className: bem('month')
  }, title), /*#__PURE__*/React.createElement("ul", null, renderDays(year, month)));
});
CalendarMonthView.defaultProps = {
  value: [],
  dateMonth: new Date(),
  min: new Date(),
  max: new Date(),
  dateRender: function dateRender(date) {
    return date.getDate();
  },
  disabledDate: function disabledDate() {
    return false;
  }
};
export default /*#__PURE__*/React.memo(CalendarMonthView);