poi-plugin-senka-calc/views/calendar.js

Ranking point calculator for poi

"use strict";

exports.__esModule = true;
exports.Calender = void 0;

var _react = _interopRequireWildcard(require("react"));

var _core = require("@blueprintjs/core");

var _datetime = require("@blueprintjs/datetime");

var _common = require("./common");

var _reactI18next = require("react-i18next");

var _reactRedux = require("react-redux");

var _selectors = require("../selectors");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _momentTimezone = _interopRequireDefault(require("moment-timezone"));

var _util = require("../lib/util");

var _const = require("../lib/const");

var _selectors2 = require("views/utils/selectors");

var _lodash = require("lodash");

var _classnames = _interopRequireDefault(require("classnames"));

var _rdpModule$default;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Detect v7 vs v8: v7 exposes LocaleUtils as a named export; v8 does not.
const rdpModule = require('react-day-picker');

const isV7 = ('LocaleUtils' in rdpModule); // eslint-disable-next-line @typescript-eslint/no-explicit-any

const DayPickerComponent = isV7 ? (_rdpModule$default = rdpModule.default) !== null && _rdpModule$default !== void 0 ? _rdpModule$default : rdpModule : rdpModule.DayPicker; // v7 only: moment-based locale utils (module doesn't exist in v8)

const MomentLocalUtils = (() => {
  if (!isV7) return null;

  try {
    var _m$default;

    const m = require('react-day-picker/moment');

    return (_m$default = m.default) !== null && _m$default !== void 0 ? _m$default : m;
  } catch {
    return null;
  }
})();

const FullWidth = _styledComponents.default.div.withConfig({
  displayName: "calendar__FullWidth",
  componentId: "sc-1k9bbtx-0"
})(["width:100%;.rdp{--rdp-cell-size:40px !important;}"]);

const BPDatePicker = (0, _styledComponents.default)(FullWidth).withConfig({
  displayName: "calendar__BPDatePicker",
  componentId: "sc-1k9bbtx-1"
})(["background:#FFFFFF20 !important;.bp4-dark &,.bp5-dark &,.bp6-dark &{background:", " !important;}"], _core.Colors.DARK_GRAY3 + '20');
const DayPickerFull = (0, _styledComponents.default)(DayPickerComponent).withConfig({
  displayName: "calendar__DayPickerFull",
  componentId: "sc-1k9bbtx-2"
})(["width:100%;", "{width:calc(100% - 10px);}"], isV7 ? '& .DayPicker-Month' : '& .rdp-month');

const DayContainer = _styledComponents.default.div.withConfig({
  displayName: "calendar__DayContainer",
  componentId: "sc-1k9bbtx-3"
})(["display:flex;flex-direction:column;align-items:center;justify-content:center;"]);

const DateContainer = _styledComponents.default.div.withConfig({
  displayName: "calendar__DateContainer",
  componentId: "sc-1k9bbtx-4"
})(["font-weight:700;"]);

const SenkaContainer = _styledComponents.default.div.withConfig({
  displayName: "calendar__SenkaContainer",
  componentId: "sc-1k9bbtx-5"
})(["font-size:90%;line-height:1;"]);

const getLocale = locale => {
  try {
    require.resolve(`date-fns/locale/${locale}`);

    return require(`date-fns/locale/${locale}`);
  } catch {
    try {
      const baseLocale = locale.split('-')[0];

      require.resolve(`date-fns/locale/${baseLocale}`);

      return require(`date-fns/locale/${baseLocale}`);
    } catch {
      return require('date-fns/locale/en-US');
    }
  }
};

