diginet-core-ui 1.4.39 → 1.4.40

package/components/form-control/calendar/index.js

@@ -1,317 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, date as moment } from "../../../utils";
-import { generateCalendarCSS, isAfterLimit, isBeforeLimit, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
-const Calendar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  var _zoomLevel$get, _zoomLevel$get2;
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Calendar'
-  });
-  const {
-    actions,
-    className,
-    defaultValue,
-    displayAnotherMonth,
-    max,
-    min,
-    minZoom,
-    maxZoom,
-    onClick,
-    value,
-    ...other
-  } = props;
-  const unique = {
-    container: 'DGN-UI-Calendar',
-    icon: 'DGN-UI-Calendar-Icon',
-    navigator: {
-      navigator: 'DGN-UI-Calendar-Navigator',
-      around: 'DGN-UI-Calendar-Navigator-Around',
-      center: 'DGN-UI-Calendar-Navigator-Center'
-    },
-    table: {
-      container: 'DGN-UI-Calendar-Table-Container',
-      table: 'DGN-UI-Calendar-Table-Table',
-      header: 'DGN-UI-Calendar-Table-Header',
-      raw: 'DGN-UI-Calendar-Table-Raw',
-      data: 'DGN-UI-Calendar-Table-Data'
-    },
-    day: {
-      day: 'DGN-UI-Calendar-Day',
-      week: 'DGN-UI-Calendar-Week',
-      today: 'DGN-UI-Calendar-Day-today',
-      active: 'DGN-UI-Calendar-Day-active',
-      limit: 'DGN-UI-Calendar-Day-limit'
-    },
-    year: {
-      year: 'DGN-UI-Calendar-Year',
-      thisyear: 'DGN-UI-Calendar-This-Year',
-      active: 'DGN-UI-Calendar-Year-active'
-    }
-  };
-
-  /**
-   * START REFERENCE
-   */
-  const ref = useRef(null);
-  const tableRef = useRef(null);
-  const activeValue = useRef(null);
-  const navigatorValue = useRef(null);
-  const [, setActiveValue] = useState(Date.now());
-  const [, setNavigatorValue] = useState(Date.now());
-  const zoomLevel = new Map([['day', 0], ['month', 1], ['quarter', 2], ['year', 3], ['decade', 4]]);
-  const maxZoomLevel = (_zoomLevel$get = zoomLevel.get(`${maxZoom}`)) !== null && _zoomLevel$get !== void 0 ? _zoomLevel$get : 3;
-  const minZoomLevel = (_zoomLevel$get2 = zoomLevel.get(`${minZoom}`)) !== null && _zoomLevel$get2 !== void 0 ? _zoomLevel$get2 : 0;
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(minZoomLevel);
-  const isZoomInAble = currentZoomLevel > minZoomLevel;
-  const isZoomOutAble = currentZoomLevel < maxZoomLevel;
-  const navigatorRefs = {
-    doubleLeft: useRef(null),
-    doubleRight: useRef(null),
-    left: useRef(null),
-    right: useRef(null),
-    content: useRef(null)
-  };
-  const firstDayOfMax = new Date(new Date(max).setDate(1)).setHours(0, 0, 0, 0);
-  const firstDayOfMin = new Date(new Date(min).setDate(1)).setHours(0, 0, 0, 0);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  /**
-   * END REFERENCE
-   */
-
-  /**
-   * START FUNCTION
-   */
-  const onUpdateNavigatorValue = useCallback(value => {
-    navigatorValue.current = value;
-    setNavigatorValue();
-  }, [navigatorValue]);
-  const onUpdateActiveValue = useCallback(value => {
-    activeValue.current = value;
-    setActiveValue();
-  }, [activeValue]);
-  const onUpdate = value => {
-    const newValue = new Date(value).setHours(0, 0, 0, 0);
-    onUpdateActiveValue(newValue);
-    onUpdateCalendar(newValue, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, isZoomInAble ? zoomIn : onDayClick, onUpdateNavigatorValue, currentZoomLevel);
-  };
-  const getCurrentTime = () => {
-    const time = new Date(navigatorValue.current);
-    return [time.getDate(), time.getMonth(), time.getFullYear()];
-  };
-  const zoomOut = () => {
-    if (isZoomOutAble) {
-      let zoomOutLevel = currentZoomLevel + 1;
-      if (zoomOutLevel === 2 && minZoom !== 'quarter') zoomOutLevel++; // skip quarter
-      onUpdate(navigatorValue.current);
-      setCurrentZoomLevel(zoomOutLevel);
-      return;
-    }
-  };
-  const zoomIn = e => {
-    if (isZoomInAble) {
-      const node = e.currentTarget;
-      const timeStamp = Number(node.dataset.time);
-      const objNewDate = new Date(timeStamp);
-      activeValue.current = objNewDate;
-      let zoomInLevel = currentZoomLevel - 1;
-      if (zoomInLevel === 2 && minZoom !== 'quarter') zoomInLevel--; // skip quarter
-      setCurrentZoomLevel(zoomInLevel);
-    }
-    return;
-  };
-  const onDayClick = e => {
-    const node = e.currentTarget;
-    tableRef.current.querySelectorAll(`td.${unique.day.active}`).forEach(element => {
-      element.classList.remove(unique.day.active);
-    });
-    node.classList.add(unique.day.active);
-    const timeStamp = Number(node.dataset.time);
-    const objNewDate = new Date(timeStamp);
-    const _navigatorValue = new Date(navigatorValue.current);
-    const objNewDateMonth = objNewDate.getMonth() + 1;
-    const objNewDateYear = objNewDate.getFullYear();
-    const navigatorMonth = _navigatorValue.getMonth() + 1;
-    const navigatorYear = _navigatorValue.getFullYear();
-    onUpdateActiveValue(objNewDate);
-    if (objNewDateMonth > navigatorMonth || objNewDateYear > navigatorYear) setNextMonth(e);else if (objNewDateMonth < navigatorMonth || objNewDateYear < navigatorYear) setPrevMonth(e);
-    !!onClick && onClick({
-      value: objNewDate
-    });
-  };
-  const setPrevYear = e => {
-    const time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]);
-    if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
-      e.preventDefault();
-    } else {
-      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, isZoomInAble ? zoomIn : onDayClick, onUpdateNavigatorValue, currentZoomLevel);
-    }
-  };
-  const setNextYear = e => {
-    const time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]);
-    if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
-      e.preventDefault();
-    } else {
-      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, isZoomInAble ? zoomIn : onDayClick, onUpdateNavigatorValue, currentZoomLevel);
-    }
-  };
-  const setPrevMonth = e => {
-    let time = null;
-    switch (currentZoomLevel) {
-      case 1:
-      case 2:
-        time = new Date(getCurrentTime()[2] - 1, getCurrentTime()[1]); // set year = current year - 1
-        break;
-      case 3:
-        time = new Date(getCurrentTime()[2] - 10, getCurrentTime()[1]); // set year = current year - 10
-        break;
-      case 4:
-        time = new Date(getCurrentTime()[2] - 100, getCurrentTime()[1]); // set year = current year - 100
-        break;
-      default:
-        time = new Date(getCurrentTime()[2], getCurrentTime()[1] - 1); // set month = current month - 1
-        break;
-    }
-    if (min && isValidDate(min) && moment(time).diff(firstDayOfMin) < 0) {
-      e.preventDefault();
-    } else {
-      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, isZoomInAble ? zoomIn : onDayClick, onUpdateNavigatorValue, currentZoomLevel);
-    }
-  };
-  const setNextMonth = e => {
-    let time = null;
-    switch (currentZoomLevel) {
-      case 1:
-      case 2:
-        time = new Date(getCurrentTime()[2] + 1, getCurrentTime()[1]); // set year = current year + 1
-        break;
-      case 3:
-        time = new Date(getCurrentTime()[2] + 10, getCurrentTime()[1]); // set year = current year + 10
-        break;
-      case 4:
-        time = new Date(getCurrentTime()[2] + 100, getCurrentTime()[1]); // set year = current year + 100
-        break;
-      default:
-        time = new Date(getCurrentTime()[2], getCurrentTime()[1] + 1); // set month = current month + 1
-        break;
-    }
-    if (max && isValidDate(max) && moment(time).diff(firstDayOfMax) > 0) {
-      e.preventDefault();
-    } else {
-      onUpdateCalendar(time, navigatorRefs, min, max, tableRef.current, activeValue.current, unique, displayAnotherMonth, isZoomInAble ? zoomIn : onDayClick, onUpdateNavigatorValue, currentZoomLevel);
-    }
-  };
-
-  /**
-   * END FUNCTION
-   */
-
-  /**
-   * START EFFECT
-   */
-  useEffect(() => {
-    if (defaultValue && defaultValue !== '' && isValidDate(defaultValue)) {
-      if (isBeforeLimit(min, defaultValue)) {
-        onUpdate(min);
-      } else if (isAfterLimit(max, defaultValue)) {
-        onUpdate(max);
-      } else {
-        onUpdate(defaultValue);
-      }
-    }
-  }, []);
-  useEffect(() => {
-    if (value && value !== '' && isValidDate(value)) {
-      if (isBeforeLimit(min, value)) {
-        onUpdate(min);
-      } else if (isAfterLimit(max, value)) {
-        onUpdate(max);
-      } else {
-        onUpdate(value);
-      }
-    }
-  }, [value]);
-  useEffect(() => {
-    if (min && isBeforeLimit(min, activeValue.current)) {
-      onUpdate(min);
-      !!onClick && onClick({
-        value: new Date(min)
-      });
-    } else if (max && isAfterLimit(max, activeValue.current)) {
-      onUpdate(max);
-      !!onClick && onClick({
-        value: new Date(max)
-      });
-    } else {
-      onUpdate(activeValue.current);
-    }
-  }, [onClick, min, max, currentZoomLevel, minZoom, maxZoom]);
-  /**
-   * END FUNCTION
-   */
-
-  /**
-   * START COMPONENT
-   */
-  const tableMemo = jsx("div", {
-    className: unique.table.container
-  }, jsx("table", {
-    className: unique.table.table,
-    ref: tableRef
-  }, renderHeader(unique, currentZoomLevel), jsx("tbody", null)));
-  /**
-   * END COMPONENT
-   */
-  return jsx("div", {
-    ...other,
-    className: classNames(unique.container, className),
-    css: generateCalendarCSS(unique, true, true, theme),
-    ref: ref
-  }, renderNavigator(unique, navigatorRefs, setPrevYear, setPrevMonth, setNextMonth, setNextYear, zoomOut, currentZoomLevel), tableMemo, actions);
-}));
-
-// Calendar.defaultProps = {
-//     actions: null,
-//     defaultValue: new Date(),
-//     displayAnotherMonth: true,
-// };
-
-Calendar.propTypes = {
-  /** the footer actions */
-  actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-  /** class for calendar */
-  className: PropTypes.string,
-  /** the default value of the calendar */
-  defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-  /** display days of previous or next month */
-  displayAnotherMonth: PropTypes.bool,
-  /** the last date that can be selected within the UI component. */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-  /** the minimum date that can be selected within the UI component. */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-  /** Min zoom level of DatePicker */
-  minZoom: PropTypes.oneOf(['day', 'month', 'quarter', 'year']),
-  /** Max zoom level of DatePicker */
-  maxZoom: PropTypes.oneOf(['day', 'month', 'year', 'decade']),
-  /** a callback function when click on a day of calendar */
-  onClick: PropTypes.func,
-  /** value of the calendar */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array])
-};
-export default Calendar;

