diginet-core-ui 1.4.54 → 1.4.55-beta.2

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

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { displayBlock, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../../styles/general";
 import { getProp } from "../../../utils";
 import { useTheme } from "../../../theme";
-const Control = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+const Control = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
   children,
   className,
   disabled,

package/components/form-control/date-input/index.js

@@ -14,7 +14,7 @@ import useDateInputState from "./useDateInputState";
 import useIsFocused from "./useIsFocused";
 import useKeyboardInputEvent from "./useKeyboardInputEvent";
 import { getInputSelectedState, isFieldFullValue, useEventCallback, useInputSelection, validateDateTime } from "./utils";
-const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
 
   // props priority: `inProps` > `themeDefaultProps`

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

@@ -64,7 +64,7 @@ const getDateFormats = (locale, minZoom) => {
   }
   return formatMap.get(minZoom);
 };
-const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
   var _getDateFormats, _pickerReturnFormat$g, _ipRef$current, _ipRef$current2;
   if (!reference) reference = useRef(null);
   const theme = useTheme();

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

@@ -1,15 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from "../..";
+import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography, CircularProgress, Popover } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyBetween, justifyEnd, left, parseHeight, parseMaxWidth, parseMinWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyBetween, justifyEnd, itemsCenter, left, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z, justifyCenter, positionAbsolute, borderRadius, parseWidthHeight } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from "../../../utils";
+import { getColor } from "../../../styles/utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 import useThemeProps from "../../../theme/utils/useThemeProps";
@@ -65,7 +66,8 @@ const isAfter = (max, time) => {
 const parseDate = day => {
   return Date.parse(new Date(day));
 };
-const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const DateRangePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
+  var _periodOptions$dataSo;
   // props priority: `inProps` > `themeDefaultProps`
   const props = useThemeProps({
     props: inProps,
@@ -101,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     unitCount,
     value,
     viewType,
+    periodOptions,
     ...other
   } = props;
   const placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : `${displayFormat} - ${displayFormat}`;
@@ -128,7 +131,15 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const [, setValueFr] = useState(Date.now());
   const [, setValueTo] = useState(Date.now());
   const [, setSelected] = useState(Date.now());
-  const [focusBtn, setFocusBtn] = useState('today');
+  const [loadingState, setLoadingState] = useState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.loading);
+  const [totalState, setTotalState] = useState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.total);
+  const [dataSourceState, setDataSourceState] = useState((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.dataSource) || []);
+  const [openState, setOpenState] = useState(false);
+  const selectedPeriodRef = useRef('');
+  const selectedPeriodIndex = useRef(null);
+  const focusBtnRef = useRef('today');
+  const loadMoreTimer = useRef(null);
+  const dropdownListRef = useRef(null);
   const [valueState, setValueState] = useState();
   const navigatorFromRefs = {
     doubleLeft: useRef(null),
@@ -153,9 +164,12 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const yesterdayText = getGlobal(['yesterday']);
   const thisWeekText = getGlobal(['thisWeek']);
   const thisMonthText = getGlobal(['thisMonth']);
+  const selectPeriodText = getGlobal(['selectPeriod']);
   const _ControlContainerCSS = ControlContainerCSS(theme);
   const _FooterContainerCSS = FooterContainerCSS(theme);
   const _DateOptionsCSS = DateOptionsCSS(theme);
+  const _PeriodContainerCSS = PeriodContainerCSS(theme);
+  const _PeriodItemCSS = PeriodItemCSS(theme);
   const updateValues = useCallback(v => {
     values.current = v;
     setValues();
@@ -262,8 +276,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       tableData = [],
       weekDateFirst = getDateOfWeek(firstDay),
       weekDateLast = getDateOfWeek(lastDay);
-    /**
-     * days of previous month
+    /**
+     * days of previous month
      */
     for (let i = weekDateFirst; i > 0; i--) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth(), 1));
@@ -275,8 +289,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         className: unique.day.day
       })));
     }
