diginet-core-ui 1.4.39 → 1.4.40

package/components/form-control/calendar/function.js

@@ -1,752 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Button, ButtonIcon, Typography } from "../..";
-import { getGlobal } from "../../../global";
-import locale from "../../../locale";
-import { render } from 'react-dom';
-import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, insetX, insetY, itemsCenter, justifyBetween, parseHeight, parseMaxWidth, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, shadowLarge, shadowNone, textCenter, textColor, userSelectNone } from "../../../styles/general";
-import { classNames, getProp, date as moment } from "../../../utils";
-
-/**
- * START STYLE
- */
-
-/**
- *
- * @param {Object} unique
- * @param {Boolean} boxShadow
- * @param onClickActive
- * @returns
- */
-const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true, {
-  colors,
-  spacing,
-  typography
-}) => css`
-    ${displayFlex};
-    ${flexCol};
-    ${boxBorder};
-    ${borderRadius('0px 0px 4px 4px')};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    ${parseWidth('100%')};
-    ${parseMaxWidth(400)};
-    ${boxShadow ? shadowLarge : shadowNone};
-    .${unique.navigator.navigator} {
-        ${displayFlex};
-        ${flexRow};
-        ${justifyBetween};
-        ${itemsCenter};
-        ${parseMaxWidth(400)};
-        margin: ${spacing([4, 4, 0])};
-        gap: ${spacing([8])};
-        .${unique.navigator.around} {
-            ${displayFlex};
-            ${flexRow};
-        }
-        .${unique.navigator.center} {
-            ${displayFlex};
-            ${parseWidth('100%')};
-            button {
-                ${parseMinHeight(28)};
-                height: 28px;
-                &:hover {
-                    ${borderRadius(20)};
-                    ${bgColor(getProp(colors, 'fill/hover'))};
-                }
-                &:active {
-                    ${bgColor(getProp(colors, 'fill/pressed'))};
-                }
-            }
-        }
-    }
-    .${unique.table.container} {
-        ${displayFlex};
-        ${flexRow};
-        margin: ${spacing([2, 0, 4])};
-    }
-    .${unique.table.table} {
-        margin: ${spacing([0, 4])};
-        ${parseWidth('100%')};
-        border-collapse: separate;
-        table-layout: fixed;
-        .${unique.table.data} {
-            &:not(.empty) {
-                ${cursorPointer};
-                ${positionRelative};
-                ${textCenter};
-                ${userSelectNone};
-                ${textColor(getProp(colors, 'text/main'))};
-                &:nth-of-type(7n - 1) {
-                    ${textColor(getProp(colors, 'semantic/info'))};
-                }
-                &:nth-of-type(7n) {
-                    ${textColor(getProp(colors, 'semantic/danger'))};
-                }
-                &.next_month,
-                &.previous_month,
-                &.${unique.day.limit} {
-                    ${textColor(getProp(colors, 'system/disabled'))};
-                }
-                &.${unique.day.limit} {
-                    ${pointerEventsNone};
-                    ${cursorDefault};
-                }
-                &:hover {
-                    span.${unique.day.day} {
-                        ${bgColor(getProp(colors, 'fill/hover'))};
-                    }
-                }
-                ${onClickActive && css`
-                    &:active {
-                        span.${unique.day.day} {
-                            ${bgColor(getProp(colors, 'fill/pressed'))};
-                        }
-                    }
-                `}
-                ${(unique === null || unique === void 0 ? void 0 : unique.year) && css`
-                    &.${unique.year.active} {
-                        span.${unique.year.year} {
-                            ${typography.paragraph2};
-                            ${bgColor('fill/focus')};
-                        }
-                    }
-                    &.${unique.year.thisyear} {
-                        span {
-                            ${typography.heading6};
-                            ${boxBorder};
-                            ${border(1, 'system/active')};
-                        }
-                    }
-                `}
-                &.${unique.day.active} {
-                    span.${unique.day.day} {
-                        ${bgColor(getProp(colors, 'fill/focus'))};
-                    }
-                }
-                &.${unique.day.today} {
-                    span {
-                        ${boxBorder};
-                        ${border(1, getProp(colors, 'system/active'))};
-                    }
-                }
-                &.${unique.day.between} {
-                    opacity: 1;
-                    &::before {
-                        ${bgColor(getProp(colors, 'fill/hover'))};
-                    }
-                }
-                &.${unique.day.from} {
-                    opacity: 1;
-                    &::before {
-                        ${bgColor(getProp(colors, 'fill/hover'))};
-                        border-bottom-left-radius: 12px;
-                        border-top-left-radius: 12px;
-                        left: calc((100% - 24px) / 2);
-                    }
-                }
-                &.${unique.day.to} {
-                    opacity: 1;
-                    &::before {
-                        ${bgColor(getProp(colors, 'fill/hover'))};
-                        border-bottom-right-radius: 12px;
-                        border-top-right-radius: 12px;
-                        right: calc((100% - 24px) / 2);
-                    }
-                }
-                ::before {
-                    ${positionAbsolute};
-                    ${insetY(1)};
-                    ${insetX(-2)};
-                    content: '';
-                }
-            }
-        }
-        .${unique.table.header} {
-            ${userSelectNone};
-            ${textCenter};
-            ${parseHeight(24)};
-            ${textColor(getProp(colors, 'text/label'))};
-            &:nth-of-type(6) {
-                ${textColor(getProp(colors, 'semantic/info'))};
-            }
-            &:nth-of-type(7) {
-                ${textColor(getProp(colors, 'semantic/danger'))};
-            }
-        }
-    }
-    @media only screen and (max-width: 800px) {
-        .${unique.navigator.navigator} {
-            ${parseHeight(24)};
-            margin-top: ${spacing([3.5])};
-            .${unique.navigator.center} {
-                ${parseMinWidth(130)};
-                ${parseHeight(24)};
-                margin: ${spacing([0])};
-                button {
-                    height: 24px;
-                }
-                .DGN-UI-Typography {
-                    font-size: 18px;
-                    min-width: 130px;
-                }
-            }
-            .${unique.navigator.around} {
-                ${parseWidthHeight(56, 24)};
-            }
-            .${unique.icon} {
-                ${parseWidthHeight(24)};
-                margin: ${spacing('0 2px')};
-                svg,
-                path,
-                g {
-                    ${pointerEventsNone};
-                }
-            }
-        }
-        .${unique.table.container} {
-            margin: ${spacing('6px 0')};
-        }
-        .${unique.table.table} {
-            margin: ${spacing('0 10px')};
-            ${parseWidth('calc(100% - 20px)')};
-            .DGN-UI-Typography {
-                font-size: 14px;
-            }
-        }
-    }
-`;
-/**
- * END STYLE
- */
-
-/**
- *
- * @description return props of the typography.
- * @param {String} className
- * @returns {Object} props of the typography
- */
-const typographyProps = (className, isNotDay) => {
-  return {
-    className,
-    color: 'inherit',
-    style: {
-      alignItems: 'center',
-      borderRadius: isNotDay ? 4 : '50%',
-      display: 'flex',
-      height: isNotDay ? 56 : 24,
-      justifyContent: 'center',
-      margin: 'auto',
-      transition: 'background-color 150ms linear',
-      width: isNotDay ? 86 : 24
-    },
-    type: isNotDay ? 'p2' : 'h6'
-  };
-};
-/**
- *
- * @description return props of the button icon.
- * @param {String} className
- * @returns {Object} props of the button icon
- */
-const buttonIconProps = className => {
-  return {
-    className,
-    circular: true,
-    viewType: 'ghost'
-  };
-};
-
-/**
- * @description detect value is a Date object
- * @param {String | Number | Array} value
- * @returns boolean
- */
-const isValidDate = value => {
-  return new Date(value) instanceof Date && !isNaN(new Date(value));
-};
-/**
- *
- * @description set Sunday (0) to the last day of week.
- * @param {Date} date
- * @returns number of day from 0 (Monday) to 6 (Sunday).
- */
-const getDateOfWeek = date => {
-  let day = date.getDay();
-  if (day === 0) day = 7;
-  return day - 1;
-};
-/**
- *
- * @description check day is today.
- * @param {Date} day
- * @param {Date} today
- * @param {String} className
- * @returns {Boolean} is today
- */
-const isToday = (day, today, className) => {
-  return +moment(day).diff(today) === 0 ? className : '';
-};
-/**
- *
- * @description check day is active day.
- * @param {Date} day
- * @param {Date} active
- * @param {String} className
- * @returns {Boolean} is active day
- */
-const isActive = (day, active, className, currentZoomLevel) => {
-  switch (currentZoomLevel) {
-    case 1:
-      if (renderNavigatorContent(day)[0] === renderNavigatorContent(active)[0]) {
-        return className;
-      }
-      break;
-    case 2:
-      {
-        const quarter = Math.floor(active.getMonth() / 3);
-        const startFullQuarter = new Date(active.getFullYear(), quarter * 3, 1);
-        if (renderNavigatorContent(day)[0] === renderNavigatorContent(startFullQuarter)[0]) {
-          return className;
-        }
-        break;
-      }
-    case 3:
-      {
-        if (+moment(day).diff(active, 'years') === 0) {
-          return className;
-        }
-        break;
-      }
-    case 4:
-      if (renderNavigatorContent(day)[1] === Math.floor(renderNavigatorContent(active)[1] / 10) * 10) {
-        return className;
-      }
-      break;
-    default:
-      if (Array.isArray(active)) {
-        if (+moment(day).diff(active[0]) === 0 || +moment(day).diff(active[1]) === 0) {
-          return className;
-        }
-      }
-      if (+moment(day).diff(active) === 0) {
-        return className;
-      }
-      break;
-  }
-  return '';
-};
-/**
- *
- * @description check day is min/max day.
- * @param {Date} day
- * @param {Date} max
- * @param {Date} min
- * @param {Object} className
- * @returns {Boolean} is limited day
- */
-const isLimit = (day, max, min, className) => {
-  return isBeforeLimit(min, day) || isAfterLimit(max, day) ? className : '';
-};
-const isBetween = (day, from, to, className) => {
-  if (from && isValidDate(from) && +moment(day).diff(from) === 0) {
-    return className.from;
-  }
-  if (to && isValidDate(to) && +moment(day).diff(to) === 0) {
-    return className.to;
-  }
-  if (from && to && isValidDate(from) && isValidDate(to) && +moment(day).diff(from) > 0 && +moment(day).diff(to) < 0) {
-    return className.between;
-  }
-  return '';
-};
-const isBeforeLimit = (min, time) => {
-  return min && isValidDate(min) && moment(new Date(time).setHours(0, 0, 0, 0)).diff(new Date(min).setHours(0, 0, 0, 0)) < 0;
-};
-const isAfterLimit = (max, time) => {
-  return max && isValidDate(max) && moment(new Date(time).setHours(0, 0, 0, 0)).diff(new Date(max).setHours(0, 0, 0, 0)) > 0;
-};
-/**
- *
- * @description return the table body of the calendar.
- * @param {Date} time
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Date} min
- * @param {Date} max
- * @param {Number} currentZoomLevel
- * @returns {Element}
- */
-const renderTableBody = (time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max, currentZoomLevel) => {
-  time = new Date(time);
-  const firstDay = new Date(new Date(time).setDate(1));
-  const lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
-  const prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0);
-  const today = new Date().setHours(0, 0, 0, 0);
-  const lastDate = lastDay.getDate();
-  const prevDate = prevDay.getDate();
-  const firstYear = Math.floor(time.getFullYear() / 10) * 10;
-  const firstDecade = Math.floor(time.getFullYear() / 100) * 100;
-  const rowCountMap = new Map([[0, 6],
-  // day
-  [2, 1] // quarter
-  ]);
-  const colCountMap = new Map([[0, 7],
-  // day
-  [2, 4] // quarter
-  ]);
-  const rowCount = rowCountMap.get(currentZoomLevel) || 3;
-  const colCount = colCountMap.get(currentZoomLevel) || 4;
-  let active = Array.isArray(activeValue) ? new Date(activeValue[0]) : new Date(activeValue);
-  let tableBody = [],
-    tableRaw = [],
-    tableData = [],
-    weekDateFirst = getDateOfWeek(firstDay),
-    weekDateLast = getDateOfWeek(lastDay);
-  const tableDataPush = (key, dataTime, text, customClass) => {
-    const currentMonthIndexMap = new Map([[1, new Date().getMonth()],
-    //month
-    [2, 3 * (Math.floor((new Date().getMonth() + 3) / 3) - 1)] //quarter
-    ]);
-    const currentTime = new Date(new Date().getFullYear(), currentMonthIndexMap.get(currentZoomLevel) || dataTime.getMonth(), 1);
-    tableData.push(jsx("td", {
-      key: key,
-      "data-time": Date.parse(dataTime),
-      className: classNames(customClass, className.table.data, isToday(dataTime, currentTime, className.year.thisyear), isActive(dataTime, active, className.year.active, currentZoomLevel), isLimit(dataTime, max, min, className.day.limit)),
-      onClick: onTableDataClick
-    }, jsx(Typography, {
-      ...typographyProps(className.year.year, true)
-    }, text)));
-  };
-  switch (currentZoomLevel) {
-    case 1:
-      /**
-       * months of this year
-       */
-      for (let i = 0; i < 12; i++) {
-        const monthsList = getGlobal(['months']).full;
-        const month = new Date(time.getFullYear(), i, 1);
-        tableDataPush(`this_month-${i + 1}`, month, monthsList[i].charAt(0).toUpperCase() + monthsList[i].slice(1));
-      }
-      break;
-    case 2:
-      /**
-       * quarter of this year
-       */
-      for (let i = 0; i < 4; i++) {
-        const quarter = i + 1;
-        const firstDateOfQuarter = new Date(time.getFullYear(), i * 3, 1);
-        tableDataPush(`this_quarter-${quarter}`, firstDateOfQuarter, `Q${quarter}`);
-      }
-      break;
-    case 3:
-      {
-        /**
-         * year before this decade
-         */
-        const previousDecadeLastYear = new Date(firstYear - 1, 0, 1);
-        const nextDecadeFirstYear = new Date(firstYear + 10, 0, 1);
-        tableDataPush(`previous_decade-${firstYear - 1}`, previousDecadeLastYear, firstYear - 1, 'previous_month');
-        /**
-         * years of this decade
-         */
-        for (let i = 0; i < 10; i++) {
-          const year = new Date(firstYear + i, min ? Number(moment(min).format('MM')) - 1 : 0, 1);
-          tableDataPush(`this-decade-${i + 1}`, year, firstYear + i);
-        }
-        /**
-         * year after this decade
-         */
-        tableDataPush(`next_decade-${firstYear + 10}`, nextDecadeFirstYear, firstYear + 10, 'next_month');
-      }
-      break;
-    case 4:
-      {
-        /**
-         * decade before this century
-         */
-        const lastDecadeLastCentury = new Date(firstDecade - 10, 0, 1);
-        const nextCenturyFirstDecade = new Date(firstDecade + 100, 0, 1);
-        tableDataPush(`previous_century-${firstYear - 1}`, lastDecadeLastCentury, `${firstDecade - 10} - ${firstDecade - 1}`, 'previous_month');
-        /**
-         * decades of this century
-         */
-        for (let i = 0; i < 10; i++) {
-          const decade = new Date(firstDecade + i * 10, 0, 1);
-          tableDataPush(`this-century-${i + 1}`, decade, `${firstDecade + i * 10} - ${firstDecade + i * 10 + 9}`);
-        }
-        /**
-         * decade after this century
-         */
-        tableDataPush(`next_century-${firstYear + 10}`, nextCenturyFirstDecade, `${firstDecade + 100} - ${firstDecade + 100 + 9}`, 'next_month');
-      }
-      break;
-    default:
-      if (activeValue && Array.isArray(activeValue) && activeValue.length === 2 && activeValue[0] !== activeValue[1]) {
-        /**
-         * days of previous month
-         */
-        active = activeValue;
-        for (let i = weekDateFirst; i > 0; i--) {
-          const day = new Date(time.getFullYear(), time.getMonth() - 1,
-          // displayAnotherMonth ? prevDate - i + 1 : 1
-          1);
-          tableData.push(jsx("td", {
-            key: `previous_month-${prevDate - i + 1}`,
-            "data-time": Date.parse(day) - 1 /*(displayAnotherMonth ? 0 : 1)*/,
-            className: classNames(className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day))
-          }, jsx(Typography, {
-            ...typographyProps(className.day.day)
-          }, '')));
-        }
-        /**
-         * days of this month
-         */
-        for (let i = 0; i < lastDate; i++) {
-          const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
-          tableData.push(jsx("td", {
-            key: `this_month-${i + 1}`,
-            "data-time": Date.parse(day),
-            className: classNames(className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit), isBetween(day, active[0], active[1], className.day)),
-            onClick: onTableDataClick
-          }, jsx(Typography, {
-            ...typographyProps(className.day.day)
-          }, i + 1)));
-        }
-        /**
-         * days of next month
-         */
-        for (let i = 0; i < 20 - weekDateLast; i++) {
-          const day = new Date(time.getFullYear(), time.getMonth() + 1,
-          // displayAnotherMonth ? i + 1 : 6 - weekDateLast
-          6 - weekDateLast);
-          tableData.push(jsx("td", {
-            key: `next_month-${i + 1}`,
-            "data-time": Date.parse(day) + 1 /*(displayAnotherMonth ? 0 : 1)*/,
-            className: classNames(className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isBetween(day, active[0], active[1], className.day))
-          }, jsx(Typography, {
-            ...typographyProps(className.day.day)
-          }, '')));
-        }
-      } else {
-        /**
-         * days of previous month
-         */
-        for (let i = weekDateFirst; i > 0; i--) {
-          const day = new Date(time.getFullYear(), time.getMonth() - 1, displayAnotherMonth ? prevDate - i + 1 : 1);
-          tableData.push(jsx("td", {
-            key: `previous_month-${prevDate - i + 1}`,
-            "data-time": Date.parse(day) - (displayAnotherMonth ? 0 : 1),
-            className: classNames(className.table.data, 'previous_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)),
-            onClick: onTableDataClick
-          }, jsx(Typography, {
-            ...typographyProps(className.day.day)
-          }, displayAnotherMonth ? prevDate - i + 1 : '')));
-        }
-        /**
-         * days of this month
-         */
-        for (let i = 0; i < lastDate; i++) {
-          const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
-          tableData.push(jsx("td", {
-            key: `this_month-${i + 1}`,
-            "data-time": Date.parse(day),
-            className: classNames(className.table.data, 'this_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)),
-            onClick: onTableDataClick
-          }, jsx(Typography, {
-            ...typographyProps(className.day.day)
-          }, i + 1)));
-        }
-        /**
-         * days of next month
-         */
-        for (let i = 0; i < 20 - weekDateLast; i++) {
-          const day = new Date(time.getFullYear(), time.getMonth() + 1, displayAnotherMonth ? i + 1 : 6 - weekDateLast);
-          tableData.push(jsx("td", {
-            key: `next_month-${i + 1}`,
-            "data-time": Date.parse(day) + (displayAnotherMonth ? 0 : 1),
-            className: classNames(className.table.data, 'next_month', isToday(day, today, className.day.today), isActive(day, active, className.day.active), isLimit(day, max, min, className.day.limit)),
-            onClick: onTableDataClick
-          }, jsx(Typography, {
-            ...typographyProps(className.day.day)
-          }, displayAnotherMonth ? i + 1 : '')));
-        }
-      }
-      break;
-  }
-  for (let i = 0; i < rowCount; i++) {
-    for (let j = 0; j < colCount; j++) {
-      tableRaw.push(tableData[colCount * i + j]);
-    }
-    tableBody.push(jsx("tr", {
-      key: i,
-      className: className.day.week
-    }, tableRaw));
-    tableRaw = [];
-  }
-  return tableBody;
-};
-/**
- *
- * @param {Object} className
- * @param {Number} currentZoomLevel
- * @returns
- */
-const renderHeader = (className, currentZoomLevel) => {
-  const weekdays = getGlobal(['weekdaysLong']);
-  const tableHeader = [];
-  for (let i in weekdays) {
-    tableHeader.push(jsx("th", {
-      key: i,
-      className: className.table.header
-    }, jsx(Typography, {
-      color: 'inherit',
-      type: 'p2'
-    }, weekdays[i])));
-  }
-  return jsx("thead", null, jsx("tr", {
-    className: className.table.raw
-  }, !currentZoomLevel && tableHeader));
-};
-/**
- *
- * @param {Object} className
- * @param {Object} refs
- * @param {Function} dbLeftFn
- * @param {Function} leftFn
- * @param {Function} rightFn
- * @param {Function} dbRightFn
- * @param fn
- * @param {Number} currentZoomLevel
- * @returns navigator
- */
-const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn, currentZoomLevel = 0) => {
-  const ButtonCSS = css`
-        ${borderRadius(20)};
-        ${parseWidth('100%')};
-        padding: 0px;
-    `;
-  return jsx("div", {
-    className: className.navigator.navigator
-  }, jsx("div", {
-    className: className.navigator.around
-  }, !currentZoomLevel && jsx(ButtonIcon, {
-    ...buttonIconProps(className.icon),
-    name: 'ArrowDoubleLeft',
-    onClick: dbLeftFn,
-    ref: refs.doubleLeft
-  }), jsx(ButtonIcon, {
-    ...buttonIconProps(className.icon),
-    name: 'ArrowLeft',
-    onClick: leftFn,
-    ref: refs.left
-  })), jsx("div", {
-    className: className.navigator.center
-  }, jsx(Button, {
-    css: ButtonCSS,
-    size: 'tiny',
-    onClick: fn
-  }, jsx(Typography, {
-    color: 'primary',
-    type: 'h3',
-    ref: refs.content,
-    format: ['lowercase']
-  }))), jsx("div", {
-    className: className.navigator.around
-  }, jsx(ButtonIcon, {
-    ...buttonIconProps(className.icon),
-    name: 'ArrowRight',
-    onClick: rightFn,
-    ref: refs.right
-  }), !currentZoomLevel && jsx(ButtonIcon, {
-    ...buttonIconProps(className.icon),
-    name: 'ArrowDoubleRight',
-    onClick: dbRightFn,
-    ref: refs.doubleRight
-  })));
-};
-/**
- *
- * @param {Date} time
- * @returns {String} month year
- */
-const renderNavigatorContent = time => {
-  const value = new Date(time);
-  const months = getGlobal(['months', 'full']);
-  return [months[value.getMonth()], value.getFullYear()];
-};
-/**
- *
- * @param {Date} time
- * @param {Object} refs
- * @param {Date} min
- * @param {Date} max
- * @param {Number} currentZoomLevel
- */
-const onUpdateNavigator = (time, refs, min, max, currentZoomLevel = 0) => {
-  var _refs$doubleLeft$curr, _refs$doubleLeft$curr2, _refs$doubleRight$cur, _refs$doubleRight$cur2, _refs$left$current, _refs$left$current$in, _refs$right$current, _refs$right$current$i;
-  const el = refs.content.current;
-  const vl = renderNavigatorContent(time);
-  const year = locale.get() === 'vi' ? ` ${getGlobal(['year'])} ` : '';
-  const firstValue = new Map([[0, `${vl[0]} ${year} ${vl[1]}`], [1, vl[1]], [2, vl[1]], [3, Math.floor(vl[1] / 10) * 10], [4, Math.floor(vl[1] / 100) * 100]]);
-  const lastValue = new Map([[3, Math.floor(vl[1] / 10) * 10 + 9], [4, Math.floor(vl[1] / 100) * 100 + 99]]);
-  if (el) {
-    el.innerHTML = `${firstValue.get(currentZoomLevel)} ${lastValue.get(currentZoomLevel) ? `- ${lastValue.get(currentZoomLevel)}` : ``}`;
-  }
-  const firstDayOfMin = new Date(new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0));
-  const firstDayOfMax = new Date(new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0));
-  (_refs$doubleLeft$curr = refs.doubleLeft.current) === null || _refs$doubleLeft$curr === void 0 ? void 0 : (_refs$doubleLeft$curr2 = _refs$doubleLeft$curr.instance) === null || _refs$doubleLeft$curr2 === void 0 ? void 0 : _refs$doubleLeft$curr2.option('disabled', false);
-  (_refs$doubleRight$cur = refs.doubleRight.current) === null || _refs$doubleRight$cur === void 0 ? void 0 : (_refs$doubleRight$cur2 = _refs$doubleRight$cur.instance) === null || _refs$doubleRight$cur2 === void 0 ? void 0 : _refs$doubleRight$cur2.option('disabled', false);
-  (_refs$left$current = refs.left.current) === null || _refs$left$current === void 0 ? void 0 : (_refs$left$current$in = _refs$left$current.instance) === null || _refs$left$current$in === void 0 ? void 0 : _refs$left$current$in.option('disabled', false);
-  (_refs$right$current = refs.right.current) === null || _refs$right$current === void 0 ? void 0 : (_refs$right$current$i = _refs$right$current.instance) === null || _refs$right$current$i === void 0 ? void 0 : _refs$right$current$i.option('disabled', false);
-  setTimeout(() => {
-    if (min && isValidDate(min)) {
-      if (moment(time).diff(firstDayOfMin) < 365) {
-        var _refs$doubleLeft$curr3, _refs$doubleLeft$curr4;
-        (_refs$doubleLeft$curr3 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr3 === void 0 ? void 0 : (_refs$doubleLeft$curr4 = _refs$doubleLeft$curr3.instance) === null || _refs$doubleLeft$curr4 === void 0 ? void 0 : _refs$doubleLeft$curr4.option('disabled', true);
-      }
-      if (moment(time).diff(firstDayOfMin) <= 28 && moment(time).diff(firstDayOfMin, 'months') > 1 || moment(time).diff(firstDayOfMin, 'months') < 1) {
-        var _refs$doubleLeft$curr5, _refs$doubleLeft$curr6, _refs$left$current2, _refs$left$current2$i;
-        (_refs$doubleLeft$curr5 = refs.doubleLeft.current) === null || _refs$doubleLeft$curr5 === void 0 ? void 0 : (_refs$doubleLeft$curr6 = _refs$doubleLeft$curr5.instance) === null || _refs$doubleLeft$curr6 === void 0 ? void 0 : _refs$doubleLeft$curr6.option('disabled', true);
-        (_refs$left$current2 = refs.left.current) === null || _refs$left$current2 === void 0 ? void 0 : (_refs$left$current2$i = _refs$left$current2.instance) === null || _refs$left$current2$i === void 0 ? void 0 : _refs$left$current2$i.option('disabled', true);
-      }
-    }
-    if (max && isValidDate(max)) {
-      if (moment(time).diff(firstDayOfMax) > -334) {
-        var _refs$doubleRight$cur3, _refs$doubleRight$cur4;
-        (_refs$doubleRight$cur3 = refs.doubleRight.current) === null || _refs$doubleRight$cur3 === void 0 ? void 0 : (_refs$doubleRight$cur4 = _refs$doubleRight$cur3.instance) === null || _refs$doubleRight$cur4 === void 0 ? void 0 : _refs$doubleRight$cur4.option('disabled', true);
-      }
-      if (moment(time).diff(firstDayOfMax) > -1) {
-        var _refs$doubleRight$cur5, _refs$doubleRight$cur6, _refs$right$current2, _refs$right$current2$;
-        (_refs$doubleRight$cur5 = refs.doubleRight.current) === null || _refs$doubleRight$cur5 === void 0 ? void 0 : (_refs$doubleRight$cur6 = _refs$doubleRight$cur5.instance) === null || _refs$doubleRight$cur6 === void 0 ? void 0 : _refs$doubleRight$cur6.option('disabled', true);
-        (_refs$right$current2 = refs.right.current) === null || _refs$right$current2 === void 0 ? void 0 : (_refs$right$current2$ = _refs$right$current2.instance) === null || _refs$right$current2$ === void 0 ? void 0 : _refs$right$current2$.option('disabled', true);
-      }
-    }
-  });
-};
-/**
- *
- * @param {Date} time
- * @param {Object} navigatorRefs
- * @param {Date} min
- * @param {Date} max
- * @param {Element} table
- * @param {Date} activeValue
- * @param {Object} className
- * @param {Boolean} displayAnotherMonth
- * @param {Function} onTableDataClick
- * @param {Function} onUpdateNavigatorValue
- * @param {Number} currentZoomLevel
- */
-const onUpdateCalendar = (time, navigatorRefs, min, max, table, activeValue, className, displayAnotherMonth, onTableDataClick, onUpdateNavigatorValue, currentZoomLevel) => {
-  onUpdateNavigator(time, navigatorRefs, min, max, currentZoomLevel);
-  onUpdateNavigatorValue(time);
-  if (table) {
-    const child = renderTableBody(time, activeValue, className, displayAnotherMonth, onTableDataClick, min, max, currentZoomLevel);
-    table.querySelector('tbody').remove();
-    render(child, table.appendChild(document.createElement('tbody')));
-  }
-};
-export { generateCalendarCSS, isAfterLimit, isBeforeLimit, isValidDate, onUpdateCalendar, onUpdateNavigator, renderHeader, renderNavigator, renderNavigatorContent, renderTableBody };