package/components/form-control/calendar/range.js

@@ -1,291 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Divider } from "../..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { borderRadius, shadowLarge } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { getProp } from "../../../utils";
-import { generateCalendarCSS, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
-const CalendarRange = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'CalendarRange'
-  });
-  const {
-    actions,
-    defaultValue,
-    displayAnotherMonth,
-    max,
-    min,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const tableFrRef = useRef(null);
-  const tableToRef = useRef(null);
-  const navigatorFromRefs = {
-    doubleLeft: useRef(null),
-    doubleRight: useRef(null),
-    left: useRef(null),
-    right: useRef(null),
-    content: useRef(null)
-  };
-  const navigatorToRefs = {
-    doubleLeft: useRef(null),
-    doubleRight: useRef(null),
-    left: useRef(null),
-    right: useRef(null),
-    content: useRef(null)
-  };
-  const activeValueFr = useRef(new Date());
-  const activeValueTo = useRef(new Date(new Date().getFullYear(), new Date().getMonth() + 1));
-  const navigatorValueFr = useRef(null);
-  const navigatorValueTo = useRef(null);
-  const values = useRef([]);
-  const [, setActiveValueFr] = useState(Date.now());
-  const [, setActiveValueTo] = useState(Date.now());
-  const [, setNavigatorValueFr] = useState(Date.now());
-  const [, setNavigatorValueTo] = useState(Date.now());
-  const [, setValues] = useState(Date.now());
-  // const [id] = useState(randomString(6, { allowSymbol: false }));
-  const unique = {
-    container: 'DGN-UI-Calendar-Range',
-    divider: 'DGN-UI-Calendar-Range-Divider',
-    from: {
-      container: 'DGN-UI-Calendar-Range-From',
-      icon: 'DGN-UI-Calendar-Range-From-Icon',
-      navigator: {
-        navigator: 'DGN-UI-Calendar-Range-From-Navigator',
-        around: 'DGN-UI-Calendar-Range-From-Navigator-Around',
-        center: 'DGN-UI-Calendar-Range-From-Navigator-Center'
-      },
-      table: {
-        container: 'DGN-UI-Calendar-Range-From-Table-Container',
-        table: 'DGN-UI-Calendar-Range-From-Table-Table',
-        header: 'DGN-UI-Calendar-Range-From-Table-Header',
-        raw: 'DGN-UI-Calendar-Range-From-Table-Raw',
-        data: 'DGN-UI-Calendar-Range-From-Table-Data'
-      },
-      day: {
-        day: 'DGN-UI-Calendar-Range-From-Day',
-        week: 'DGN-UI-Calendar-Range-From-Week',
-        today: 'DGN-UI-Calendar-Range-From-Day-today',
-        active: 'DGN-UI-Calendar-Range-From-Day-active',
-        limit: 'DGN-UI-Calendar-Range-From-Day-limit',
-        from: 'DGN-UI-Calendar-Range-From-Day-from',
-        to: 'DGN-UI-Calendar-Range-From-Day-to',
-        between: 'DGN-UI-Calendar-Range-From-Day-between'
-      }
-    },
-    to: {
-      container: 'DGN-UI-Calendar-Range-To',
-      icon: 'DGN-UI-Calendar-Range-To-Icon',
-      navigator: {
-        navigator: 'DGN-UI-Calendar-Range-To-Navigator',
-        around: 'DGN-UI-Calendar-Range-To-Navigator-Around',
-        center: 'DGN-UI-Calendar-Range-To-Navigator-Center'
-      },
-      table: {
-        container: 'DGN-UI-Calendar-Range-To-Table-Container',
-        table: 'DGN-UI-Calendar-Range-To-Table-Table',
-        header: 'DGN-UI-Calendar-Range-To-Table-Header',
-        raw: 'DGN-UI-Calendar-Range-To-Table-Raw',
-        data: 'DGN-UI-Calendar-Range-To-Table-Data'
-      },
-      day: {
-        day: 'DGN-UI-Calendar-Range-To-Day',
-        week: 'DGN-UI-Calendar-Range-To-Week',
-        today: 'DGN-UI-Calendar-Range-To-Day-today',
-        active: 'DGN-UI-Calendar-Range-To-Day-active',
-        limit: 'DGN-UI-Calendar-Range-To-Day-limit'
-      }
-    }
-  };
-  const containerCSS = css`
-            background-color: ${getProp(colors, 'system/standard')};
-            ${borderRadius(4)};
-            ${shadowLarge};
-            display: flex;
-            @media only screen and (max-width: 599px) {
-                flex-direction: column;
-                .${unique.divider} {
-                    height: 1px !important;
-                    margin: 0px 16px !important;
-                    width: calc(100% - 32px) !important;
-                }
-            }
-        `;
-  const dividerProps = {
-    direction: 'vertical',
-    className: unique.divider,
-    height: '100%',
-    style: {
-      height: '226px',
-      margin: '18px 2px 0px'
-    }
-  };
-  const onUpdateActiveValueFr = useCallback(value => {
-    activeValueFr.current = Date.parse(new Date(value));
-    setActiveValueFr();
-  }, [activeValueFr]);
-  const onUpdateActiveValueTo = useCallback(value => {
-    activeValueTo.current = Date.parse(new Date(value));
-    setActiveValueTo();
-  }, [activeValueTo]);
-  const onUpdateNavigatorValueFr = useCallback(value => {
-    navigatorValueFr.current = Date.parse(new Date(value));
-    setNavigatorValueFr();
-  }, [navigatorValueFr]);
-  const onUpdateNavigatorValueTo = useCallback(value => {
-    navigatorValueTo.current = Date.parse(new Date(value));
-    setNavigatorValueTo();
-  }, [navigatorValueTo]);
-  const onUpdateValues = useCallback((v, unshift) => {
-    if (values.current.length < 2) {
-      if (unshift) {
-        values.current.unshift(Date.parse(new Date(v)));
-      } else {
-        values.current.push(Date.parse(new Date(v)));
-      }
-    } else {
-      values.current.splice(0, 2, Date.parse(new Date(v)));
-    }
-    setValues();
-  }, [values]);
-  const onCalFrClick = e => {
-    console.log(e.currentTarget.dataset.time);
-  };
-  const onCalToClick = e => {
-    console.log(e.currentTarget.dataset.time);
-  };
-  const clearHovering = e => {
-    const arr = Array.from(e.getElementsByTagName('td'));
-    for (let i in arr) {
-      arr[i].classList.remove('hover-start', 'hover-between', 'hover-end');
-    }
-  };
-  const onDayHover = () => {
-    // const hoverTime = parseInt(e.target.dataset.time, 10);
-    // console.log(hoverTime);
-  };
-  const onPickerHover = e => {
-    if (e.target.tagName && e.target.tagName.toLowerCase() === 'td') {
-      onDayHover(e);
-    } else {
-      clearHovering(e.currentTarget);
-    }
-  };
-  // const onUpdateFrom = (value) => {
-  //     const newValue = new Date(value).setHours(0, 0, 0, 0);
-  //     onUpdateActiveValueFr(newValue);
-  //     onUpdateCalendar(newValue, navigatorFromRefs, min, max, tableFrRef.current, [activeValueFr.current, activeValueTo.current], unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
-  // };
-  // const onUpdateTo = (value) => {
-  //     const newValue = new Date(value).setHours(0, 0, 0, 0);
-  //     onUpdateActiveValueTo(newValue);
-  //     onUpdateCalendar(newValue, navigatorToRefs, min, max, tableToRef.current, [activeValueFr.current, activeValueTo.current], unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
-  // };
-  const onUpdateNavigatorValue = values => {
-    const fr = new Date(values[0]);
-    const to = new Date(values[1]);
-    if (fr.getFullYear() === to.getFullYear() && fr.getMonth() === to.getMonth()) {
-      onUpdateNavigatorValueFr(new Date(fr.getFullYear(), fr.getMonth()));
-      onUpdateNavigatorValueTo(new Date(to.getFullYear(), to.getMonth() + 1));
-    } else {
-      onUpdateNavigatorValueFr(new Date(fr.getFullYear(), fr.getMonth()));
-      onUpdateNavigatorValueTo(new Date(to.getFullYear(), to.getMonth()));
-    }
-  };
-  const onUpdateActiveValue = values => {
-    if (values[1] && isValidDate(values[1])) {
-      onUpdateValues(values[0], false);
-      onUpdateValues(values[1], false);
-      onUpdateActiveValueFr(values[0]);
-      onUpdateActiveValueTo(values[1]);
-    } else {
-      const newDateFr = new Date(values[0]);
-      values.push(newDateFr);
-      onUpdateValues(values[0], false);
-      onUpdateActiveValueFr(values[0]);
-      onUpdateActiveValueTo(values[1]);
-    }
-  };
-  const onUpdate = array => {
-    onUpdateActiveValue(array);
-    onUpdateNavigatorValue(array);
-    onUpdateCalendar(navigatorValueFr.current, navigatorFromRefs, min, max, tableFrRef.current, values.current, unique.from, displayAnotherMonth, onCalFrClick, onUpdateNavigatorValueFr);
-    onUpdateCalendar(navigatorValueTo.current, navigatorToRefs, min, max, tableToRef.current, values.current, unique.to, displayAnotherMonth, onCalToClick, onUpdateNavigatorValueTo);
-  };
-  const calendarFrom = jsx("div", {
-    className: unique.from.container,
-    css: generateCalendarCSS(unique.from, false, false, theme)
-  }, renderNavigator(unique.from, navigatorFromRefs), jsx("div", {
-    className: unique.from.table.container
-  }, jsx("table", {
-    className: unique.from.table.table,
-    ref: tableFrRef
-  }, renderHeader(unique.from), jsx("tbody", null))));
-  const calendarTo = jsx("div", {
-    className: unique.to.container,
-    css: generateCalendarCSS(unique.to, false, false, theme)
-  }, renderNavigator(unique.to, navigatorToRefs), jsx("div", {
-    className: unique.to.table.container
-  }, jsx("table", {
-    className: unique.to.table.table,
-    ref: tableToRef
-  }, renderHeader(unique.to), jsx("tbody", null))));
-  useEffect(() => {
-    if (defaultValue && defaultValue.length !== 0 && isValidDate(defaultValue[0])) {
-      onUpdate(defaultValue);
-    }
-  }, []);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return jsx("div", {
-    ...other,
-    className: unique.container,
-    onMouseOver: onPickerHover,
-    css: containerCSS,
-    ref: ref
-  }, calendarFrom, jsx(Divider, {
-    ...dividerProps
-  }), calendarTo, actions);
-}));
-
-// CalendarRange.defaultProps = {
-//     actions: null,
-//     // defaultValue       : [new Date(), ],
-//     displayAnotherMonth: true,
-// };
-
-CalendarRange.propTypes = {
-  /** the footer actions */
-  actions: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-  /** the default value of the calendar */
-  defaultValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  /** display days of previous or next month */
-  displayAnotherMonth: PropTypes.bool,
-  /** the last date that can be selected within the UI component. */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-  /** the minimum date that can be selected within the UI component. */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array]),
-  /** a callback function when click on a day of calendar */
-  onClick: PropTypes.func,
-  /** value of the calendar */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.array])
-};
-export default CalendarRange;