@antscorp/antsomi-ui 1.3.3-beta.49 → 1.3.3-beta.50

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -1,577 +1,575 @@
-/* eslint-disable react/no-unused-prop-types */
-// Libraries
-import React, { useEffect, useMemo, useState } from 'react';
-import { theme } from 'antd';
-import dayjs from 'dayjs';
-import clsx from 'clsx';
-// Hooks
-import { useDeepCompareEffect } from '../../../../../hooks';
-// Icons
-import Icon from '@antscorp/icons';
-import { EventIcon } from '../../../../icons';
-// Atoms
-import { Input, InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { Select, Dropdown, DatePicker } from '@antscorp/antsomi-ui/es/components';
-// Utils
-import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
-import { calculationDateAdvanced, getCellRender, getLabelQuarterRange, getPickerRender, getTimePickerRender, } from './utils';
-// Styled
-import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, } from './styled';
-// Constants
-import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, DAY_LABEL_SHORT, HIDE_TIME_LABEL_ARR, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, } from './constants';
-import { THEME } from '../../../../../constants';
-// Instance
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
-const { useToken } = theme;
-const { Text } = Typography;
-export const AdvancedPicker = props => {
-    var _a, _b;
-    // Props
-    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, onUpdatedNewDate, onApply, } = props;
-    // Memo
-    const newDateTypes = useMemo(() => {
-        if (dateTypeKeysShow && dateTypeKeysShow.length) {
-            const draftDateTypes = DATE_TYPES.filter(dateType => dateTypeKeysShow.some(key => key === dateType.value));
-            return draftDateTypes;
-        }
-        if (defaultDateTypeKey) {
-            const index = DATE_TYPES.findIndex(dateType => dateType.value === defaultDateTypeKey);
-            if (index !== -1) {
-                return reorder(DATE_TYPES, index, 0);
-            }
-        }
-        return DATE_TYPES;
-    }, [dateTypeKeysShow, defaultDateTypeKey]);
-    const newCalculationDates = useMemo(() => {
-        switch (valueType) {
-            case VALUE_TYPES.YEAR_MONTH_DAY:
-                return CALCULATION_DATES.filter(calculationDate => !['hours', 'minutes', 'seconds'].includes(calculationDate.value));
-            case VALUE_TYPES.YEAR_MONTH_DAY_HOUR:
-                return CALCULATION_DATES.filter(calculationDate => !['minutes', 'seconds'].includes(calculationDate.value));
-            case VALUE_TYPES.YEAR_MONTH_DAY_MINUTE:
-                return CALCULATION_DATES.filter(calculationDate => !['seconds'].includes(calculationDate.value));
-            case VALUE_TYPES.YEAR:
-                return CALCULATION_DATES.filter(calculationDate => ['years'].includes(calculationDate.value));
-            case VALUE_TYPES.YEAR_MONTH:
-                return CALCULATION_DATES.filter(calculationDate => ['years', 'months', 'quarters'].includes(calculationDate.value));
-            case VALUE_TYPES.YEAR_MONTH_DAY_SECOND:
-                return CALCULATION_DATES;
-            default:
-                return CALCULATION_DATES;
-        }
-    }, [valueType]);
-    const [formatDisplay, timeFormatDisplay] = useMemo(() => {
-        let formatDisplay = '';
-        let timeFormatDisplay = '';
-        let isStartDate = false;
-        // Handle detect day is start or end
-        if (operatorKey === 'between') {
-            isStartDate = type === 'startDate';
-        }
-        else {
-            isStartDate = operatorKey === 'after';
-        }
-        switch (valueType) {
-            case 'YEAR':
-                formatDisplay = 'YYYY';
-                break;
-            case 'YEAR_QUARTER':
-                formatDisplay = `${QUARTER_PLACEHOLDER}Q, YYYY`;
-                break;
-            case 'YEAR_MONTH':
-                formatDisplay = 'MM/YYYY';
-                break;
-            case 'YEAR_WEEK':
-                formatDisplay = `${WEEK_PLACEHOLDER}W, YYYY`;
-                break;
-            case 'YEAR_MONTH_DAY_HOUR':
-                formatDisplay = `DD/MM/YYYY - ${isStartDate ? 'HH:00:00' : 'HH:59:59'}`;
-                timeFormatDisplay = 'HH';
-                // timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
-                break;
-            case 'YEAR_MONTH_DAY_MINUTE':
-                formatDisplay = `DD/MM/YYYY - ${isStartDate ? 'HH:mm:00' : 'HH:mm:59'}`;
-                // timeFormatDisplay = isStartDate ? 'HH:mm:00' : 'HH:mm:59';
-                timeFormatDisplay = 'HH:mm';
-                break;
-            case 'YEAR_MONTH_DAY_SECOND':
-                formatDisplay = 'DD/MM/YYYY - HH:mm:ss';
-                timeFormatDisplay = 'HH:mm:ss';
-                break;
-            case 'QUARTER':
-                formatDisplay = `${QUARTER_PLACEHOLDER}Q`;
-                break;
-            case 'MONTH':
-                formatDisplay = 'MMMM';
-                break;
-            case 'WEEK':
-                formatDisplay = `${WEEK_PLACEHOLDER}W`;
-                break;
-            case 'MONTH_DAY':
-                formatDisplay = 'MMMM DD';
-                break;
-            case 'DAY_OF_WEEK':
-                formatDisplay = 'dddd';
-                break;
-            case 'DAY':
-                formatDisplay = 'DD';
-                break;
-            case 'HOUR':
-                formatDisplay = 'HH';
-                break;
-            case 'MINUTE':
-                formatDisplay = 'mm';
-                break;
-            default:
-                formatDisplay = `DD/MM/YYYY - ${isStartDate ? '00:00:00' : '23:59:59'}`;
-                timeFormatDisplay = isStartDate ? '00:00:00' : '23:59:59';
-                break;
-        }
-        if (formatInputDisplay) {
-            formatDisplay = formatInputDisplay;
-        }
-        return [formatDisplay, timeFormatDisplay];
-    }, [valueType, operatorKey, type, formatInputDisplay]);
-    // State
-    const [state, setState] = useState({
-        isOpen: false,
-        option: {
-            dateType: newDateTypes[0],
-            calculationType: CALCULATION_TYPES[0],
-            calculationDate: newCalculationDates[0],
-            value: 0,
-        },
-        optionSelected: {
-            dateType: newDateTypes[0],
-            calculationType: CALCULATION_TYPES[0],
-            calculationDate: newCalculationDates[0],
-            value: 0,
-        },
-        date: dayjs().format(DEFAULT_DATE_FORMAT),
-        dateDisplay: dayjs().format(DEFAULT_DATE_FORMAT),
-    });
-    const { isOpen, option, date, dateDisplay } = state;
-    const [currMonthSelected, setCurrMonthSelected] = useState(dayjs(date, format).month());
-    const newCalculationTypes = useMemo(() => {
-        var _a;
-        if (calculationTypeKeysShow && calculationTypeKeysShow.length) {
-            const draftCalculationTypes = CALCULATION_TYPES.filter(calculationType => calculationTypeKeysShow.some(key => key === calculationType.value));
-            return draftCalculationTypes;
-        }
-        if (showCalculationTypeCondition && option.dateType) {
-            if (showCalculationTypeCondition.dateType[option.dateType.value]) {
-                const draftCalculationTypes = (_a = showCalculationTypeCondition.dateType[option.dateType.value]) === null || _a === void 0 ? void 0 : _a.map(dateType => CALCULATION_TYPES.find(({ value }) => value === dateType));
-                if (!draftCalculationTypes.find(({ value }) => value === option.calculationType.value)) {
-                    setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), { calculationType: draftCalculationTypes[0] }) })));
-                }
-                return draftCalculationTypes;
-            }
-        }
-        return CALCULATION_TYPES;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [calculationTypeKeysShow, showCalculationTypeCondition, option.dateType]);
-    // Hooks
-    const { token } = useToken();
-    const { t } = i18nInstance;
-    // Variables
-    const contentStyle = {
-        backgroundColor: token.colorBgElevated,
-        borderRadius: token.borderRadius,
-        boxShadow: token.boxShadowSecondary,
-    };
-    // Effects
-    useDeepCompareEffect(() => {
-        try {
-            if (isOpen) {
-                setState(state => (Object.assign(Object.assign({}, state), { option: state.optionSelected, date: state.dateDisplay })));
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'useEffect',
-                args: {},
-            });
-        }
-    }, [isOpen]);
-    useEffect(() => {
-        try {
-            if (option.dateType.value !== 'fixed') {
-                const newDate = calculationDateAdvanced(option.dateType.value, option.calculationType.value, option.calculationDate.value, option.value, format);
-                setState(state => (Object.assign(Object.assign({}, state), { date: newDate })));
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'useEffectWithDependencies[state.option, format]',
-                args: { option, format },
-            });
-        }
-    }, [option, format]);
-    useEffect(() => {
-        try {
-            if (propsOption) {
-                const { dateType, calculationType, calculationDate, value = 0 } = propsOption || {};
-                const newDateTypes = DATE_TYPES;
-                const newDateType = newDateTypes.find(dType => dType.value === dateType);
-                const newCalculationType = CALCULATION_TYPES.find(calType => calType.value === calculationType);
-                const newCalculationDate = newCalculationDates.find(calDate => calDate.value === calculationDate);
-                let newDate = '';
-                if (newDateType) {
-                    if (newDateType.value === 'fixed') {
-                        newDate = dayjs(propsDate, DEFAULT_DATE_FORMAT, true).isValid()
-                            ? dayjs(propsDate, DEFAULT_DATE_FORMAT).format(format)
-                            : propsDate;
-                        setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate, optionSelected: Object.assign(Object.assign({}, option), { dateType: newDateType }) })));
-                    }
-                    else {
-                        if (newCalculationDate && newCalculationType) {
-                            const date = calculationDateAdvanced(newDateType.value, newCalculationType.value, newCalculationDate.value, value, format);
-                            setState(state => (Object.assign(Object.assign({}, state), { dateDisplay: date, optionSelected: {
-                                    dateType: newDateType,
-                                    calculationDate: newCalculationDate,
-                                    calculationType: newCalculationType,
-                                    value,
-                                } })));
-                            newDate = date;
-                        }
-                    }
-                }
-                if (typeof onUpdatedNewDate === 'function' && propsDate !== newDate) {
-                    onUpdatedNewDate(newDate);
-                }
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'useEffectPropsOption',
-                args: {},
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [propsOption, propsDate, format]);
-    // Handlers
-    const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
-    const renderLabel = (date, locale = 'en') => {
-        let formatLabel = 'dddd, MMMM D, YYYY';
-        let subLabel = '';
-        switch (valueType) {
-            case 'YEAR':
-                formatLabel = 'YYYY';
-                break;
-            case 'YEAR_QUARTER':
-                formatLabel = `${QUARTER_PLACEHOLDER}Q, YYYY`;
-                subLabel = getLabelQuarterRange(date, format || DEFAULT_DATE_FORMAT, locale);
-                break;
-            case 'YEAR_MONTH':
-                formatLabel = 'MMMM, YYYY';
-                break;
-            case 'YEAR_WEEK': {
-                const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
-                formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
-                subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
-                    .day(6)
-                    .format('MMMM DD, YYYY')}`;
-                break;
-            }
-            case 'QUARTER':
-                formatLabel = `${QUARTER_PLACEHOLDER}Q`;
-                break;
-            case 'MONTH':
-                formatLabel = 'MMMM';
-                break;
-            case 'WEEK':
-                formatLabel = `${WEEK_PLACEHOLDER}W`;
-                break;
-            case 'MONTH_DAY':
-                formatLabel = 'MMMM DD';
-                break;
-            case 'DAY_OF_WEEK':
-                formatLabel = 'dddd';
-                break;
-            case 'DAY':
-                formatLabel = 'DD';
-                break;
-            case 'HOUR':
-                formatLabel = 'HH';
-                break;
-            case 'MINUTE':
-                formatLabel = 'mm';
-                break;
-            default:
-                break;
-        }
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
-                .locale(locale || 'en')
-                .format(formatLabel)
-                .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-                .replace(WEEK_PLACEHOLDER, 'Week ')),
-            subLabel ? React.createElement("div", null, subLabel) : null,
-            !HIDE_TIME_LABEL_ARR.includes(valueType || '') && showTime && !subLabel ? (React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
-                .locale(locale || 'en')
-                .format(timeFormatDisplay))) : null));
-    };
-    const toggleOpenDropdown = (isOpen) => {
-        try {
-            setState(() => (Object.assign(Object.assign({}, state), { isOpen: isOpen != null ? isOpen : !state.isOpen })));
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'toggleOpenDropdown',
-                args: {},
-            });
-        }
-    };
-    const onChangeOption = (params) => {
-        try {
-            setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), params) })));
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'onChangeOption',
-                args: {},
-            });
-        }
-    };
-    const onClickApply = () => {
-        try {
-            const draftOption = {
-                dateType: option.dateType.value,
-                calculationDate: option.dateType.value === 'fixed'
-                    ? ''
-                    : option.calculationDate.value,
-                calculationType: option.dateType.value === 'fixed'
-                    ? ''
-                    : option.calculationType.value,
-                value: option.dateType.value === 'fixed' ? 0 : option.value,
-            };
-            setState(state => (Object.assign(Object.assign({}, state), { optionSelected: option, dateDisplay: date, isOpen: false })));
-            if (typeof onApply === 'function') {
-                onApply({
-                    date,
-                    option: draftOption,
-                });
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'onClickApply',
-                args: {},
-            });
-        }
-    };
-    const onClickNow = () => {
-        try {
-            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().format(format) })));
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'onClickNow',
-                args: {},
-            });
-        }
-    };
-    const renderDropdownLabel = () => {
-        var _a;
-        const title = (_a = Object.values(ADVANCED_PICKER_TYPE).find(({ value }) => value === type)) === null || _a === void 0 ? void 0 : _a.label;
-        return (React.createElement("div", { style: { textAlign: 'center' } },
-            title && operatorKey === 'between' && (React.createElement(Text, { className: "__title", style: { color: '#666666' } }, t(title))),
-            renderLabel(date, 'en')));
-    };
-    const renderDropdownFooter = () => (React.createElement(React.Fragment, null,
-        React.createElement(Divider, null),
-        React.createElement(DropdownFooter, null,
-            React.createElement(Space, null,
-                React.createElement(Button, { type: "primary", onClick: () => onClickApply() }, "Apply"),
-                React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown(false) }, "Cancel")),
-            option.dateType.value === 'fixed' && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
-    const renderDateTypeOptions = () => (React.createElement(Select, { options: newDateTypes.map(dateType => (Object.assign(Object.assign({}, dateType), { label: t(dateType.label) }))), value: option.dateType.value, onChange: value => {
-            const dateType = newDateTypes.find(dateType => dateType.value === value);
-            toggleOpenDropdown(true);
-            setTimeout(() => {
-                onChangeOption({ dateType });
-            }, 100);
-        } }));
-    const renderErrorMessage = () => {
-        var _a;
-        return errorMessage ? (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 5 } },
-            React.createElement(Icon, { type: "icon-ants-remove-circle", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError } }),
-            React.createElement(Text, { type: "danger" }, errorMessage))) : null;
-    };
-    // NOTE: valueType: 'WEEK'; 'DAY_OF_WEEK'; 'MONTH_DAY'; 'DAY'
-    const customPickerArr = useMemo(() => ({
-        WEEK: WEEK_ARR,
-        DAY_OF_WEEK: DAY_LABEL_SHORT,
-        MONTH_DAY: DAY_OF_MONTH[currMonthSelected],
-        DAY: DAY_OF_MONTH[0],
-    }), [currMonthSelected]);
-    const dropdownRender = () => {
-        // const customPickerArr = valueType === 'WEEK' ? WEEK_ARR : DAY_LABEL_SHORT;
-        const currWeek = dayjs(date, format).isoWeek();
-        const currDay = dayjs(date, format).day();
-        const currDayOfMonth = dayjs(date, format).date();
-        const currMonth = dayjs(date, format).month();
-        const getCellSelected = (item, index) => {
-            switch (valueType) {
-                case 'WEEK':
-                    return currWeek === item;
-                case 'DAY_OF_WEEK':
-                    return index === currDay;
-                case 'MONTH_DAY':
-                    return item === currDayOfMonth && currMonth === currMonthSelected;
-                case 'DAY':
-                    return item === currDayOfMonth;
-                default:
-                    return false;
-            }
-        };
-        const getNewDate = (item, index) => {
-            switch (valueType) {
-                case 'WEEK':
-                    return dayjs(date).isoWeek(item);
-                case 'DAY_OF_WEEK':
-                    return dayjs(date).day(index);
-                case 'MONTH_DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(currMonthSelected).date(item);
-                case 'DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(0).date(item);
-                default:
-                    return dayjs(date);
-            }
-        };
-        return (React.createElement("div", { style: contentStyle },
-            React.createElement(DropdownHeader, { className: "dropdown-header" }, renderDropdownLabel()),
-            React.createElement(DropdownContent, { className: "dropdown-content" },
-                renderDateTypeOptions(),
-                option.dateType.value === 'fixed' ? (React.createElement(React.Fragment, null,
-                    valueType === 'MONTH_DAY' ? (React.createElement("div", { className: "month-controller" },
-                        React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 0 ? 11 : prev - 1)) }),
-                        MONTH_LABEL_FULL[currMonthSelected],
-                        React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 11 ? 0 : prev + 1)) }))) : null,
-                    React.createElement("div", { className: `custom-picker-content${['MONTH_DAY', 'DAY'].includes(valueType || '') ? ' day-of-month-container' : ''}` }, customPickerArr[valueType || ''].map((item, index) => (React.createElement("div", { key: `day_${item}`, className: clsx('custom-picker-item', {
-                            'custom-picker-item-selected': getCellSelected(item, index),
-                        }), onClick: () => {
-                            const newDate = getNewDate(item, index);
-                            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).format(format) })));
-                        } }, item)))))) : (React.createElement(React.Fragment, null,
-                    React.createElement(Select, { options: newCalculationTypes.map(({ label, value }) => ({
-                            value,
-                            label: t(label),
-                        })), value: option.calculationType.value, onChange: value => {
-                            const calculationType = CALCULATION_TYPES.find(calculationType => calculationType.value === value);
-                            onChangeOption({ calculationType });
-                        } }),
-                    React.createElement(InputNumber, { value: option.value, style: { width: '100%' }, min: 0, showHandler: false, onChange: value => onChangeOption({ value }) }),
-                    React.createElement(Select, { options: newCalculationDates.map(calculationDate => (Object.assign(Object.assign({}, calculationDate), { label: t(calculationDate.label) }))), value: option.calculationDate.value, onChange: value => {
-                            const calculationDate = newCalculationDates.find(calculationDate => calculationDate.value === value);
-                            onChangeOption({ calculationDate });
-                        } }))),
-                renderErrorMessage()),
-            renderDropdownFooter()));
-    };
-    const cellRender = React.useCallback((current, info) => {
-        const onChangeDatePicker = (value) => {
-            try {
-                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).format(format) })));
-            }
-            catch (error) {
-                handleError(error, {
-                    path: PATH,
-                    name: 'onChangeDatePicker',
-                    args: { value },
-                });
-            }
-        };
-        return (React.createElement("div", { className: "antsomi-picker-cell-inner", style: { pointerEvents: 'all', width: '100%' }, onClick: e => {
-                if (info.type === 'time' && typeof current === 'number') {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    let newDate;
-                    switch (info.subType) {
-                        case 'hour':
-                            newDate = dayjs(date).hour(current);
-                            break;
-                        case 'minute':
-                            newDate = dayjs(date).minute(current);
-                            break;
-                        case 'second':
-                            newDate = dayjs(date).second(current);
-                            break;
-                        default:
-                            break;
-                    }
-                    if (newDate)
-                        onChangeDatePicker(newDate);
-                    return;
-                }
-                if (info.type === 'decade' ||
-                    (info.type === 'year' && valueType !== 'YEAR') ||
-                    (info.type === 'month' &&
-                        !['MONTH', 'YEAR_MONTH'].includes(valueType || 'YEAR_MONTH_DAY')))
-                    return;
-                e.preventDefault();
-                e.stopPropagation();
-                onChangeDatePicker(current);
-            } }, getCellRender(current, valueType || 'YEAR_MONTH_DAY', info)));
-    }, [valueType, format, date]);
-    return (React.createElement(Space, { direction: "vertical", size: 5 },
-        !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
-        option.dateType.value === 'fixed' &&
-            !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType || 'YEAR_MONTH_DAY') ? (React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: dayjs(dateDisplay, format)
-                    .format(formatDisplay)
-                    .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-                    .replace(WEEK_PLACEHOLDER, 'Week '), onClick: () => toggleOpenDropdown() })), value: dayjs(date, format), style: {
-                width: 120,
-            }, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
-                '--error': errorMessage,
-                'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType || 'YEAR_MONTH_DAY'),
-                'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType || 'YEAR_MONTH_DAY'),
-                'is-minutes-picker': valueType === 'MINUTE',
-                'is-hours-picker': valueType === 'HOUR',
-            }), renderExtraFooter: () => (React.createElement(React.Fragment, null,
-                React.createElement(DatePickerHeader, null,
-                    renderDropdownLabel(),
-                    renderDateTypeOptions()),
-                React.createElement(DatePickerFooter, null,
-                    React.createElement("div", { style: { padding: '0 10px' } }, renderErrorMessage()),
-                    renderDropdownFooter()),
-                React.createElement(Divider, null))), picker: getPickerRender(valueType || 'YEAR_MONTH_DAY'), showTime: getTimePickerRender(valueType || 'YEAR_MONTH_DAY')
-                ? {
-                    format: getTimePickerRender(valueType || 'YEAR_MONTH_DAY'),
-                }
-                : undefined, suffixIcon: React.createElement(CalendarIconWrapper, { style: {
-                    pointerEvents: disabled ? 'none' : 'all',
-                }, onClick: () => toggleOpenDropdown() },
-                React.createElement(EventIcon, { width: 20, height: 20, fill: errorMessage ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw10 })), cellRender: cellRender, onOpenChange: () => toggleOpenDropdown() })) : (React.createElement(Dropdown, { disabled: disabled, open: !disabled && isOpen, dropdownRender: dropdownRender, trigger: ['click'], onOpenChange: () => toggleOpenDropdown(), overlayStyle: { width: 'fit-content', minWidth: 'auto' } },
-            React.createElement(Input, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
-                        pointerEvents: disabled ? 'none' : 'all',
-                    }, onClick: () => toggleOpenDropdown() },
-                    React.createElement(EventIcon, { width: 19, height: 19 })), style: inputStyle, value: dayjs(dateDisplay, format)
-                    .format(formatDisplay)
-                    .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-                    .replace(WEEK_PLACEHOLDER, 'Week '), status: errorMessage ? 'error' : '' })))));
-};
-AdvancedPicker.defaultProps = {
-    label: '',
-    type: ADVANCED_PICKER_TYPE.START_DATE.value,
-    operatorKey: 'after',
-    dateTypeKeysShow: [],
-    date: dayjs().format(DEFAULT_DATE_FORMAT),
-    format: DEFAULT_DATE_FORMAT,
-    inputStyle: {
-        width: 120,
-    },
-    formatInputDisplay: 'MMM DD, YYYY',
-    valueType: VALUE_TYPES.YEAR_MONTH_DAY,
-    showTime: true,
-    disabled: false,
-};
+/* eslint-disable react/no-unused-prop-types */
+// Libraries
+import React, { useEffect, useMemo, useState } from 'react';
+import { Tooltip, theme } from 'antd';
+import dayjs from 'dayjs';
+import clsx from 'clsx';
+// Hooks
+import { useDeepCompareEffect } from '../../../../../hooks';
+// Icons
+import Icon from '@antscorp/icons';
+import { EventIcon } from '../../../../icons';
+// Atoms
+import { Input, InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { Select, Dropdown, DatePicker } from '@antscorp/antsomi-ui/es/components';
+// Utils
+import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
+import { calculationDateAdvanced, getCellRender, getLabelQuarterRange, getPickerRender, getTimePickerRender, } from './utils';
+// Styled
+import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, } from './styled';
+// Constants
+import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, DAY_LABEL_SHORT, HIDE_TIME_LABEL_ARR, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
+import { THEME } from '../../../../../constants';
+// Instance
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
+const { useToken } = theme;
+const { Text } = Typography;
+export const AdvancedPicker = props => {
+    var _a, _b;
+    // Props
+    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, onUpdatedNewDate, onApply, } = props;
+    // Memo
+    const newDateTypes = useMemo(() => {
+        if (dateTypeKeysShow && dateTypeKeysShow.length) {
+            const draftDateTypes = DATE_TYPES.filter(dateType => dateTypeKeysShow.some(key => key === dateType.value));
+            return draftDateTypes;
+        }
+        if (defaultDateTypeKey) {
+            const index = DATE_TYPES.findIndex(dateType => dateType.value === defaultDateTypeKey);
+            if (index !== -1) {
+                return reorder(DATE_TYPES, index, 0);
+            }
+        }
+        return DATE_TYPES;
+    }, [dateTypeKeysShow, defaultDateTypeKey]);
+    const newCalculationDates = useMemo(() => {
+        const granularityKey = GRANULARITY_MAPPING[valueType || 'YEAR_MONTH_DAY'].reverse();
+        return CALCULATION_DATES.filter(calculationDate => granularityKey.includes(calculationDate.value));
+    }, [valueType]);
+    const [formatDisplay, timeFormatDisplay] = useMemo(() => {
+        let formatDisplay = '';
+        let timeFormatDisplay = '';
+        let isStartDate = false;
+        // Handle detect day is start or end
+        if (operatorKey === 'between') {
+            isStartDate = type === 'startDate';
+        }
+        else {
+            isStartDate = operatorKey === 'after';
+        }
+        switch (valueType) {
+            case 'YEAR':
+                formatDisplay = 'YYYY';
+                break;
+            case 'YEAR_QUARTER':
+                formatDisplay = `${QUARTER_PLACEHOLDER}Q, YYYY`;
+                break;
+            case 'YEAR_MONTH':
+                formatDisplay = 'MMMM, YYYY';
+                break;
+            case 'YEAR_WEEK':
+                formatDisplay = `${WEEK_PLACEHOLDER}W, YYYY`;
+                break;
+            case 'YEAR_MONTH_DAY':
+                formatDisplay = 'MMMM DD, YYYY';
+                break;
+            case 'YEAR_MONTH_DAY_HOUR':
+                formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:00:00' : 'HH:59:59'}`;
+                timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
+                break;
+            case 'YEAR_MONTH_DAY_MINUTE':
+                formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:mm:00' : 'HH:mm:59'}`;
+                timeFormatDisplay = isStartDate ? 'HH:mm:00' : 'HH:mm:59';
+                break;
+            case 'YEAR_MONTH_DAY_SECOND':
+                formatDisplay = 'MMMM DD, YYYY HH:mm:ss';
+                timeFormatDisplay = 'HH:mm:ss';
+                break;
+            case 'QUARTER':
+                formatDisplay = `${QUARTER_PLACEHOLDER}Q`;
+                break;
+            case 'MONTH':
+                formatDisplay = 'MMMM';
+                break;
+            case 'WEEK':
+                formatDisplay = `${WEEK_PLACEHOLDER}W`;
+                break;
+            case 'MONTH_DAY':
+                formatDisplay = 'MMMM DD';
+                break;
+            case 'DAY_OF_WEEK':
+                formatDisplay = 'dddd';
+                break;
+            case 'DAY':
+                formatDisplay = 'DD';
+                break;
+            case 'HOUR':
+                formatDisplay = 'HH';
+                break;
+            case 'MINUTE':
+                formatDisplay = 'mm';
+                break;
+            default:
+                formatDisplay = `DD/MM/YYYY - ${isStartDate ? '00:00:00' : '23:59:59'}`;
+                timeFormatDisplay = isStartDate ? '00:00:00' : '23:59:59';
+                break;
+        }
+        if (formatInputDisplay) {
+            formatDisplay = formatInputDisplay;
+        }
+        return [formatDisplay, timeFormatDisplay];
+    }, [valueType, operatorKey, type, formatInputDisplay]);
+    // State
+    const [state, setState] = useState({
+        isOpen: false,
+        option: {
+            dateType: newDateTypes[0],
+            calculationType: CALCULATION_TYPES[0],
+            calculationDate: newCalculationDates[0],
+            value: 0,
+        },
+        optionSelected: {
+            dateType: newDateTypes[0],
+            calculationType: CALCULATION_TYPES[0],
+            calculationDate: newCalculationDates[0],
+            value: 0,
+        },
+        date: dayjs().format(DEFAULT_DATE_FORMAT),
+        dateDisplay: dayjs().format(DEFAULT_DATE_FORMAT),
+    });
+    const { isOpen, option, date, dateDisplay } = state;
+    const [currMonthSelected, setCurrMonthSelected] = useState(dayjs(date, format).month());
+    const newCalculationTypes = useMemo(() => {
+        var _a;
+        if (calculationTypeKeysShow && calculationTypeKeysShow.length) {
+            const draftCalculationTypes = CALCULATION_TYPES.filter(calculationType => calculationTypeKeysShow.some(key => key === calculationType.value));
+            return draftCalculationTypes;
+        }
+        if (showCalculationTypeCondition && option.dateType) {
+            if (showCalculationTypeCondition.dateType[option.dateType.value]) {
+                const draftCalculationTypes = (_a = showCalculationTypeCondition.dateType[option.dateType.value]) === null || _a === void 0 ? void 0 : _a.map(dateType => CALCULATION_TYPES.find(({ value }) => value === dateType));
+                if (!draftCalculationTypes.find(({ value }) => value === option.calculationType.value)) {
+                    setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), { calculationType: draftCalculationTypes[0] }) })));
+                }
+                return draftCalculationTypes;
+            }
+        }
+        return CALCULATION_TYPES;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [calculationTypeKeysShow, showCalculationTypeCondition, option.dateType]);
+    // Hooks
+    const { token } = useToken();
+    const { t } = i18nInstance;
+    // Variables
+    const contentStyle = {
+        backgroundColor: token.colorBgElevated,
+        borderRadius: token.borderRadius,
+        boxShadow: token.boxShadowSecondary,
+    };
+    // Effects
+    useDeepCompareEffect(() => {
+        try {
+            if (isOpen) {
+                setState(state => (Object.assign(Object.assign({}, state), { option: state.optionSelected, date: state.dateDisplay })));
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'useEffect',
+                args: {},
+            });
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        try {
+            if (option.dateType.value !== 'fixed') {
+                const newDate = calculationDateAdvanced(option.dateType.value, option.calculationType.value, option.calculationDate.value, option.value, format);
+                setState(state => (Object.assign(Object.assign({}, state), { date: newDate })));
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'useEffectWithDependencies[state.option, format]',
+                args: { option, format },
+            });
+        }
+    }, [option, format]);
+    useEffect(() => {
+        try {
+            if (propsOption) {
+                const { dateType, calculationType, calculationDate, value = 0 } = propsOption || {};
+                const newDateTypes = DATE_TYPES;
+                const newDateType = newDateTypes.find(dType => dType.value === dateType);
+                const newCalculationType = CALCULATION_TYPES.find(calType => calType.value === calculationType);
+                const newCalculationDate = newCalculationDates.find(calDate => calDate.value === calculationDate);
+                let newDate = '';
+                if (newDateType) {
+                    if (newDateType.value === 'fixed') {
+                        newDate = dayjs(propsDate, DEFAULT_DATE_FORMAT, true).isValid()
+                            ? dayjs(propsDate, DEFAULT_DATE_FORMAT).format(format)
+                            : propsDate;
+                        setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate, optionSelected: Object.assign(Object.assign({}, option), { dateType: newDateType }) })));
+                    }
+                    else {
+                        if (newCalculationDate && newCalculationType) {
+                            const date = calculationDateAdvanced(newDateType.value, newCalculationType.value, newCalculationDate.value, value, format);
+                            setState(state => (Object.assign(Object.assign({}, state), { dateDisplay: date, optionSelected: {
+                                    dateType: newDateType,
+                                    calculationDate: newCalculationDate,
+                                    calculationType: newCalculationType,
+                                    value,
+                                } })));
+                            newDate = date;
+                        }
+                    }
+                }
+                if (typeof onUpdatedNewDate === 'function' && propsDate !== newDate) {
+                    onUpdatedNewDate(newDate);
+                }
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'useEffectPropsOption',
+                args: {},
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [propsOption, propsDate, format]);
+    // Handlers
+    const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
+    const renderLabel = (date, locale = 'en') => {
+        let formatLabel = 'dddd, MMMM DD, YYYY';
+        let subLabel = '';
+        switch (valueType) {
+            case 'YEAR':
+                formatLabel = 'YYYY';
+                break;
+            case 'YEAR_QUARTER':
+                formatLabel = `${QUARTER_PLACEHOLDER}Q, YYYY`;
+                subLabel = getLabelQuarterRange(date, format || DEFAULT_DATE_FORMAT, locale);
+                break;
+            case 'YEAR_MONTH':
+                formatLabel = 'MMMM, YYYY';
+                break;
+            case 'YEAR_WEEK': {
+                const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
+                formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
+                subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
+                    .day(6)
+                    .format('MMMM DD, YYYY')}`;
+                break;
+            }
+            case 'YEAR_MONTH_DAY_HOUR':
+                formatLabel = 'dddd, MMMM DD, YYYY';
+                break;
+            case 'QUARTER':
+                formatLabel = `${QUARTER_PLACEHOLDER}Q`;
+                break;
+            case 'MONTH':
+                formatLabel = 'MMMM';
+                break;
+            case 'WEEK':
+                formatLabel = `${WEEK_PLACEHOLDER}W`;
+                break;
+            case 'MONTH_DAY':
+                formatLabel = 'MMMM DD';
+                break;
+            case 'DAY_OF_WEEK':
+                formatLabel = 'dddd';
+                break;
+            case 'DAY':
+                formatLabel = 'DD';
+                break;
+            case 'HOUR':
+                formatLabel = 'HH:00:00';
+                break;
+            case 'MINUTE':
+                formatLabel = '00:mm:00';
+                break;
+            default:
+                break;
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
+                .locale(locale || 'en')
+                .format(formatLabel)
+                .replace(QUARTER_PLACEHOLDER, 'Quarter ')
+                .replace(WEEK_PLACEHOLDER, 'Week ')),
+            subLabel ? React.createElement("div", null, subLabel) : null,
+            !HIDE_TIME_LABEL_ARR.includes(valueType || '') && showTime && !subLabel ? (React.createElement("div", { style: { fontWeight: 'bold' } }, dayjs(date || new Date(), format)
+                .locale(locale || 'en')
+                .format(timeFormatDisplay))) : null));
+    };
+    const toggleOpenDropdown = (isOpen) => {
+        try {
+            setState(() => (Object.assign(Object.assign({}, state), { isOpen: isOpen != null ? isOpen : !state.isOpen })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'toggleOpenDropdown',
+                args: {},
+            });
+        }
+    };
+    const onChangeOption = (params) => {
+        try {
+            setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), params) })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeOption',
+                args: {},
+            });
+        }
+    };
+    const onClickApply = () => {
+        try {
+            const draftOption = {
+                dateType: option.dateType.value,
+                calculationDate: option.dateType.value === 'fixed'
+                    ? ''
+                    : option.calculationDate.value,
+                calculationType: option.dateType.value === 'fixed'
+                    ? ''
+                    : option.calculationType.value,
+                value: option.dateType.value === 'fixed' ? 0 : option.value,
+            };
+            setState(state => (Object.assign(Object.assign({}, state), { optionSelected: option, dateDisplay: date, isOpen: false })));
+            if (typeof onApply === 'function') {
+                onApply({
+                    date,
+                    option: draftOption,
+                });
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onClickApply',
+                args: {},
+            });
+        }
+    };
+    const onClickNow = () => {
+        try {
+            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().format(format) })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onClickNow',
+                args: {},
+            });
+        }
+    };
+    const renderDropdownLabel = () => {
+        var _a;
+        const title = (_a = Object.values(ADVANCED_PICKER_TYPE).find(({ value }) => value === type)) === null || _a === void 0 ? void 0 : _a.label;
+        return (React.createElement("div", { style: { textAlign: 'center' } },
+            title && operatorKey === 'between' && (React.createElement(Text, { className: "__title", style: { color: '#666666' } }, t(title))),
+            renderLabel(date, 'en')));
+    };
+    const renderDropdownFooter = () => (React.createElement(React.Fragment, null,
+        React.createElement(Divider, null),
+        React.createElement(DropdownFooter, null,
+            React.createElement(Space, null,
+                React.createElement(Button, { type: "primary", onClick: () => onClickApply() }, "Apply"),
+                React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown(false) }, "Cancel")),
+            option.dateType.value === 'fixed' && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
+    const renderDateTypeOptions = () => (React.createElement(Select, { options: newDateTypes.map(dateType => (Object.assign(Object.assign({}, dateType), { label: t(dateType.label) }))), value: option.dateType.value, onChange: value => {
+            const dateType = newDateTypes.find(dateType => dateType.value === value);
+            toggleOpenDropdown(true);
+            setTimeout(() => {
+                onChangeOption({ dateType });
+            }, 100);
+        } }));
+    const renderErrorMessage = () => {
+        var _a;
+        return errorMessage ? (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 5 } },
+            React.createElement(Icon, { type: "icon-ants-remove-circle", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError } }),
+            React.createElement(Text, { type: "danger" }, errorMessage))) : null;
+    };
+    // NOTE: valueType: 'WEEK'; 'DAY_OF_WEEK'; 'MONTH_DAY'; 'DAY'
+    const customPickerArr = useMemo(() => ({
+        WEEK: WEEK_ARR,
+        DAY_OF_WEEK: DAY_LABEL_SHORT,
+        MONTH_DAY: DAY_OF_MONTH[currMonthSelected],
+        DAY: DAY_OF_MONTH[0],
+    }), [currMonthSelected]);
+    const dropdownRender = () => {
+        // const customPickerArr = valueType === 'WEEK' ? WEEK_ARR : DAY_LABEL_SHORT;
+        const currWeek = dayjs(date, format).isoWeek();
+        const currDay = dayjs(date, format).day();
+        const currDayOfMonth = dayjs(date, format).date();
+        const currMonth = dayjs(date, format).month();
+        const getCellSelected = (item, index) => {
+            switch (valueType) {
+                case 'WEEK':
+                    return currWeek === item;
+                case 'DAY_OF_WEEK':
+                    return index === currDay;
+                case 'MONTH_DAY':
+                    return item === currDayOfMonth && currMonth === currMonthSelected;
+                case 'DAY':
+                    return item === currDayOfMonth;
+                default:
+                    return false;
+            }
+        };
+        const getNewDate = (item, index) => {
+            switch (valueType) {
+                case 'WEEK':
+                    return dayjs(date).isoWeek(item);
+                case 'DAY_OF_WEEK':
+                    return dayjs(date).day(index);
+                case 'MONTH_DAY':
+                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(currMonthSelected).date(item);
+                case 'DAY':
+                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(0).date(item);
+                default:
+                    return dayjs(date);
+            }
+        };
+        return (React.createElement("div", { style: contentStyle },
+            React.createElement(DropdownHeader, { className: "dropdown-header" }, renderDropdownLabel()),
+            React.createElement(DropdownContent, { className: "dropdown-content" },
+                renderDateTypeOptions(),
+                option.dateType.value === 'fixed' ? (React.createElement(React.Fragment, null,
+                    valueType === 'MONTH_DAY' ? (React.createElement("div", { className: "month-controller" },
+                        React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 0 ? 11 : prev - 1)) }),
+                        MONTH_LABEL_FULL[currMonthSelected],
+                        React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '14px', color: '#D2D2D2' }, onClick: () => setCurrMonthSelected(prev => (prev === 11 ? 0 : prev + 1)) }))) : null,
+                    React.createElement("div", { className: `custom-picker-content${['MONTH_DAY', 'DAY'].includes(valueType || '') ? ' day-of-month-container' : ''}` }, customPickerArr[valueType || ''].map((item, index) => (React.createElement("div", { key: `day_${item}`, className: clsx('custom-picker-item', {
+                            'custom-picker-item-selected': getCellSelected(item, index),
+                        }), onClick: () => {
+                            const newDate = getNewDate(item, index);
+                            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).format(format) })));
+                        } }, item)))))) : (React.createElement(React.Fragment, null,
+                    React.createElement(Select, { options: newCalculationTypes.map(({ label, value }) => ({
+                            value,
+                            label: t(label),
+                        })), value: option.calculationType.value, onChange: value => {
+                            const calculationType = CALCULATION_TYPES.find(calculationType => calculationType.value === value);
+                            onChangeOption({ calculationType });
+                        } }),
+                    React.createElement(InputNumber, { value: option.value, style: { width: '100%' }, min: 0, showHandler: false, onChange: value => onChangeOption({ value }) }),
+                    React.createElement(Select, { options: newCalculationDates.map(calculationDate => (Object.assign(Object.assign({}, calculationDate), { label: t(calculationDate.label) }))), value: option.calculationDate.value, onChange: value => {
+                            const calculationDate = newCalculationDates.find(calculationDate => calculationDate.value === value);
+                            onChangeOption({ calculationDate });
+                        } }))),
+                renderErrorMessage()),
+            renderDropdownFooter()));
+    };
+    const cellRender = React.useCallback((current, info) => {
+        const onChangeDatePicker = (value) => {
+            try {
+                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).format(format) })));
+            }
+            catch (error) {
+                handleError(error, {
+                    path: PATH,
+                    name: 'onChangeDatePicker',
+                    args: { value },
+                });
+            }
+        };
+        return (React.createElement("div", { className: "antsomi-picker-cell-inner", style: { pointerEvents: 'all', width: '100%' }, onClick: e => {
+                if (info.type === 'time' && typeof current === 'number') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    let newDate;
+                    switch (info.subType) {
+                        case 'hour':
+                            newDate = dayjs(date).hour(current);
+                            break;
+                        case 'minute':
+                            newDate = dayjs(date).minute(current);
+                            break;
+                        case 'second':
+                            newDate = dayjs(date).second(current);
+                            break;
+                        default:
+                            break;
+                    }
+                    if (newDate)
+                        onChangeDatePicker(newDate);
+                    return;
+                }
+                if (info.type === 'decade' ||
+                    (info.type === 'year' && valueType !== 'YEAR') ||
+                    (info.type === 'month' &&
+                        !['MONTH', 'YEAR_MONTH'].includes(valueType || 'YEAR_MONTH_DAY')))
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                onChangeDatePicker(current);
+            } }, getCellRender(current, valueType || 'YEAR_MONTH_DAY', info)));
+    }, [valueType, format, date]);
+    return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container" },
+        !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
+        option.dateType.value === 'fixed' &&
+            !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType || 'YEAR_MONTH_DAY') ? (React.createElement(Tooltip, { title: dayjs(dateDisplay, format)
+                .format(formatDisplay)
+                .replace(QUARTER_PLACEHOLDER, 'Quarter ')
+                .replace(WEEK_PLACEHOLDER, 'Week ') },
+            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: dayjs(dateDisplay, format)
+                        .format(formatDisplay)
+                        .replace(QUARTER_PLACEHOLDER, 'Quarter ')
+                        .replace(WEEK_PLACEHOLDER, 'Week '), onClick: () => toggleOpenDropdown() })), value: dayjs(date, format), style: {
+                    width: 120,
+                }, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+                    '--error': errorMessage,
+                    'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType || 'YEAR_MONTH_DAY'),
+                    'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType || 'YEAR_MONTH_DAY'),
+                    'is-minutes-picker': valueType === 'MINUTE',
+                    'is-hours-picker': valueType === 'HOUR',
+                }), renderExtraFooter: () => (React.createElement(React.Fragment, null,
+                    React.createElement(DatePickerHeader, null,
+                        renderDropdownLabel(),
+                        renderDateTypeOptions()),
+                    React.createElement(DatePickerFooter, null,
+                        React.createElement("div", { style: { padding: '0 10px' } }, renderErrorMessage()),
+                        renderDropdownFooter()),
+                    React.createElement(Divider, null))), picker: getPickerRender(valueType || 'YEAR_MONTH_DAY'), showTime: getTimePickerRender(valueType || 'YEAR_MONTH_DAY')
+                    ? {
+                        format: getTimePickerRender(valueType || 'YEAR_MONTH_DAY'),
+                    }
+                    : undefined, suffixIcon: React.createElement(CalendarIconWrapper, { style: {
+                        pointerEvents: disabled ? 'none' : 'all',
+                    }, onClick: () => toggleOpenDropdown() },
+                    React.createElement(EventIcon, { width: 20, height: 20, fill: errorMessage ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorError : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw10 })), cellRender: cellRender, onOpenChange: () => toggleOpenDropdown() }))) : (React.createElement(Dropdown, { disabled: disabled, open: !disabled && isOpen, dropdownRender: dropdownRender, trigger: ['click'], onOpenChange: () => toggleOpenDropdown(), overlayStyle: { width: 'fit-content', minWidth: 'auto' } },
+            React.createElement(Tooltip, { title: dayjs(dateDisplay, format)
+                    .format(formatDisplay)
+                    .replace(QUARTER_PLACEHOLDER, 'Quarter ')
+                    .replace(WEEK_PLACEHOLDER, 'Week ') },
+                React.createElement(Input, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
+                            pointerEvents: disabled ? 'none' : 'all',
+                        }, onClick: () => toggleOpenDropdown() },
+                        React.createElement(EventIcon, { width: 19, height: 19 })), style: inputStyle, value: dayjs(dateDisplay, format)
+                        .format(formatDisplay)
+                        .replace(QUARTER_PLACEHOLDER, 'Quarter ')
+                        .replace(WEEK_PLACEHOLDER, 'Week '), status: errorMessage ? 'error' : '' }))))));
+};
+AdvancedPicker.defaultProps = {
+    label: '',
+    type: ADVANCED_PICKER_TYPE.START_DATE.value,
+    operatorKey: 'after',
+    dateTypeKeysShow: [],
+    date: dayjs().format(DEFAULT_DATE_FORMAT),
+    format: DEFAULT_DATE_FORMAT,
+    inputStyle: {
+        width: 120,
+    },
+    formatInputDisplay: 'MMM DD, YYYY',
+    valueType: VALUE_TYPES.YEAR_MONTH_DAY,
+    showTime: true,
+    disabled: false,
+};