@antscorp/antsomi-ui 1.3.3-beta.78 → 1.3.3-beta.79

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
-import React, { useEffect, useMemo, useCallback, useState } from 'react';
-import { Tooltip, theme, DatePicker } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { theme } from 'antd';
 import dayjs from 'dayjs';
 import clsx from 'clsx';
 // Hooks
@@ -9,19 +9,20 @@ import { useDeepCompareEffect } from '../../../../../hooks';
 // Icons
 import Icon from '@antscorp/icons';
 import { EventIcon } from '../../../../icons';
-// Components
+// Atoms
 import { Input, InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
-import { Select, Dropdown } from '@antscorp/antsomi-ui/es/components';
-import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
-import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
+// Molecules
+import { Select, Dropdown, DatePicker } from '@antscorp/antsomi-ui/es/components';
 // Utils
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
-import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRender, getTimePickerRender, } from './utils';
+import { calculationDateAdvanced } 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, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, TIME_PICKER_TYPE, YEAR_PICKER_TYPE, ADVANCED_PICKER_TYPE, } 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;
@@ -43,8 +44,82 @@ export const AdvancedPicker = props => {
         }
         return DATE_TYPES;
     }, [dateTypeKeysShow, defaultDateTypeKey]);
-    const newCalculationDates = useMemo(() => CALCULATION_DATES.filter(calculationDate => GRANULARITY_MAPPING[valueType].includes(calculationDate.value)), [valueType]);
-    const { formatDisplay } = getFormatDisplay(operatorKey, type, valueType, formatInputDisplay);
+    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 pickerType = useMemo(() => {
+        switch (valueType) {
+            case VALUE_TYPES.YEAR_MONTH_DAY:
+                return TIME_PICKER_TYPE.DATE;
+            case VALUE_TYPES.YEAR_MONTH_DAY_HOUR:
+                return TIME_PICKER_TYPE.DATE_HOUR;
+            case VALUE_TYPES.YEAR_MONTH_DAY_MINUTE:
+                return TIME_PICKER_TYPE.DATE_HOUR_MINUTE;
+            case VALUE_TYPES.YEAR_MONTH_DAY_SECOND:
+                return TIME_PICKER_TYPE.DATE_TIME;
+            case VALUE_TYPES.YEAR:
+                return YEAR_PICKER_TYPE.YEAR;
+            case VALUE_TYPES.YEAR_MONTH:
+                return YEAR_PICKER_TYPE.MONTH;
+            default:
+                return TIME_PICKER_TYPE.DATE;
+        }
+    }, [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 (pickerType) {
+            case TIME_PICKER_TYPE.DATE_TIME:
+                formatDisplay = 'DD/MM/YYYY - HH:mm:ss';
+                timeFormatDisplay = 'HH:mm:ss';
+                break;
+            case TIME_PICKER_TYPE.DATE_HOUR:
+                formatDisplay = `DD/MM/YYYY - ${isStartDate ? 'HH:00:00' : 'HH:59:59'}`;
+                timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
+                break;
+            case TIME_PICKER_TYPE.DATE_HOUR_MINUTE:
+                formatDisplay = `DD/MM/YYYY - ${isStartDate ? 'HH:mm:00' : 'HH:mm:59'}`;
+                timeFormatDisplay = isStartDate ? 'HH:mm:00' : 'HH:mm:59';
+                break;
+            case YEAR_PICKER_TYPE.MONTH:
+                formatDisplay = 'MM/YYYY';
+                break;
+            case YEAR_PICKER_TYPE.YEAR:
+                formatDisplay = 'YYYY';
+                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];
+    }, [pickerType, operatorKey, type, formatInputDisplay]);
     // State
     const [state, setState] = useState({
         isOpen: false,
@@ -64,12 +139,6 @@ export const AdvancedPicker = props => {
         dateDisplay: dayjs().format(DEFAULT_DATE_FORMAT),
     });
     const { isOpen, option, date, dateDisplay } = state;
-    const currDate = dayjs(date, format);
-    const currWeek = currDate.isoWeek();
-    const currDay = currDate.day();
-    const currDayOfMonth = currDate.date();
-    const currMonth = currDate.month();
-    const [currMonthSelected, setCurrMonthSelected] = useState(currMonth);
     const newCalculationTypes = useMemo(() => {
         var _a;
         if (calculationTypeKeysShow && calculationTypeKeysShow.length) {
@@ -90,30 +159,16 @@ export const AdvancedPicker = props => {
     }, [calculationTypeKeysShow, showCalculationTypeCondition, option.dateType]);
     // Hooks
     const { token } = useToken();
+    // const { t } = useTranslation();
+    const { t } = i18nInstance;
     // Variables
     const contentStyle = {
         backgroundColor: token.colorBgElevated,
         borderRadius: token.borderRadius,
         boxShadow: token.boxShadowSecondary,
     };
-    const selectedDateTitle = useMemo(() => dayjs(dateDisplay, format)
-        .format(formatDisplay)
-        .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-        .replace(WEEK_PLACEHOLDER, 'Week '), [dateDisplay, format, formatDisplay]);
-    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: {},
-            });
-        }
-    };
     // Effects
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         try {
             if (isOpen) {
                 setState(state => (Object.assign(Object.assign({}, state), { option: state.optionSelected, date: state.dateDisplay })));
@@ -127,7 +182,7 @@ export const AdvancedPicker = props => {
             });
         }
     }, [isOpen]);
