@antscorp/antsomi-ui 1.3.5-beta.7 → 1.3.5-beta.71

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

@@ -0,0 +1,49 @@
+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;
+};
+import cls from 'clsx';
+import React, { forwardRef, useEffect, useState } from 'react';
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { ACTION_TYPES } from '../../actions';
+import { useCalendarSelectionContext } from '../../hooks';
+import { getRangeTypeSelectedTitle, getRangeValueSelctedTitle } from '../../utils';
+import { StyledBtnDisplayWrapper } from './styled';
+import Icon from '@antscorp/icons';
+const { Text } = Typography;
+export const TimeRangeDisplay = forwardRef((props, ref) => {
+    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.original;
+    const handleOpenPopover = () => {
+        action.dispatch({ type: ACTION_TYPES.togglePopover });
+    };
+    const rangeSelectedTitle = getRangeTypeSelectedTitle(rangeInfo);
+    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)),
+        React.createElement("div", { className: cls('range-date', { collapse: state.open }) },
+            rangeValue.length > 0 && (React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: rangeValueTitles[0] } },
+                rangeValueTitles[0],
+                React.createElement(Icon, { className: "collapse-btn", type: "icon-ants-angle-down", style: { fontSize: 9 } }))),
+            rangeValue.length > 1 && (React.createElement("div", { className: cls('collapse-wrapper') }, rangeValueTitles.slice(1).map(title => (React.createElement(React.Fragment, { key: title },
+                React.createElement("div", { className: "compare-title" }, "Compare"),
+                React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: title } }, title)))))))));
+});

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

@@ -0,0 +1,2 @@
+export { TimeRangeDisplay } from './TimeRangeDisplay';
+export { StyledBtnDisplayWrapper } from './styled';

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

@@ -0,0 +1,2 @@
+export { TimeRangeDisplay } from './TimeRangeDisplay';
+export { StyledBtnDisplayWrapper } from './styled';

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

