@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.131

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -291,25 +291,24 @@ export const GlobalStyle = () => {
             }
           }
 
-          .antsomi-picker-date-panel {
+          /* .antsomi-picker-date-panel {
             position: relative;
-          }
+          } */
 
-          .antsomi-picker-date-panel::before {
+          /* .antsomi-picker-date-panel::before {
             content: 'Hours';
             position: absolute;
             top: 0;
             right: 0;
             transform: translateX(100%);
             width: 61px;
-            /* width: 53.5px; */
             font-weight: bold;
             border-right: 1px solid rgba(5, 5, 5, 0.06);
             height: 38px;
             display: flex;
             align-items: center;
             justify-content: center;
-          }
+          } */
 
           .antsomi-picker-time-panel {
             .antsomi-picker-time-panel-column:after {
@@ -336,43 +335,94 @@ export const GlobalStyle = () => {
               display: none;
             }
 
-            .antsomi-picker-content {
+            .antsomi-picker-time-panel-column {
+              width: 60px;
+              margin-top: 38px;
+              /* margin-top: 0; */
+              scrollbar-width: unset;
+              scrollbar-color: unset;
+
+              &::-webkit-scrollbar {
+                width: 6px;
+                background: transparent;
+              }
+              &::-webkit-scrollbar-track {
+                /* margin-top: 38px; */
+                border-radius: 10px;
+              }
+            }
+
+            /* ul.antsomi-picker-time-panel-column::before {
+              content: '';
+              position: absolute;
+              background: red;
+              top: 0;
+              right: 0;
+              width: 1px;
+              bottom: 0;
+            } */
+
+            /* .antsomi-picker-time-panel-column::before {
+              content: 'Hours';
+              position: sticky;
+              display: block;
+              top: 0;
+              height: 38px;
+              line-height: 38px;
+              text-align: center;
+              font-weight: bold;
+              background-color: #fff;
+            }
+
+            .antsomi-picker-time-panel-column:nth-child(1)::before {
+              content: 'Hours';
+            }
+            .antsomi-picker-time-panel-column:nth-child(2)::before {
+              content: 'Minutes';
+            }
+            .antsomi-picker-time-panel-column:nth-child(3)::before {
+              content: 'Seconds';
+            } */
+
+            /* .antsomi-picker-content {
               position: relative;
 
               .antsomi-picker-time-panel-column {
                 margin-top: 38px;
                 width: 60px;
               }
+            } */
+
+            .antsomi-picker-content {
+              position: relative;
             }
 
-            .antsomi-picker-content::after,
+            /* .antsomi-picker-content::after,
             .antsomi-picker-content::before {
               content: 'Minutes';
               position: absolute;
               top: 0;
               left: 61px;
-              /* left: 53.5px; */
               width: 60px;
-              /* width: 52.5px; */
               height: 38px;
               display: flex;
               align-items: center;
               justify-content: center;
               font-weight: bold;
-            }
+            } */
 
-            .antsomi-picker-content::before {
+            /* .antsomi-picker-content::before {
               border-right: 1px solid rgba(5, 5, 5, 0.06);
-            }
-            .antsomi-picker-content::after {
+            } */
+            /* .antsomi-picker-content::after {
               content: 'Seconds';
               left: 120px;
-            }
+            } */
           }
 
           /* Custom css scrollbar */
           ul {
-            padding-left: 8px;
+            padding-left: 6px;
             scrollbar-gutter: stable;
           }
         }