-    useDeepCompareEffect(() => {
+    useEffect(() => {
         try {
             if (option.dateType.value !== 'fixed') {
                 const newDate = calculationDateAdvanced(option.dateType.value, option.calculationType.value, option.calculationDate.value, option.value, format);
@@ -142,15 +197,14 @@ export const AdvancedPicker = props => {
             });
         }
     }, [option, format]);
-    useDeepCompareEffect(() => {
+    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) ||
-                    newCalculationDates[0];
+                const newCalculationDate = newCalculationDates.find(calDate => calDate.value === calculationDate);
                 let newDate = '';
                 if (newDateType) {
                     if (newDateType.value === 'fixed') {
@@ -185,12 +239,32 @@ export const AdvancedPicker = props => {
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [propsOption, newCalculationDates, propsDate, format]);
+    }, [propsOption, propsDate, format]);
     // Handlers
     const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
-    const toggleOpenDropdown = () => {
+    const renderLabel = (date, locale = 'en') => {
+        let formatLabel = 'dddd, MMMM D, YYYY';
+        switch (valueType) {
+            case VALUE_TYPES.YEAR:
+                formatLabel = 'YYYY';
+                break;
+            case VALUE_TYPES.YEAR_MONTH:
+                formatLabel = 'MMMM, YYYY';
+                break;
+            default:
+                break;
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", null, dayjs(date || new Date(), format)
+                .locale(locale || 'en')
+                .format(formatLabel)),
+            ![VALUE_TYPES.YEAR, VALUE_TYPES.YEAR_MONTH].includes(valueType || '') && showTime && (React.createElement("div", null, dayjs(date || new Date(), format)
+                .locale(locale || 'en')
+                .format(timeFormatDisplay)))));
+    };
+    const toggleOpenDropdown = (isOpen) => {
         try {
-            setState(() => (Object.assign(Object.assign({}, state), { isOpen: !state.isOpen })));
+            setState(() => (Object.assign(Object.assign({}, state), { isOpen: isOpen != null ? isOpen : !state.isOpen })));
         }
         catch (error) {
             handleError(error, {
@@ -200,6 +274,30 @@ export const AdvancedPicker = props => {
             });
         }
     };
+    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 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 },
+            });
+        }
+    };
     const onClickApply = () => {
         try {
             const draftOption = {
@@ -240,162 +338,78 @@ export const AdvancedPicker = props => {
             });
         }
     };
+    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() }, "Cancel")),
+                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, value: option.dateType.value, onChange: value => {
+    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);
-            onChangeOption({ dateType });
-            // toggleOpenDropdown(true);
-            // setTimeout(() => {
-            //   onChangeOption({ dateType });
-            // }, 100);
+            toggleOpenDropdown(true);
+            setTimeout(() => {
+                onChangeOption({ dateType });
+            }, 100);
         } }));
