npm - @antscorp/antsomi-ui - Versions diffs - 1.3.3-beta.46 → 1.3.3-beta.47 - Mend

@antscorp/antsomi-ui 1.3.3-beta.46 → 1.3.3-beta.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

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

@@ -11,7 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent6, accent7, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@@ -281,13 +281,143 @@ export const GlobalStyle = () => {
           flex-direction: column-reverse;
           padding-bottom: 60px;
-          .antsomi-picker-date-panel {
+          .antsomi-picker-date-panel,
+          .antsomi-picker-quarter-panel {
             width: 280px !important;
             .antsomi-picker-cell {
               pointer-events: none !important;
             }
           }
+          .antsomi-picker-date-panel {
+            position: relative;
+          }
+          .antsomi-picker-date-panel::before {
+            content: 'Hours';
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translateX(100%);
+            width: 61px;
+            /* width: 53.5px; */
+            font-weight: bold;
+            border-right: 1px solid rgba(5, 5, 5, 0.06);
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .antsomi-picker-time-panel {
+            .antsomi-picker-time-panel-cell-selected {
+              background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.colorPrimary};
+              color: #fff;
+            }
+            .antsomi-picker-time-panel-cell-selected:hover {
+              background-color: ${(_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.colorPrimary};
+            }
+            .antsomi-picker-cell-inner {
+              text-align: center;
+              cursor: pointer;
+            }
+            .antsomi-picker-cell-inner:hover {
+              background: rgba(34, 34, 34, 0.04);
+            }
+            .antsomi-picker-header {
+              display: none;
+            }
+            .antsomi-picker-content {
+              position: relative;
+              .antsomi-picker-time-panel-column {
+                margin-top: 38px;
+                width: 60px;
+              }
+            }
+            .antsomi-picker-content::after,
+            .antsomi-picker-content::before {
+              content: 'Minutes';
+              position: absolute;
+              top: 0;
+              left: 61px;
+              /* left: 53.5px; */
+              width: 60px;
+              /* width: 52.5px; */
+              height: 38px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-weight: bold;
+            }
+            .antsomi-picker-content::before {
+              border-right: 1px solid rgba(5, 5, 5, 0.06);
+            }
+            .antsomi-picker-content::after {
+              content: 'Seconds';
+              left: 120px;
+            }
+          }
+          /* Custom css scrollbar */
+          ul {
+            padding-left: 8px;
+            scrollbar-gutter: stable;
+          }
+        }
+        &.hide-picker-header {
+          .antsomi-picker-month-panel,
+          .antsomi-picker-quarter-panel {
+            .antsomi-picker-header {
+              display: none;
+            }
+          }
+        }
+        &.only-show-time-picker {
+          .antsomi-picker-date-panel {
+            display: none;
+          }
+          .antsomi-picker-time-panel {
+            border: none;
+          }
+          > .antsomi-picker-panel-container > .antsomi-picker-panel-layout > .antsomi-picker-panel {
+            width: 250px;
+            .antsomi-picker-datetime-panel {
+              justify-content: center;
+            }
+            ul {
+              ::-webkit-scrollbar {
+                width: 0;
+              }
+            }
+            .antsomi-picker-content::after {
+              display: none;
+            }
+            .antsomi-picker-content::before {
+              content: 'Hours';
+              border: none;
+              left: 0;
+            }
+          }
+          &.is-minutes-picker {
+            > .antsomi-picker-panel-container
+              > .antsomi-picker-panel-layout
+              > .antsomi-picker-panel {
+              .antsomi-picker-content::before {
+                content: 'Minutes';
+              }
+            }
+          }
         }
         &.--error
@@ -301,6 +431,15 @@ export const GlobalStyle = () => {
           .antsomi-picker-footer-extra {
             padding: 0 !important;
           }
+          /*
+          * NOTE: UI broken when add showTime props to <DatePicker />
+          * Unexpected header control (comment code below to see bug)
+          * Temporary solution: hide the verbose element
+          */
+          .antsomi-picker-ranges {
+            display: none;
+          }
         }
       }
@@ -328,14 +467,14 @@ export const GlobalStyle = () => {
         .antsomi-slider-rail {
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.accent1} !important;
+          background-color: ${(_10 = THEME.token) === null || _10 === void 0 ? void 0 : _10.accent1} !important;
         }
         .antsomi-slider-track {
           position: absolute !important;
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.colorPrimary} !important;
+          background-color: ${(_11 = THEME.token) === null || _11 === void 0 ? void 0 : _11.colorPrimary} !important;
         }
         .antsomi-slider-step {
@@ -369,16 +508,16 @@ export const GlobalStyle = () => {
         }
         .antsomi-slider-handle::after {
-          background-color: ${(_10 = THEME.token) === null || _10 === void 0 ? void 0 : _10.colorPrimary} !important;
+          background-color: ${(_12 = THEME.token) === null || _12 === void 0 ? void 0 : _12.colorPrimary} !important;
         }
         &:hover {
           .antsomi-slider-track {
-            background-color: ${(_11 = THEME.token) === null || _11 === void 0 ? void 0 : _11.colorPrimary} !important;
+            background-color: ${(_13 = THEME.token) === null || _13 === void 0 ? void 0 : _13.colorPrimary} !important;
           }
           .antsomi-slider-rail {
-            background-color: ${(_12 = THEME.token) === null || _12 === void 0 ? void 0 : _12.accent1} !important;
+            background-color: ${(_14 = THEME.token) === null || _14 === void 0 ? void 0 : _14.accent1} !important;
           }
           .antsomi-slider-handle::after {
@@ -386,7 +525,7 @@ export const GlobalStyle = () => {
           }
           .antsomi-slider-handle {
-            border-color: ${(_13 = THEME.token) === null || _13 === void 0 ? void 0 : _13.colorPrimary} !important;
+            border-color: ${(_15 = THEME.token) === null || _15 === void 0 ? void 0 : _15.colorPrimary} !important;
           }
         }
@@ -396,8 +535,8 @@ export const GlobalStyle = () => {
         &.antsomi-slider-disabled {
           .antsomi-slider-handle {
-            background-color: ${(_14 = THEME.token) === null || _14 === void 0 ? void 0 : _14.accent2} !important;
-            border-color: ${(_15 = THEME.token) === null || _15 === void 0 ? void 0 : _15.accent2} !important;
+            background-color: ${(_16 = THEME.token) === null || _16 === void 0 ? void 0 : _16.accent2} !important;
+            border-color: ${(_17 = THEME.token) === null || _17 === void 0 ? void 0 : _17.accent2} !important;
           }
         }
       }
@@ -411,8 +550,8 @@ export const GlobalStyle = () => {
           padding-left: 20px;
           padding-right: 20px;
           font-family: 'Roboto';
-          color: ${(_16 = THEME.token) === null || _16 === void 0 ? void 0 : _16.colorTextBase};
-          font-size: ${(_17 = THEME.token) === null || _17 === void 0 ? void 0 : _17.fontSize}px;
+          color: ${(_18 = THEME.token) === null || _18 === void 0 ? void 0 : _18.colorTextBase};
+          font-size: ${(_19 = THEME.token) === null || _19 === void 0 ? void 0 : _19.fontSize}px;
           &:focus-within {
             --tw-shadow: 0 0 #0000;
@@ -422,31 +561,31 @@ export const GlobalStyle = () => {
           }
           &:first-child {
-            border-top-left-radius: ${(_18 = THEME.token) === null || _18 === void 0 ? void 0 : _18.borderRadius}px;
-            border-bottom-left-radius: ${(_19 = THEME.token) === null || _19 === void 0 ? void 0 : _19.borderRadius}px;
+            border-top-left-radius: ${(_20 = THEME.token) === null || _20 === void 0 ? void 0 : _20.borderRadius}px;
+            border-bottom-left-radius: ${(_21 = THEME.token) === null || _21 === void 0 ? void 0 : _21.borderRadius}px;
           }
           &:last-child {
-            border-top-right-radius: ${(_20 = THEME.token) === null || _20 === void 0 ? void 0 : _20.borderRadius}px;
-            border-bottom-right-radius: ${(_21 = THEME.token) === null || _21 === void 0 ? void 0 : _21.borderRadius}px;
+            border-top-right-radius: ${(_22 = THEME.token) === null || _22 === void 0 ? void 0 : _22.borderRadius}px;
+            border-bottom-right-radius: ${(_23 = THEME.token) === null || _23 === void 0 ? void 0 : _23.borderRadius}px;
           }
           &.antsomi-radio-button-wrapper-checked {
-            border-color: ${(_22 = THEME.token) === null || _22 === void 0 ? void 0 : _22.accent1};
-            background-color: ${(_23 = THEME.token) === null || _23 === void 0 ? void 0 : _23.colorTextActive};
-            color: ${(_24 = THEME.token) === null || _24 === void 0 ? void 0 : _24.colorPrimary};
+            border-color: ${(_24 = THEME.token) === null || _24 === void 0 ? void 0 : _24.accent1};
+            background-color: ${(_25 = THEME.token) === null || _25 === void 0 ? void 0 : _25.colorTextActive};
+            color: ${(_26 = THEME.token) === null || _26 === void 0 ? void 0 : _26.colorPrimary};
             font-weight: 700;
             &::before {
-              background-color: ${(_25 = THEME.token) === null || _25 === void 0 ? void 0 : _25.accent1};
+              background-color: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.accent1};
             }
           }
         }
         .antsomi-radio-wrapper {
           font-family: 'Roboto';
-          color: ${(_26 = THEME.token) === null || _26 === void 0 ? void 0 : _26.colorTextBase};
-          font-size: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.fontSize}px;
+          color: ${(_28 = THEME.token) === null || _28 === void 0 ? void 0 : _28.colorTextBase};
+          font-size: ${(_29 = THEME.token) === null || _29 === void 0 ? void 0 : _29.fontSize}px;
           margin-right: 0;
           .antsomi-radio-disabled {
@@ -477,12 +616,12 @@ export const GlobalStyle = () => {
             .antsomi-radio-inner {
               width: 16px;
               height: 16px;
-              border-color: ${(_28 = THEME.token) === null || _28 === void 0 ? void 0 : _28.colorPrimary};
+              border-color: ${(_30 = THEME.token) === null || _30 === void 0 ? void 0 : _30.colorPrimary};
               border-width: 2px;
-              background-color: ${(_29 = THEME.token) === null || _29 === void 0 ? void 0 : _29.bw0};
+              background-color: ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.bw0};
               &::after {
-                background-color: ${(_30 = THEME.token) === null || _30 === void 0 ? void 0 : _30.colorPrimary};
+                background-color: ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary};
               }
             }
           }
@@ -540,7 +679,7 @@ export const GlobalStyle = () => {
       .antsomi-collapse {
         &.antsomi-collapse-borderless {
-          border-bottom: 1px solid ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.gray5};
+          border-bottom: 1px solid ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.gray5};
         }
         > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
@@ -550,12 +689,12 @@ export const GlobalStyle = () => {
       /* Switch */
       .antsomi-switch {
-        border: 2px solid ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary} !important;
+        border: 2px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.colorPrimary} !important;
         &.antsomi-switch-checked {
           > .antsomi-switch-handle {
             &::before {
-              background-color: ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.bw0} !important;
+              background-color: ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.bw0} !important;
             }
           }
         }

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition } from './types';
+import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition, ValueTypes } from './types';
 export interface AdvancedPickerProps {
     label?: string;
     disabled?: boolean;
@@ -7,7 +7,7 @@ export interface AdvancedPickerProps {
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     calculationTypeKeysShow?: TCalculationType[];
     defaultDateTypeKey?: string;
-    valueType?: string;
+    valueType?: ValueTypes;
     option?: TOption;
     operatorKey?: TOperatorKey;
     type?: TAdvancedType;

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

@@ -15,11 +15,11 @@ import { Input, InputNumber, Divider, Space, Button, Typography, } from '@antsco
 import { Select, Dropdown, DatePicker } from '@antscorp/antsomi-ui/es/components';
 // Utils
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
-import { calculationDateAdvanced } from './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, TIME_PICKER_TYPE, YEAR_PICKER_TYPE, ADVANCED_PICKER_TYPE, } from './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';
@@ -62,24 +62,6 @@ export const AdvancedPicker = props => {
                 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 = '';
@@ -91,24 +73,56 @@ export const AdvancedPicker = props => {
         else {
             isStartDate = operatorKey === 'after';
         }
-        switch (pickerType) {
-            case TIME_PICKER_TYPE.DATE_TIME:
-                formatDisplay = 'DD/MM/YYYY - HH:mm:ss';
-                timeFormatDisplay = 'HH:mm:ss';
+        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 TIME_PICKER_TYPE.DATE_HOUR:
+            case 'YEAR_MONTH_DAY_HOUR':
                 formatDisplay = `DD/MM/YYYY - ${isStartDate ? 'HH:00:00' : 'HH:59:59'}`;
-                timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
+                timeFormatDisplay = 'HH';
+                // timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
                 break;
-            case TIME_PICKER_TYPE.DATE_HOUR_MINUTE:
+            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 = isStartDate ? 'HH:mm:00' : 'HH:mm:59';
+                timeFormatDisplay = 'HH:mm';
                 break;
-            case YEAR_PICKER_TYPE.MONTH:
-                formatDisplay = 'MM/YYYY';
+            case 'YEAR_MONTH_DAY_SECOND':
+                formatDisplay = 'DD/MM/YYYY - HH:mm:ss';
+                timeFormatDisplay = 'HH:mm:ss';
                 break;
-            case YEAR_PICKER_TYPE.YEAR:
-                formatDisplay = 'YYYY';
+            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'}`;
@@ -119,7 +133,7 @@ export const AdvancedPicker = props => {
             formatDisplay = formatInputDisplay;
         }
         return [formatDisplay, timeFormatDisplay];
-    }, [pickerType, operatorKey, type, formatInputDisplay]);
+    }, [valueType, operatorKey, type, formatInputDisplay]);
     // State
     const [state, setState] = useState({
         isOpen: false,
@@ -139,6 +153,7 @@ export const AdvancedPicker = props => {
         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) {
@@ -159,7 +174,6 @@ export const AdvancedPicker = props => {
     }, [calculationTypeKeysShow, showCalculationTypeCondition, option.dateType]);
     // Hooks
     const { token } = useToken();
-    // const { t } = useTranslation();
     const { t } = i18nInstance;
     // Variables
     const contentStyle = {
@@ -244,23 +258,63 @@ export const AdvancedPicker = props => {
     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 VALUE_TYPES.YEAR:
+            case 'YEAR':
                 formatLabel = 'YYYY';
                 break;
-            case VALUE_TYPES.YEAR_MONTH:
+            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", null, dayjs(date || new Date(), format)
+            React.createElement("div", { style: { fontWeight: 'bold' } }, 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)
+                .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)))));
+                .format(timeFormatDisplay))) : null));
     };
     const toggleOpenDropdown = (isOpen) => {
         try {
@@ -286,18 +340,6 @@ export const AdvancedPicker = props => {
             });
         }
     };