@@ -415,6 +465,16 @@ export const GlobalStyle = () => {
               content: 'Hours';
               border: none;
               left: 0;
+
+              position: absolute;
+              top: 0;
+              /* left: 61px; */
+              width: 60px;
+              height: 38px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-weight: bold;
             }
           }
           &.is-minutes-picker {
@@ -740,9 +800,7 @@ export const GlobalStyle = () => {
       /* Tabs */
       .antsomi-tabs {
         .antsomi-tabs-tab {
-          &.antsomi-tabs-tab-active {
-            font-weight: bold;
-          }
+          font-weight: bold;
         }
       }
 

package/es/components/molecules/AddDynamicContent/AddDynamicContent.js

@@ -14,6 +14,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { omit, isEmpty, flatMapDeep, set, get, isNaN } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
@@ -27,7 +28,6 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { useGetDynamicContentAttr, useGetListPromotionPool, useGetListEventAttr, useGetListPromotionCodeAttr, useGetListBO, useGetListAllEvents, useGetListSourceByEvent, useGetListAttributeBO, useGetCustomFunction, useAddSavedCSFunction, useUpdateCSFunction, } from '@antscorp/antsomi-ui/es/queries';
 import { useGetEventTrackingAttributes } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
 // Queries config
-import { queryClientAntsomiUI } from '@antscorp/antsomi-ui/es/queries/configs';
 import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants/queries';
 import { dateExample } from './components/FormatDatetime';
 import DisplayFormat from './components/DisplayFormat';
@@ -126,6 +126,7 @@ export const AddDynamicContent = props => {
     const [attrDFOptions, setAttrDFOptions] = useState([]);
     // Template Custom
     const [templateId, settemplateId] = useState();
+    const queryClient = useQueryClient();
     const { data: listBoAttributes = [], isFetching: isFetchingListBoAttr, isError: isErrorBoAttr, } = useGetListAttributeBO({
         url,
         itemTypeIds: itemTypeId ? [itemTypeId] : [],
@@ -911,7 +912,7 @@ export const AddDynamicContent = props => {
                             break;
                         setItemTypeId(Number(selectedItemTypeId));
                         const key = [QUERY_KEYS.GET_EVENT_ATTRIBUTE_BO, [selectedItemTypeId]];
-                        const listAttBOByItemTypeId = serilizeBOAttr(queryClientAntsomiUI.getQueryData(key));
+                        const listAttBOByItemTypeId = serilizeBOAttr(queryClient.getQueryData(key));
                         if (listAttBOByItemTypeId.length) {
                             form.setFieldsValue({
                                 [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: listAttBOByItemTypeId[0],

package/es/components/molecules/AddDynamicContent/styled.d.ts

@@ -6,7 +6,7 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     Option: import("rc-select/lib/Option").OptionFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Modal/styled").CustomModalProps, any>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const ButtonCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -3,34 +3,34 @@ import React, { useLayoutEffect, useReducer, useRef } from 'react';
 import { Divider } from 'antd';
 import { ActionContext, StateContext } from './context';
 import { reducer, INITIAL_STATE } from './reducer';
-import { StyledPopover, StyledPopoverBody } from './styled';
+import { StyledPopover, StyledPopoverBody, StyledPopoverContainer } from './styled';
 import { CustomPicker, Footer, RangeSelectOptions, TimeRangeDisplay } from './components';
 import { LOCAL_TIMEZONE, RANGE_LIMIT } from './constants';
-import { initState } from './actions';
+import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
     const initialed = useRef(false);
-    const { value, popoverProps, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, onChange, } = props;
+    const { value, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, popoverProps, rangePickerProps, onChange, } = props;
     const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
     useLayoutEffect(() => {
-        if (!value)
+        if (!value || initialed.current)
             return;
-        dispatch(initState(value, !initialed.current));
+        dispatch(initState(value, initialed.current));
         initialed.current = true;
     }, [value]);
-    // useLayoutEffect(() => {
-    //   if (!state.open) {
-    //     return () => {
-    //       dispatch(resetValue());
-    //     };
-    //   }
-    // }, [state.open]);
+    useLayoutEffect(() => {
+        if (!state.open) {
+            return () => {
+                dispatch(resetValue());
+            };
+        }
+    }, [state.open]);
     useTriggerOut({ state, dispatch, onChange });
-    const popoverContent = (React.createElement(React.Fragment, null,
+    const popoverContent = (React.createElement(StyledPopoverContainer, null,
         React.createElement(StyledPopoverBody, null,
             React.createElement(RangeSelectOptions, null),
             React.createElement(Divider, { type: "vertical", style: { margin: 0, height: 'auto' } }),
-            React.createElement(CustomPicker, null)),
+            React.createElement(CustomPicker, Object.assign({}, rangePickerProps))),
         React.createElement(Divider, { style: { margin: 0 } }),
         React.createElement(Footer, null)));
     // console.log(state.value.current.rangeValue);
@@ -41,5 +41,5 @@ export const CalendarSelection = props => {
                     if (!isOpen)
                         dispatch({ type: 'toggle_popover' });
                 } }),
-                React.createElement(TimeRangeDisplay, { showType: timeDisplayProps === null || timeDisplayProps === void 0 ? void 0 : timeDisplayProps.showType })))));
+                React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps))))));
 };

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /* eslint-disable react/no-array-index-key */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
@@ -19,7 +30,8 @@ const generateRangeInputLabel = (idx, label) => {
         return 'custom';
     return `custom compare${idx > 1 ? ` ${idx}}` : ''}`;
 };