-    /**
-     * days of current month
+    /**
+     * days of current month
      */
     for (let i = 0; i < lastDate; i++) {
       const day = new Date(time.getFullYear(), time.getMonth(), i + 1);
@@ -302,8 +316,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         type: 'h6'
       }, i + 1)));
     }
-    /**
-     * days of next month
+    /**
+     * days of next month
      */
     for (let i = 0; i < 13 - weekDateLast; i++) {
       const day = Date.parse(new Date(time.getFullYear(), time.getMonth() + 1, 0));
@@ -512,7 +526,8 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const setButtonState = () => {
     const isVisible = isEqual(values.current, tempValues.current);
     const query = function (selector) {
-      return footerRef.current.querySelector(selector);
+      var _footerRef$current;
+      return (_footerRef$current = footerRef.current) === null || _footerRef$current === void 0 ? void 0 : _footerRef$current.querySelector(selector);
     };
     const close = query(`.${unique.close}`);
     const cancel = query(`.${unique.cancel}`);
@@ -526,13 +541,13 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       visibility: 'visible'
     };
     if (isVisible) {
-      Object.assign(close.style, visible);
-      Object.assign(cancel.style, hidden);
-      Object.assign(confirm.style, hidden);
+      Object.assign((close === null || close === void 0 ? void 0 : close.style) || {}, visible);
+      Object.assign((cancel === null || cancel === void 0 ? void 0 : cancel.style) || {}, hidden);
+      Object.assign((confirm === null || confirm === void 0 ? void 0 : confirm.style) || {}, hidden);
     } else {
-      Object.assign(cancel.style, visible);
-      Object.assign(confirm.style, visible);
-      Object.assign(close.style, hidden);
+      Object.assign((cancel === null || cancel === void 0 ? void 0 : cancel.style) || {}, visible);
+      Object.assign((confirm === null || confirm === void 0 ? void 0 : confirm.style) || {}, visible);
+      Object.assign((close === null || close === void 0 ? void 0 : close.style) || {}, hidden);
     }
   };
   const onCancel = () => {
@@ -693,7 +708,24 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       controls && setButtonState();
     });
   };