-    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 = {
@@ -365,30 +407,136 @@ export const AdvancedPicker = props => {
             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 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()));
+    // 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' ? (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: {
+        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(),
@@ -396,20 +544,21 @@ export const AdvancedPicker = props => {
                 React.createElement(DatePickerFooter, null,
                     React.createElement("div", { style: { padding: '0 10px' } }, renderErrorMessage()),
                     renderDropdownFooter()),
-                React.createElement(Divider, null))), suffixIcon: React.createElement(CalendarIconWrapper, { style: {
+                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 })), dateRender: current => (React.createElement("div", { className: "antsomi-picker-cell-inner", style: { pointerEvents: 'all' }, onClick: e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    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(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), status: errorMessage ? 'error' : '' })))));
+                    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: '',

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

@@ -12,26 +12,26 @@ export declare const CALCULATION_DATES: {
     label: string;
 }[];
 export declare const VALUE_TYPES: {
-    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;
+    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";
 };
 export declare const DEFAULT_DATE_FORMAT = "YYYYMMDDHHmmss";
 export declare const DEFAULT_TIME_FORMAT = "HH:mm:ss";
@@ -51,3 +51,18 @@ 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[];

package/es/components/molecules/DatePicker/components/AdvancedPicker/constants.js CHANGED Viewed

