diginet-core-ui 1.3.88 → 1.3.89

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

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from "../..";
@@ -25,76 +24,58 @@ 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,
@@ -185,7 +166,6 @@ 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) {
@@ -196,26 +176,20 @@ 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);
@@ -223,11 +197,9 @@ 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);
@@ -268,23 +240,21 @@ 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", {
@@ -295,11 +265,9 @@ 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", {
@@ -324,11 +292,9 @@ 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", {
@@ -339,7 +305,6 @@ 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", {
@@ -347,31 +312,26 @@ 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]);
@@ -380,7 +340,6 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     updateValueFr(from);
     updateValueTo(to);
   };
-
   const update = v => {
     if (v) {
       if (isValidValues(v)) {
@@ -396,7 +355,8 @@ 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);
     }
   };
@@ -417,7 +377,6 @@ 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;
@@ -427,88 +386,71 @@ 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());
@@ -517,46 +459,38 @@ 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());
@@ -565,14 +499,11 @@ 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}`);
@@ -584,7 +515,6 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       display: 'inline-flex',
       visibility: 'visible'
     };
-
     if (isVisible) {
       Object.assign(close.style, visible);
       Object.assign(cancel.style, hidden);
@@ -595,84 +525,72 @@ 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);
@@ -700,15 +618,12 @@ 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();
@@ -728,17 +643,14 @@ 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({
@@ -746,12 +658,10 @@ 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);
@@ -759,34 +669,31 @@ 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);
@@ -794,22 +701,18 @@ 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();
@@ -819,22 +722,18 @@ 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})` : '');
@@ -844,11 +743,9 @@ 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 = '';
@@ -859,7 +756,6 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!onChange && onChange(e);
     onSwap(true);
   };
-
   useEffect(() => {
     update(defaultValue);
     return () => {
@@ -876,10 +772,8 @@ 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);
       }
@@ -889,33 +783,26 @@ 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);
       }
     }
@@ -923,7 +810,8 @@ 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) {
@@ -933,14 +821,13 @@ 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);
@@ -950,7 +837,6 @@ 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]);
@@ -963,9 +849,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       close: closePicker,
       ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -991,15 +875,18 @@ 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
@@ -1041,12 +928,14 @@ 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, {
@@ -1069,7 +958,8 @@ 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);
 }));
@@ -1244,82 +1134,56 @@ 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'])
 };