diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/date-range-picker/index.js

@@ -0,0 +1,1349 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from 'components';
+import { getGlobal } from 'global';
+import locale from 'locale';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { render } from 'react-dom';
+import {
+    bgColor,
+    borderRadius4px,
+    cursorPointer,
+    displayBlock,
+    displayFlex,
+    displayNone,
+    flexCol,
+    flexRow,
+    invisible,
+    justifyEnd,
+    left,
+    parseHeight,
+    parseMaxWidth,
+    parseMinWidth,
+    pointerEventsNone,
+    positionFixed,
+    shadowLarge,
+    textCenter,
+    top,
+    userSelectNone,
+    whiteSpaceNoWrap,
+    z,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from 'utils';
+import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
+import ControlComp from '../control';
+import useThemeProps from 'theme/utils/useThemeProps';
+
+const toLocalTimestamp = t => {
+    if (typeof t === 'object' && t.getTime) {
+        t = t.getTime();
+    }
+
+    if (typeof t === 'string' && !t.match(/\d{13}/)) {
+        t = Date.parse(t).getTime();
+    }
+
+    t = parseInt(t, 10) - new Date().getTimezoneOffset() * 60 * 1000;
+
+    return t;
+};
+const getDaysFrom1970 = t => {
+    return Math.floor(toLocalTimestamp(t) / 86400000);
+};
+const countDays = (start, end, startFromZero) => {
+    return Math.abs(getDaysFrom1970(start) - getDaysFrom1970(end)) + (startFromZero ? 0 : 1);
+};
+const formatValue = (value, format, utc = false) => {
+    return moment(value).format(format, utc);
+};
+const getDateOfWeek = date => {
+    let day = date.getDay();
+    if (day === 0) day = 7;
+    return day - 1;
+};
+const isValidDate = v => {
+    if (!v) return false;
+    if (Object.prototype.toString.call(v) === '[object Date]') {
+        return true;
+    }
+    return !isNaN(Date.parse(new Date(v)));
+};
+const isValidValues = v => {
+    if (!v || !Array.isArray(v) || v.length !== 2) {
+        return false;
+    }
+    return !!(isValidDate(v[0]) && isValidDate(v[1]) && +moment(v[0]).diff(v[1]) <= 0);
+};
+
+const isToday = day => {
+    return +moment(day).diff(new Date().setHours(0, 0, 0, 0)) === 0 ? unique.day.today : '';
+};
+const isLimit = (day, max, min) => {
+    return isBefore(min, day) || isAfter(max, day) ? unique.day.limit : '';
+};
+const isBefore = (min, time) => {
+    return min && isValidDate(min) && moment(time).diff(min) < 0;
+};
+const isAfter = (max, time) => {
+    return max && isValidDate(max) && moment(time).diff(max) > 0;
+};
+const parseDate = day => {
+    return Date.parse(new Date(day));
+};
+
+const DateRangePicker = memo(
+    forwardRef((inProps, reference) => {
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'DateRangePicker' });
+        const {
+            action = {},
+            actionIconAt,
+            clearAble,
+            controls,
+            defaultValue,
+            disabled,
+            displayFormat,
+            error,
+            helperTextProps,
+            inputProps,
+            inputStyle,
+            label,
+            labelProps,
+            max,
+            min,
+            onChange,
+            onShowTooltip,
+            placeholder: placeholderProp,
+            pressESCToClose,
+            readOnly,
+            required,
+            returnFormat,
+            showUnitCount,
+            startFromZero,
+            style,
+            textAlign,
+            unitCount,
+            value,
+            viewType,
+            ...other
+        } = props;
+
+        const placeholder = placeholderProp ?? `${displayFormat} - ${displayFormat}`;
+
+        const theme = useTheme();
+        const { spacing } = theme;
+
+        if (!reference) reference = useRef(null);
+
+        const footerRef = useRef(null);
+        const iconRef = useRef(null);
+        const ipConRef = useRef(null);
+        const ipRef = useRef(null);
+        const pickerRef = useRef(null);
+        const tableFrRef = useRef(null);
+        const tableToRef = useRef(null);
+        const tooltipRef = useRef(null);
+        const ref = useRef(null);
+        const tempValues = useRef([]);
+        const values = useRef([]);
+        const valueFr = useRef(null);
+        const valueTo = useRef(null);
+        const selected = useRef(0);
+        const [, setValues] = useState(Date.now());
+        const [, setTempValues] = useState(Date.now());
+        const [, setValueFr] = useState(Date.now());
+        const [, setValueTo] = useState(Date.now());
+        const [, setSelected] = useState(Date.now());
+
+        const [valueState, setValueState] = useState();
+
+        const navigatorFromRefs = {
+            doubleLeft: useRef(null),
+            doubleRight: useRef(null),
+            left: useRef(null),
+            right: useRef(null),
+            content: useRef(null),
+        };
+        const navigatorToRefs = {
+            doubleLeft: useRef(null),
+            doubleRight: useRef(null),
+            left: useRef(null),
+            right: useRef(null),
+            content: useRef(null),
+        };
+
+        const isEnable = !readOnly && !disabled;
+
+        const closeText = getGlobal(['close']);
+        const cancelText = getGlobal(['cancel']);
+        const confirmText = getGlobal(['confirm']);
+        const unitText = getGlobal([unitCount]);
+
+        const _ControlContainerCSS = ControlContainerCSS(theme);
+
+        const updateValues = useCallback(
+            v => {
+                values.current = v;
+                setValues();
+            },
+            [values]
+        );
+        const updateTempValues = useCallback(
+            v => {
+                tempValues.current = v;
+                setTempValues();
+            },
+            [tempValues]
+        );
+        const updateSelected = useCallback(
+            v => {
+                selected.current = v;
+                setSelected();
+            },
+            [selected]
+        );
+        const updateValueFr = useCallback(
+            v => {
+                valueFr.current = v;
+                setValueFr();
+            },
+            [valueFr]
+        );
+        const updateValueTo = useCallback(
+            v => {
+                valueTo.current = v;
+                setValueTo();
+            },
+            [valueTo]
+        );
+
+        const isActive = day => {
+            if (values.current[0] && +moment(values.current[0]).diff(day) === 0) {
+                if (values.current[1] && +moment(values.current[0]).diff(values.current[1]) < 0) {
+                    return `${unique.day.from + ' ' + unique.day.active}`;
+                } else {
+                    return unique.day.active;
+                }
+            } else if (values.current[1] && parseDate(values.current[1]) === parseDate(day)) {
+                return `${unique.day.to + ' ' + unique.day.active}`;
+            }
+            return '';
+        };
+
+        const isBetween = dayParsed => {
+            if (
+                values.current[0] &&
+                values.current[1] &&
+                parseDate(values.current[0]) < dayParsed &&
+                dayParsed < parseDate(values.current[1])
+            ) {
+                return unique.day.between;
+            }
+            return '';
+        };
+
+        const countDay = v => {
+            if (v?.length === 2) {
+                return Number(+moment(v[1]).diff(v[0]) + (startFromZero ? 0 : 1));
+            }
+            return Number(startFromZero ? 0 : 1);
+        };
+
+        const onChangeValue = v => {
+            setInputValue(v[0], true);
+            setInputValue(v[1], false);
+            !!onChange &&
+                onChange({
+                    value: [formatValue(v[0], returnFormat), formatValue(v[1], returnFormat), selected.current],
+                });
+        };
+
+        const onDayClick = e => {
+            const el = e.currentTarget;
+            const v = parseInt(el.dataset.time, 10);
+            if (values.current.length === 0) {
+                //push
+                el.classList.add(unique.day.active);
+                updateValues([v]);
+                updateSelected(countDay(values.current));
+                renderPicker();
+                controls ? setButtonState() : onChangeValue([values.current[0], values.current[0]]);
+            } else {
+                if (values.current.length === 1) {
+                    if (+moment(values.current[0]).diff(new Date(v)) > 0) {
+                        //unshift
+                        el.classList.add(unique.day.active);
+                        updateValues([v, values.current[0]]);
+                        updateSelected(countDay(values.current));
+                        renderPicker();
+                        controls ? setButtonState() : onChangeValue(values.current);
+                    } else if (+moment(values.current[0]).diff(new Date(v)) < 0) {
+                        //push
+                        el.classList.add(unique.day.active);
+                        updateValues([values.current[0], v]);
+                        updateSelected(countDay(values.current));
+                        renderPicker();
+                        controls ? setButtonState() : onChangeValue(values.current);
+                    } else {
+                        //cancel
+                        e.preventDefault();
+                    }
+                } else {
+                    //restart
+                    pickerRef.current.querySelectorAll(`.${unique.day.active}`).forEach(element => {
+                        element.classList.remove(unique.day.active, unique.day.from, unique.day.to);
+                    });
+                    el.classList.add(unique.day.active);
+                    updateValues([v]);
+                    updateSelected(countDay(values.current));
+                    renderPicker();
+                    controls ? setButtonState() : onChangeValue([values.current[0], values.current[0]]);
+                }
+            }
+        };
+
+        const renderCalendar = (time, type) => {
+            time = new Date(time);
+            const firstDay = new Date(new Date(time).setDate(1)),
+                lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0),
+                prevDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), 0),
+                lastDate = lastDay.getDate(),
+                prevDate = prevDay.getDate();
+
+            let tableBody = [],
+                tableRaw = [],
+                tableData = [],
+                weekDateFirst = getDateOfWeek(firstDay),
+                weekDateLast = getDateOfWeek(lastDay);
+            /**
+             * days of previous month
+             */
+            for (let i = weekDateFirst; i > 0; i--) {
+                const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
+                tableData.push(
+                    <td
+                        key={`previous_month-${prevDate - i + 1}`}
+                        data-time={day - 1}
+                        className={classNames(unique.table.data, 'previous_month', isBetween(day - 1), 'empty')}
+                    >
+                        <span className={unique.day.day} />
+                    </td>
+                );
+            }
+            /**
+             * days of current 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(
+                            unique.table.data,
+                            'this_month',
+                            isToday(day),
+                            isActive(day),
+                            (max || min) &&
+                                isLimit(day, new Date(max).setHours(0, 0, 0, 0), new Date(min).setHours(0, 0, 0, 0)),
+                            isBetween(Date.parse(day))
+                        )}
+                        onClick={onDayClick}
+                    >
+                        <Typography
+                            className={unique.day.day}
+                            color={'inherit'}
+                            style={{
+                                alignItems: 'center',
+                                borderRadius: '50%',
+                                display: 'flex',
+                                height: 24,
+                                justifyContent: 'center',
+                                margin: 'auto',
+                                pointerEvents: 'none',
+                                transition: 'background-color 150ms linear',
+                                width: 24,
+                            }}
+                            type={'h6'}
+                        >
+                            {i + 1}
+                        </Typography>
+                    </td>
+                );
+            }
+            /**
+             * days of next month
+             */
+            for (let i = 0; i < 13 - weekDateLast; i++) {
+                const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));
+                tableData.push(
+                    <td
+                        key={`next_month-${i + 1}`}
+                        data-time={i < 6 - weekDateLast && day + 1}
+                        className={classNames(
+                            unique.table.data,
+                            'next_month',
+                            i < 6 - weekDateLast && isBetween(day + 1),
+                            'empty'
+                        )}
+                    >
+                        <span className={unique.day.day} />
+                    </td>
+                );
+            }
+
+            for (let i = 0; i < 6; i++) {
+                for (let j = 0; j < 7; j++) {
+                    tableRaw.push(
+                        tableData[7 * i + j] || (
+                            <td key={7 * i + j} className={classNames(unique.table.data, 'next_month')} />
+                        )
+                    );
+                }
+                tableBody.push(
+                    <tr key={i} className={unique.day.week}>
+                        {tableRaw}
+                    </tr>
+                );
+                tableRaw = [];
+            }
+            if (type === 'from') {
+                onUpdateNavigator(time, navigatorFromRefs);
+                if (tableFrRef.current) {
+                    tableFrRef.current.querySelector('tbody').remove();
+                    render(tableBody, tableFrRef.current.appendChild(document.createElement('tbody')));
+                }
+            } else if (type === 'to') {
+                onUpdateNavigator(time, navigatorToRefs);
+                if (tableToRef.current) {
+                    tableToRef.current.querySelector('tbody').remove();
+                    render(tableBody, tableToRef.current.appendChild(document.createElement('tbody')));
+                }
+            }
+        };
+
+        const updateFromTo = (times = [new Date(), new Date()]) => {
+            const timeFr = new Date(times[0]);
+            const timeTo = new Date(times[1]);
+            const isSameMonth = timeFr.getMonth() === timeTo.getMonth();
+            const from = new Date(timeFr.getFullYear(), timeFr.getMonth());
+            // const to = new Date(timeTo.getFullYear(), timeTo.getMonth());
+            const to = isSameMonth
+                ? new Date(
+                      timeTo.getFullYear(),
+                      +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : timeTo.getMonth()
+                  )
+                : new Date(timeTo.getFullYear(), timeTo.getMonth());
+            updateValueFr(from);
+            updateValueTo(to);
+        };
+
+        const update = v => {
+            if (v) {
+                if (isValidValues(v)) {
+                    updateValues([new Date(v[0]).setHours(0, 0, 0, 0), new Date(v[1]).setHours(0, 0, 0, 0)]);
+                    updateSelected(countDay(values.current));
+                    updateFromTo(values.current);
+                    setInputValue(values.current[0], true);
+                    setInputValue(values.current[1], false);
+                } else {
+                    updateValues([]);
+                    updateFromTo([new Date(), new Date(new Date().getFullYear(), new Date().getMonth() + 1)]);
+                }
+            } else {
+                updateValues([new Date().setHours(0, 0, 0, 0), new Date().setHours(0, 0, 0, 0)]);
+                updateSelected(0);
+                updateFromTo(values.current);
+                // setInputValue(values.current[0], true);
+                // setInputValue(values.current[1], false);
+            }
+        };
+
+        const getPickerStyle = anchor => {
+            const { innerHeight, innerWidth } = window;
+            const { left, height, top } =
+                anchor instanceof Element ? anchor.getBoundingClientRect() : ref.current.getBoundingClientRect();
+            const pickerHeight = innerWidth < 567 ? (controls ? 550 : 495) : controls ? 310 : 256;
+            let style = {};
+            style.left = left;
+            style.top = top + height + 4;
+            style.transformOrigin = '50% 20%';
+            if (style.top + pickerHeight > innerHeight) {
+                if (top > pickerHeight) {
+                    style.top = innerHeight - pickerHeight - 4;
+                    style.transformOrigin = '50% 80%';
+                } else {
+                    style.top = Math.round((innerHeight - pickerHeight - 16) / 2);
+                    style.transformOrigin = 'center';
+                }
+            }
+            const pickerWidth = window.innerWidth <= 633 ? 300 : 633;
+            if (left + pickerWidth > innerWidth) {
+                if (innerWidth > pickerWidth) {
+                    style.left = (innerWidth - pickerWidth) / 2;
+                }
+            }
+
+            return pickerCSS.picker(style).styles;
+        };
+
+        const clearDayHovering = arr => {
+            if (values.current.length !== 2) {
+                for (let i in arr) {
+                    arr[i].classList.remove(unique.day.from, unique.day.to, unique.day.between);
+                }
+                tooltipRef.current.style.visibility = 'hidden';
+            }
+        };
+
+        const createBackground = () => {
+            let background = document.getElementById(unique.backGr);
+            if (!background) {
+                background = document.createElement('div');
+                background.id = unique.backGr;
+                background.classList.add(unique.portal, unique.backGr);
+                document.body.appendChild(background);
+            }
+            background.style.cssText = pickerCSS.backGr(theme);
+            return background;
+        };
+
+        const createPicker = anchor => {
+            const picker = document.createElement('div');
+            picker.id = unique.picker;
+            picker.style.cssText = getPickerStyle(anchor);
+            return picker;
+        };
+
+        const setPrevTime = (e, level, time, type) => {
+            if (!valueFr.current || !time) return;
+            const firstDayOfMin = min && new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
+            const firstDayOfTime = new Date(new Date(time).setDate(1)).setHours(0, 0, 0, 0);
+            if (level === 'month') {
+                if (firstDayOfMin) {
+                    if (type === 'to' && getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMin) < 59) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                    if (getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMin) < 28) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                }
+                time.setMonth(time.getMonth() - 1);
+                renderCalendar(time, type);
+            }
+            if (level === 'year') {
+                if (firstDayOfMin) {
+                    if (type === 'to' && getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMin) < 396) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                    if (getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMin) < 365) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                }
+                time.setFullYear(time.getFullYear() - 1);
+                renderCalendar(time, type);
+            }
+            if (type === 'to') {
+                if (+moment(time).diff(valueFr.current, 'months') < 1) {
+                    valueFr.current.setFullYear(time.getFullYear());
+                    valueFr.current.setMonth(time.getMonth() - 1);
+                    renderCalendar(valueFr.current, 'from');
+                }
+            }
+        };
+
+        const setNextTime = (e, level, time, type) => {
+            if (!valueTo.current || !time) return;
+            const firstDayOfMax = max && new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
+            const firstDayOfTime = new Date(new Date(time).setDate(1)).setHours(0, 0, 0, 0);
+
+            if (level === 'month') {
+                if (firstDayOfMax) {
+                    if (type === 'from' && getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMax) > -59) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                    if (getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMax) > -28) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                }
+                time.setMonth(time.getMonth() + 1);
+                renderCalendar(time, type);
+            }
+            if (level === 'year') {
+                if (firstDayOfMax) {
+                    if (type === 'from' && getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMax) > -396) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                    if (getDaysFrom1970(firstDayOfTime) - getDaysFrom1970(firstDayOfMax) > -365) {
+                        e.currentTarget.disabled = true;
+                        return;
+                    }
+                }
+                time.setFullYear(time.getFullYear() + 1);
+                renderCalendar(time, type);
+            }
+            if (type === 'from') {
+                if (+moment(time).diff(valueTo.current, 'months') >= 0) {
+                    valueTo.current.setFullYear(time.getFullYear());
+                    valueTo.current.setMonth(time.getMonth() + 1);
+                    renderCalendar(valueTo.current, 'to');
+                }
+            }
+        };
+
+        const setButtonState = () => {
+            const isVisible = isEqual(values.current, tempValues.current);
+            const query = function (selector) {
+                return footerRef.current.querySelector(selector);
+            };
+            const close = query(`.${unique.close}`);
+            const cancel = query(`.${unique.cancel}`);
+            const confirm = query(`.${unique.confirm}`);
+
+            const hidden = {
+                display: 'none',
+                visibility: 'hidden',
+            };
+            const visible = {
+                display: 'inline-flex',
+                visibility: 'visible',
+            };
+            if (isVisible) {
+                Object.assign(close.style, visible);
+                Object.assign(cancel.style, hidden);
+                Object.assign(confirm.style, hidden);
+            } else {
+                Object.assign(cancel.style, visible);
+                Object.assign(confirm.style, visible);
+                Object.assign(close.style, hidden);
+            }
+        };
+
+        const onCancel = () => {
+            updateValues(tempValues.current);
+            setButtonState();
+            closePicker();
+        };
+
+        const onConfirm = () => {
+            setButtonState();
+            if (values.current.length === 1) {
+                onChangeValue([values.current[0], values.current[0]]);
+            } else {
+                onChangeValue(values.current);
+            }
+            closePicker();
+        };
+
+        const onSwap = open => {
+            if (!isEnable) return;
+            const t = iconRef.current.childNodes[+open];
+            if (open) {
+                Object.assign(t.style, { ...hiddenStyle });
+                Object.assign(t.previousSibling.style, { ...activeStyle });
+                setTimeout(() => {
+                    t.previousSibling.style.pointerEvents = null;
+                }, 200);
+            } else {
+                Object.assign(t.style, { ...hiddenStyle });
+                Object.assign(t.nextSibling.style, { ...activeStyle });
+                setTimeout(() => {
+                    t.nextSibling.style.pointerEvents = null;
+                }, 200);
+            }
+        };
+
+        const onScroll = () => {
+            const node = document.getElementById(unique.picker);
+            if (!ipConRef.current || !node) {
+                window.removeEventListener('scroll', onScroll);
+                return;
+            }
+            updatePosition(ipConRef.current, node, closePicker);
+        };
+
+        const onResize = () => {
+            if (!ref.current) return;
+            const { width } = ref.current.getBoundingClientRect();
+            const node = document.getElementById(unique.picker);
+            if (node) {
+                node.style.width = width + 'px';
+            }
+            onScroll();
+        };
+
+        const onDayHover = (e, arr) => {
+            const currentTime = parseInt(e.target.dataset.time, 10);
+            let tooltipContent = '';
+            if (e.target.classList.contains(unique.day.limit)) return;
+            for (let i in arr) {
+                const time = parseInt(arr[i].dataset.time, 10);
+                if (values.current[0] && !values.current[1]) {
+                    const firstValue = Number(values.current[0]);
+                    if (firstValue <= time && currentTime >= time && currentTime !== firstValue) {
+                        if (time === firstValue) {
+                            arr[i].classList.remove(unique.day.between, unique.day.to);
+                            arr[i].classList.add(unique.day.from);
+                        } else if (currentTime === time) {
+                            arr[i].classList.remove(unique.day.between, unique.day.from);
+                            arr[i].classList.add(unique.day.to);
+                        } else {
+                            arr[i].classList.remove(unique.day.to, unique.day.from);
+                            arr[i].classList.add(unique.day.between);
+                        }
+                    } else if (firstValue >= time && currentTime <= time && currentTime !== firstValue) {
+                        if (time === firstValue) {
+                            arr[i].classList.remove(unique.day.between, unique.day.from);
+                            arr[i].classList.add(unique.day.to);
+                        } else if (currentTime === time) {
+                            arr[i].classList.remove(unique.day.between, unique.day.to);
+                            arr[i].classList.add(unique.day.from);
+                        } else {
+                            arr[i].classList.remove(unique.day.to, unique.day.from);
+                            arr[i].classList.add(unique.day.between);
+                        }
+                    } else {
+                        arr[i].classList.remove(unique.day.to, unique.day.from, unique.day.between);
+                    }
+                }
+            }
+            if (values.current[0] && !values.current[1]) {
+                const dates = Math.abs(countDays(new Date(values.current), new Date(currentTime), startFromZero));
+                const tooltip = tooltipRef.current;
+                if (onShowTooltip && dates > 0) {
+                    tooltipContent = dates + ' ' + unitText;
+                }
+                if (tooltipContent) {
+                    const tooltipBounding = tooltip.getBoundingClientRect();
+                    const dayBounding = e.target.getBoundingClientRect();
+                    const pickerBounding = pickerRef.current.getBoundingClientRect();
+                    tooltip.style.visibility = 'visible';
+                    let left =
+                        dayBounding.left -
+                        pickerBounding.left +
+                        dayBounding.width / 2 -
+                        tooltipBounding.width / 2 +
+                        'px';
+                    let top = dayBounding.top - pickerBounding.top - 4 - tooltipBounding.height + 'px';
+                    tooltip.childNodes[0].textContent = tooltipContent;
+                    setTimeout(() => {
+                        tooltip.style.left = left;
+                        tooltip.style.top = top;
+                    }, 10);
+                } else {
+                    tooltipRef.current.style.visibility = 'hidden';
+                }
+            } else {
+                tooltipRef.current.style.visibility = 'hidden';
+            }
+        };
+
+        const onPickerHover = (e, arr) => {
+            arr = Array.from(arr);
+            if (e.target.tagName && e.target.tagName.toLowerCase() === 'td') {
+                onDayHover(e, arr);
+            } else {
+                clearDayHovering(arr);
+            }
+        };
+
+        const pressESCHandler = event => {
+            if (event.key === 'Escape') {
+                onClickOutside({ target: null });
+            }
+        };
+
+        const renderPicker = () => {
+            renderCalendar(valueFr.current, 'from');
+            renderCalendar(valueTo.current, 'to');
+        };
+
+        const openPicker = anchor => {
+            const backGr = createBackground();
+            const picker = createPicker(anchor);
+            render(pickerComp, backGr.appendChild(picker));
+            const arr = pickerRef.current.getElementsByTagName('td');
+            updateTempValues(values.current.length === 1 ? [values.current[0], values.current[0]] : values.current);
+            setTimeout(() => {
+                Object.assign(picker.style, { ...pickerCSS.active });
+                renderPicker();
+                pickerRef.current.addEventListener('mouseover', e => onPickerHover(e, arr));
+                window.addEventListener('resize', onResize);
+                window.addEventListener('scroll', onScroll);
+                document.addEventListener('mousedown', onClickOutside);
+                if (pressESCToClose) {
+                    document.addEventListener('keydown', pressESCHandler);
+                }
+                controls && setButtonState();
+            });
+        };
+
+        const closePicker = () => {
+            const backGr = document.getElementById(unique.backGr);
+            if (!backGr) return;
+            const picker = backGr.querySelector(`#${unique.picker}`);
+            if (!picker) return;
+            Object.assign(picker.style, { ...pickerCSS.remove });
+            if (pressESCToClose) {
+                document.removeEventListener('keydown', pressESCHandler);
+            }
+            document.removeEventListener('mousedown', onClickOutside);
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+            setTimeout(() => {
+                backGr.remove();
+            }, 200);
+            pickerRef.current && pickerRef.current.removeEventListener('mouseover', onPickerHover);
+            if (ipConRef.current) {
+                ipConRef.current.classList.remove(unique.focus);
+                ipConRef.current.style.zIndex = null;
+            }
+            ipRef.current && ipRef.current.blur();
+            updateTempValues([]);
+        };
+
+        const onClickOutside = e => {
+            if (
+                ipConRef.current &&
+                !ipConRef.current.contains(e.target) &&
+                ipRef.current &&
+                !ipRef.current.contains(e.target) &&
+                pickerRef.current &&
+                !pickerRef.current.contains(e.target)
+            ) {
+                controls ? onCancel() : closePicker();
+            }
+        };
+
+        const triggerFocus = () => {
+            if (!ipConRef.current.classList.contains(unique.focus)) {
+                ipRef.current.focus();
+            } else {
+                onClickOutside({ target: null });
+            }
+        };
+
+        const onInputFocus = () => {
+            if (!isEnable) return;
+            const el = ipConRef.current;
+            if (!el.classList.contains(unique.focus)) {
+                el.classList.add(unique.focus);
+                openPicker();
+            }
+        };
+
+        const setInputValue = (time, reset, unshift = false) => {
+            if (!ipRef.current) return;
+            const el = ipRef.current;
+            let enUnitText = locale.get() === 'en' && selected.current > 1 ? unitText + 's' : unitText;
+            let tempValue;
+            if (!reset) {
+                if (unshift) {
+                    tempValue =
+                        formatValue(time, displayFormat) +
+                        ' - ' +
+                        el.value +
+                        (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+                } else {
+                    tempValue =
+                        el.value +
+                        ' - ' +
+                        formatValue(time, displayFormat) +
+                        (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+                }
+            } else {
+                tempValue = formatValue(time, displayFormat);
+            }
+            el.value = capitalizeSentenceCase(tempValue);
+            setValueState(capitalizeSentenceCase(tempValue));
+            clearAble && onSwap(false);
+        };
+
+        const onClear = () => {
+            if (!clearAble || !ipRef.current) return;
+            ipRef.current.value = '';
+            updateValues([]);
+            const e = { value: null };
+            !!onChange && onChange(e);
+            onSwap(true);
+        };
+
+        useEffect(() => {
+            update(defaultValue);
+            return () => {
+                closePicker();
+            };
+        }, []);
+
+        useEffect(() => {
+            if (value) {
+                update(value);
+                closePicker();
+            }
+        }, [value]);
+
+        useEffect(() => {
+            if (!readOnly) {
+                ipRef.current.addEventListener('focus', onInputFocus);
+            }
+
+            return () => {
+                if (!ipRef.current) return;
+                if (!readOnly) {
+                    ipRef.current.removeEventListener('focus', onInputFocus);
+                }
+            };
+        }, [readOnly, onChange]);
+
+        useEffect(() => {
+            if (min) {
+                let arr = [];
+                const newMin = new Date(min).setHours(0, 0, 0, 0);
+                if (isBefore(newMin, values.current[0])) {
+                    arr.push(newMin);
+                    if (isBefore(newMin, values.current[1])) {
+                        arr.push(newMin);
+                    } else {
+                        arr.push(values.current[1]);
+                    }
+                    update(arr);
+                }
+            }
+            if (max) {
+                let arr = [];
+                const newMax = max && new Date(max).setHours(0, 0, 0, 0);
+                if (isAfter(newMax, values.current[1])) {
+                    arr.push(newMax);
+                    if (isAfter(newMax, values.current[0])) {
+                        arr.push(newMax);
+                    } else {
+                        arr.unshift(values.current[0]);
+                    }
+                    update(arr);
+                }
+            }
+        }, [max, min]);
+
+        useEffect(() => {
+            if (ipRef.current.value !== '') {
+                update(values.current);
+            }
+            if (isEnable) {
+                closePicker();
+            }
+            return () => {
+                if (!iconRef.current || !ipRef.current) return;
+                closePicker();
+            };
+        }, [
+            actionIconAt,
+            clearAble,
+            controls,
+            disabled,
+            displayFormat,
+            max,
+            min,
+            pressESCToClose,
+            readOnly,
+            startFromZero,
+            unitCount,
+            viewType,
+        ]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            currentRef.get = ref.current;
+            const _instance = {
+                show: el => openPicker(el),
+                close: closePicker,
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const iconComp = isEnable ? (
+            <div css={IconAreaCSS} ref={iconRef}>
+                <ButtonIcon
+                    viewType={'ghost'}
+                    onClick={triggerFocus}
+                    className={`${unique.icon} ${unique.icon}-accept`}
+                    viewBox
+                    name={'Calendar'}
+                />
+                <ButtonIcon
+                    viewType={'ghost'}
+                    onClick={onClear}
+                    className={`${unique.icon} ${unique.icon}-cancel`}
+                    viewBox
+                    name={'Close'}
+                />
+            </div>
+        ) : null;
+        const endIcon = actionIconAt === 'end' && iconComp;
+        const startIcon = actionIconAt === 'start' && iconComp;
+        const footerMemo = (
+            <div css={_ControlContainerCSS} className={unique.footer} ref={footerRef}>
+                <Button
+                    {...buttonProps(theme)}
+                    className={unique.close}
+                    onClick={() => onClickOutside({ target: null })}
+                >
+                    {closeText}
+                </Button>
+                <Button {...buttonProps(theme)} className={unique.cancel} onClick={onCancel}>
+                    {cancelText}
+                </Button>
+                <Button {...buttonProps(theme)} color={'info'} className={unique.confirm} onClick={onConfirm}>
+                    {confirmText}
+                </Button>
+            </div>
+        );
+        const leftCalendarComp = (
+            <div css={generateCalendarCSS(unique, false, false, theme)}>
+                {renderNavigator(
+                    unique,
+                    navigatorFromRefs,
+                    e => setPrevTime(e, 'year', valueFr.current, 'from'),
+                    e => setPrevTime(e, 'month', valueFr.current, 'from'),
+                    e => setNextTime(e, 'month', valueFr.current, 'from'),
+                    e => setNextTime(e, 'year', valueFr.current, 'from')
+                )}
+                <div className={unique.table.container}>
+                    <table className={unique.table.table} ref={tableFrRef}>
+                        {renderHeader(unique)}
+                        <tbody />
+                    </table>
+                </div>
+            </div>
+        );
+        const rightCalendarComp = (
+            <div css={generateCalendarCSS(unique, false, false, theme)}>
+                {renderNavigator(
+                    unique,
+                    navigatorToRefs,
+                    e => setPrevTime(e, 'year', valueTo.current, 'to'),
+                    e => setPrevTime(e, 'month', valueTo.current, 'to'),
+                    e => setNextTime(e, 'month', valueTo.current, 'to'),
+                    e => setNextTime(e, 'year', valueTo.current, 'to')
+                )}
+                <div className={unique.table.container}>
+                    <table className={unique.table.table} ref={tableToRef}>
+                        {renderHeader(unique)}
+                        <tbody />
+                    </table>
+                </div>
+            </div>
+        );
+        const tooltipComp = (
+            <div className={unique.tooltip} ref={tooltipRef}>
+                <Typography color={'system/standard'} type={'p2'} />
+            </div>
+        );
+        const pickerComp = (
+            <div css={pickerCSS.container(theme)} ref={pickerRef}>
+                <div className={unique.wrapper}>
+                    {leftCalendarComp}
+                    <Divider
+                        direction={'vertical'}
+                        className={unique.divider}
+                        height={'100%'}
+                        style={{
+                            height: '226px',
+                            margin: spacing([4.5, 0.5, 0]),
+                        }}
+                    />
+                    {rightCalendarComp}
+                </div>
+                {tooltipComp}
+                {controls ? footerMemo : null}
+            </div>
+        );
+
+        return (
+            <ControlComp {...other} disabled={disabled} error={error} ref={ref} style={style}>
+                {label ? (
+                    <Label {...labelProps} disabled={disabled} required={required}>
+                        {label}
+                    </Label>
+                ) : null}
+                <InputBase
+                    inputProps={{
+                        placeholder: !readOnly && !disabled ? placeholder : '',
+                        ...inputProps,
+                    }}
+                    readOnly
+                    ref={ipConRef}
+                    inputRef={ipRef}
+                    disabled={disabled}
+                    viewType={viewType}
+                    inputStyle={{
+                        textAlign: textAlign,
+                        textOverflow: 'ellipsis',
+                        ...inputStyle,
+                    }}
+                    startIcon={startIcon}
+                    startIconProps={{ className: 'non-effect allow-disabled' }}
+                    endIcon={endIcon}
+                    value={valueState}
+                    onClick={onInputFocus}
+                />
+                {error ? (
+                    <HelperText {...helperTextProps} disabled={disabled}>
+                        {error}
+                    </HelperText>
+                ) : null}
+            </ControlComp>
+        );
+    })
+);
+
+const unique = {
+    backGr: 'DGN-UI-Portal',
+    close: 'DGN-UI-DateRangePicker-close',
+    cancel: 'DGN-UI-DateRangePicker-cancel',
+    confirm: 'DGN-UI-DateRangePicker-confirm',
+    divider: 'DGN-UI-DateRangePicker-Divider',
+    disabled: 'DGN-UI-DateRangePicker-disabled',
+    error: 'DGN-UI-DateRangePicker-error',
+    focus: 'DGN-UI-DateRangePicker-focus',
+    footer: 'DGN-UI-DateRangePicker-Footer',
+    picker: 'DGN-UI-DateRangePicker-Picker-' + randomString(6, { allowSymbol: false }),
+    wrapper: 'DGN-UI-DateRangePicker-Wrapper',
+    container: 'DGN-UI-DateRangePicker',
+    icon: 'DGN-UI-DateRangePicker-Icon',
+    tooltip: 'DGN-UI-DateRangePicker-Tooltip',
+    navigator: {
+        navigator: 'DGN-UI-DateRangePicker-Navigator',
+        around: 'DGN-UI-DateRangePicker-Navigator-Around',
+        center: 'DGN-UI-DateRangePicker-Navigator-Center',
+    },
+    table: {
+        container: 'DGN-UI-DateRangePicker-Table-Container',
+        table: 'DGN-UI-DateRangePicker-Table-Table',
+        header: 'DGN-UI-DateRangePicker-Table-Header',
+        raw: 'DGN-UI-DateRangePicker-Table-Raw',
+        data: 'DGN-UI-DateRangePicker-Table-Data',
+    },
+    day: {
+        day: 'DGN-UI-DateRangePicker-Day',
+        week: 'DGN-UI-DateRangePicker-Week',
+        today: 'DGN-UI-DateRangePicker-Day-today',
+        active: 'DGN-UI-DateRangePicker-Day-active',
+        limit: 'DGN-UI-DateRangePicker-Day-limit',
+        from: 'DGN-UI-DateRangePicker-Day-from',
+        to: 'DGN-UI-DateRangePicker-Day-to',
+        between: 'DGN-UI-DateRangePicker-Day-between',
+    },
+};
+
+const hiddenStyle = {
+    opacity: 0,
+    display: 'none',
+};
+const activeStyle = {
+    opacity: 1,
+    pointerEvents: 'none',
+    display: 'block',
+};
+
+const buttonProps = ({ spacing }) => ({
+    style: {
+        display: 'none',
+        margin: spacing([0, 0.5]),
+        padding: spacing([1.75, 2]),
+        visibility: 'hidden',
+    },
+});
+
+const IconAreaCSS = css`
+    .${unique.icon} {
+        ${displayNone};
+        ${cursorPointer};
+        opacity: 0;
+        transition: display 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+        will-change: display, opacity;
+    }
+    .${unique.icon}-accept {
+        ${displayBlock};
+        opacity: 1;
+    }
+`;
+
+const ControlContainerCSS = ({ spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${justifyEnd};
+    margin: ${spacing([0, 4, 4])};
+`;
+
+const pickerCSS = {
+    backGr: ({ zIndex }) => `
+        background-color: transparent; 
+        top: 0px; bottom: 0px; left: 0px; right: 0px; pointer-events: auto; 
+        position: fixed; 
+        z-index: ${zIndex(1)};`,
+    container: ({ spacing }) => css`
+        ${displayFlex};
+        ${flexCol};
+        ${borderRadius4px};
+        ${bgColor('system/standard')};
+        ${shadowLarge};
+        .${unique.wrapper} {
+            ${displayFlex};
+            ${flexRow};
+            ${parseMinWidth(633)};
+        }
+        .${unique.tooltip} {
+            ${borderRadius4px};
+            ${pointerEventsNone};
+            ${positionFixed};
+            ${textCenter};
+            ${userSelectNone};
+            ${whiteSpaceNoWrap};
+            ${parseHeight(18)};
+            ${parseMinWidth(65)};
+            ${bgColor('rgba(21, 26, 48, 0.9)')};
+            padding: ${spacing([0.75, 1.5])};
+            ${invisible};
+            ${z(3)};
+            transition: left 0.05s ease-in, top 0.05s ease-in;
+            vertical-align: middle;
+            will-change: left top visibility;
+        }
+        @media only screen and (max-width: 800px) {
+            ${parseMaxWidth(400)};
+            .${unique.wrapper} {
+                ${displayFlex};
+                ${flexCol};
+                ${parseMinWidth(260)};
+            }
+            .${unique.divider} {
+                height: 1px !important;
+                margin: ${spacing([0, 4])} !important;
+                width: calc(100% - 32px) !important;
+            }
+        }
+    `,
+    picker: position => css`
+        ${borderRadius4px};
+        ${positionFixed};
+        ${parseHeight('max-content')};
+        ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
+        ${parseMaxWidth(805)};
+        ${top(position.top)};
+        ${left(position.left)};
+        ${z(2)};
+        opacity: 0;
+        transform: scale(0);
+        transform-origin: ${position.transformOrigin};
+        transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    `,
+    active: {
+        opacity: 1,
+        transform: 'scale(1)',
+    },
+    remove: {
+        opacity: 0,
+        pointerEvents: 'none',
+        transform: 'scale(0)',
+    },
+};
+
+// DateRangePicker.defaultProps = {
+//     actionIconAt: 'end',
+//     clearAble: false,
+//     controls: false,
+//     disabled: false,
+//     displayFormat: 'DD/MM/YY',
+//     onShowTooltip: true,
+//     pressESCToClose: true,
+//     readOnly: false,
+//     required: false,
+//     returnFormat: 'YYYY-MM-DD',
+//     showUnitCount: true,
+//     startFromZero: false,
+//     textAlign: 'start',
+//     unitCount: 'day',
+//     viewType: 'underlined',
+// };
+
+DateRangePicker.propTypes = {
+    /** Position of action icons. */
+    actionIconAt: PropTypes.oneOf(['end', 'start']),
+    /** If `true`, display the clear icon. */
+    clearAble: PropTypes.bool,
+    /** If `true`, the calendar will have a footer controls. */
+    controls: PropTypes.bool,
+    /** Default value of the component. */
+    defaultValue: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.instanceOf(Date)),
+        PropTypes.arrayOf(PropTypes.string),
+    ]),
+    /** If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** Format to display value. */
+    displayFormat: PropTypes.oneOfType([
+        PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']),
+        PropTypes.string,
+    ]),
+    /** Error displayed below input. */
+    error: PropTypes.string,
+    /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
+    helperTextProps: PropTypes.object,
+    /** [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-input-inputbase) of input base */
+    inputProps: PropTypes.object,
+    /** Consult [InputBase's](https://core.diginet.com.vn/ui/?path=/story/form-control-input-inputbase) documents. */
+    inputStyle: PropTypes.object,
+    /** The label of the component. */
+    label: PropTypes.string,
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
+    labelProps: PropTypes.object,
+    /** Max value of date picker. */
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    /** Min value of date picker. */
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+    /** Callback fired when the value is changed. */
+    onChange: PropTypes.func,
+    /** The short hint displayed in the input before the user enters a value. */
+    placeholder: PropTypes.string,
+    /** If `true`, hitting escape will close component. */
+    pressESCToClose: PropTypes.bool,
+    /** If `true`, the component is readOnly. */
+    readOnly: PropTypes.bool,
+    /** If `true`, the input element is required. */
+    required: PropTypes.bool,
+    /** Format of the returned value. */
+    returnFormat: PropTypes.oneOfType([
+        PropTypes.oneOf(['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD']),
+        PropTypes.string,
+    ]),
+    /** If `true`, show unit count. */
+    showUnitCount: PropTypes.bool,
+    /** Counter with start with 0 or 1. */
+    startFromZero: PropTypes.bool,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Text align of the input. */
+    textAlign: PropTypes.oneOf(['center', 'end', 'start']),
+    /** The count unit when select. */
+    unitCount: PropTypes.oneOf(['day', 'night']),
+    /** The value of the input element, required for a controlled component. String must be [Date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date): YYYY/MM/DD, MM/DD/YYYY,...*/
+    value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
+    /** The variant to use. */
+    viewType: PropTypes.oneOf(['outlined', 'underlined']),
+};
+
+export default DateRangePicker;