@antscorp/antsomi-ui 1.3.3-beta.83 → 1.3.3-beta.84

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -16,6 +16,9 @@ import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
 import weekday from 'dayjs/plugin/weekday';
 import localeData from 'dayjs/plugin/localeData';
+/** dayjs plugins for timezone */
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Style
@@ -27,6 +30,8 @@ import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 const ConfigProvider = props => {
     // Props
     const { children, locale } = props, restOfProps = __rest(props, ["children", "locale"]);

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

@@ -19,6 +19,7 @@ export interface AdvancedPickerProps {
     disableBeforeDate?: string;
     errorMessage?: string;
     showTime?: boolean;
+    timezone?: string;
     onUpdatedNewDate?: ({ date, option }: {
         date: string;
         option: TOption;

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

@@ -28,7 +28,7 @@ const { Text } = Typography;
 export const AdvancedPicker = props => {
     var _a, _b;
     // Props
-    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -60,11 +60,11 @@ export const AdvancedPicker = props => {
             calculationDate: newCalculationDates[0],
             value: 0,
         },
-        date: dayjs().format(format),
-        dateDisplay: dayjs().format(format),
+        date: dayjs().tz(timezone).format(format),
+        dateDisplay: dayjs().tz(timezone).format(format),
     });
     const { isOpen, option, date, dateDisplay } = state;
-    const currDate = dayjs(date, format);
+    const currDate = dayjs(date, format).tz(timezone);
     const currWeek = currDate.isoWeek();
     const currDay = currDate.day();
     const currDayOfMonth = currDate.date();
@@ -97,9 +97,10 @@ export const AdvancedPicker = props => {
         boxShadow: token.boxShadowSecondary,
     };
     const selectedDateTitle = useMemo(() => dayjs(dateDisplay, format)
+        .tz(timezone)
         .format(formatDisplay)
         .replace(QUARTER_PLACEHOLDER, 'Quarter ')
-        .replace(WEEK_PLACEHOLDER, 'Week '), [dateDisplay, format, formatDisplay]);
+        .replace(WEEK_PLACEHOLDER, 'Week '), [dateDisplay, format, formatDisplay, timezone]);
     const onChangeOption = (params) => {
         try {
             setState(state => (Object.assign(Object.assign({}, state), { option: Object.assign(Object.assign({}, state.option), params) })));
@@ -154,8 +155,8 @@ export const AdvancedPicker = props => {
                 let newDate = '';
                 if (newDateType) {
                     if (newDateType.value === 'fixed') {
-                        newDate = dayjs(propsDate, format, true).isValid()
-                            ? dayjs(propsDate, format).format(format)
+                        newDate = dayjs(propsDate, format, true).tz(timezone).isValid()
+                            ? dayjs(propsDate, format).tz(timezone).format(format)
                             : propsDate;
                         setState(state => (Object.assign(Object.assign({}, state), { date: newDate, dateDisplay: newDate, optionSelected: Object.assign(Object.assign({}, option), { dateType: newDateType }) })));
                     }
@@ -195,7 +196,8 @@ export const AdvancedPicker = props => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propsOption, newCalculationDates, propsDate, format]);
     // Handlers
-    const disableDate = current => current > dayjs(disableAfterDate, format) || current < dayjs(disableBeforeDate, format);
+    const disableDate = current => current > dayjs(disableAfterDate, format).tz(timezone) ||
+        current < dayjs(disableBeforeDate, format).tz(timezone);
     const toggleOpenDropdown = () => {
         try {
             setState(() => (Object.assign(Object.assign({}, state), { isOpen: !state.isOpen })));
@@ -238,7 +240,7 @@ export const AdvancedPicker = props => {
     };
     const onClickNow = () => {
         try {
-            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().format(format) })));
+            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs().tz(timezone).format(format) })));
         }
         catch (error) {
             handleError(error, {
@@ -288,15 +290,19 @@ export const AdvancedPicker = props => {
         const getNewDate = (item, index) => {
             switch (valueType) {
                 case 'WEEK':
-                    return dayjs(date).isoWeek(item);
+                    return dayjs(date).tz(timezone).isoWeek(item);
                 case 'DAY_OF_WEEK':
-                    return dayjs(date).day(index);
+                    return dayjs(date).tz(timezone).day(index);
                 case 'MONTH_DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(currMonthSelected).date(item);
+                    return dayjs(date)
+                        .tz(timezone)
+                        .year(ANCHOR_LEAP_YEAR)
+                        .month(currMonthSelected)
+                        .date(item);
                 case 'DAY':
-                    return dayjs(date).year(ANCHOR_LEAP_YEAR).month(0).date(item);
+                    return dayjs(date).tz(timezone).year(ANCHOR_LEAP_YEAR).month(0).date(item);
                 default:
-                    return dayjs(date);
+                    return dayjs(date).tz(timezone);
             }
         };
         return (React.createElement("div", { style: contentStyle },
@@ -313,7 +319,7 @@ export const AdvancedPicker = props => {
                             '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) })));
+                            setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(newDate).tz(timezone).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);
@@ -330,7 +336,7 @@ export const AdvancedPicker = props => {
     const cellRender = useCallback((current, info) => {
         const onChangeDatePicker = (value) => {
             try {
-                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).format(format) })));
+                setState(state => (Object.assign(Object.assign({}, state), { date: dayjs(value).tz(timezone).format(format) })));
             }
             catch (error) {
                 handleError(error, {
@@ -347,13 +353,13 @@ export const AdvancedPicker = props => {
                     let newDate;
                     switch (info.subType) {
                         case 'hour':
-                            newDate = dayjs(date).hour(current);
+                            newDate = dayjs(date).tz(timezone).hour(current);
                             break;
                         case 'minute':
-                            newDate = dayjs(date).minute(current);
+                            newDate = dayjs(date).tz(timezone).minute(current);
                             break;
                         case 'second':
-                            newDate = dayjs(date).second(current);
+                            newDate = dayjs(date).tz(timezone).second(current);
                             break;
                         default:
                             break;
@@ -370,14 +376,16 @@ export const AdvancedPicker = props => {
                 e.stopPropagation();
                 onChangeDatePicker(current);
             } }, getCellRender(current, valueType, info)));
-    }, [valueType, format, date]);
+    }, [valueType, format, date, timezone]);
     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', {
+            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),

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

@@ -3,10 +3,15 @@
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+/** dayjs plugins for timezone */
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 /**
  * 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.

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts

@@ -11,6 +11,7 @@ export interface AdvancedRangePickerProps {
     errorMessage?: string;
     showLabel?: boolean;
     showTime?: boolean;
+    timezone?: string;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

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

@@ -19,7 +19,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -55,8 +55,8 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20 },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

package/package.json

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