diginet-core-ui 1.3.87 → 1.3.88

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

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from "../..";
@@ -24,58 +25,76 @@ const {
   spacing,
   zIndex: zIndexCORE
 } = useTheme();
+
 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(({
   action = {},
   actionIconAt,
@@ -166,6 +185,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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) {
@@ -176,20 +196,26 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } 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);
@@ -197,9 +223,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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);
@@ -240,21 +268,23 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   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();
+          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
+        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", {
@@ -265,9 +295,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * 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", {
@@ -292,9 +324,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         type: 'h6'
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * 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", {
@@ -305,6 +339,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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", {
@@ -312,26 +347,31 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           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]);
@@ -340,6 +380,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     updateValueFr(from);
     updateValueTo(to);
   };
+
   const update = v => {
     if (v) {
       if (isValidValues(v)) {
@@ -355,8 +396,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } 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);
+      updateFromTo(values.current); // setInputValue(values.current[0], true);
       // setInputValue(values.current[1], false);
     }
   };
@@ -377,6 +417,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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;
@@ -386,71 +427,88 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         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, width).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;
     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());
@@ -459,38 +517,46 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   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());
@@ -499,11 +565,14 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
+
   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}`);
@@ -515,6 +584,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       display: 'inline-flex',
       visibility: 'visible'
     };
+
     if (isVisible) {
       Object.assign(close.style, visible);
       Object.assign(cancel.style, hidden);
@@ -525,72 +595,84 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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.style, { ...hiddenStyle
       });
-      Object.assign(t.previousSibling.style, {
-        ...activeStyle
+      Object.assign(t.previousSibling.style, { ...activeStyle
       });
       setTimeout(() => {
         t.previousSibling.style.pointerEvents = null;
       }, 200);
     } else {
-      Object.assign(t.style, {
-        ...hiddenStyle
+      Object.assign(t.style, { ...hiddenStyle
       });
-      Object.assign(t.nextSibling.style, {
-        ...activeStyle
+      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);
@@ -618,12 +700,15 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }
     }
+
     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();
@@ -643,14 +728,17 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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({
@@ -658,10 +746,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
+
   const renderPicker = () => {
     renderCalendar(valueFr.current, 'from');
     renderCalendar(valueTo.current, 'to');
   };
+
   const openPicker = anchor => {
     const backGr = createBackground();
     const picker = createPicker(anchor);
@@ -669,31 +759,34 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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
+      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
+    Object.assign(picker.style, { ...pickerCSS.remove
     });
+
     if (pressESCToClose) {
       document.removeEventListener('keydown', pressESCHandler);
     }
+
     document.removeEventListener('mousedown', onClickOutside);
     window.removeEventListener('scroll', onScroll);
     window.removeEventListener('resize', onResize);
@@ -701,18 +794,22 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       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();
@@ -722,18 +819,22 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
+
   const onInputFocus = () => {
     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})` : '');
@@ -743,9 +844,11 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     } else {
       tempValue = formatValue(time, displayFormat);
     }
+
     el.value = capitalizeSentenceCase(tempValue);
     clearAble && onSwap(false);
   };
+
   const onClear = () => {
     if (!clearAble || !ipRef.current) return;
     ipRef.current.value = '';
@@ -756,6 +859,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!onChange && onChange(e);
     onSwap(true);
   };
+
   useEffect(() => {
     update(defaultValue);
     return () => {
@@ -772,8 +876,10 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!readOnly) {
       ipRef.current.addEventListener('focus', onInputFocus);
     }
+
     return () => {
       if (!ipRef.current) return;
+
       if (!readOnly) {
         ipRef.current.removeEventListener('focus', onInputFocus);
       }
@@ -783,26 +889,33 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     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);
       }
     }
@@ -810,8 +923,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (ipRef.current.value !== '') {
       update(values.current);
-    }
-    // if (disabled) {
+    } // if (disabled) {
     //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
     //     closePicker();
     // } else if (!readOnly) {
@@ -821,13 +933,14 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     //     closePicker();
     // }
 
+
     if (isEnable) {
       // iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
     }
+
     return () => {
-      if (!iconRef.current || !ipRef.current) return;
-      // if (disabled) {
+      if (!iconRef.current || !ipRef.current) return; // if (disabled) {
       //     iconRef.current.childNodes[0].style.pointerEvents = null;
       // } else if (!readOnly) {
       //     ipRef.current.removeEventListener('focus', onInputFocus);
@@ -837,6 +950,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // if (isEnable) {
       //     iconRef.current.childNodes[0].style.pointerEvents = null;
       // }
+
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
@@ -849,7 +963,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       close: closePicker,
       ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -875,18 +991,15 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: ControlContainerCSS,
     className: unique.footer,
     ref: footerRef
-  }, jsx(Button, {
-    ...buttonProps,
+  }, jsx(Button, { ...buttonProps,
     className: unique.close,
     onClick: () => onClickOutside({
       target: null
     })
-  }, closeText), jsx(Button, {
-    ...buttonProps,
+  }, closeText), jsx(Button, { ...buttonProps,
     className: unique.cancel,
     onClick: onCancel
-  }, cancelText), jsx(Button, {
-    ...buttonProps,
+  }, cancelText), jsx(Button, { ...buttonProps,
     color: 'info',
     className: unique.confirm,
     onClick: onConfirm
@@ -928,14 +1041,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       margin: spacing([4.5, 0.5, 0])
     }
   }), rightCalendarComp), tooltipComp, controls ? footerMemo : null);
-  return jsx(ControlComp, {
-    ...props,
+  return jsx(ControlComp, { ...props,
     disabled: disabled,
     error: error,
     ref: ref,
     style: style
-  }, label ? jsx(Label, {
-    ...labelProps,
+  }, label ? jsx(Label, { ...labelProps,
     disabled: disabled,
     required: required
   }, label) : null, jsx(InputBase, {
@@ -958,8 +1069,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'non-effect allow-disabled'
     },
     endIcon: endIcon
-  }), error ? jsx(HelperText, {
-    ...helperTextProps,
+  }), error ? jsx(HelperText, { ...helperTextProps,
     disabled: disabled
   }, error) : null);
 }));
@@ -1134,56 +1244,82 @@ DateRangePicker.defaultProps = {
 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,
+
   /** The count unit when select. */
   unitCount: PropTypes.oneOf(['day', 'night']),
+
   /** 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,
+
   /** Min value of date picker. */
   min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+
   /** Max value of date picker. */
   max: 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 value of the input element, required for a controlled component. */
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
+
   /** The variant to use. */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])
 };