diginet-core-ui 1.4.39 → 1.4.40

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

@@ -0,0 +1,959 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, Typography } from 'components';
+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?.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(
+            <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}
+            >
+                <Typography {...typographyProps(className.year.year, true)}>{text}</Typography>
+            </td>
+        );
+    };
+    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(
+                        <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)
+                            )}
+                        >
+                            <Typography {...typographyProps(className.day.day)}>{''}</Typography>
+                        </td>
+                    );
+                }
+                /**
+                 * days of this month
+                 */
+                for (let i = 0; i < lastDate; i++) {
+                    const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
+                    tableData.push(
+                        <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}
+                        >
+                            <Typography {...typographyProps(className.day.day)}>{i + 1}</Typography>
+                        </td>
+                    );
+                }
+                /**
+                 * 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(
+                        <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)
+                            )}
+                        >
+                            <Typography {...typographyProps(className.day.day)}>{''}</Typography>
+                        </td>
+                    );
+                }
+            } 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(
+                        <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}
+                        >
+                            <Typography {...typographyProps(className.day.day)}>
+                                {displayAnotherMonth ? prevDate - i + 1 : ''}
+                            </Typography>
+                        </td>
+                    );
+                }
+                /**
+                 * days of this month
+                 */
+                for (let i = 0; i < lastDate; i++) {
+                    const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
+                    tableData.push(
+                        <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}
+                        >
+                            <Typography {...typographyProps(className.day.day)}>{i + 1}</Typography>
+                        </td>
+                    );
+                }
+                /**
+                 * 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(
+                        <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}
+                        >
+                            <Typography {...typographyProps(className.day.day)}>
+                                {displayAnotherMonth ? i + 1 : ''}
+                            </Typography>
+                        </td>
+                    );
+                }
+            }
+            break;
+    }
+    for (let i = 0; i < rowCount; i++) {
+        for (let j = 0; j < colCount; j++) {
+            tableRaw.push(tableData[colCount * i + j]);
+        }
+        tableBody.push(
+            <tr key={i} className={className.day.week}>
+                {tableRaw}
+            </tr>
+        );
+        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(
+            <th key={i} className={className.table.header}>
+                <Typography color={'inherit'} type={'p2'}>
+                    {weekdays[i]}
+                </Typography>
+            </th>
+        );
+    }
+    return (
+        <thead>
+            <tr className={className.table.raw}>{!currentZoomLevel && tableHeader}</tr>
+        </thead>
+    );
+};
+/**
+ *
+ * @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 (
+        <div className={className.navigator.navigator}>
+            <div className={className.navigator.around}>
+                {!currentZoomLevel && (
+                    <ButtonIcon
+                        {...buttonIconProps(className.icon)}
+                        name={'ArrowDoubleLeft'}
+                        onClick={dbLeftFn}
+                        ref={refs.doubleLeft}
+                    />
+                )}
+                <ButtonIcon {...buttonIconProps(className.icon)} name={'ArrowLeft'} onClick={leftFn} ref={refs.left} />
+            </div>
+            <div className={className.navigator.center}>
+                <Button css={ButtonCSS} size={'tiny'} onClick={fn}>
+                    <Typography color={'primary'} type={'h3'} ref={refs.content} format={['lowercase']} />
+                </Button>
+            </div>
+            <div className={className.navigator.around}>
+                <ButtonIcon
+                    {...buttonIconProps(className.icon)}
+                    name={'ArrowRight'}
+                    onClick={rightFn}
+                    ref={refs.right}
+                />
+                {!currentZoomLevel && (
+                    <ButtonIcon
+                        {...buttonIconProps(className.icon)}
+                        name={'ArrowDoubleRight'}
+                        onClick={dbRightFn}
+                        ref={refs.doubleRight}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+/**
+ *
+ * @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) => {
+    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.current?.instance?.option('disabled', false);
+    refs.doubleRight.current?.instance?.option('disabled', false);
+    refs.left.current?.instance?.option('disabled', false);
+    refs.right.current?.instance?.option('disabled', false);
+    setTimeout(() => {
+        if (min && isValidDate(min)) {
+            if (moment(time).diff(firstDayOfMin) < 365) {
+                refs.doubleLeft.current?.instance?.option('disabled', true);
+            }
+            if (
+                (moment(time).diff(firstDayOfMin) <= 28 && moment(time).diff(firstDayOfMin, 'months') > 1) ||
+                moment(time).diff(firstDayOfMin, 'months') < 1
+            ) {
+                refs.doubleLeft.current?.instance?.option('disabled', true);
+                refs.left.current?.instance?.option('disabled', true);
+            }
+        }
+        if (max && isValidDate(max)) {
+            if (moment(time).diff(firstDayOfMax) > -334) {
+                refs.doubleRight.current?.instance?.option('disabled', true);
+            }
+            if (moment(time).diff(firstDayOfMax) > -1) {
+                refs.doubleRight.current?.instance?.option('disabled', true);
+                refs.right.current?.instance?.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,
+};