diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,1183 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from "../..";
-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 = /*#__PURE__*/memo(/*#__PURE__*/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 !== null && placeholderProp !== void 0 ? 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 === null || v === void 0 ? void 0 : 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(jsx("td", {
-        key: `previous_month-${prevDate - i + 1}`,
-        "data-time": day - 1,
-        className: classNames(unique.table.data, 'previous_month', isBetween(day - 1), 'empty')
-      }, jsx("span", {
-        className: unique.day.day
-      })));
-    }
-    /**
-     * days of current 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(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
-      }, jsx(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)));
-    }
-    /**
-     * 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(jsx("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')
-      }, jsx("span", {
-        className: unique.day.day
-      })));
-    }
-    for (let i = 0; i < 6; i++) {
-      for (let j = 0; j < 7; j++) {
-        tableRaw.push(tableData[7 * i + j] || jsx("td", {
-          key: 7 * i + j,
-          className: classNames(unique.table.data, 'next_month')
-        }));
-      }
-      tableBody.push(jsx("tr", {
-        key: i,
-        className: unique.day.week
-      }, tableRaw));
-      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 ? jsx("div", {
-    css: IconAreaCSS,
-    ref: iconRef
-  }, jsx(ButtonIcon, {
-    viewType: 'ghost',
-    onClick: triggerFocus,
-    className: `${unique.icon} ${unique.icon}-accept`,
-    viewBox: true,
-    name: 'Calendar'
-  }), jsx(ButtonIcon, {
-    viewType: 'ghost',
-    onClick: onClear,
-    className: `${unique.icon} ${unique.icon}-cancel`,
-    viewBox: true,
-    name: 'Close'
-  })) : null;
-  const endIcon = actionIconAt === 'end' && iconComp;
-  const startIcon = actionIconAt === 'start' && iconComp;
-  const footerMemo = jsx("div", {
-    css: _ControlContainerCSS,
-    className: unique.footer,
-    ref: footerRef
-  }, jsx(Button, {
-    ...buttonProps(theme),
-    className: unique.close,
-    onClick: () => onClickOutside({
-      target: null
-    })
-  }, closeText), jsx(Button, {
-    ...buttonProps(theme),
-    className: unique.cancel,
-    onClick: onCancel
-  }, cancelText), jsx(Button, {
-    ...buttonProps(theme),
-    color: 'info',
-    className: unique.confirm,
-    onClick: onConfirm
-  }, confirmText));
-  const leftCalendarComp = jsx("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')), jsx("div", {
-    className: unique.table.container
-  }, jsx("table", {
-    className: unique.table.table,
-    ref: tableFrRef
-  }, renderHeader(unique), jsx("tbody", null))));
-  const rightCalendarComp = jsx("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')), jsx("div", {
-    className: unique.table.container
-  }, jsx("table", {
-    className: unique.table.table,
-    ref: tableToRef
-  }, renderHeader(unique), jsx("tbody", null))));
-  const tooltipComp = jsx("div", {
-    className: unique.tooltip,
-    ref: tooltipRef
-  }, jsx(Typography, {
-    color: 'system/standard',
-    type: 'p2'
-  }));
-  const pickerComp = jsx("div", {
-    css: pickerCSS.container(theme),
-    ref: pickerRef
-  }, jsx("div", {
-    className: unique.wrapper
-  }, leftCalendarComp, jsx(Divider, {
-    direction: 'vertical',
-    className: unique.divider,
-    height: '100%',
-    style: {
-      height: '226px',
-      margin: spacing([4.5, 0.5, 0])
-    }
-  }), rightCalendarComp), tooltipComp, controls ? footerMemo : null);
-  return jsx(ControlComp, {
-    ...other,
-    disabled: disabled,
-    error: error,
-    ref: ref,
-    style: style
-  }, label ? jsx(Label, {
-    ...labelProps,
-    disabled: disabled,
-    required: required
-  }, label) : null, jsx(InputBase, {
-    inputProps: {
-      placeholder: !readOnly && !disabled ? placeholder : '',
-      ...inputProps
-    },
-    readOnly: true,
-    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 ? jsx(HelperText, {
-    ...helperTextProps,
-    disabled: disabled
-  }, error) : null);
-}));
-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;