@alifd/meet-react/es/calendar/content.js

Fusion Mobile React UI System Component

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import classNames from 'classnames';
import dayjs from 'dayjs';
import React, { createElement, Fragment } from "react";
import { Text } from "@alifd/meet-react-component-one";
import View from '../view';
import { getCellStatus, getDateCellStatus, getCurrentMonthList, getDayList, getMonthList, isHaveDate } from './utils';
import { CellStatusType } from './types';
var YEAR_ROW_CELLS = 3;
var MONTH_ROW_CELLS = 7;
var CalendarContent = function CalendarContent(props) {
  var selectedDate = props.selectedDate,
    visibleDate = props.visibleDate,
    mode = props.mode,
    type = props.type,
    maxDate = props.maxDate,
    minDate = props.minDate,
    _props$onDateChange = props.onDateChange,
    onDateChange = _props$onDateChange === void 0 ? function () {} : _props$onDateChange,
    disabledDate = props.disabledDate,
    enableTimePicker = props.enableTimePicker,
    locale = props.locale,
    prefix = props.prefix,
    renderCellBottom = props.renderCellBottom,
    renderCellRight = props.renderCellRight,
    dateCellRender = props.dateCellRender,
    monthCellRender = props.monthCellRender,
    _props$firstDay = props.firstDay,
    firstDay = _props$firstDay === void 0 ? 0 : _props$firstDay;
  var onItemClick = function onItemClick(newDate) {
    if (!newDate) {
      return;
    }
    if (type === 'multi') {
      if (!Array.isArray(selectedDate)) {
        if (onDateChange) {
          onDateChange([newDate], newDate);
        }
        return;
      }
      var vIndex = isHaveDate(newDate, selectedDate);
      if (vIndex === -1) {
        selectedDate.push(newDate);
        if (onDateChange) {
          onDateChange(selectedDate, newDate);
        }
        return;
      }
      selectedDate.splice(vIndex, 1);
      if (onDateChange) {
        onDateChange(selectedDate, newDate);
      }
      return;
    }
    if (type === 'range') {
      if (!Array.isArray(selectedDate)) {
        return;
      }
      if (selectedDate.length === 0) {
        if (onDateChange) {
          onDateChange([newDate], newDate);
        }
        return;
      }
      if (selectedDate.length === 2) {
        if (onDateChange) {
          onDateChange([newDate], newDate);
        }
        return;
      }
      if (newDate.getTime() < selectedDate[0].getTime()) {
        if (onDateChange) {
          onDateChange([newDate, selectedDate[0]], newDate);
        }
        return;
      }
      if (onDateChange) {
        onDateChange([selectedDate[0], newDate], newDate);
      }
      return;
    }
    if (onDateChange) {
      onDateChange(newDate, newDate);
    }
    return;
  };
  var renderTopArea = function renderTopArea() {
    if (mode === 'year') {
      return null;
    }
    var headPrefix = "".concat(prefix, "calendar-content-top");
    var weeks = getDayList(locale);
    var tops = [];
    for (var i = 0; i < weeks.length; i++) {
      var index = firstDay + i > 6 ? firstDay + i - 7 : firstDay + i;
      if (!weeks[index]) {
        continue;
      }
      tops.push( /*#__PURE__*/React.createElement(Text, {
        className: "".concat(headPrefix, "-item"),
        key: "".concat(headPrefix, "-item-").concat(weeks[index].value)
      }, weeks[index].label));
    }
    return /*#__PURE__*/React.createElement(View, {
      className: "".concat(headPrefix)
    }, tops);
  };
  var renderYearContent = function renderYearContent() {
    var totalMonths = getMonthList(visibleDate, locale);
    var rowCount = totalMonths.length / YEAR_ROW_CELLS;
    var rows = [];
    for (var i = 0; i < rowCount; i++) {
      var datas = totalMonths.slice(i * YEAR_ROW_CELLS, (i + 1) * YEAR_ROW_CELLS);
      rows.push(renderRow(datas, i === 0 ? true : false, i));
    }
    var headPrefix = "".concat(prefix, "calendar-content-real");
    return /*#__PURE__*/React.createElement(View, {
      className: classNames("".concat(headPrefix), "".concat(headPrefix, "-year"))
    }, rows);
  };
  var renderYearCell = function renderYearCell(cellDate, isFirstLine) {
    var cellType = getCellStatus(cellDate && cellDate.value, selectedDate, mode, type, disabledDate, maxDate, minDate, 'year');
    var cellPrefix = "".concat(prefix, "calendar-cell");
    if (cellType === CellStatusType.begin) {
      if (Object.prototype.toString.call(selectedDate) === '[object Array]') {
        if (selectedDate.length === 1) {
          cellType = CellStatusType.selected;
        }
      }
    }
    return /*#__PURE__*/React.createElement(View, {
      key: cellDate && cellDate.label,
      className: classNames(cellPrefix, "".concat(cellPrefix, "-").concat(mode), _defineProperty(_defineProperty({}, "".concat(cellPrefix, "-").concat(mode, "-").concat(cellType), isFirstLine === false), "".concat(cellPrefix, "-").concat(mode, "-firstline-").concat(cellType), isFirstLine === true)),
      onClick: function onClick() {
        if (cellType === CellStatusType.disabled) {
          return;
        }
        if (onItemClick) {
          onItemClick(cellDate && cellDate.value);
        }
      }
    }, /*#__PURE__*/React.createElement(Text, {
      className: classNames("".concat(cellPrefix, "-").concat(mode, "-text-").concat(cellType))
    }, cellDate && cellDate.label));
  };
  var renderDateCell = function renderDateCell(cellDate, rowPrefix, rowCount, cellPrefix, cellType, realDisable) {
    return /*#__PURE__*/React.createElement(View, {
      key: "date-cell-".concat(cellDate.label),
      className: classNames("".concat(cellPrefix).concat(rowPrefix), "".concat(cellPrefix, "-").concat(mode), _defineProperty({}, "".concat(cellPrefix, "-").concat(mode, "--short"), rowCount === 6)),
      onClick: function onClick() {
        if (realDisable) {
          return;
        }
        if (onItemClick) {
          onItemClick(cellDate && cellDate.value);
        }
      }
    }, /*#__PURE__*/React.createElement(View, {
      className: classNames("".concat(cellPrefix, "-left-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-left-").concat(cellType))
    }), /*#__PURE__*/React.createElement(View, {
      className: classNames("".concat(cellPrefix, "-right-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-right-").concat(cellType))
    }), /*#__PURE__*/React.createElement(Text, {
      className: classNames("".concat(cellPrefix, "-text"), "".concat(cellPrefix, "-text-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-text-").concat(cellType), _defineProperty({}, "".concat(cellPrefix, "-text--short"), rowCount === 6))
    }, cellDate && cellDate.label), renderCellBottom ? /*#__PURE__*/React.createElement(View, {
      className: classNames("".concat(cellPrefix, "-contain-bottom-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-contain-bottom-").concat(cellType))
    }, renderCellBottom(cellDate && cellDate.value)) : null, renderCellRight ? /*#__PURE__*/React.createElement(View, {
      className: classNames("".concat(cellPrefix, "-contain-right-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-contain-right-").concat(cellType))
    }, renderCellRight(cellDate && cellDate.value)) : null);
  };
  var renderDateContent = function renderDateContent(cells, datas, i, firstLine, rowCount) {
    var cellPrefix = "".concat(prefix, "calendar-cell");
    var _getDateCellStatus = getDateCellStatus({
        cellDate: datas[i],
        selectedDate: selectedDate,
        mode: mode,
        type: type,
        disabledDate: disabledDate,
        maxDate: maxDate,
        minDate: minDate,
        visibleDate: visibleDate
      }),
      _getDateCellStatus2 = _slicedToArray(_getDateCellStatus, 2),
      cellType = _getDateCellStatus2[0],
      realDisable = _getDateCellStatus2[1];
    var rowPrefix = '';
    var rowBegin = i === 0;
    var rowEnd = i === datas.length - 1;
    if (rowBegin) {
      rowPrefix = '-row-begin';
    }
    if (rowEnd) {
      rowPrefix = '-row-end';
    }
    var dateCellClassName = {
      cell: classNames("".concat(cellPrefix).concat(rowPrefix), "".concat(cellPrefix, "-").concat(mode), _defineProperty({}, "".concat(cellPrefix, "-").concat(mode, "--short"), rowCount === 6)),
      cellLeft: classNames("".concat(cellPrefix, "-left-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-left-").concat(cellType)),
      cellRight: classNames("".concat(cellPrefix, "-right-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-right-").concat(cellType)),
      cellLabel: classNames("".concat(cellPrefix, "-text"), "".concat(cellPrefix, "-text-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-text-").concat(cellType), _defineProperty({}, "".concat(cellPrefix, "-text--short"), rowCount === 6)),
      containRight: classNames("".concat(cellPrefix, "-contain-right-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-contain-right-").concat(cellType)),
      containBottom: classNames("".concat(cellPrefix, "-contain-bottom-").concat(cellType), "".concat(cellPrefix).concat(rowPrefix, "-contain-bottom-").concat(cellType))
    };
    var dateCellContext = {
      firstLine: firstLine,
      rowCount: rowCount,
      cellType: cellType,
      disabled: realDisable
    };
    if (dateCellRender) {
      cells.push( /*#__PURE__*/React.createElement(Fragment, {
        key: i
      }, dateCellRender(datas[i] && datas[i].value, {
        dateCellClassName: dateCellClassName,
        onClick: function onClick() {
          return onItemClick(datas[i] && datas[i].value);
        },
        defaultDateCell: renderDateCell(datas[i], rowPrefix, rowCount, cellPrefix, cellType, realDisable),
        context: dateCellContext
      })));
    } else {
      cells.push(renderDateCell(datas[i], rowPrefix, rowCount, cellPrefix, cellType, realDisable));
    }
  };
  var renderRow = function renderRow() {
    var datas = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
    var firstLine = arguments.length > 1 ? arguments[1] : undefined;
    var key = arguments.length > 2 ? arguments[2] : undefined;
    var rowCount = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 5;
    var cells = [];
    for (var i = 0; i < datas.length; i++) {
      if (!datas[i]) {
        continue;
      }
      if (mode === 'year') {
        if (monthCellRender) {
          cells.push( /*#__PURE__*/React.createElement(Fragment, {
            key: i
          }, monthCellRender(datas[i] && datas[i].value)));
        } else {
          cells.push( /*#__PURE__*/React.createElement(Fragment, {
            key: i
          }, renderYearCell(datas[i], firstLine)));
        }
      } else {
        renderDateContent(cells, datas, i, firstLine, rowCount);
      }
    }
    var headPrefix = "".concat(prefix, "calendar-content-row");
    return /*#__PURE__*/React.createElement(View, {
      key: "".concat(headPrefix, "-").concat(mode, "-").concat(key),
      className: classNames("".concat(headPrefix), "".concat(headPrefix, "-").concat(mode), _defineProperty({}, "".concat(headPrefix, "--short"), rowCount === 6))
    }, cells);
  };
  var renderMonthContent = function renderMonthContent() {
    var totalDays = getCurrentMonthList(visibleDate, locale);
    var rowCount = totalDays.length / MONTH_ROW_CELLS;
    var rows = [];
    for (var i = 0; i < rowCount; i++) {
      var datas = totalDays.slice(i * MONTH_ROW_CELLS, (i + 1) * MONTH_ROW_CELLS);
      rows.push(renderRow(datas, i === 0 ? true : false, i, rowCount));
    }
    var headPrefix = "".concat(prefix, "calendar-content-real");
    return /*#__PURE__*/React.createElement(View, {
      className: classNames("".concat(headPrefix), "".concat(headPrefix, "-month"))
    }, rows);
  };
  var renderWeekContent = function renderWeekContent() {
    var rows = [];
    var fD = dayjs(visibleDate).day(firstDay);
    var datas = new Array(7).fill(0).map(function (key, index) {
      var day = fD.add(index, 'day');
      return {
        label: day.date().toString(),
        value: new Date(day.valueOf())
      };
    });
    rows.push(renderRow(datas, true, 0));
    var headPrefix = "".concat(prefix, "calendar-content-real");
    return /*#__PURE__*/React.createElement(View, {
      className: classNames("".concat(headPrefix), "".concat(headPrefix, "-week"))
    }, rows);
  };
  var renRealContent = function renRealContent() {
    var rContent = null;
    switch (mode) {
      case 'year':
        rContent = renderYearContent();
        break;
      case 'week':
        rContent = renderWeekContent();
        break;
      case 'month':
      default:
        rContent = renderMonthContent();
        break;
    }
    return rContent;
  };
  var top = renderTopArea();
  var content = renRealContent();
  return /*#__PURE__*/React.createElement(View, {
    className: classNames("".concat(prefix, "calendar-content"), "".concat(prefix, "calendar-content-").concat(mode), _defineProperty({}, "".concat(prefix, "calendar-content--no-bottom"), enableTimePicker))
  }, top, content);
};
export default CalendarContent;