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

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _classnames = _interopRequireDefault(require("classnames"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _button = _interopRequireDefault(require("../button"));
var _datePicker = require("../date-picker");
var _types = require("./types");
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var formatTitle = function (date, mode) {
  if (!date) {
    return '';
  }
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  if (mode === 'month' || mode === 'week') {
    return (0, _utils.formatNumber)(year) + "." + (0, _utils.formatNumber)(month);
  }
  return (0, _utils.formatNumber)(year);
};
var CalendarHeader = function (props, ref) {
  var _classNames;
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    date = props.date,
    mode = props.mode,
    type = props.type,
    maxDate = props.maxDate,
    minDate = props.minDate,
    _props$enableYearPick = props.enableYearPicker,
    enableYearPickerProp = _props$enableYearPick === void 0 ? false : _props$enableYearPick,
    enableTimePicker = props.enableTimePicker,
    disabledDate = props.disabledDate,
    renderHeadLeft = props.renderHeadLeft,
    renderHeadRight = props.renderHeadRight,
    locale = props.locale,
    _props$onDateChange = props.onDateChange,
    onDateChange = _props$onDateChange === void 0 ? function () {} : _props$onDateChange,
    _props$onModeChange = props.onModeChange,
    onModeChange = _props$onModeChange === void 0 ? function () {} : _props$onModeChange,
    _props$onPickerShow = props.onPickerShow,
    onPickerShow = _props$onPickerShow === void 0 ? function () {} : _props$onPickerShow;
  var _useState = (0, _react.useState)(false),
    showPicker = _useState[0],
    setShowPicker = _useState[1];
  var enableYearPicker = type === _types.HeaderType.select || enableYearPickerProp;
  var datePickerProps = {
    value: date,
    disabledDate: disabledDate,
    onChange: function onChange(v) {
      var d = (0, _dayjs.default)(v);
      var y = d.get('year');
      var m = d.get('month');
      var newDate = (0, _dayjs.default)().year(y).month(m).date(1);
      onDateChange(newDate.toDate(), false, 'picker');
    }
  };
  var clsPrefix = prefix + "calendar";
  var clses = {
    picker: (0, _classnames.default)((_classNames = {}, _classNames[clsPrefix + "-header-picker"] = !enableTimePicker, _classNames[clsPrefix + "-header-picker--with-time"] = enableTimePicker, _classNames))
  };
  var togglePicker = function togglePicker(show) {
    if (!enableYearPicker) {
      return;
    }
    if (showPicker !== show) {
      setShowPicker(show);
      if (onPickerShow) {
        onPickerShow(show);
      }
    }
  };
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      togglePicker: togglePicker
    };
  });
  var handleTogglePicker = function handleTogglePicker() {
    var nextState = !showPicker;
    togglePicker(nextState);
  };
  return type === _types.HeaderType.select ? function renderSelectedHeader() {
    var _classNames2;
    var headPrefix = prefix + "calendar-header";
    return /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)("" + headPrefix, headPrefix + "-select")
    }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: headPrefix + "-select-title-container " + headPrefix + "-select-title-container-" + mode,
      onClick: handleTogglePicker
    }, /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
      className: (0, _classnames.default)(headPrefix + "-select-title", (_classNames2 = {}, _classNames2[headPrefix + "-select-title--highlight"] = showPicker, _classNames2))
    }, (0, _dayjs.default)(date).format(mode === 'year' ? 'YYYY' : 'YYYY.MM')), /*#__PURE__*/(0, _react.createElement)(_icon.default, {
      name: "arrow-down",
      size: "xs",
      className: showPicker ? prefix + "calendar-header-arrow-up" : prefix + "calendar-header-arrow"
    })), /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: headPrefix + "-select-button-container"
    }, /*#__PURE__*/(0, _react.createElement)(_button.default.Group, {
      size: "small"
    }, /*#__PURE__*/(0, _react.createElement)(_button.default, {
      disabled: enableYearPicker && showPicker,
      type: mode === 'month' ? 'primary' : 'normal',
      onClick: function onClick() {
        if (onModeChange) {
          onModeChange('month');
        }
      }
    }, locale && locale.month || '月'), /*#__PURE__*/(0, _react.createElement)(_button.default, {
      disabled: enableYearPicker && showPicker,
      type: mode === 'year' ? 'primary' : 'normal',
      onClick: function onClick() {
        if (onModeChange) {
          onModeChange('year');
        }
      }
    }, locale && locale.year || '年')))), showPicker ? /*#__PURE__*/(0, _react.createElement)(_datePicker.EmbedMonthPicker, _extends({
      className: clses.picker,
      validRange: [minDate, maxDate]
    }, datePickerProps)) : null);
  }() : function renderNormalHeader() {
    var _classNames5, _classNames6, _classNames7, _classNames8;
    var headPrefix = prefix + "calendar-header";
    var leftYearIcon = null;
    var rightYearIcon = null;
    if (!enableYearPickerProp) {
      var _classNames3, _classNames4;
      leftYearIcon = /*#__PURE__*/(0, _react.createElement)(_icon.default, {
        className: (0, _classnames.default)(headPrefix + "-normal-icon double", (_classNames3 = {}, _classNames3[headPrefix + "-normal-icon-disabled"] = showPicker, _classNames3)),
        name: "arrow-double-left",
        onClick: function onClick() {
          if (showPicker) {
            return;
          }
          if (onDateChange) {
            if (mode !== 'week') {
              onDateChange((0, _utils.updateYear)(date, false, maxDate, minDate), false, 'year');
            } else {
              onDateChange((0, _utils.updateMonth)(date, false, maxDate, minDate), false, 'month');
            }
          }
        }
      });
      rightYearIcon = /*#__PURE__*/(0, _react.createElement)(_icon.default, {
        className: (0, _classnames.default)(headPrefix + "-normal-icon double", (_classNames4 = {}, _classNames4[headPrefix + "-normal-icon-disabled"] = showPicker, _classNames4)),
        name: "arrow-double-right",
        onClick: function onClick() {
          if (showPicker) {
            return;
          }
          if (onDateChange) {
            if (mode !== 'week') {
              onDateChange((0, _utils.updateYear)(date, true, maxDate, minDate), true, 'year');
            } else {
              onDateChange((0, _utils.updateMonth)(date, true, maxDate, minDate), true, 'month');
            }
          }
        }
      });
    }
    if (renderHeadLeft) {
      leftYearIcon = renderHeadLeft();
    }
    if (renderHeadRight) {
      rightYearIcon = renderHeadRight();
    }
    return /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: (0, _classnames.default)("" + headPrefix, headPrefix + "-normal", (_classNames5 = {}, _classNames5[headPrefix + "-normal--highlighted"] = showPicker, _classNames5))
    }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: headPrefix + "-normal-left-container"
    }, leftYearIcon, /*#__PURE__*/(0, _react.createElement)(_icon.default, {
      className: (0, _classnames.default)(headPrefix + "-normal-icon", (_classNames6 = {}, _classNames6[headPrefix + "-normal-icon-disabled"] = showPicker, _classNames6[headPrefix + "-normal-icon--only"] = !leftYearIcon, _classNames6)),
      name: "arrow-left",
      onClick: function onClick() {
        if (showPicker) {
          return;
        }
        if (onDateChange) {
          if (mode !== 'week') {
            onDateChange((0, _utils.updateMonth)(date, false, maxDate, minDate), false, 'month');
          } else {
            onDateChange((0, _utils.updateWeek)(date, false, maxDate, minDate), false, 'week');
          }
        }
      }
    })), /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: headPrefix + "-normal-title-text-wrapper",
      onClick: handleTogglePicker
    }, /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
      className: (0, _classnames.default)(headPrefix + "-normal-title-text", (_classNames7 = {}, _classNames7[headPrefix + "-normal-title-text--highlighted"] = showPicker, _classNames7)),
      onClick: function onClick() {}
    }, showPicker ? formatTitle(date, mode) : formatTitle(date, mode)), enableYearPicker ? /*#__PURE__*/(0, _react.createElement)(_icon.default, {
      name: "arrow-down",
      size: "xs",
      className: showPicker ? prefix + "calendar-header-arrow-up" : prefix + "calendar-header-arrow"
    }) : null), /*#__PURE__*/(0, _react.createElement)(_view.default, {
      className: headPrefix + "-normal-right-container"
    }, /*#__PURE__*/(0, _react.createElement)(_icon.default, {
      className: (0, _classnames.default)(headPrefix + "-normal-icon", (_classNames8 = {}, _classNames8[headPrefix + "-normal-icon-disabled"] = showPicker, _classNames8[headPrefix + "-normal-icon--only"] = !rightYearIcon, _classNames8)),
      name: "arrow-right",
      onClick: function onClick() {
        if (showPicker) {
          return;
        }
        if (onDateChange) {
          if (mode !== 'week') {
            onDateChange((0, _utils.updateMonth)(date, true, maxDate, minDate), true, 'month');
          } else {
            onDateChange((0, _utils.updateWeek)(date, true, maxDate, minDate), true, 'week');
          }
        }
      }
    }), rightYearIcon)), showPicker ? /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, mode === 'year' ? /*#__PURE__*/(0, _react.createElement)(_datePicker.EmbedYearPicker, _extends({
      className: clses.picker,
      validRange: [minDate, maxDate]
    }, datePickerProps)) : /*#__PURE__*/(0, _react.createElement)(_datePicker.EmbedMonthPicker, _extends({
      className: clses.picker,
      validRange: [minDate, maxDate]
    }, datePickerProps))) : null);
  }();
};
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(CalendarHeader);