@@ -72,3 +72,69 @@ export const ADVANCED_PICKER_TYPE = {
         label: 'datePicker.endDate',
     },
 };
+export const MONTH_LABEL_SHORT = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+export const MONTH_LABEL_FULL = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+export const DAY_LABEL_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
+export const WEEK_ARR = Array.from({ length: 53 }, (_, i) => i + 1);
+export const MONTH_DAY_31 = Array.from({ length: 31 }, (_, i) => i + 1);
+export const MONTH_DAY_30 = Array.from({ length: 30 }, (_, i) => i + 1);
+export const MONTH_DAY_FEB = Array.from({ length: 29 }, (_, i) => i + 1);
+export const MONTH_31 = [0, 2, 4, 6, 7, 9, 11];
+export const MONTH_30 = [3, 5, 8, 10];
+export const DAY_OF_MONTH = [
+    MONTH_DAY_31,
+    MONTH_DAY_FEB,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+    MONTH_DAY_30,
+    MONTH_DAY_31,
+];
+/** The year with full 366 days of year, use for select day/day of month with include edge case (February 29th) */
+export const ANCHOR_LEAP_YEAR = 2024;
+export const QUARTER_PLACEHOLDER = '%q%';
+export const WEEK_PLACEHOLDER = '%t%';
+export const HIDE_TIME_LABEL_ARR = [
+    'YEAR',
+    'YEAR_MONTH',
+    'YEAR_MONTH_DAY',
+    'QUARTER',
+    'MONTH',
+    'WEEK',
+    'HOUR',
+    'MINUTE',
+    'MONTH_DAY',
+    'DAY_OF_WEEK',
+    'DAY',
+];

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var _a, _b, _c;
+var _a, _b, _c, _d, _e;
 // Libraries
 import { THEME } from '../../../../../constants';
 import styled from 'styled-components';