-    // NOTE: valueType: 'WEEK'; 'DAY_OF_WEEK'; 'MONTH_DAY'; 'DAY'
-    const customPickerArr = {
-        WEEK: WEEK_ARR,
-        DAY_OF_WEEK: DAY_LABEL_SHORT,
-        MONTH_DAY: DAY_OF_MONTH[currMonthSelected],
-        DAY: DAY_OF_MONTH[0],
-    };
-    const dropdownRender = () => {
-        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" },
-                React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay })),
-            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, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationTypes, 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: Math.floor(value) }) }),
-                    React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentNode, options: newCalculationDates, value: option.calculationDate.value, onChange: value => {
-                            const calculationDate = newCalculationDates.find(calculationDate => calculationDate.value === value);
-                            onChangeOption({ calculationDate });
-                        } }))),
-                React.createElement(ErrorMessage, { errorMessage: errorMessage })),
-            renderDropdownFooter()));
+    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;
     };
-    const cellRender = 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') {
+    const dropdownRender = () => (React.createElement("div", { style: contentStyle },
+        React.createElement(DropdownHeader, null, renderDropdownLabel()),
+        React.createElement(DropdownContent, null,
+            renderDateTypeOptions(),
+            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()));
+    return (React.createElement(Space, { direction: "vertical", size: 5 },
+        !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
+        option.dateType.value === 'fixed' ? (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), onClick: () => toggleOpenDropdown() })), value: dayjs(date, format), style: {
+                width: 120,
+            }, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
+                '--error': errorMessage,
+            }), 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))), 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 })), dateRender: current => (React.createElement("div", { className: "antsomi-picker-cell-inner", style: { pointerEvents: 'all' }, onClick: e => {
                     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)))
-                    return;
-                e.preventDefault();
-                e.stopPropagation();
-                onChangeDatePicker(current);
-            } }, getCellRender(current, valueType, 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) ? (React.createElement(Tooltip, { title: selectedDateTitle },
-            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: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, style: {
-                    width: 120,
-                }, disabledDate: disableDate, format: formatDisplay, showToday: false, popupClassName: clsx('antsomi-picker-dropdown__advanced', {
-                    '--error': errorMessage,
-                    'hide-picker-header': ['QUARTER', 'MONTH'].includes(valueType),
-                    'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType),
-                    'is-minutes-picker': valueType === 'MINUTE',
-                    'is-hours-picker': valueType === 'HOUR',
-                }), renderExtraFooter: () => (React.createElement(React.Fragment, null,
-                    React.createElement(DatePickerHeader, null,
-                        React.createElement(DropdownLabel, { valueType: valueType, date: date, format: format, type: type, showTime: showTime, operatorKey: operatorKey, formatInputDisplay: formatInputDisplay }),
-                        renderDateTypeOptions()),
-                    React.createElement(DatePickerFooter, null,
-                        React.createElement("div", { style: { padding: '0 10px' } },
-                            React.createElement(ErrorMessage, { errorMessage: errorMessage })),
-                        renderDropdownFooter()),
-                    React.createElement(Divider, null))), picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
-                    ? {
-                        format: getTimePickerRender(valueType),
-                    }
-                    : undefined, suffixIcon: React.createElement(CalendarIconWrapper, { style: {
+                    onChangeDatePicker(current);
+                } }, current.date())), 
+            // onChange={onChangeDatePicker}
+            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: 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: selectedDateTitle },
-                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: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
+                    React.createElement(EventIcon, { width: 19, height: 19 })), style: inputStyle, value: dayjs(dateDisplay, format).format(formatDisplay), status: errorMessage ? 'error' : '' })))));
 };
 AdvancedPicker.defaultProps = {
     label: '',

package/es/components/molecules/DatePicker/components/AdvancedPicker/constants.d.ts

@@ -1,71 +1,37 @@
-import { TAdvancedType, ValueTypes } from './types';
+import { TAdvancedType } from './types';
 export declare const DATE_TYPES: {
     value: string;
     label: string;
 }[];
-export declare const DATE_TYPE_MAPPING: {
-    first_day_of_week_mon_sun: string;
-    first_day_of_week_sun_sat: string;
-    first_day_of_month: string;
-    first_day_of_quarter: string;
-    first_day_of_year: string;
-    last_day_of_week_mon_sun: string;
-    last_day_of_week_sun_sat: string;
-    last_day_of_month: string;
-    last_day_of_quarter: string;
-    last_day_of_year: string;
-};
 export declare const CALCULATION_TYPES: {
     value: string;
     label: string;
 }[];
-export declare const CALCULATION_DATES: readonly [{
-    readonly value: "seconds";
-    readonly label: string;
-}, {
-    readonly value: "minutes";
-    readonly label: string;
-}, {
-    readonly value: "hours";
-    readonly label: string;
-}, {
-    readonly value: "days";
-    readonly label: string;
-}, {
-    readonly value: "weeks";
-    readonly label: string;
-}, {
-    readonly value: "months";
-    readonly label: string;
-}, {
-    readonly value: "quarters";
-    readonly label: string;
-}, {
-    readonly value: "years";
-    readonly label: string;
-}];
-type CalculationDateValues = (typeof CALCULATION_DATES)[number]['value'];
+export declare const CALCULATION_DATES: {
+    value: string;
+    label: string;
+}[];
 export declare const VALUE_TYPES: {
-    readonly INPUT_TEXT: "INPUT_TEXT";
-    readonly INPUT_NUMBER: "INPUT_NUMBER";
-    readonly MATCHES_ANY: "MATCHES_ANY";
-    readonly YEAR: "YEAR";
-    readonly YEAR_QUARTER: "YEAR_QUARTER";
-    readonly YEAR_MONTH: "YEAR_MONTH";
-    readonly YEAR_WEEK: "YEAR_WEEK";
-    readonly YEAR_MONTH_DAY: "YEAR_MONTH_DAY";
-    readonly YEAR_MONTH_DAY_HOUR: "YEAR_MONTH_DAY_HOUR";
-    readonly YEAR_MONTH_DAY_MINUTE: "YEAR_MONTH_DAY_MINUTE";
-    readonly YEAR_MONTH_DAY_SECOND: "YEAR_MONTH_DAY_SECOND";
-    readonly QUARTER: "QUARTER";
-    readonly MONTH: "MONTH";
-    readonly WEEK: "WEEK";
-    readonly MONTH_DAY: "MONTH_DAY";
-    readonly DAY_OF_WEEK: "DAY_OF_WEEK";
-    readonly DAY: "DAY";
-    readonly HOUR: "HOUR";
-    readonly MINUTE: "MINUTE";
-    readonly INPUT_TEXT_NO_FIELD: "INPUT_TEXT_NO_FIELD";
+    INPUT_TEXT: string;
+    INPUT_NUMBER: string;
+    MATCHES_ANY: string;
+    YEAR: string;
+    YEAR_QUARTER: string;
+    YEAR_MONTH: string;
+    YEAR_WEEK: string;
+    YEAR_MONTH_DAY: string;
+    YEAR_MONTH_DAY_HOUR: string;
+    YEAR_MONTH_DAY_MINUTE: string;
+    YEAR_MONTH_DAY_SECOND: string;
+    QUARTER: string;
+    MONTH: string;
+    WEEK: string;
+    MONTH_DAY: string;
+    DAY_OF_WEEK: string;
+    DAY: string;
+    HOUR: string;
+    MINUTE: string;
+    INPUT_TEXT_NO_FIELD: string;
 };
 export declare const DEFAULT_DATE_FORMAT = "YYYYMMDDHHmmss";
 export declare const DEFAULT_TIME_FORMAT = "HH:mm:ss";
@@ -85,22 +51,3 @@ export declare const ADVANCED_PICKER_TYPE: Record<string, {
     value: TAdvancedType;
     label: string;
 }>;
-export declare const MONTH_LABEL_SHORT: string[];
-export declare const MONTH_LABEL_FULL: string[];
-export declare const DAY_LABEL_SHORT: string[];
-export declare const WEEK_ARR: number[];
-export declare const MONTH_DAY_31: number[];
-export declare const MONTH_DAY_30: number[];
-export declare const MONTH_DAY_FEB: number[];
-export declare const MONTH_31: number[];
-export declare const MONTH_30: number[];
-export declare const DAY_OF_MONTH: number[][];
-/** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
-export declare const ANCHOR_LEAP_YEAR = 2024;
-export declare const QUARTER_PLACEHOLDER = "%q%";
-export declare const WEEK_PLACEHOLDER = "%t%";
-export declare const HIDE_TIME_LABEL_ARR: string[];
-export declare const GRANULARITY_MAPPING: {
-    [key in ValueTypes]: CalculationDateValues[];
-};
-export {};