diginet-core-ui 1.3.78 → 1.3.79

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

@@ -1,110 +1,86 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { useImperativeHandle, useRef, memo, forwardRef, useEffect, useState, useCallback } from 'react';
-import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from '../..';
-import ControlComp from '../control';
 import PropTypes from 'prop-types';
-import theme from '../../../theme/settings';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { randomString, updatePosition, date as moment, capitalizeSentenceCase, isEqual, classNames } from '../../../utils';
+import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from '../..';
 import { getGlobal } from '../../../global';
-import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
 import locale from '../../../locale';
-import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseWidth, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from '../../../styles/general';
+import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from '../../../styles/general';
+import { useTheme } from '../../../theme';
+import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from '../../../utils';
+import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
+import ControlComp from '../control';
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     }
   },
+  boxShadows: {
+    large: boxShadowsLarge
+  },
   spacing,
   zIndex: zIndexCORE
-} = theme;
-
+} = 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 || v === null) return false;
-
+  if (!v) return false;
   if (Object.prototype.toString.call(v) === '[object Date]') {
     return true;
   }
-
-  if (!isNaN(Date.parse(new Date(v)))) {
-    return true;
-  }
-
-  return false;
+  return !isNaN(Date.parse(new Date(v)));
 };
-
 const isValidValues = v => {
   if (!v || !Array.isArray(v) || v.length !== 2) {
     return false;
   }
-
-  if (isValidDate(v[0]) && isValidDate(v[1]) && +moment(v[0]).diff(v[1]) <= 0) {
-    return true;
-  }
-
-  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 DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   actionIconAt,
-  controls,
   clearAble,
+  controls,
   defaultValue,
   disabled,
   displayFormat,
@@ -165,6 +141,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     right: useRef(null),
     content: useRef(null)
   };
+  const isEnable = !readOnly && !disabled;
   const closeText = getGlobal(['close']);
   const cancelText = getGlobal(['cancel']);
   const confirmText = getGlobal(['confirm']);