+  const openPeriodPicker = () => {
+    // const arr = pickerRef.current.getElementsByTagName('td');
+    updateTempValues(values.current.length === 1 ? [values.current[0], values.current[0]] : values.current);
+    setOpenState(true);
+    setTimeout(() => {
+      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 = () => {
+    setOpenState(false);
     const backGr = document.getElementById(unique.backGr);
     if (!backGr) return;
     const picker = backGr.querySelector(`#${unique.picker}`);
@@ -717,6 +749,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     }
     ipRef.current && ipRef.current.blur();
     updateTempValues([]);
+    setOpenState(false);
   };
   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)) {
@@ -735,21 +768,26 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   const onInputFocus = () => {
     if (!isEnable) return;
     const el = ipConRef.current;
-    if (!el.classList.contains(unique.focus)) {
-      el.classList.add(unique.focus);
-      openPicker();
+    if ((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.enable) === true) {
+      openPeriodPicker();
+    } else {
+      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;
+    const showPeriod = periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.enable;
     let tempValue;
     if (!reset) {
       if (unshift) {
-        tempValue = formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+        tempValue = `${showPeriod && selectedPeriodRef.current ? `${selectedPeriodRef.current} (` : ''}` + formatValue(time, displayFormat) + ' - ' + el.value + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '') + `${showPeriod ? ')' : ''}`;
       } else {
-        tempValue = el.value + ' - ' + formatValue(time, displayFormat) + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '');
+        tempValue = `${showPeriod && selectedPeriodRef.current ? `${selectedPeriodRef.current} (` : ''}` + el.value + ' - ' + formatValue(time, displayFormat) + (showUnitCount ? ` (${selected.current} ${enUnitText})` : '') + `${showPeriod && selectedPeriodRef.current ? ')' : ''}`;
       }
     } else {
       tempValue = formatValue(time, displayFormat);
@@ -768,14 +806,20 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     !!onChange && onChange(e);
     onSwap(true);
   };
-  const onClickPresetDate = type => {
+  const onClickPresetDate = (type, periodData) => {
     if (!type) return;
-    setFocusBtn(type);
     let value = [];
     const currentDay = new Date();
+    if (focusBtnRef.current) {
+      document.getElementById(focusBtnRef.current).style.color = getColor('system/dark');
+    }
+    if (selectedPeriodIndex.current) {
+      document.getElementById(selectedPeriodIndex.current).style.background = getColor('white');
+    }
     switch (type) {
       case 'today':
         value = [new Date(Date.now() - 25200000).valueOf()];
+        valueFr.current = new Date(Date.now() - 25200000);
         break;
       case 'yesterday':
         {
@@ -788,21 +832,48 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
         {
           const first = currentDay.getDate() - currentDay.getDay() + 1; // First day is the day of the month - the day of the week
           const last = first + 6; // last day is the first day + 6
-          const firstday = new Date(currentDay.setDate(first)).setHours(0, 0, 0).valueOf();
-          const lastday = new Date(currentDay.setDate(last)).setHours(0, 0, 0).valueOf();
-          value = [firstday, lastday];
+          const firstday = new Date(currentDay.setDate(first)).setHours(0, 0, 0);
+          const lastday = new Date(currentDay.setDate(last)).setHours(0, 0, 0);
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = lastday;
           break;
         }
       case 'thisMonth':
         {
-          let firstday = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1).valueOf();
-          let lastday = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0).valueOf();
-          value = [firstday, lastday];
+          let firstday = new Date(currentDay.getFullYear(), currentDay.getMonth(), 1);
+          let lastday = new Date(currentDay.getFullYear(), currentDay.getMonth() + 1, 0);
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = lastday;
+          break;
+        }
+      case 'period':
+        {
+          let firstday = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueFromExpr];
+          let lastday = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueToExpr];
+          if ((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.valueFormat) === 'DD/MM/YYYY') {
+            const firstDayArray = firstday.split('/');
+            const lastDayArray = lastday.split('/');
+            firstday = new Date(firstDayArray[2], firstDayArray[1], firstDayArray[0]);
+            lastday = new Date(lastDayArray[2], lastDayArray[1], lastDayArray[0]);
+          }
+          value = [firstday.valueOf(), lastday.valueOf()];
+          valueFr.current = firstday;
+          valueTo.current = lastday;
+          selectedPeriodIndex.current = `period${periodData === null || periodData === void 0 ? void 0 : periodData.idx}`;
+          selectedPeriodRef.current = periodData === null || periodData === void 0 ? void 0 : periodData[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr];
+          document.getElementById(selectedPeriodIndex.current).style.background = getColor('fill/hover');
           break;
         }
       default:
         break;
     }
+    if (type !== 'period') {
+      selectedPeriodRef.current = '';
+      focusBtnRef.current = type;
+      document.getElementById(focusBtnRef.current).style.color = getColor('primary');
+    }
     updateValues(value);
     updateSelected(countDay(values.current));
     renderPicker();
@@ -873,6 +944,15 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       closePicker();
     };
   }, [actionIconAt, clearAble, controls, disabled, displayFormat, max, min, pressESCToClose, readOnly, startFromZero, unitCount, viewType]);
