@antscorp/antsomi-ui 1.3.3-beta.75 → 1.3.3-beta.76

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

@@ -13,6 +13,7 @@ import { EventIcon } from '../../../../icons';
 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';
 // Utils
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
 import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRender, getTimePickerRender, } from './utils';
@@ -21,9 +22,6 @@ import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeade
 // 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';
-// Instance
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
 const { useToken } = theme;
 const { Text } = Typography;
@@ -45,10 +43,7 @@ export const AdvancedPicker = props => {
         }
         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 newCalculationDates = useMemo(() => CALCULATION_DATES.filter(calculationDate => GRANULARITY_MAPPING[valueType].includes(calculationDate.value)), [valueType]);
     const { formatDisplay } = getFormatDisplay(operatorKey, type, valueType, formatInputDisplay);
     // State
     const [state, setState] = useState({
@@ -69,7 +64,12 @@ 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 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,17 +90,28 @@ export const AdvancedPicker = props => {
     }, [calculationTypeKeysShow, showCalculationTypeCondition, option.dateType]);
     // Hooks
     const { token } = useToken();
-    const { t } = i18nInstance;
     // Variables
     const contentStyle = {
         backgroundColor: token.colorBgElevated,
         borderRadius: token.borderRadius,
         boxShadow: token.boxShadowSecondary,
     };
-    const selectedDateTitle = dayjs(dateDisplay, format)
+    const selectedDateTitle = useMemo(() => dayjs(dateDisplay, format)
         .format(formatDisplay)
         .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-        .replace(WEEK_PLACEHOLDER, 'Week ');
+        .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(() => {
         try {
@@ -138,7 +149,8 @@ export const AdvancedPicker = props => {
                 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);
+                const newCalculationDate = newCalculationDates.find(calDate => calDate.value === calculationDate) ||
+                    newCalculationDates[0];
                 let newDate = '';
                 if (newDateType) {
                     if (newDateType.value === 'fixed') {
@@ -173,12 +185,12 @@ export const AdvancedPicker = props => {
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [propsOption, propsDate, format]);
+    }, [propsOption, newCalculationDates, propsDate, format]);
     // Handlers
     const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
-    const toggleOpenDropdown = (isOpen) => {
+    const toggleOpenDropdown = () => {
         try {
-            setState(() => (Object.assign(Object.assign({}, state), { isOpen: isOpen != null ? isOpen : !state.isOpen })));
+            setState(() => (Object.assign(Object.assign({}, state), { isOpen: !state.isOpen })));
         }
         catch (error) {
             handleError(error, {
@@ -188,18 +200,6 @@ 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 onClickApply = () => {
         try {
             const draftOption = {
@@ -245,14 +245,15 @@ export const AdvancedPicker = props => {
         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")),
+                React.createElement(Button, { type: "default", onClick: () => toggleOpenDropdown() }, "Cancel")),
             option.dateType.value === 'fixed' && React.createElement(Button, { onClick: () => onClickNow() }, "Now"))));
-    const renderDateTypeOptions = () => (React.createElement(Select, { getPopupContainer: triggerNode => triggerNode.parentElement, options: newDateTypes.map(dateType => (Object.assign(Object.assign({}, dateType), { label: t(dateType.label) }))), value: option.dateType.value, onChange: value => {
+    const renderDateTypeOptions = () => (React.createElement(Select, { options: newDateTypes, value: option.dateType.value, onChange: value => {
             const dateType = newDateTypes.find(dateType => dateType.value === value);
-            toggleOpenDropdown(true);
-            setTimeout(() => {
-                onChangeOption({ dateType });
-            }, 100);
+            onChangeOption({ dateType });
+            // toggleOpenDropdown(true);
+            // setTimeout(() => {
+            //   onChangeOption({ dateType });
+            // }, 100);
         } }));
     // NOTE: valueType: 'WEEK'; 'DAY_OF_WEEK'; 'MONTH_DAY'; 'DAY'
     const customPickerArr = {
@@ -262,11 +263,6 @@ export const AdvancedPicker = props => {
         DAY: DAY_OF_MONTH[0],
     };
     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':
@@ -305,21 +301,18 @@ export const AdvancedPicker = props => {
                         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', {
+                    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.map(({ label, value }) => ({
-                            value,
-                            label: t(label),
-                        })), value: option.calculationType.value, onChange: value => {
+                    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.map(calculationDate => (Object.assign(Object.assign({}, calculationDate), { label: t(calculationDate.label) }))), value: option.calculationDate.value, onChange: 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 });
                         } }))),
@@ -363,24 +356,23 @@ export const AdvancedPicker = props => {
                 }
                 if (info.type === 'decade' ||
                     (info.type === 'year' && valueType !== 'YEAR') ||
-                    (info.type === 'month' &&
-                        !['MONTH', 'YEAR_MONTH'].includes(valueType || 'YEAR_MONTH_DAY')))
+                    (info.type === 'month' && !['MONTH', 'YEAR_MONTH'].includes(valueType)))
                     return;
                 e.preventDefault();
                 e.stopPropagation();
                 onChangeDatePicker(current);
-            } }, getCellRender(current, valueType || 'YEAR_MONTH_DAY', info)));
+            } }, 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 || 'YEAR_MONTH_DAY') ? (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: dayjs(date, format), style: {
+            !['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 || 'YEAR_MONTH_DAY'),
-                    'only-show-time-picker': ['HOUR', 'MINUTE'].includes(valueType || 'YEAR_MONTH_DAY'),
+                    '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,
@@ -391,9 +383,9 @@ export const AdvancedPicker = props => {
                         React.createElement("div", { style: { padding: '0 10px' } },
                             React.createElement(ErrorMessage, { errorMessage: errorMessage })),
                         renderDropdownFooter()),
-                    React.createElement(Divider, null))), picker: getPickerRender(valueType || 'YEAR_MONTH_DAY'), showTime: getTimePickerRender(valueType || 'YEAR_MONTH_DAY')
+                    React.createElement(Divider, null))), picker: getPickerRender(valueType), showTime: getTimePickerRender(valueType)
                     ? {
-                        format: getTimePickerRender(valueType || 'YEAR_MONTH_DAY'),
+                        format: getTimePickerRender(valueType),
                     }
                     : undefined, suffixIcon: React.createElement(CalendarIconWrapper, { style: {
                         pointerEvents: disabled ? 'none' : 'all',

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

@@ -21,28 +21,28 @@ export declare const CALCULATION_TYPES: {
 }[];
 export declare const CALCULATION_DATES: readonly [{
     readonly value: "seconds";
-    readonly label: "datePicker.seconds";
+    readonly label: string;
 }, {
     readonly value: "minutes";
-    readonly label: "datePicker.minutes";
+    readonly label: string;
 }, {
     readonly value: "hours";
-    readonly label: "datePicker.hours";
+    readonly label: string;
 }, {
     readonly value: "days";
-    readonly label: "datePicker.days";
+    readonly label: string;
 }, {
     readonly value: "weeks";
-    readonly label: "datePicker.weeks";
+    readonly label: string;
 }, {
     readonly value: "months";
-    readonly label: "datePicker.months";
+    readonly label: string;
 }, {
     readonly value: "quarters";
-    readonly label: "datePicker.quarters";
+    readonly label: string;
 }, {
     readonly value: "years";
-    readonly label: "datePicker.years";
+    readonly label: string;
 }];
 type CalculationDateValues = (typeof CALCULATION_DATES)[number]['value'];
 export declare const VALUE_TYPES: {

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

@@ -1,16 +1,18 @@
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+const { t } = i18nInstance;
 export const DATE_TYPES = [
-    { value: 'today', label: 'datePicker.dateTypes.today' },
-    { value: 'first_day_of_week_mon_sun', label: 'datePicker.dateTypes.firstDayOfWeekMonSun' },
-    { value: 'first_day_of_week_sun_sat', label: 'datePicker.dateTypes.firstDayOfWeekSunSat' },
-    { value: 'first_day_of_month', label: 'datePicker.dateTypes.firstDayOfMonth' },
-    { value: 'first_day_of_quarter', label: 'datePicker.dateTypes.firstDayOfQuarter' },
-    { value: 'first_day_of_year', label: 'datePicker.dateTypes.firstDayOfYear' },
-    { value: 'last_day_of_week_mon_sun', label: 'datePicker.dateTypes.lastDayOfWeekMonSun' },
-    { value: 'last_day_of_week_sun_sat', label: 'datePicker.dateTypes.lastDayOfWeekSunSat' },
-    { value: 'last_day_of_month', label: 'datePicker.dateTypes.lastDayOfMonth' },
-    { value: 'last_day_of_quarter', label: 'datePicker.dateTypes.lastDayOfQuarter' },
-    { value: 'last_day_of_year', label: 'datePicker.dateTypes.lastDayOfYear' },
-    { value: 'fixed', label: 'datePicker.dateTypes.fixed' },
+    { value: 'today', label: t('datePicker.dateTypes.today') },
+    { value: 'first_day_of_week_mon_sun', label: t('datePicker.dateTypes.firstDayOfWeekMonSun') },
+    { value: 'first_day_of_week_sun_sat', label: t('datePicker.dateTypes.firstDayOfWeekSunSat') },
+    { value: 'first_day_of_month', label: t('datePicker.dateTypes.firstDayOfMonth') },
+    { value: 'first_day_of_quarter', label: t('datePicker.dateTypes.firstDayOfQuarter') },
+    { value: 'first_day_of_year', label: t('datePicker.dateTypes.firstDayOfYear') },
+    { value: 'last_day_of_week_mon_sun', label: t('datePicker.dateTypes.lastDayOfWeekMonSun') },
+    { value: 'last_day_of_week_sun_sat', label: t('datePicker.dateTypes.lastDayOfWeekSunSat') },
+    { value: 'last_day_of_month', label: t('datePicker.dateTypes.lastDayOfMonth') },
+    { value: 'last_day_of_quarter', label: t('datePicker.dateTypes.lastDayOfQuarter') },
+    { value: 'last_day_of_year', label: t('datePicker.dateTypes.lastDayOfYear') },
+    { value: 'fixed', label: t('datePicker.dateTypes.fixed') },
 ];
 export const DATE_TYPE_MAPPING = {
     first_day_of_week_mon_sun: 'isoWeek',
@@ -25,18 +27,18 @@ export const DATE_TYPE_MAPPING = {
     last_day_of_year: 'year',
 };
 export const CALCULATION_TYPES = [
-    { value: 'minus', label: 'global.minus' },
-    { value: 'plus', label: 'global.plus' },
+    { value: 'minus', label: t('global.minus') },
+    { value: 'plus', label: t('global.plus') },
 ];
 export const CALCULATION_DATES = [
-    { value: 'seconds', label: 'datePicker.seconds' },
-    { value: 'minutes', label: 'datePicker.minutes' },
-    { value: 'hours', label: 'datePicker.hours' },
-    { value: 'days', label: 'datePicker.days' },
-    { value: 'weeks', label: 'datePicker.weeks' },
-    { value: 'months', label: 'datePicker.months' },
-    { value: 'quarters', label: 'datePicker.quarters' },
-    { value: 'years', label: 'datePicker.years' },
+    { value: 'seconds', label: t('datePicker.seconds') },
+    { value: 'minutes', label: t('datePicker.minutes') },
+    { value: 'hours', label: t('datePicker.hours') },
+    { value: 'days', label: t('datePicker.days') },
+    { value: 'weeks', label: t('datePicker.weeks') },
+    { value: 'months', label: t('datePicker.months') },
+    { value: 'quarters', label: t('datePicker.quarters') },
+    { value: 'years', label: t('datePicker.years') },
 ];
 export const VALUE_TYPES = {
     INPUT_TEXT: 'INPUT_TEXT',

package/package.json

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