@vnmfify/core/calendar/calendar-month.js

```shell npm i @vnmfify/core -S ```

import _map from "lodash/map";
import _some from "lodash/some";
import { View } from "@vnxjs/components";
import { nextTick } from "@vnxjs/vnmf";
import * as React from "react";
import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef } from "react";
import { prefixClassname } from "../styles";
import { getRect } from "../utils/dom/rect";
import { usePrevious } from "../utils/state";
import CalendarDay from "./calendar-day";
import CalendarContext from "./calendar.context";
import { compareDate, createNextDay, createPreviousDay, getEndDayOfMonth } from "./calendar.shared";

function CalendarMonthWatermark(props) {
  var {
    children
  } = props;
  return /*#__PURE__*/React.createElement(View, {
    className: prefixClassname("calendar__month-watermark"),
    children: children
  });
}

function getBottom(type, dayType) {
  if (type === "range") {
    if (dayType === "start") {
      return "Here we go.";
    }

    if (dayType === "end") {
      return "End";
    }

    if (dayType === "active") {
      return "Here we go./End";
    }
  }
}

var CalendarMonth = /*#__PURE__*/forwardRef((props, ref) => {
  var {
    value: monthValue = new Date(),
    watermark,
    top
  } = props;
  var {
    type,
    firstDayOfWeek,
    min,
    max,
    value: currentValue,
    subtitle,
    formatter
  } = useContext(CalendarContext);
  var previousTop = usePrevious(top);
  var previousSubtitle = usePrevious(subtitle);
  var monthRef = useRef();
  var daysRef = useRef();
  var heightRef = useRef(0);
  var month = useMemo(() => monthValue.getMonth() + 1, [monthValue]);
  var title = useMemo(() => "".concat(monthValue.getMonth() + 1, "/").concat(monthValue.getFullYear()), [monthValue]);
  var offset = useMemo(() => {
    var realDay = monthValue.getDay();

    if (firstDayOfWeek) {
      return (realDay + 7 - firstDayOfWeek) % 7;
    }

    return realDay;
  }, [firstDayOfWeek, monthValue]);
  var totalDay = useMemo(() => getEndDayOfMonth(monthValue.getFullYear(), monthValue.getMonth() + 1), [monthValue]);
  var getMultipleDayType = useCallback(day => {
    var isActive = date => _some(currentValue, item => compareDate(item, date) === 0);

    if (isActive(day)) {
      var prevDay = createPreviousDay(day);
      var nextDay = createNextDay(day);
      var prevActive = isActive(prevDay);
      var nextActive = isActive(nextDay);

      if (prevActive && nextActive) {
        return "middle";
      }

      if (prevActive) {
        return "end";
      }

      if (nextActive) {
        return "start";
      }

      return "active";
    }

    return "";
  }, [currentValue]);
  var getRangeDayType = useCallback(day => {
    var [startDay, endDay] = currentValue;

    if (!startDay) {
      return "";
    }

    var compareToStart = compareDate(day, startDay);

    if (!endDay) {
      return compareToStart === 0 ? "start" : "";
    }

    var compareToEnd = compareDate(day, endDay);

    if (compareToStart === 0 && compareToEnd === 0) {
      return "active";
    }

    if (compareToStart === 0) {
      return "start";
    }

    if (compareToEnd === 0) {
      return "end";
    }

    if (compareToStart > 0 && compareToEnd < 0) {
      return "middle";
    }

    return "";
  }, [currentValue]);
  var getDayType = useCallback(dayValue => {
    if (compareDate(dayValue, min) < 0 || compareDate(dayValue, max) > 0) {
      return "disabled";
    }

    if (Array.isArray(currentValue)) {
      if (type === "multiple") {
        return getMultipleDayType(dayValue);
      }

      if (type === "range") {
        return getRangeDayType(dayValue);
      }
    } else if (type === "single") {
      return compareDate(dayValue, currentValue) === 0 ? "active" : "";
    }

    return "";
  }, [currentValue, getMultipleDayType, getRangeDayType, max, min, type]);
  var days = useMemo(() => {
    var days = [];
    var year = monthValue === null || monthValue === void 0 ? void 0 : monthValue.getFullYear();
    var month = monthValue === null || monthValue === void 0 ? void 0 : monthValue.getMonth();

    for (var dayValue = 1; dayValue <= totalDay; dayValue++) {
      var dateValue = new Date(year, month, dayValue);
      var dayType = getDayType(dateValue);
      var oldDay = {
        value: dateValue,
        type: dayType,
        bottom: getBottom(type, dayType),
        children: dayValue
      };
      var newDay = formatter ? formatter(oldDay) : oldDay;
      days.push(newDay);
    }

    return days;
  }, [monthValue, totalDay, getDayType, type, formatter]);
  var disabledDays = useMemo(() => days.filter(day => day.type === "disabled"), [days]);
  var getScrollTop = useCallback(subtitle => {
    return getRect(subtitle ? daysRef : monthRef).then(_ref => {
      var {
        top
      } = _ref;
      return top;
    });
  }, []);
  useImperativeHandle(ref, () => ({
    getScrollTop,
    disabledDays,
    getHeight: () => heightRef.current,
    getValue: () => monthValue
  }), [disabledDays, getScrollTop, monthValue]);
  useEffect(() => {
    if (!top || subtitle !== !previousTop || previousSubtitle) {
      nextTick(() => getRect(monthRef).then(_ref2 => {
        var {
          height
        } = _ref2;
        return heightRef.current = height;
      }));
    }
  }, [top, subtitle, previousTop, previousSubtitle]);
  var content = useMemo(() => _map(days, (day, index) => /*#__PURE__*/React.createElement(CalendarDay, {
    key: index,
    className: day.className,
    style: {
      marginLeft: index === 0 ? "".concat(100 * offset / 7, "%") : ""
    },
    value: day.value,
    type: day.type,
    top: day.top,
    bottom: day.bottom,
    children: day.children
  })), [days, offset]);
  return /*#__PURE__*/React.createElement(View, {
    ref: monthRef,
    className: prefixClassname("calendar__month")
  }, (!top || !subtitle) && /*#__PURE__*/React.createElement(View, {
    className: prefixClassname("calendar__month-title"),
    children: title
  }), /*#__PURE__*/React.createElement(View, {
    ref: daysRef,
    className: prefixClassname("calendar__days")
  }, watermark && /*#__PURE__*/React.createElement(CalendarMonthWatermark, {
    children: month
  }), content));
});
export default CalendarMonth;
//# sourceMappingURL=calendar-month.js.map