+  useEffect(() => {
+    setLoadingState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.loading);
+  }, [periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.loading]);
+  useEffect(() => {
+    setTotalState(periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.total);
+  }, [periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.total]);
+  useEffect(() => {
+    setDataSourceState((periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.dataSource) || []);
+  }, [periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.dataSource]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -909,6 +989,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   }, jsx("div", {
     css: _DateOptionsCSS
   }, jsx(Button, {
+    id: 'today',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -917,8 +998,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('today'),
-    color: focusBtn === 'today' && 'primary'
+    color: focusBtnRef.current === 'today' && 'primary'
   }, todayText), jsx(Button, {
+    id: 'yesterday',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -927,8 +1009,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('yesterday'),
-    color: focusBtn === 'yesterday' && 'primary'
+    color: focusBtnRef.current === 'yesterday' && 'primary'
   }, yesterdayText), jsx(Button, {
+    id: 'thisWeek',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -937,8 +1020,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('thisWeek'),
-    color: focusBtn === 'thisWeek' && 'primary'
+    color: focusBtnRef.current === 'thisWeek' && 'primary'
   }, thisWeekText), jsx(Button, {
+    id: 'thisMonth',
     size: "medium",
     labelProps: {
       type: 'h4',
@@ -947,7 +1031,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       }
     },
     onClick: () => onClickPresetDate('thisMonth'),
-    color: focusBtn === 'thisMonth' && 'primary'
+    color: focusBtnRef.current === 'thisMonth' && 'primary'
   }, thisMonthText)), jsx("div", {
     css: _ControlContainerCSS,
     className: unique.footer,
@@ -984,6 +1068,74 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     className: unique.table.table,
     ref: tableToRef
   }, renderHeader(unique), jsx("tbody", null))));
+  const onLoadMoreHandler = e => {
+    e.persist();
+    if (loadMoreTimer.current) {
+      clearTimeout(loadMoreTimer.current);
+    }
+    const {
+      onLoadMore,
+      limit
+    } = periodOptions;
+    loadMoreTimer.current = setTimeout(() => {
+      if (onLoadMore && (dataSourceState === null || dataSourceState === void 0 ? void 0 : dataSourceState.length) < totalState && !loadingState) {
+        const {
+          scrollTop,
+          scrollHeight,
+          offsetHeight
+        } = e.target;
+        if (scrollHeight <= Math.ceil(scrollTop) + offsetHeight && dropdownListRef.current) {
+          var _dropdownListRef$curr;
+          const length = (_dropdownListRef$curr = dropdownListRef.current.children) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.length;
+          !!onLoadMore && onLoadMore({
+            skip: length,
+            limit: limit
+          });
+        }
+      }
+    }, 300);
+  };
+  const rightCalendarPeriodComp = jsx("div", {
+    css: _PeriodContainerCSS
+  }, jsx(Typography, {
+    color: 'inherit',
+    type: 'h3',
+    style: {
+      marginBottom: 8
+    }
+  }, selectPeriodText), loadingState ? jsx("div", {
+    css: LoadingProgressCSS,
+    className: 'DGN-Dropdown-Loading-Progress'
+  }, jsx(CircularProgress, {
+    size: 24
+  })) : null, jsx("div", {
+    style: {
+      width: '100%',
+      maxHeight: 190,
+      overflowY: 'scroll',
+      boxSizing: 'border-box',
+      paddingBottom: 36
+    },
+    ref: dropdownListRef,
+    onScroll: onLoadMoreHandler
+  }, periodOptions === null || periodOptions === void 0 ? void 0 : (_periodOptions$dataSo = periodOptions.dataSource) === null || _periodOptions$dataSo === void 0 ? void 0 : _periodOptions$dataSo.map((p, idx) => {
+    const isSelected = (p === null || p === void 0 ? void 0 : p[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr]) === selectedPeriodRef.current;
+    return jsx("div", {
+      id: `period${idx}`,
+      key: `period${idx}`,
+      style: {
+        background: isSelected ? getColor('fill/hover') : ''
+      },
+      css: _PeriodItemCSS,
+      onClick: () => onClickPresetDate('period', {
+        ...p,
+        idx
+      })
+    }, jsx(Typography, {
+      color: 'inherit',
+      type: 'p1'
+    }, p === null || p === void 0 ? void 0 : p[periodOptions === null || periodOptions === void 0 ? void 0 : periodOptions.displayExpr]));
+  })));
   const tooltipComp = jsx("div", {
     className: unique.tooltip,
     ref: tooltipRef
@@ -1004,7 +1156,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
       height: '226px',
       margin: spacing([4.5, 0.5, 0])
     }
-  }), rightCalendarComp), tooltipComp, controls ? footerMemo : null);
+  }), controls && periodOptions !== null && periodOptions !== void 0 && periodOptions.enable ? rightCalendarPeriodComp : rightCalendarComp), tooltipComp, controls ? footerMemo : null);
   return jsx(ControlComp, {
     ...other,
     disabled: disabled,
@@ -1015,7 +1167,40 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
     ...labelProps,
     disabled: disabled,
     required: required
-  }, label) : null, jsx(InputBase, {
+  }, label) : null, periodOptions !== null && periodOptions !== void 0 && periodOptions.enable ? jsx(Popover, {
+    open: openState,
+    className: 'DGN-UI-Popover-Period',
+    anchorOrigin: {
+      horizontal: 'left',
+      vertical: 'bottom'
+    },
+    anchor: jsx("div", null, jsx(InputBase, {
+      inputProps: {
+        placeholder: !readOnly && !disabled ? 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,
+      value: valueState
+    }), error ? jsx(HelperText, {
+      ...helperTextProps,
+      disabled: disabled
+    }, error) : null),
+    onOpen: openPeriodPicker
+  }, pickerComp) : jsx("div", null, jsx(InputBase, {
     inputProps: {
       placeholder: !readOnly && !disabled ? placeholder : '',
       ...inputProps
@@ -1040,7 +1225,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, ref
   }), error ? jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, error) : null);
+  }, error) : null));
 }));
 const unique = {
   backGr: 'DGN-UI-Portal',
@@ -1057,6 +1242,7 @@ const unique = {
   }),
   wrapper: 'DGN-UI-DateRangePicker-Wrapper',
   container: 'DGN-UI-DateRangePicker',