@@ -0,0 +1 @@
+export declare const StyledBtnDisplayWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+export const StyledBtnDisplayWrapper = styled.div `
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: transparent;
+  cursor: pointer;
+  width: fit-content;
+
+  .range-type {
+    /* font-size: 0.75rem;
+    width: fit-content;
+    padding: 2px 8px; */
+
+    display: block;
+    font-size: 0.813rem;
+    margin-right: 0.5rem;
+    color: rgb(127, 127, 127);
+  }
+
+  .range-date {
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-image: initial;
+    background: transparent;
+    border-bottom: 1px solid rgb(184, 207, 230);
+    text-align: left;
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    max-width: unset;
+
+    .range-date-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .collapse-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow: hidden;
+
+      .compare-title {
+        font-size: 11px;
+        color: #878d93;
+      }
+    }
+
+    .collapse-btn {
+      padding: 4px;
+    }
+
+    &.collapse {
+      .collapse-wrapper {
+        height: 0;
+      }
+
+      .collapse-btn {
+        transform: rotate(180deg);
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,5 @@
+export * from './CustomPicker';
+export * from './RangeSelectOptions';
+export * from './RangePicker';
+export * from './TimeRangeDisplay';
+export * from './Footer';

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

@@ -0,0 +1,5 @@
+export * from './CustomPicker';
+export * from './RangeSelectOptions';
+export * from './RangePicker';
+export * from './TimeRangeDisplay';
+export * from './Footer';

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

@@ -0,0 +1,97 @@
+import { DaysUpToToday, DaysUpToYesterday } from './types';
+export declare const TRIGGER_OUT_MODE: {
+    readonly auto: "auto";
+    readonly manual: "manual";
+};
+export declare const LOCAL_TIMEZONE = "Asia/Hong_Kong";
+export declare const RANGE_LIMIT: number;
+export declare const DEFAULT_NUM_UP_TO = 30;
+export declare const AUTO_UPDATE_TO_KEY: {
+    readonly today: "today";
+    readonly yesterday: "yesterday";
+    readonly fixed: "fixed";
+};
+export declare const AUTO_UPDATE_TO_OPTIONS: {
+    today: {
+        key: "today";
+        label: string;
+    };
+    yesterday: {
+        key: "yesterday";
+        label: string;
+    };
+    fixed: {
+        key: "fixed";
+        label: string;
+    };
+};
+export declare const SELECTION_KEY: {
+    readonly today: "today";
+    readonly yesterday: "yesterday";
+    readonly this_week: "this_week";
+    readonly last_7_days: "last_7_days";
+    readonly last_week: "last_week";
+    readonly last_14_days: "last_14_days";
+    readonly this_month: "this_month";
+    readonly last_30_days: "last_30_days";
+    readonly last_month: "last_month";
+    readonly this_quarter: "this_quarter";
+    readonly last_quarter: "last_quarter";
+    readonly all_time: "all_time";
+    readonly custom: "custom";
+    readonly days_up_to_today: "days_up_to_today";
+    readonly days_up_to_yesterday: "days_up_to_yesterday";
+};
+export declare const RANGE_TIME: readonly ["today", "yesterday", "this_week", "last_week", "last_7_days", "last_14_days", "last_30_days", "this_month", "last_month", "this_quarter", "last_quarter", "all_time"];
+export declare const SPECIFIC_TIME: readonly ["days_up_to_today", "days_up_to_yesterday", "last_7_days", "last_14_days", "last_30_days"];
+export declare const MAP_TITLE: {
+    today: string;
+    yesterday: string;
+    last_7_days: string;
+    last_14_days: string;
+    this_month: string;
+    last_30_days: string;
+    last_month: string;
+    all_time: string;
+    last_week: string;
+    this_week: string;
+    this_quarter: string;
+    last_quarter: string;
+    custom: string;
+    days_up_to_today: string;
+    days_up_to_yesterday: string;
+    sundayToToDay: string;
+    sundayToSat: string;
+    monToToDay: string;
+    monToSun: string;
+};
+export declare const MAP_TITLE_DISPLAY: {
+    days_up_to_yesterday: (rangeInfo: DaysUpToYesterday) => string;
+    days_up_to_today: (rangeInfo: DaysUpToToday) => string;
+    today: string;
+    yesterday: string;
+    last_7_days: string;
+    last_14_days: string;
+    this_month: string;
+    last_30_days: string;
+    last_month: string;
+    all_time: string;
+    last_week: string;
+    this_week: string;
+    this_quarter: string;
+    last_quarter: string;
+    custom: string;
+    sundayToToDay: string;
+    sundayToSat: string;
+    monToToDay: string;
+    monToSun: string;
+};
+export declare const RANGE_SELECTION_OPTIONS: Record<string, {
+    key: string;
+    label: string;
+    isFixed: boolean;
+    options?: {
+        key: string;
+        label: string;
+    }[];
+}>;

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

@@ -0,0 +1,183 @@
+export const TRIGGER_OUT_MODE = {
+    auto: 'auto',
+    manual: 'manual',
+};
+export const LOCAL_TIMEZONE = 'Asia/Hong_Kong' || Intl.DateTimeFormat().resolvedOptions().timeZone;
+export const RANGE_LIMIT = 365 * 2;
+export const DEFAULT_NUM_UP_TO = 30;
+export const AUTO_UPDATE_TO_KEY = {
+    today: 'today',
+    yesterday: 'yesterday',
+    fixed: 'fixed',
+};
+export const AUTO_UPDATE_TO_OPTIONS = {
+    [AUTO_UPDATE_TO_KEY.today]: {
+        key: AUTO_UPDATE_TO_KEY.today,
+        label: 'Today',
+    },
+    [AUTO_UPDATE_TO_KEY.yesterday]: {
+        key: AUTO_UPDATE_TO_KEY.yesterday,
+        label: 'Yesterday',
+    },
+    [AUTO_UPDATE_TO_KEY.fixed]: {
+        key: AUTO_UPDATE_TO_KEY.fixed,
+        label: 'Fixed',
+    },
+};
+export const SELECTION_KEY = {
+    today: 'today',
+    yesterday: 'yesterday',
+    this_week: 'this_week',
+    last_7_days: 'last_7_days',
+    last_week: 'last_week',
+    last_14_days: 'last_14_days',
+    this_month: 'this_month',
+    last_30_days: 'last_30_days',
+    last_month: 'last_month',
+    this_quarter: 'this_quarter',
+    last_quarter: 'last_quarter',
+    all_time: 'all_time',
+    custom: 'custom',
+    days_up_to_today: 'days_up_to_today',
+    days_up_to_yesterday: 'days_up_to_yesterday',
+};
+export const RANGE_TIME = [
+    SELECTION_KEY.today,
+    SELECTION_KEY.yesterday,
+    SELECTION_KEY.this_week,
+    SELECTION_KEY.last_week,
+    SELECTION_KEY.last_7_days,
+    SELECTION_KEY.last_14_days,
+    SELECTION_KEY.last_30_days,
+    SELECTION_KEY.this_month,
+    SELECTION_KEY.last_month,
+    SELECTION_KEY.this_quarter,
+    SELECTION_KEY.last_quarter,
+    SELECTION_KEY.all_time,
+];
+export const SPECIFIC_TIME = [
+    SELECTION_KEY.days_up_to_today,
+    SELECTION_KEY.days_up_to_yesterday,
+    SELECTION_KEY.last_7_days,
+    SELECTION_KEY.last_14_days,
+    SELECTION_KEY.last_30_days,
+];
+export const MAP_TITLE = {
+    [SELECTION_KEY.today]: 'Today',
+    [SELECTION_KEY.yesterday]: 'Yesterday',
+    [SELECTION_KEY.last_7_days]: 'Last 7 days',
+    [SELECTION_KEY.last_14_days]: 'Last 14  days',
+    [SELECTION_KEY.this_month]: 'This month',
+    [SELECTION_KEY.last_30_days]: 'Last 30 days',
+    [SELECTION_KEY.last_month]: 'Last month',
+    [SELECTION_KEY.all_time]: 'All time',
+    [SELECTION_KEY.last_week]: 'Last week',
+    [SELECTION_KEY.this_week]: 'This week',
+    [SELECTION_KEY.this_quarter]: 'This quarter',
+    [SELECTION_KEY.last_quarter]: 'Last quarter',
+    [SELECTION_KEY.custom]: 'Custom',
+    [SELECTION_KEY.days_up_to_today]: 'day(s), up to today',
+    [SELECTION_KEY.days_up_to_yesterday]: 'day(s), up to yesterday',
+    sundayToToDay: 'Sun-Today',
+    sundayToSat: 'Sun-Sat',
+    monToToDay: 'Mon-Today',
+    monToSun: 'Mon-Sun',
+};
+export const MAP_TITLE_DISPLAY = Object.assign(Object.assign({}, MAP_TITLE), { [SELECTION_KEY.days_up_to_yesterday]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up to yesterday')`, [SELECTION_KEY.days_up_to_today]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up today` });
+export const RANGE_SELECTION_OPTIONS = {
+    [SELECTION_KEY.today]: {
+        key: SELECTION_KEY.today,
+        label: MAP_TITLE[SELECTION_KEY.today],
+        isFixed: false, // if 1 unit is fixed, 7 day : true , this week : false
+    },
+    [SELECTION_KEY.yesterday]: {
+        key: SELECTION_KEY.yesterday,
+        label: MAP_TITLE[SELECTION_KEY.yesterday],
+        isFixed: false,
+    },
+    [SELECTION_KEY.this_week]: {
+        key: SELECTION_KEY.this_week,
+        label: MAP_TITLE[SELECTION_KEY.this_week],
+        isFixed: false,
+        options: [
+            {
+                key: `${SELECTION_KEY.this_week}_7`,
+                label: MAP_TITLE.sundayToToDay,
+            },
+            {
+                key: `${SELECTION_KEY.this_week}_1`,
+                label: MAP_TITLE.monToToDay,
+            },
+        ],
+    },
+    [SELECTION_KEY.last_7_days]: {
+        key: SELECTION_KEY.last_7_days,
+        label: MAP_TITLE[SELECTION_KEY.last_7_days],
+        isFixed: true,
+    },
+    [SELECTION_KEY.last_week]: {
+        key: SELECTION_KEY.last_week,
+        label: MAP_TITLE[SELECTION_KEY.last_week],
+        isFixed: false,
+        options: [
+            {
+                key: `${SELECTION_KEY.last_week}_7`,
+                label: MAP_TITLE.sundayToSat,
+            },
+            {
+                key: `${SELECTION_KEY.last_week}_1`,
+                label: MAP_TITLE.monToSun,
+            },
+        ],
+    },
+    [SELECTION_KEY.last_14_days]: {
+        key: SELECTION_KEY.last_14_days,
+        label: MAP_TITLE[SELECTION_KEY.last_14_days],
+        isFixed: true,
+    },
+    [SELECTION_KEY.this_month]: {
+        key: SELECTION_KEY.this_month,
+        label: MAP_TITLE[SELECTION_KEY.this_month],
+        isFixed: false,
+    },
+    [SELECTION_KEY.last_30_days]: {
+        key: SELECTION_KEY.last_30_days,
+        label: MAP_TITLE[SELECTION_KEY.last_30_days],
+        isFixed: true,
+    },
+    [SELECTION_KEY.last_month]: {
+        key: SELECTION_KEY.last_month,
+        label: MAP_TITLE[SELECTION_KEY.last_month],
+        isFixed: false,
+    },
+    [SELECTION_KEY.this_quarter]: {
+        key: SELECTION_KEY.this_quarter,
+        label: MAP_TITLE[SELECTION_KEY.this_quarter],
+        isFixed: false,
+    },
+    [SELECTION_KEY.last_quarter]: {
+        key: SELECTION_KEY.last_quarter,
+        label: MAP_TITLE[SELECTION_KEY.last_quarter],
+        isFixed: false,
+    },
+    [SELECTION_KEY.all_time]: {
+        key: SELECTION_KEY.all_time,
+        label: MAP_TITLE[SELECTION_KEY.all_time],
+        isFixed: false,
+    },
+    [SELECTION_KEY.custom]: {
+        key: SELECTION_KEY.custom,
+        label: MAP_TITLE.custom,
+        isFixed: true,
+    },
+    [SELECTION_KEY.days_up_to_today]: {
+        key: SELECTION_KEY.days_up_to_today,
+        label: MAP_TITLE[SELECTION_KEY.days_up_to_today],
+        isFixed: true,
+    },
+    [SELECTION_KEY.days_up_to_yesterday]: {
+        key: SELECTION_KEY.days_up_to_yesterday,
+        label: MAP_TITLE[SELECTION_KEY.days_up_to_yesterday],
+        isFixed: true,
+    },
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ReducerState, ActionType } from './types';
+export declare const StateContext: import("react").Context<ReducerState>;
+export declare const ActionContext: import("react").Context<ActionType>;

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

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { INITIAL_STATE } from './reducer';
+export const StateContext = createContext(INITIAL_STATE);
+export const ActionContext = createContext({
+    dispatch: () => { },
+});

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

@@ -0,0 +1,2 @@
+export * from './useStateContext';
+export * from './useTriggerOut';

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

@@ -0,0 +1,2 @@
+export * from './useStateContext';
+export * from './useTriggerOut';

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

@@ -0,0 +1,4 @@
+export declare const useCalendarSelectionContext: () => {
+    state: import("../types").ReducerState;
+    action: import("../types").ActionType;
+};

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

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ActionContext, StateContext } from '../context';
+export const useCalendarSelectionContext = () => {
+    const state = useContext(StateContext);
+    const action = useContext(ActionContext);
+    if (state === undefined) {
+        throw new Error('useBrandedDomainContext not inside StateProvider');
+    }
+    if (action === undefined) {
+        throw new Error('useBrandedDomainContext not inside DispatchProvider');
+    }
+    return { state, action };
+};

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

@@ -0,0 +1,9 @@
+import { Dispatch } from 'react';
+import { CalendarSelectionValue, ReducerState, Action, TriggerOutInfo } from '../types';
+type Params = {
+    onChange?: (value: CalendarSelectionValue, info: TriggerOutInfo) => void;
+    state: ReducerState;
+    dispatch: Dispatch<Action>;
+};
+export declare const useTriggerOut: (params: Params) => void;
+export {};

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

@@ -0,0 +1,19 @@
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useRef } from 'react';
+import { combineCurrentValue } from '../utils';
+export const useTriggerOut = (params) => {
+    const { onChange: onTriggerOut, state } = params;
+    const onTriggerOutRef = useRef();
+    const { triggerOut } = state;
+    const triggerOutValue = useDeepCompareMemo(() => combineCurrentValue(state), [state]);
+    useDeepCompareEffect(() => {
+        if (onTriggerOut) {
+            onTriggerOutRef.current = () => onTriggerOut(triggerOutValue, triggerOut);
+        }
+    }, [onTriggerOut, triggerOutValue, triggerOut]);
+    useDeepCompareEffect(() => {
+        if (triggerOut.id !== null && onTriggerOutRef.current) {
+            onTriggerOutRef.current();
+        }
+    }, [triggerOut]);
+};

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

@@ -0,0 +1,25 @@
+export { CalendarSelection } from './CalendarSelection';
+export declare const CalendarSelectionConstants: {
+    TRIGGER_OUT_MODE: {
+        readonly auto: "auto";
+        readonly manual: "manual";
+    };
+    SELECTION_KEY: {
+        readonly today: "today";
+        readonly yesterday: "yesterday";
+        readonly this_week: "this_week";
+        readonly last_7_days: "last_7_days";
+        readonly last_week: "last_week";
+        readonly last_14_days: "last_14_days";
+        readonly this_month: "this_month";
+        readonly last_30_days: "last_30_days";
+        readonly last_month: "last_month";
+        readonly this_quarter: "this_quarter";
+        readonly last_quarter: "last_quarter";
+        readonly all_time: "all_time";
+        readonly custom: "custom";
+        readonly days_up_to_today: "days_up_to_today";
+        readonly days_up_to_yesterday: "days_up_to_yesterday";
+    };
+};
+export type { TriggerOutInfo, CalendarSelectionValue } from './types';

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

@@ -0,0 +1,6 @@
+import { TRIGGER_OUT_MODE, SELECTION_KEY } from './constants';
+export { CalendarSelection } from './CalendarSelection';
+export const CalendarSelectionConstants = {
+    TRIGGER_OUT_MODE,
+    SELECTION_KEY,
+};

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

@@ -0,0 +1,3 @@
+import { Action, ReducerState } from './types';
+export declare const INITIAL_STATE: ReducerState;
+export declare const reducer: (state: ReducerState, action: Action) => ReducerState;

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

@@ -0,0 +1,121 @@
+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;
+};
+import { produce } from 'immer';
+import { AUTO_UPDATE_TO_KEY, LOCAL_TIMEZONE, RANGE_LIMIT, SELECTION_KEY, TRIGGER_OUT_MODE, } from './constants';
+import { generateRangeInfo, getRangeValue, genTriggerOut } from './utils';
+import dayjs from 'dayjs';
+import { ACTION_TYPES } from './actions';
+const DEFAULT_VALUE = {
+    rangeInfo: { type: SELECTION_KEY.today },
+    rangeValue: [
+        {
+            start: dayjs().toISOString(),
+            end: dayjs().toISOString(),
+        },
+    ],
+};
+export const INITIAL_STATE = {
+    value: {
+        original: DEFAULT_VALUE,
+        current: DEFAULT_VALUE,
+    },
+    rangeLimit: RANGE_LIMIT,
+    timezone: LOCAL_TIMEZONE,
+    open: false,
+    triggerOut: {
+        // in reset => id reset to null => useTriggerOut not trigger
+        id: null,
+        mode: 'auto',
+    },
+};
+export const reducer = (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case ACTION_TYPES.initState: {
+            const { initData, needTriggerOut } = action.payload;
+            const { rangeInfo } = initData;
+            const defaultValue = getRangeValue({
+                rangeInfo,
+                currentRangeValue: initData.rangeValue,
+            });
+            const initState = Object.assign(Object.assign({}, INITIAL_STATE), { value: {
+                    original: { rangeInfo, rangeValue: defaultValue },
+                    current: { rangeInfo, rangeValue: defaultValue },
+                } });
+            if (needTriggerOut) {
+                initState.triggerOut = genTriggerOut({ mode: TRIGGER_OUT_MODE.auto });
+            }
+            return initState;
+        }
+        case ACTION_TYPES.changeRangeType: {
+            const newRangeInfo = generateRangeInfo(action.payload.rangeType);
+            if (newRangeInfo) {
+                draft.value.current.rangeInfo = newRangeInfo;
+                draft.value.current.rangeValue = getRangeValue({
+                    rangeInfo: newRangeInfo,
+                    currentRangeValue: state.value.current.rangeValue,
+                });
+                if (action.payload.callback) {
+                    action.payload.callback(newRangeInfo);
+                }
+            }
+            break;
+        }
+        case ACTION_TYPES.updateRangeInfo: {
+            const _a = action.payload.updateValue, { type } = _a, rest = __rest(_a, ["type"]);
+            let updated;
+            if (type && type !== state.value.current.rangeInfo.type) {
+                const rangeInfoByType = generateRangeInfo(type);
+                if (!rangeInfoByType)
+                    break;
+                updated = Object.assign(Object.assign({}, rangeInfoByType), rest);
+            }
+            else {
+                updated = Object.assign(Object.assign({}, state.value.current.rangeInfo), action.payload.updateValue);
+            }
+            const rangeValue = getRangeValue({
+                rangeInfo: updated,
+                currentRangeValue: state.value.current.rangeValue,
+            });
+            draft.value.current.rangeInfo = updated;
+            draft.value.current.rangeValue = rangeValue;
+            break;
+        }
+        case ACTION_TYPES.updateRangeValue: {
+            const { rangeValue, options } = action.payload;
+            const rangeType = state.value.current.rangeInfo.type;
+            if ((options === null || options === void 0 ? void 0 : options.isManual) && rangeType !== SELECTION_KEY.custom) {
+                draft.value.current.rangeInfo = {
+                    type: SELECTION_KEY.custom,
+                    autoUpdateTo: AUTO_UPDATE_TO_KEY.fixed,
+                };
+            }
+            draft.value.current.rangeValue = rangeValue;
+            break;
+        }
+        case ACTION_TYPES.togglePopover: {
+            draft.open = !state.open;
+            break;
+        }
+        case ACTION_TYPES.apply: {
+            draft.value.original = state.value.current;
+            draft.open = false;
+            draft.triggerOut = genTriggerOut({ mode: TRIGGER_OUT_MODE.manual });
+            break;
+        }
+        case ACTION_TYPES.resetValue: {
+            draft.value.current = state.value.original;
+            break;
+        }
+        default:
+            break;
+    }
+});

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+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>;