@@ -189,7 +166,6 @@ const DateRangePickerV2 = /*#__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) {
@@ -200,26 +176,20 @@ const DateRangePickerV2 = /*#__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 && Array.isArray(v) && 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);
@@ -227,11 +197,9 @@ const DateRangePickerV2 = /*#__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);
@@ -272,23 +240,21 @@ const DateRangePickerV2 = /*#__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);
+      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", {
@@ -302,8 +268,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     /**
      * 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", {
@@ -331,8 +295,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     /**
      * 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", {
@@ -343,7 +305,6 @@ const DateRangePickerV2 = /*#__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", {
@@ -351,31 +312,26 @@ const DateRangePickerV2 = /*#__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]);
@@ -384,7 +340,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     updateValueFr(from);
     updateValueTo(to);
   };
-
   const update = v => {
     if (v) {
       if (isValidValues(v)) {
@@ -400,7 +355,8 @@ const DateRangePickerV2 = /*#__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);
     }
   };
@@ -421,7 +377,6 @@ const DateRangePickerV2 = /*#__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;
@@ -431,88 +386,71 @@ const DateRangePickerV2 = /*#__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 && min !== null && 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());
@@ -521,46 +459,38 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
   };
-
   const setNextTime = (e, level, time, type) => {
     if (!valueTo.current || !time) return;
     const firstDayOfMax = max && max !== null && 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());
@@ -569,14 +499,11 @@ const DateRangePickerV2 = /*#__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}`);
@@ -588,7 +515,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       display: 'inline-flex',
       visibility: 'visible'
     };
-
     if (isVisible) {
       Object.assign(close.style, visible);
       Object.assign(cancel.style, hidden);
@@ -599,83 +525,72 @@ const DateRangePickerV2 = /*#__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);
@@ -703,15 +618,12 @@ const DateRangePickerV2 = /*#__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();
@@ -731,17 +643,14 @@ const DateRangePickerV2 = /*#__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({
@@ -749,12 +658,10 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       });
     }
   };
-
   const renderPicker = () => {
     renderCalendar(valueFr.current, 'from');
     renderCalendar(valueTo.current, 'to');
   };
-
   const openPicker = anchor => {
     const backGr = createBackground();
     const picker = createPicker(anchor);
@@ -762,34 +669,31 @@ const DateRangePickerV2 = /*#__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);
@@ -797,22 +701,18 @@ const DateRangePickerV2 = /*#__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();
@@ -822,22 +722,18 @@ const DateRangePickerV2 = /*#__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 = '';
-
+    let tempValue;
     if (!reset) {
       if (unshift) {
         tempValue = formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
@@ -847,11 +743,9 @@ const DateRangePickerV2 = /*#__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 = '';
@@ -862,7 +756,6 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     !!onChange && onChange(e);
     onSwap(true);
   };
-
   useEffect(() => {
     update(defaultValue);
     return () => {
@@ -879,10 +772,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (!readOnly) {
       ipRef.current.addEventListener('focus', onInputFocus);
     }
-
     return () => {
       if (!ipRef.current) return;
-
       if (!readOnly) {
         ipRef.current.removeEventListener('focus', onInputFocus);
       }
@@ -892,33 +783,26 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (min && min !== null) {
       let arr = new Array();
       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 && max !== null) {
-      let arr = new Array();
+      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);
       }
     }
@@ -927,28 +811,32 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (ipRef.current.value !== '') {
       update(values.current);
     }
-
-    if (disabled) {
-      iconRef.current.childNodes[0].style.pointerEvents = 'none';
-      closePicker();
-    } else if (!readOnly) {
-      ipRef.current.addEventListener('focus', onInputFocus);
-    } else {
+    // if (disabled) {
+    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
+    //     closePicker();
+    // } else if (!readOnly) {
+    //     ipRef.current.addEventListener('focus', onInputFocus);
+    // } else {
+    //     iconRef.current.childNodes[0].style.pointerEvents = 'none';
+    //     closePicker();
+    // }
+
+    if (isEnable) {
       iconRef.current.childNodes[0].style.pointerEvents = 'none';
       closePicker();
     }
-
     return () => {
       if (!iconRef.current || !ipRef.current) return;
-
-      if (disabled) {
-        iconRef.current.childNodes[0].style.pointerEvents = null;
-      } else if (!readOnly) {
-        ipRef.current.removeEventListener('focus', onInputFocus);
-      } else {
+      // if (disabled) {
+      //     iconRef.current.childNodes[0].style.pointerEvents = null;
+      // } else if (!readOnly) {
+      //     ipRef.current.removeEventListener('focus', onInputFocus);
+      // } else {
+      //     iconRef.current.childNodes[0].style.pointerEvents = null;
+      // }
+      if (isEnable) {
         iconRef.current.childNodes[0].style.pointerEvents = null;
       }
-
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
@@ -961,13 +849,11 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       close: closePicker,
       ...action
     }; // methods
-
     _instance.__proto__ = {}; // hidden methods
-
     currentRef.instance = _instance;
     return currentRef;
   });
-  const iconComp = jsx("div", {
+  const iconComp = isEnable && jsx("div", {
     css: IconAreaCSS,
     ref: iconRef
   }, jsx(ButtonIcon, {
@@ -989,15 +875,18 @@ const DateRangePickerV2 = /*#__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
@@ -1022,7 +911,7 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: white,
+    color: systemWhite,
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -1039,12 +928,14 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       margin: spacing([4.5, 0.5, 0])
     }
   }), rightCalendarComp), tooltipComp, !!controls && footerMemo);
-  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), jsx(InputBase, {
@@ -1067,7 +958,8 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'non-effect allow-disabled'
     },
     endIcon: endIcon
-  }), !!error && jsx(HelperText, { ...helperTextProps,
+  }), !!error && jsx(HelperText, {
+    ...helperTextProps,
     disabled: disabled
   }, error));
 }));
@@ -1162,11 +1054,11 @@ const pickerCSS = {
   container: css`
         ${flexCol};
         ${borderRadius4px};
-        background-color: ${white};
-        box-shadow: ${theme.boxShadows.large};
+        background-color: ${systemWhite};
+        box-shadow: ${boxShadowsLarge};
         .${unique.wrapper} {
             ${flexRow};
-            min-width: 633px;
+            ${parseMinWidth(633)};
         }
         .${unique.tooltip} {
             ${borderRadius4px};
@@ -1175,9 +1067,9 @@ const pickerCSS = {
             ${textCenter};
             ${userSelectNone};
             ${whiteSpaceNoWrap};
+            ${parseHeight(18)};
+            ${parseMinWidth(65)};
             background-color: rgba(21, 26, 48, 0.9);
-            height: 18px;
-            min-width: 65px;
             padding: ${spacing([0.75, 1.5])};
             transition: left 0.05s ease-in, top 0.05s ease-in;
             vertical-align: middle;
@@ -1201,11 +1093,10 @@ const pickerCSS = {
   picker: (position, width) => css`
         ${borderRadius4px};
         ${positionFixed};
-        ${parseWidth(width)};
-        height: max-content;
+        ${parseWidthHeight(width, 'max-content')};
+        ${parseMinWidth(window.innerWidth <= 633 ? 300 : 633)};
+        ${parseMaxWidth(805)};
         left: ${position.left}px;
-        max-width: 805px;
-        min-width: ${window.innerWidth <= 633 ? 300 : 633}px;
         opacity: 0;
         top: ${position.top}px;
         transform: scale(0);
@@ -1227,98 +1118,72 @@ DateRangePickerV2.defaultProps = {
   actionIconAt: 'end',
   clearAble: false,
   controls: false,
-  unitCount: 'day',
   disabled: false,
   displayFormat: 'DD/MM/YY',
   onShowTooltip: true,
   pressESCToClose: true,
   readOnly: false,
   required: false,
-  startFromZero: false,
-  textAlign: 'start',
   returnFormat: 'YYYY-MM-DD',
   showUnitCount: true,
+  startFromZero: false,
+  textAlign: 'start',
+  unitCount: 'day',
   viewType: 'underlined'
 };
 DateRangePickerV2.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'])
 };