diginet-core-ui 1.3.24

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

@@ -0,0 +1,1305 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useImperativeHandle, useRef, memo, forwardRef, useEffect, useState, useCallback } from 'react';
+import { Button, Divider, HelperText, InputBase, Label, Typography } from '../..';
+import ControlComp from '../control';
+import PropTypes from 'prop-types';
+import theme from '../../../theme/settings';
+import Icon from '../../../icons';
+import { render } from 'react-dom';
+import { randomString, updatePosition, date as moment, capitalizeSentenceCase, isEqual } from '../../../utils';
+import { getGlobal } from '../../../global';
+import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
+import locale from '../../../locale';
+const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  actionIconAt,
+  controls,
+  clearAble,
+  defaultValue,
+  disabled,
+  displayFormat,
+  error,
+  errorProps,
+  inputProps,
+  inputStyle,
+  label,
+  labelProps,
+  max,
+  min,
+  onChange,
+  onShowTooltip,
+  placeholder,
+  pressESCToClose,
+  readOnly,
+  required,
+  returnFormat,
+  startFromZero,
+  style,
+  textAlign,
+  unitCount,
+  value,
+  viewType,
+  ...props
+}, reference) => {
+  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 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)
+  };
+  useImperativeHandle(reference, () => ({
+    get: () => {
+      return ref.current;
+    }
+  }));
+  const [id] = useState(randomString(6, {
+    allowSymbol: false
+  }));
+  const unique = {
+    backGr: 'DGN-UI-Portal',
+    close: 'DGN-UI-DateRangePickerV2-close',
+    cancel: 'DGN-UI-DateRangePickerV2-cancel',
+    confirm: 'DGN-UI-DateRangePickerV2-confirm',
+    divider: 'DGN-UI-DateRangePickerV2-Divider',
+    disabled: 'DGN-UI-DateRangePickerV2-disabled',
+    error: 'DGN-UI-DateRangePickerV2-error',
+    focus: 'DGN-UI-DateRangePickerV2-focus',
+    footer: 'DGN-UI-DateRangePickerV2-Footer',
+    picker: 'DGN-UI-DateRangePickerV2-Picker-' + id,
+    wrapper: 'DGN-UI-DateRangePickerV2-Wrapper',
+    container: 'DGN-UI-DateRangePickerV2',
+    icon: 'DGN-UI-DateRangePickerV2-Icon',
+    tooltip: 'DGN-UI-DateRangePickerV2-Tooltip',
+    navigator: {
+      navigator: 'DGN-UI-DateRangePickerV2-Navigator',
+      around: 'DGN-UI-DateRangePickerV2-Navigator-Around',
+      center: 'DGN-UI-DateRangePickerV2-Navigator-Center'
+    },
+    table: {
+      container: 'DGN-UI-DateRangePickerV2-Table-Container',
+      table: 'DGN-UI-DateRangePickerV2-Table-Table',
+      header: 'DGN-UI-DateRangePickerV2-Table-Header',
+      raw: 'DGN-UI-DateRangePickerV2-Table-Raw',
+      data: 'DGN-UI-DateRangePickerV2-Table-Data'
+    },
+    day: {
+      day: 'DGN-UI-DateRangePickerV2-Day',
+      week: 'DGN-UI-DateRangePickerV2-Week',
+      today: 'DGN-UI-DateRangePickerV2-Day-today',
+      active: 'DGN-UI-DateRangePickerV2-Day-active',
+      limit: 'DGN-UI-DateRangePickerV2-Day-limit',
+      from: 'DGN-UI-DateRangePickerV2-Day-from',
+      to: 'DGN-UI-DateRangePickerV2-Day-to',
+      between: 'DGN-UI-DateRangePickerV2-Day-between'
+    }
+  };
+  const closeText = getGlobal(['close']);
+  const cancelText = getGlobal(['cancel']);
+  const confirmText = getGlobal(['confirm']);
+  const unitText = getGlobal([unitCount]);
+  const iconAreaCSS = css`
+        align-items : center;
+        color       : inherit;
+        display     : flex;
+        width       : 24px;
+        & span {
+            padding: 0;
+        }
+        .${unique.icon} {
+            cursor     : pointer;
+            opacity    : 0;
+            transition : visibility 50ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+            visibility : hidden;
+            will-change: visibility, opacity;
+        }
+        .${unique.icon}-cancel {
+            transform : translateX(-100%);
+        }
+        .${unique.icon}-accept {
+            opacity	  : 1;
+            visibility: visible;
+        }
+    `;
+  const hiddenStyle = {
+    opacity: 0,
+    visibility: 'hidden'
+  };
+  const activeStyle = {
+    opacity: 1,
+    pointerEvents: 'none',
+    visibility: 'visible'
+  };
+  const controlContainerCSS = css`
+        display        : flex;
+        justify-content: flex-end;
+        margin         : 0 16px 16px;
+    `;
+  const buttonProps = {
+    style: {
+      display: 'none',
+      margin: '0 2px',
+      padding: '7px 8px',
+      visibility: 'hidden'
+    }
+  };
+
+  const typographyProps = className => {
+    return {
+      className,
+      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'
+    };
+  };
+
+  const dividerProps = {
+    direction: 'vertical',
+    className: unique.divider,
+    height: '100%',
+    style: {
+      height: '226px',
+      margin: '18px 2px 0px'
+    }
+  };
+  const pickerCSS = {
+    backGr: 'background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: 9001;',
+    container: css`
+			background-color: ${theme.colors.white};
+			border-radius   : ${theme.border.radius};
+			box-shadow      : ${theme.boxShadows.large};
+			display         : flex;
+            flex-flow       : column;
+            .${unique.wrapper} {
+                display  : flex;
+                min-width: 633px;
+            }
+            .${unique.tooltip} {
+                background-color: rgba(21, 26, 48, 0.9);
+                border-radius   : ${theme.border.radius};
+                height          : 18px;
+                min-width       : 65px;
+                padding         : 3px 6px;        
+                pointer-events  : none;
+                position        : fixed;
+                text-align      : center;
+                transition      : left 0.05s ease-in, top 0.05s ease-in;
+                user-select     : none;
+                vertical-align  : middle;
+                visibility      : hidden; 
+                white-space     : nowrap;
+                will-change     : left top visibility;
+                z-index         : 9003;
+            }
+			@media only screen and (max-width: 599px) {
+                max-width	    : 400px;
+				.${unique.wrapper} {
+                    flex-direction: column;
+                    min-width     : 260px;
+                }
+				.${unique.divider} {
+					height: 1px !important;
+					margin: 0px 16px !important;
+					width : calc(100% - 32px) !important;
+				}
+			}
+		`,
+    picker: (position, width) => css`
+            border-radius   : ${theme.border.radius};
+            height          : max-content;
+            left            : ${position.left}px;
+            max-width       : 805px;
+            min-width       : ${window.innerWidth <= 633 ? 300 : 633}px;
+            opacity         : 0;
+            position        : fixed;
+            top             : ${position.top}px;
+            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;
+            width           : ${width}px;
+            z-index         : 9002;
+        `,
+    active: {
+      opacity: 1,
+      transform: 'scale(1)'
+    },
+    remove: {
+      opacity: 0,
+      pointerEvents: 'none',
+      transform: 'scale(0)'
+    }
+  };
+  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 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) => {
+    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 (Object.prototype.toString.call(v) === '[object Date]') {
+      return true;
+    }
+
+    if (!isNaN(Date.parse(new Date(v)))) {
+      return true;
+    }
+
+    return false;
+  };
+
+  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;
+  };
+
+  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 isToday = day => {
+    return +moment(day).diff(new Date().setHours(0, 0, 0, 0)) === 0 ? unique.day.today : '';
+  };
+
+  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 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 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);
+    !!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 parseDate = day => {
+    return Date.parse(new Date(day));
+  };
+
+  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: `${[unique.table.data, 'previous_month', isBetween(day - 1)].join(' ').trim().replace(/ +(?= )/g, '')}`
+      }, 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: `${[unique.table.data, 'this_month', isToday(day), isActive(day), (max && max !== undefined || min && min !== undefined) && isLimit(day, new Date(max).setHours(0, 0, 0, 0), new Date(min).setHours(0, 0, 0, 0)), isBetween(Date.parse(day))].join(' ').trim().replace(/ +(?= )/g, '')}`,
+        onClick: onDayClick
+      }, jsx(Typography, typographyProps(unique.day.day), 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: `${[unique.table.data, 'next_month', i < 6 - weekDateLast && isBetween(day + 1)].join(' ').trim().replace(/ +(?= )/g, '')}`
+      }, 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: `${[unique.table.data, 'next_month'].join(' ').trim().replace(/ +(?= )/g, '')}`
+        }));
+      }
+
+      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 from = new Date(timeFr.getFullYear(), timeFr.getMonth());
+    const to = new Date(timeTo.getFullYear(), +moment(timeTo).diff(timeFr, 'months') === 0 ? timeTo.getMonth() + 1 : 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 = () => {
+    const {
+      innerHeight,
+      innerWidth
+    } = window;
+    const {
+      left,
+      height,
+      top,
+      width
+    } = ipConRef.current.getBoundingClientRect();
+    const pickerHeight = width < 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 = top - pickerHeight - 4;
+        style.transformOrigin = '50% 80%';
+      } else {
+        style.top = Math.round((innerHeight - pickerHeight - 16) / 2);
+        style.transformOrigin = 'center';
+      }
+    }
+
+    const trueWidth = width > 320 ? width < 633 ? 633 : width : 320;
+
+    if (left + trueWidth > innerWidth) {
+      if (innerWidth > trueWidth) {
+        style.left = (innerWidth - trueWidth) / 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 = () => {
+    const picker = document.createElement('div');
+    picker.id = unique.picker;
+    picker.style.cssText = getPickerStyle();
+    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());
+        valueFr.current.setMonth(time.getMonth() - 1);
+        renderCalendar(valueFr.current, 'from');
+      }
+    }
+  };
+
+  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());
+        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 => {
+    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)));
+      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 = () => {
+    const backGr = createBackground();
+    const picker = createPicker();
+    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 = () => {
+    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 + ` (${selected.current} ${enUnitText})`;
+      } else {
+        tempValue = el.value + ' - ' + formatValue(time, displayFormat) + ` (${selected.current} ${enUnitText})`;
+      }
+    } else {
+      tempValue = formatValue(time, displayFormat);
+    }
+
+    el.value = 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);
+      }
+    };
+  }, [onChange]);
+  useEffect(() => {
+    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();
+      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 (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();
+    }
+
+    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 {
+        iconRef.current.childNodes[0].style.pointerEvents = null;
+      }
+
+      closePicker();
+    };
+  }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
+  const iconComp = jsx("div", {
+    css: iconAreaCSS,
+    ref: iconRef
+  }, jsx(Icon, {
+    onClick: triggerFocus,
+    className: `${unique.icon} ${unique.icon}-accept`,
+    viewBox: true,
+    name: 'CalendarNew'
+  }), jsx(Icon, {
+    onClick: onClear,
+    className: `${unique.icon} ${unique.icon}-cancel`,
+    viewBox: true,
+    name: 'Close'
+  }));
+  const endIcon = actionIconAt === 'end' && iconComp;
+  const startIcon = actionIconAt === 'start' && iconComp;
+  const footerMemo = jsx("div", {
+    css: controlContainerCSS,
+    className: unique.footer,
+    ref: footerRef
+  }, jsx(Button, _extends({}, buttonProps, {
+    className: unique.close,
+    onClick: () => onClickOutside({
+      target: null
+    })
+  }), closeText), jsx(Button, _extends({}, buttonProps, {
+    className: unique.cancel,
+    onClick: onCancel
+  }), cancelText), jsx(Button, _extends({}, buttonProps, {
+    color: 'info',
+    className: unique.confirm,
+    onClick: onConfirm
+  }), confirmText));
+  const leftCalendarComp = jsx("div", {
+    css: generateCalendarCSS(unique, false, false)
+  }, 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)
+  }, 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: theme.colors.white,
+    type: 'p2'
+  }));
+  const pickerComp = jsx("div", {
+    css: pickerCSS.container,
+    ref: pickerRef
+  }, jsx("div", {
+    className: unique.wrapper
+  }, leftCalendarComp, jsx(Divider, dividerProps), rightCalendarComp), tooltipComp, !!controls && footerMemo);
+  return jsx(ControlComp, _extends({}, props, {
+    disabled: disabled,
+    error: error,
+    ref: ref,
+    style: style
+  }), !!label && jsx(Label, _extends({}, labelProps, {
+    disabled: disabled,
+    required: required
+  }), label), jsx(InputBase, _extends({
+    placeholder: 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
+  })), !!error && jsx(HelperText, _extends({}, errorProps, {
+    disabled: disabled
+  }), error));
+}));
+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',
+  viewType: 'underlined'
+};
+DateRangePickerV2.propTypes = {
+  /** action icons position */
+  actionIconAt: PropTypes.oneOf(['end', 'start']),
+
+  /** display the clear icon if true */
+  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']),
+
+  /** the default value of the component */
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string)]),
+
+  /** if 'true' the form control will be 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 of the form control */
+  error: PropTypes.string,
+
+  /** inputProps are properties of the input element */
+  inputProps: PropTypes.object,
+
+  /** inputStyle is style of input element */
+  inputStyle: PropTypes.object,
+
+  /** content of the label element */
+  label: PropTypes.string,
+
+  /** labelProps are properties if the label element */
+  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]),
+
+  /** a callback function when value input change */
+  onChange: PropTypes.func,
+
+  /** hints for input */
+  placeholder: PropTypes.string,
+
+  /** allow close Popup when press ESC */
+  pressESCToClose: PropTypes.bool,
+
+  /** status read only of input */
+  readOnly: PropTypes.bool,
+
+  /** required state of the form control */
+  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]),
+
+  /** counter with start with 0 or 1 */
+  startFromZero: PropTypes.bool,
+
+  /** style of the component */
+  style: PropTypes.object,
+
+  /** text align of the input */
+  textAlign: PropTypes.oneOf(['center', 'end', 'start']),
+
+  /** value of the component */
+  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
+
+  /** view type of the form control */
+  viewType: PropTypes.oneOf(['outlined', 'underlined'])
+};
+export default DateRangePickerV2;