+  periodContainer: 'DGN-UI-DateRangePicker-Period',
   icon: 'DGN-UI-DateRangePicker-Icon',
   tooltip: 'DGN-UI-DateRangePicker-Tooltip',
   navigator: {
@@ -1132,6 +1318,29 @@ const DateOptionsCSS = ({
     ${displayFlex};
     padding-left: ${spacing(4)}px;
 `;
+const PeriodContainerCSS = ({
+  spacing
+}) => css`
+    ${displayFlex};
+    ${flexCol};
+    ${parseWidth('100%')};
+    ${itemsCenter}
+    margin: ${spacing([4, 0, 0, 0])} !important;
+`;
+const PeriodItemCSS = ({
+  spacing
+}) => css`
+    ${parseHeight(36)};
+    ${displayFlex};
+    ${itemsCenter};
+    ${parseWidth('100%')};
+    padding: ${spacing([2, 4])};
+    box-sizing: border-box;
+    &:hover {
+        ${bgColor(getColor('fill/hover'))};
+        ${cursorPointer};
+    }
+`;
 const pickerCSS = {
   backGr: ({
     zIndex
@@ -1208,7 +1417,18 @@ const pickerCSS = {
     transform: 'scale(0)'
   }
 };
-
+const LoadingProgressCSS = css`
+    ${displayFlex};
+    ${flexRow};
+    ${justifyCenter};
+    ${itemsCenter};
+    ${positionAbsolute};
+    ${borderRadius(4)};
+    ${parseWidthHeight('100%')}
+    ${bgColor('rgba(255, 255, 255, 0.6)')};
+    ${z(2)};
+    ${top(0)};
+`;
 // DateRangePicker.defaultProps = {
 //     actionIconAt: 'end',
 //     clearAble: false,
@@ -1262,6 +1482,22 @@ DateRangePicker.propTypes = {
   placeholder: PropTypes.string,
   /** If `true`, hitting escape will close component. */
   pressESCToClose: PropTypes.bool,
+  /** Options for period selector.
+   * example: {
+   *  enable: true,
+   *  dataSource: [],
+   *  displayExpr: "DisplayName",
+   *  valueFromExpr: "DateFrom",
+   *  valueToExpr: "DateTo",
+   *  valueFormat: "DD/MM/YYYY",
+   *  limit: 5,
+   *  skip: 0,
+   *  total: 100,
+   *  onLoadMore: () => {},
+   *  loading: false
+   * }
+   */
+  periodOptions: PropTypes.object,
   /** If `true`, the component is readOnly. */
   readOnly: PropTypes.bool,
   /** If `true`, the input element is required. */