-export const CustomPicker = () => {
+export const CustomPicker = props => {
+    const rest = __rest(props, []);
     const popupContainer = useRef(null);
     const { state, action } = useCalendarSelectionContext();
     const { rangeValue } = state.value.current;
@@ -30,12 +42,9 @@ export const CustomPicker = () => {
         }
     }, [rangeValue.length]);
     const handleCalendarChange = (start, end) => {
-        var _a, _b;
         if (!start || !end || activeRangeIdx === null)
             return;
         const replacedRange = rangeValue[activeRangeIdx];
-        if (((_a = replacedRange.start) === null || _a === void 0 ? void 0 : _a.isSame(start)) && ((_b = replacedRange.end) === null || _b === void 0 ? void 0 : _b.isSame(end)))
-            return;
         const updatedRangeValue = [...rangeValue];
         updatedRangeValue.splice(activeRangeIdx, 1, Object.assign(Object.assign({}, replacedRange), { start,
             end }));
@@ -69,7 +78,7 @@ export const CustomPicker = () => {
             } },
             React.createElement("div", { className: "range-input" },
                 React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
-                React.createElement(RangePicker, { open: true, value: [range.start, range.end], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
                         if (activeRangeIdx !== rangeIdx)
                             return null;
                         return originalPanel;
@@ -80,10 +89,20 @@ export const CustomPicker = () => {
                         return renderCellDate(current, info.originNode);
                     }, onCalendarChange: value => {
                         var _a, _b;
-                        const start = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
-                        const end = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
+                        let start = '';
+                        let end = '';
+                        const valueFirst = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
+                        const valueSecond = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
+                        if (valueFirst.isBefore(valueSecond)) {
+                            start = valueFirst.toISOString();
+                            end = valueSecond.toISOString();
+                        }
+                        else {
+                            start = valueSecond.toISOString();
+                            end = valueFirst.toISOString();
+                        }
                         handleCalendarChange(start, end);
-                    } })))))),
+                    } }))))))),
         React.createElement(AutoUpdateTo, null),
         React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
 };

package/es/components/molecules/CalendarSelection/components/CustomPicker/styled.js

@@ -79,7 +79,6 @@ export const CalendarContainerStyled = styled.div `
 
       /* Date node */
       .antsomi-picker-cell-inner {
-        height: 21.5px;
       }
 
       /* Today node */
@@ -110,9 +109,9 @@ export const CalendarContainerStyled = styled.div `
           background: var(--colorInRange) !important;
         }
         .antsomi-picker-cell-inner {
-          background: var(--colorInRange) !important;
+          /* background: var(--colorInRange) !important; */
           &::after {
-            content: none;
+            content: none !important;
             background: var(--colorInRange) !important;
           }
         }