const Calender = () => {
  const {
    t
  } = (0, _reactI18next.useTranslation)('poi-plugin-senka-calc');
  const {
    experienceHistory = {}
  } = (0, _reactRedux.useSelector)(_selectors.pluginDataSelector);
  const config = (0, _reactRedux.useSelector)(_selectors2.configSelector);
  const locale = (0, _lodash.get)(config, 'poi.misc.language', navigator.language);
  const getSenkaByDate = (0, _react.useCallback)(date => {
    if (Object.keys(experienceHistory).length === 0) {
      return 0;
    }

    const firstRecord = parseInt(Object.keys(experienceHistory)[0]);

    const todayRefreshTs = _momentTimezone.default.tz('Asia/Tokyo').startOf('day').add(2, 'hour');

    const now = _momentTimezone.default.tz('Asia/Tokyo');

    const yesterday = _momentTimezone.default.tz('Asia/Tokyo').subtract(1, 'day');

    const isToday = now.isSameOrAfter(todayRefreshTs) && date === now.date() || now.isBefore(todayRefreshTs) && date === yesterday.date();

    if (date > now.date() || date === now.date() && now.isBefore(todayRefreshTs)) {
      return '-';
    }

    let startDateNo = Math.max(firstRecord, (0, _util.getDateNo)(_momentTimezone.default.tz('Asia/Tokyo').date(date).hour(3).toDate()));
    let endDateNo = isToday ? 1000 : Math.max(firstRecord, (0, _util.getDateNo)(_momentTimezone.default.tz('Asia/Tokyo').date(date + 1).hour(3).toDate()));

    while (experienceHistory[startDateNo] == null && startDateNo > firstRecord) {
      startDateNo--;
    }

    while (experienceHistory[endDateNo] == null && endDateNo > firstRecord) {
      endDateNo--;
    }

    const startExperience = experienceHistory[startDateNo] || 0;
    const endExperience = experienceHistory[endDateNo] || 0;
    return (Math.max(0, endExperience - startExperience) * _const.EXPERIENCE_TO_SENKA_RATE).toFixed(1);
  }, [experienceHistory]); // Shared inner content — same markup for both versions

  const renderContent = (0, _react.useCallback)(day => {
    const d = day.getDate();
    return /*#__PURE__*/_react.default.createElement(DayContainer, {
      className: "bp5-datepicker-day-wrapper"
    }, /*#__PURE__*/_react.default.createElement(DateContainer, null, d), /*#__PURE__*/_react.default.createElement(SenkaContainer, null, getSenkaByDate(d)));
  }, [getSenkaByDate]); // v7: renderDay(day: Date)

  const renderDayV7 = (0, _react.useCallback)(day => renderContent(day), [renderContent]); // v8: DayContent({ date: Date })

  const renderDayV8 = (0, _react.useCallback)(({
    date
  }) => renderContent(date), [renderContent]);

  const current = _momentTimezone.default.tz('Asia/Tokyo');

  const startOfSenka = _momentTimezone.default.tz('Asia/Tokyo').startOf('month').add(2, 'hour');

  const representDate = current.isSameOrBefore(startOfSenka) ? current.toDate() : _momentTimezone.default.tz('Asia/Tokyo').subtract(2, 'hour').toDate();
  const v7Props = {
    canChangeMonth: true,
    enableOutsideDaysClick: false,
    localeUtils: MomentLocalUtils,
    locale,
    renderDay: renderDayV7,
    selectedDays: representDate
  };
  const v8Props = {
    disableNavigation: true,
    selected: representDate,
    classNames: {
      button: (0, _classnames.default)(_core.Classes.BUTTON, _core.Classes.MINIMAL)
    },
    mode: 'single',
    locale: getLocale(locale),
    components: {
      DayContent: renderDayV8
    }
  };
  return /*#__PURE__*/_react.default.createElement(_common.Container, null, /*#__PURE__*/_react.default.createElement(_common.Title, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
    icon: "calendar",
    style: {
      paddingRight: 8
    }
  }), t('Calendar')), /*#__PURE__*/_react.default.createElement(BPDatePicker, {
    className: (0, _classnames.default)(_core.Classes.ELEVATION_1, _datetime.Classes.DATEPICKER, 'bp5-datepicker', 'bp5-elevation-1')
  }, /*#__PURE__*/_react.default.createElement(FullWidth, {
    className: (0, _classnames.default)(_datetime.Classes.DATEPICKER_CONTENT, 'bp5-datepicker-content', 'bp5-elevation-1')
  }, /*#__PURE__*/_react.default.createElement(DayPickerFull, isV7 ? v7Props : v8Props))));
};

exports.Calender = Calender;