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

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _react = _interopRequireWildcard(require("react"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _utils = require("./utils");
var _types = require("./types");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var YEAR_ROW_CELLS = 3;
var MONTH_ROW_CELLS = 7;
var CalendarContent = function (props) {
  var _classNames7;
  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 (newDate) {
    if (!newDate) {
      return;
    }
    if (type === 'multi') {
      if (!Array.isArray(selectedDate)) {
        if (onDateChange) {
          onDateChange([newDate], newDate);
        }
        return;
      }
      var vIndex = (0, _utils.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);
    }
  };
  var renderYearContent = function () {
    var totalMonths = (0, _utils.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 = prefix + "calendar-content-real";
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)("" + headPrefix, headPrefix + "-year")
    }, rows);
  };
  var renderYearCell = function (cellDate, isFirstLine) {
    var _classNames;
    var cellType = (0, _utils.getCellStatus)(cellDate && cellDate.value, selectedDate, mode, type, disabledDate, maxDate, minDate, 'year');
    var cellPrefix = prefix + "calendar-cell";
    if (cellType === _types.CellStatusType.begin) {
      if (Object.prototype.toString.call(selectedDate) === '[object Array]') {
        if (selectedDate.length === 1) {
          cellType = _types.CellStatusType.selected;
        }
      }
    }
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      key: cellDate && cellDate.label,
      className: (0, _classnames.default)(cellPrefix, cellPrefix + "-" + mode, (_classNames = {}, _classNames[cellPrefix + "-" + mode + "-" + cellType] = isFirstLine === false, _classNames[cellPrefix + "-" + mode + "-firstline-" + cellType] = isFirstLine === true, _classNames)),
      onClick: function onClick() {
        if (cellType === _types.CellStatusType.disabled) {
          return;
        }
        if (onItemClick) {
          onItemClick(cellDate && cellDate.value);
        }
      }
    }, /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
      className: (0, _classnames.default)(cellPrefix + "-" + mode + "-text-" + cellType)
    }, cellDate && cellDate.label));
  };
  var renderDateCell = function (cellDate, rowPrefix, rowCount, cellPrefix, cellType, realDisable) {
    var _classNames2, _classNames3;
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      key: "date-cell-" + cellDate.label,
      className: (0, _classnames.default)("" + cellPrefix + rowPrefix, cellPrefix + "-" + mode, (_classNames2 = {}, _classNames2[cellPrefix + "-" + mode + "--short"] = rowCount === 6, _classNames2)),
      onClick: function onClick() {
        if (realDisable) {
          return;
        }
        if (onItemClick) {
          onItemClick(cellDate && cellDate.value);
        }
      }
    }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)(cellPrefix + "-left-" + cellType, "" + cellPrefix + rowPrefix + "-left-" + cellType)
    }), /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)(cellPrefix + "-right-" + cellType, "" + cellPrefix + rowPrefix + "-right-" + cellType)
    }), /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
      className: (0, _classnames.default)(cellPrefix + "-text", cellPrefix + "-text-" + cellType, "" + cellPrefix + rowPrefix + "-text-" + cellType, (_classNames3 = {}, _classNames3[cellPrefix + "-text--short"] = rowCount === 6, _classNames3))
    }, cellDate && cellDate.label), renderCellBottom ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)(cellPrefix + "-contain-bottom-" + cellType, "" + cellPrefix + rowPrefix + "-contain-bottom-" + cellType)
    }, renderCellBottom(cellDate && cellDate.value)) : null, renderCellRight ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)(cellPrefix + "-contain-right-" + cellType, "" + cellPrefix + rowPrefix + "-contain-right-" + cellType)
    }, renderCellRight(cellDate && cellDate.value)) : null);
  };
  var renderDateContent = function (cells, datas, i, firstLine, rowCount) {
    var _classNames4, _classNames5;
    var cellPrefix = prefix + "calendar-cell";
    var _getDateCellStatus = (0, _utils.getDateCellStatus)({
        cellDate: datas[i],
        selectedDate: selectedDate,
        mode: mode,
        type: type,
        disabledDate: disabledDate,
        maxDate: maxDate,
        minDate: minDate,
        visibleDate: visibleDate
      }),
      cellType = _getDateCellStatus[0],
      realDisable = _getDateCellStatus[1];
    var rowPrefix = '';
    var rowEnd = i === datas.length - 1;
    if (i === 0) {
      rowPrefix = '-row-begin';
    }
    if (rowEnd) {
      rowPrefix = '-row-end';
    }
    var dateCellClassName = {
      cell: (0, _classnames.default)("" + cellPrefix + rowPrefix, cellPrefix + "-" + mode, (_classNames4 = {}, _classNames4[cellPrefix + "-" + mode + "--short"] = rowCount === 6, _classNames4)),
      cellLeft: (0, _classnames.default)(cellPrefix + "-left-" + cellType, "" + cellPrefix + rowPrefix + "-left-" + cellType),
      cellRight: (0, _classnames.default)(cellPrefix + "-right-" + cellType, "" + cellPrefix + rowPrefix + "-right-" + cellType),
      cellLabel: (0, _classnames.default)(cellPrefix + "-text", cellPrefix + "-text-" + cellType, "" + cellPrefix + rowPrefix + "-text-" + cellType, (_classNames5 = {}, _classNames5[cellPrefix + "-text--short"] = rowCount === 6, _classNames5)),
      containRight: (0, _classnames.default)(cellPrefix + "-contain-right-" + cellType, "" + cellPrefix + rowPrefix + "-contain-right-" + cellType),
      containBottom: (0, _classnames.default)(cellPrefix + "-contain-bottom-" + cellType, "" + cellPrefix + rowPrefix + "-contain-bottom-" + cellType)
    };
    if (dateCellRender) {
      cells.push( /*#__PURE__*/(0, _react.createElement)(_react.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: {
          firstLine: firstLine,
          rowCount: rowCount,
          cellType: cellType,
          disabled: realDisable
        }
      })));
    } else {
      cells.push(renderDateCell(datas[i], rowPrefix, rowCount, cellPrefix, cellType, realDisable));
    }
  };
  var renderRow = function (datas, firstLine, key, rowCount) {
    var _classNames6;
    if (datas === void 0) {
      datas = [];
    }
    if (rowCount === void 0) {
      rowCount = 5;
    }
    var cells = [];
    for (var i = 0; i < datas.length; i++) {
      if (!datas[i]) {
        continue;
      }
      if (mode === 'year') {
        if (monthCellRender) {
          cells.push( /*#__PURE__*/(0, _react.createElement)(_react.Fragment, {
            key: i
          }, monthCellRender(datas[i] && datas[i].value)));
        } else {
          cells.push( /*#__PURE__*/(0, _react.createElement)(_react.Fragment, {
            key: i
          }, renderYearCell(datas[i], firstLine)));
        }
      } else {
        renderDateContent(cells, datas, i, firstLine, rowCount);
      }
    }
    var headPrefix = prefix + "calendar-content-row";
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      key: headPrefix + "-" + mode + "-" + key,
      className: (0, _classnames.default)("" + headPrefix, headPrefix + "-" + mode, (_classNames6 = {}, _classNames6[headPrefix + "--short"] = rowCount === 6, _classNames6))
    }, cells);
  };
  var renderMonthContent = function () {
    var totalDays = (0, _utils.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 = prefix + "calendar-content-real";
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)("" + headPrefix, headPrefix + "-month")
    }, rows);
  };
  var renderWeekContent = function () {
    var rows = [];
    var fD = (0, _dayjs.default)(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 = prefix + "calendar-content-real";
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)("" + headPrefix, headPrefix + "-week")
    }, rows);
  };
  var top = function renderTopArea() {
    if (mode === 'year') {
      return null;
    }
    var headPrefix = prefix + "calendar-content-top";
    var weeks = (0, _utils.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__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
        className: headPrefix + "-item",
        key: headPrefix + "-item-" + weeks[index].value
      }, weeks[index].label));
    }
    return /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: "" + headPrefix
    }, tops);
  }();
  var content = 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;
  }();
  return /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: (0, _classnames.default)(prefix + "calendar-content", prefix + "calendar-content-" + mode, (_classNames7 = {}, _classNames7[prefix + "calendar-content--no-bottom"] = enableTimePicker, _classNames7))
  }, top, content);
};
var _default = exports.default = CalendarContent;