@@ -133,6 +132,18 @@ export const CalendarContainerStyled = styled.div `
           background: var(--colorInRange) !important;
         }
       }
+
+      /* Hover */
+      .antsomi-picker-cell-in-view {
+        &.antsomi-picker-cell-range-hover,
+        &.antsomi-picker-cell-range-hover-start,
+        &.antsomi-picker-cell-range-hover-end {
+          &:not(.antsomi-picker-cell-in-range)::after {
+            content: none !important;
+            border: none;
+          }
+        }
+      }
     }
     .antsomi-picker-range-arrow {
       display: none !important;

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 export type TimeRangeDisplayProps = {
     showType?: boolean;
+    formatStart?: string;
+    formatEnd?: string;
+    operator?: string;
 };
 export declare const TimeRangeDisplay: React.FC<TimeRangeDisplayProps>;

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.js

@@ -19,19 +19,23 @@ import { StyledBtnDisplayWrapper } from './styled';
 import Icon from '@antscorp/icons';
 const { Text } = Typography;
 export const TimeRangeDisplay = forwardRef((props, ref) => {
-    const { showType = true } = props, rest = __rest(props, ["showType"]);
+    const { showType = true, formatStart, formatEnd, operator } = props, rest = __rest(props, ["showType", "formatStart", "formatEnd", "operator"]);
     const { state, action } = useCalendarSelectionContext();
     // console.log({ state, action });
     const [collapse, setCollapse] = useState(false);
     useEffect(() => {
         setCollapse(false);
     }, []);
-    const { rangeInfo, rangeValue } = state.value.current;
+    const { rangeInfo, rangeValue } = state.value.original;
     const handleOpenPopover = () => {
         action.dispatch({ type: ACTION_TYPES.togglePopover });
     };
     const rangeSelectedTitle = getRangeTypeSelectedTitle(rangeInfo);
-    const rangeValueTitles = getRangeValueSelctedTitle(rangeValue);
+    const rangeValueTitles = getRangeValueSelctedTitle(rangeValue, {
+        formatStart,
+        formatEnd,
+        operator,
+    });
     // console.log({ rangeSelectedTitle, rangeValueTitles });
     return (React.createElement(StyledBtnDisplayWrapper, Object.assign({ ref: ref }, rest, { onClick: handleOpenPopover, role: "button" }),
         showType && (React.createElement(Text, { className: "range-type", ellipsis: { tooltip: rangeSelectedTitle } }, rangeSelectedTitle)),

package/es/components/molecules/CalendarSelection/hooks/useStateContext.d.ts

@@ -1,4 +1,4 @@
 export declare const useCalendarSelectionContext: () => {
-    state: import("../types").ReducerState;
-    action: import("../types").ActionType;
+    state: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
+    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
 };

package/es/components/molecules/CalendarSelection/reducer.js

@@ -18,8 +18,8 @@ const DEFAULT_VALUE = {
     rangeInfo: { type: SELECTION_KEY.today },
     rangeValue: [
         {
-            start: dayjs(),
-            end: dayjs(),
+            start: dayjs().toISOString(),
+            end: dayjs().toISOString(),
         },
     ],
 };

package/es/components/molecules/CalendarSelection/styled.d.ts

@@ -2,4 +2,5 @@
 export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;
+export declare const StyledPopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledPopoverBody: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/CalendarSelection/styled.js

@@ -3,8 +3,11 @@ import styled from 'styled-components';
 export const StyledPopover = styled(Popover) `
   font-size: 12px;
 `;
+export const StyledPopoverContainer = styled.div ``;
 export const StyledPopoverBody = styled.div `
   font-size: 12px;
   display: flex;