@@ -8,6 +8,50 @@ export const DropdownContent = styled.div `
   display: flex;
   flex-direction: column;
   gap: 10px;
+  .custom-picker-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 12px;
+    height: 120px;
+    overflow-y: auto;
+    &.day-of-month-container {
+      grid-template-columns: repeat(7, 1fr);
+    }
+    & > .custom-picker-item {
+      padding: 2px 8px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &.custom-picker-item-selected {
+        background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+        color: #fff;
+        &:hover {
+          background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
+        }
+      }
+      &:hover {
+        background-color: rgba(34, 34, 34, 0.04);
+      }
+    }
+  }
+  .month-controller {
+    display: flex;
+    justify-content: space-around;
+    user-select: none;
+    i {
+      cursor: pointer;
+      &:hover {
+        color: #000;
+      }
+    }
+  }
 `;
 export const DropdownHeader = styled.div `
   padding: 10px 10px 0px 10px;
@@ -17,7 +61,7 @@ export const DropdownHeader = styled.div `
   text-align: center;
   > .__title {
-    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw6};
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
   }
 `;
 export const DropdownFooter = styled.div `
@@ -34,8 +78,8 @@ export const DatePickerHeader = styled.div `
   line-height: 1.6 !important;
 `;
 export const DatePickerCustomInput = styled.input `
-  font-family: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontFamily};
-  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw10} !important;
+  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
+  color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw10} !important;
 `;
 export const DatePickerFooter = styled.div `
   position: absolute;

package/es/components/molecules/DatePicker/components/AdvancedPicker/types.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { VALUE_TYPES } from './constants';
 export type TOption = {
     dateType: TDateType;
     calculationType: TCalculationType;
@@ -12,3 +13,24 @@ export type TCalculationType = 'minus' | 'plus' | '';
 export type TCalculationDate = 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'quarters' | 'years' | '';
 export type TOperatorKey = 'after' | 'between' | 'before';
 export type TAdvancedType = 'startDate' | 'endDate';
+/**
+ * @description Mapping ValueTypes to Semantic
+ * @example ```valueType -> semantic```
+ * @type YEAR -> 'YYYY'
+ * @type YEAR_QUARTER -> 'QQ YYYY'
+ * @type YEAR_MONTH -> 'MM YYYY'
+ * @type YEAR_WEEK -> 'WW YYYY'
+ * @type YEAR_MONTH_DAY -> 'MM DD YYYY'
+ * @type YEAR_MONTH_DAY_HOUR -> 'MM DD YYYY HH'
+ * @type YEAR_MONTH_DAY_MINUTE -> 'MM DD YYYY HH MM'
+ * @type YEAR_MONTH_DAY_SECOND -> 'MM DD YYYY HH MM SS'
+ * @type QUARTER -> 'QQ'
+ * @type MONTH -> 'MM'
+ * @type WEEK -> 'WW'
+ * @type MONTH_DAY -> 'MM DD'
+ * @type DAY_OF_WEEK -> 'D'
+ * @type DAY -> 'DD'
+ * @type HOUR -> 'HH'
+ * @type MINUTE -> 'MM'
+ */
+export type ValueTypes = (typeof VALUE_TYPES)[keyof typeof VALUE_TYPES];

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
+import type { Dayjs } from 'dayjs';
+import type { CellRenderInfo } from 'rc-picker/es/interface';
+import { ValueTypes } from './types';
 /**
  * Calculates a new date based on the given parameters.
  * @param {string} [dateTypeKey='today'] - Key to determine the type of date to be used as the starting point.
@@ -13,3 +16,20 @@
  * @returns {string} The new date in the specified format.
  */
 export declare const calculationDateAdvanced: (dateTypeKey?: string, calculationTypeKey?: string, calculationDateKey?: any, value?: number, dateFormat?: string) => any;
+/**
+ * Get text of calendar cell base on valueType (semantic/date format)
+ * @link https://ant.design/components/date-picker#components-date-picker-demo-cell-render
+ * @param {number | Dayjs} current params of cellRender function
+ * @param {CellRenderInfo<Dayjs>} info params of cellRender function
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {number | string} label of cell according to valueType
+ */
+export declare const getCellRender: (current: number | Dayjs, valueType: ValueTypes, info: CellRenderInfo<Dayjs>) => number | string;
+/**
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
+ */
+export declare const getPickerRender: (valueType: ValueTypes) => 'date' | 'week' | 'month' | 'quarter' | 'year';
+export declare const getTimePickerRender: (valueType: ValueTypes) => "HH" | "HHmm" | "HHmmss" | "mm" | undefined;
+export declare function getLabelQuarterRange(day: string, format: string, locale: string, showYear?: boolean): string;
+export declare function getLabelQuarterRange(quarter: number, year?: number): string;

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.js CHANGED Viewed

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 // Constants
-import { DEFAULT_DATE_FORMAT } from './constants';
+import { DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT } from './constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 /**
@@ -82,3 +82,92 @@ export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKe
     }
     return newDate.format(dateFormat);
 };
+/**
+ * Get text of calendar cell base on valueType (semantic/date format)
+ * @link https://ant.design/components/date-picker#components-date-picker-demo-cell-render
+ * @param {number | Dayjs} current params of cellRender function
+ * @param {CellRenderInfo<Dayjs>} info params of cellRender function
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {number | string} label of cell according to valueType
+ */
+export const getCellRender = (current, valueType, info) => {
+    if (typeof current === 'number')
+        return current;
+    if (info.type === 'decade')
+        return `${current.year()}-${current.year() + 10}`;
+    if (info.type === 'year')
+        return current.year();
+    if (info.type === 'month')
+        return MONTH_LABEL_SHORT[current.month()];
+    switch (valueType) {
+        case 'DAY':
+            return current.date();
+        case 'QUARTER':
+        case 'YEAR_QUARTER':
+            return `Quarter ${current.quarter()}`;
+        case 'MONTH':
+        case 'YEAR_MONTH':
+            return MONTH_LABEL_SHORT[current.month()];
+        case 'WEEK':
+            return current.isoWeek();
+        default:
+            return current.date();
+    }
+};
+/**
+ * @param {ValueTypes} valueType type of value (get from component props)
+ * @returns {'date' | 'week' | 'month' | 'quarter' | 'year'} picker ant-design props to render type of calendar
+ */
+export const getPickerRender = (valueType) => {
+    switch (valueType) {
+        case 'DAY':
+            return 'date';
+        case 'YEAR':
+            return 'year';
+        case 'QUARTER':
+        case 'YEAR_QUARTER':
+            return 'quarter';
+        case 'MONTH':
+        case 'YEAR_MONTH':
+            return 'month';
+        case 'WEEK':
+        case 'YEAR_WEEK':
+            return 'week';
+        default:
+            return 'date';
+    }
+};
+export const getTimePickerRender = (valueType) => {
+    switch (valueType) {
+        case 'HOUR':
+        case 'YEAR_MONTH_DAY_HOUR':
+            return 'HH';
+        case 'YEAR_MONTH_DAY_MINUTE':
+            return 'HHmm';
+        case 'YEAR_MONTH_DAY_SECOND':
+            return 'HHmmss';
+        case 'MINUTE':
+            return 'mm';
+        default:
+            return undefined;
+    }
+};
+export function getLabelQuarterRange(quarterOrDay, yearOrFormat, locale, showYear = true) {
+    const dayObj = typeof quarterOrDay === 'number'
+        ? null
+        : dayjs(quarterOrDay || new Date(), yearOrFormat).locale(locale || 'en');
+    const currQuarter = dayObj ? dayObj.quarter() : quarterOrDay;
+    const currYear = dayObj
+        ? showYear
+            ? dayObj.year()
+            : null
+        : typeof yearOrFormat === 'number'
+            ? yearOrFormat
+            : null;
+    const startMonthQuarter = [undefined, 'January', 'April', 'July', 'October'];
+    const endMonthQuarter = [undefined, 'March', 'June', 'September', 'December'];
+    const endDayQuarter = [undefined, 31, 30, 30, 31];
+    return currYear
+        ? `${startMonthQuarter[currQuarter]} 01, ${currYear} - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}, ${currYear}`
+        : `${startMonthQuarter[currQuarter]} 01 - ${endMonthQuarter[currQuarter]} ${endDayQuarter[currQuarter]}`;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.46",
+  "version": "1.3.3-beta.47",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",