-  max-width: 100%;
+  max-height: 75vh;
+
+  overflow: auto;
 `;

package/es/components/molecules/CalendarSelection/types.d.ts

@@ -1,5 +1,4 @@
-import { PopoverProps } from 'antd';
-import { Dayjs } from 'dayjs';
+import { DatePickerProps, PopoverProps } from 'antd';
 import { Dispatch } from 'react';
 import { ValueOf } from 'type-fest';
 import { updateRangeInfo, changeRangeType, updateRangeValue, changeAutoUpdateTo, initState, togglePopover, apply, resetValue } from './actions';
@@ -12,6 +11,7 @@ export type CalendarSelectionProps = Partial<{
     toDay: Date;
     value: CalendarSelectionValue;
     timeDisplayProps: TimeRangeDisplayProps;
+    rangePickerProps: DatePickerProps;
     onChange: (value: CalendarSelectionValue, info: TriggerOutInfo) => void;
 }>;
 export type Range = (typeof SELECTION_KEY)[keyof typeof SELECTION_KEY];
@@ -86,8 +86,8 @@ export type DaysUpToYesterday = {
 };
 export type RangeInfo = Custom | ToDay | Yesterday | ThisWeek | LastWeek | Last7Days | Last14Days | Last30Days | ThisMonth | LastMonth | ThisQuarter | LastQuarter | AllTime | DaysUpToToday | DaysUpToYesterday;
 export type RangeValue = {
-    start: Dayjs | null;
-    end: Dayjs | null;
+    start: string | null;
+    end: string | null;
     label?: string;
     color?: string;
 };

package/es/components/molecules/CalendarSelection/utils.d.ts

@@ -1,38 +1,42 @@
-import dayjs from 'dayjs';
 import { AutoUpdateTo, RangeInfo, RangeValue, ReducerState } from './types';
 export declare const rangeInfoToStringType: (rangeInfo: RangeInfo) => string;
 export declare const serializeWeekStartsOn: (rangeType: string) => number | undefined;
 export declare const generateRangeInfo: (rangeType: string) => RangeInfo | null;
 export declare const getDefaultDate: () => {
-    toDay: dayjs.Dayjs;
-    yesterday: dayjs.Dayjs;
-    startWeekSS: dayjs.Dayjs;
-    startWeekMS: dayjs.Dayjs;
-    last7Days: dayjs.Dayjs;
-    startLastWeekSS: dayjs.Dayjs;
-    startLastWeekMS: dayjs.Dayjs;
-    endLastWeekSS: dayjs.Dayjs;
-    endLastWeekMS: dayjs.Dayjs;
-    last14Days: dayjs.Dayjs;
-    startOfThisMonth: dayjs.Dayjs;
-    endOfThisMonth: dayjs.Dayjs;
-    last30Days: dayjs.Dayjs;
-    lastMonthFirstDate: dayjs.Dayjs;
-    lastMonthLastDate: dayjs.Dayjs;
-    thisQuaterFirstDate: dayjs.Dayjs;
-    thisQuaterLastDate: dayjs.Dayjs;
-    lastQuaterFirstDate: dayjs.Dayjs;
-    lastQuaterLastDate: dayjs.Dayjs;
+    toDay: string;
+    yesterday: string;
+    startWeekSS: string;
+    startWeekMS: string;
+    last7Days: string;
+    startLastWeekSS: string;
+    startLastWeekMS: string;
+    endLastWeekSS: string;
+    endLastWeekMS: string;
+    last14Days: string;
+    startOfThisMonth: string;
+    endOfThisMonth: string;
+    last30Days: string;
+    lastMonthFirstDate: string;
+    lastMonthLastDate: string;
+    thisQuaterFirstDate: string;
+    thisQuaterLastDate: string;
+    lastQuaterFirstDate: string;
+    lastQuaterLastDate: string;
     maxSub: number;
-    todayUptoCount: (val: number) => dayjs.Dayjs;
-    yesterdayUptoCount: (val: number) => dayjs.Dayjs;
+    todayUptoCount: (val: number) => string;
+    yesterdayUptoCount: (val: number) => string;
 };
 export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
     rangeInfo: RangeInfo;
     currentRangeValue: RangeValue[];
     limitNumOfDays?: number | undefined;
 }) => RangeValue[];
-export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[]) => string[];
+export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[], options?: {
+    formatStart?: string;
+    formatEnd?: string;
+    minimize?: boolean;
+    operator?: string;
+}) => string[];
 export declare const getRangeTypeSelectedTitle: (rangeInfo: RangeInfo) => string;
 export declare const combineCurrentValue: (state: ReducerState) => {
     rangeInfo: RangeInfo;

package/es/components/molecules/CalendarSelection/utils.js

@@ -96,28 +96,28 @@ export const generateRangeInfo = (rangeType) => {
 export const getDefaultDate = () => {
     const toDayTz = dayjs(new Date());
     return {
-        toDay: toDayTz,
-        yesterday: toDayTz.subtract(1, 'd'),
-        startWeekSS: toDayTz.weekday(0),
-        startWeekMS: toDayTz.isoWeekday(1),
-        last7Days: toDayTz.subtract(1, 'w'),
-        startLastWeekSS: toDayTz.subtract(1, 'w').weekday(0),
-        startLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(1),
-        endLastWeekSS: toDayTz.subtract(1, 'w').weekday(6),
-        endLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(7),
-        last14Days: toDayTz.subtract(14, 'd'),
-        startOfThisMonth: toDayTz.startOf('M'),
-        endOfThisMonth: toDayTz.endOf('M'),
-        last30Days: toDayTz.subtract(30, 'd'),
-        lastMonthFirstDate: toDayTz.subtract(1, 'M').startOf('M'),
-        lastMonthLastDate: toDayTz.subtract(1, 'M').endOf('M'),
-        thisQuaterFirstDate: toDayTz.startOf('Q'),
-        thisQuaterLastDate: toDayTz.endOf('Q'),
-        lastQuaterFirstDate: toDayTz.subtract(1, 'Q').startOf('Q'),
-        lastQuaterLastDate: toDayTz.subtract(1, 'Q').endOf('Q'),
+        toDay: toDayTz.toISOString(),
+        yesterday: toDayTz.subtract(1, 'd').toISOString(),
+        startWeekSS: toDayTz.weekday(0).toISOString(),
+        startWeekMS: toDayTz.isoWeekday(1).toISOString(),
+        last7Days: toDayTz.subtract(1, 'w').toISOString(),
+        startLastWeekSS: toDayTz.subtract(1, 'w').weekday(0).toISOString(),
+        startLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(1).toISOString(),
+        endLastWeekSS: toDayTz.subtract(1, 'w').weekday(6).toISOString(),
+        endLastWeekMS: toDayTz.subtract(1, 'w').isoWeekday(7).toISOString(),
+        last14Days: toDayTz.subtract(14, 'd').toISOString(),
+        startOfThisMonth: toDayTz.startOf('M').toISOString(),
+        endOfThisMonth: toDayTz.endOf('M').toISOString(),
+        last30Days: toDayTz.subtract(30, 'd').toISOString(),
+        lastMonthFirstDate: toDayTz.subtract(1, 'M').startOf('M').toISOString(),
+        lastMonthLastDate: toDayTz.subtract(1, 'M').endOf('M').toISOString(),
+        thisQuaterFirstDate: toDayTz.startOf('Q').toISOString(),
+        thisQuaterLastDate: toDayTz.endOf('Q').toISOString(),
+        lastQuaterFirstDate: toDayTz.subtract(1, 'Q').startOf('Q').toISOString(),
+        lastQuaterLastDate: toDayTz.subtract(1, 'Q').endOf('Q').toISOString(),
         maxSub: toDayTz.diff(dayZero, 'd'),
-        todayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1), 'd'),
-        yesterdayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1) + 1, 'd'),
+        todayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1), 'd').toISOString(),
+        yesterdayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1) + 1, 'd').toISOString(),
     };
 };
 export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = RANGE_LIMIT, }) => {
@@ -206,17 +206,17 @@ export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = R
                 break;
             }
             case SELECTION_KEY.all_time: {
-                temp.start = defaultDates.toDay.subtract(limitNumOfDays, 'd');
+                temp.start = dayjs(defaultDates.toDay).subtract(limitNumOfDays, 'd').toISOString();
                 temp.end = defaultDates.toDay;
                 break;
             }
             case SELECTION_KEY.days_up_to_today: {
-                temp.start = defaultDates.toDay.subtract(rangeInfo.numOfDays, 'd');
+                temp.start = dayjs(defaultDates.toDay).subtract(rangeInfo.numOfDays, 'd').toISOString();
                 temp.end = defaultDates.toDay;
                 break;
             }
             case SELECTION_KEY.days_up_to_yesterday: {
-                temp.start = defaultDates.toDay.subtract(rangeInfo.numOfDays, 'd');
+                temp.start = dayjs(defaultDates.toDay).subtract(rangeInfo.numOfDays, 'd').toISOString();
                 temp.end = defaultDates.yesterday;
                 break;
             }
@@ -227,17 +227,21 @@ export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = R
     });
     return result;
 };
-export const getRangeValueSelctedTitle = (rangeValue) => {
+export const getRangeValueSelctedTitle = (rangeValue, options) => {
+    const { formatStart, formatEnd, operator = '-' } = options || {};
     const result = [];
     rangeValue.forEach(range => {
+        var _a, _b, _c, _d, _e;
         const { start, end } = range;
-        let startFormat = 'MMM D';
-        if (start === null || start === void 0 ? void 0 : start.isSame(end, 'D')) {
-            return result.push(start === null || start === void 0 ? void 0 : start.format('MMM D YYYY'));
+        let startFormat = formatStart || 'MMM D';
+        const endFormat = formatEnd || 'MMM D YYYY';
+        if ((_a = dayjs(start)) === null || _a === void 0 ? void 0 : _a.isSame(dayjs(end), 'D')) {
+            return result.push((_b = dayjs(start)) === null || _b === void 0 ? void 0 : _b.format('MMM D YYYY'));
         }
-        if (!(start === null || start === void 0 ? void 0 : start.isSame(end, 'y')))
+        if (!((_c = dayjs(start)) === null || _c === void 0 ? void 0 : _c.isSame(dayjs(end), 'y')) && !formatStart) {
             startFormat = `${startFormat} YYYY`;
-        result.push(`${start === null || start === void 0 ? void 0 : start.format(startFormat)} - ${end === null || end === void 0 ? void 0 : end.format('MMM D YYYY')}`);
+        }
+        result.push(`${(_d = dayjs(start)) === null || _d === void 0 ? void 0 : _d.format(startFormat)} ${operator} ${(_e = dayjs(end)) === null || _e === void 0 ? void 0 : _e.format(endFormat)}`);
     });
     return result;
 };