@antscorp/antsomi-ui 1.3.3-beta.86 → 1.3.3-beta.87

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

@@ -1,14 +1,36 @@
-export type TOption = {
-    dateType: TDateType;
-    calculationType: TCalculationType;
-    calculationDate: TCalculationDate;
-    value: number;
-};
-export type TShowCalculationTypeCondition = {
-    dateType: Partial<Record<TDateType, TCalculationType[]>>;
-};
-export type TDateType = 'today' | 'first_day_of_week_mon_sun' | 'first_day_of_week_sun_sat' | 'first_day_of_month' | 'first_day_of_quarter' | 'first_day_of_year' | 'last_day_of_week_mon_sun' | 'last_day_of_week_sun_sat' | 'last_day_of_month' | 'last_day_of_quarter' | 'last_day_of_year' | 'fixed';
-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';
+import { VALUE_TYPES } from './constants';
+export type TOption = {
+    dateType: TDateType;
+    calculationType: TCalculationType;
+    calculationDate: TCalculationDate;
+    value: number;
+};
+export type TShowCalculationTypeCondition = {
+    dateType: Partial<Record<TDateType, TCalculationType[]>>;
+};
+export type TDateType = 'today' | 'first_day_of_week_mon_sun' | 'first_day_of_week_sun_sat' | 'first_day_of_month' | 'first_day_of_quarter' | 'first_day_of_year' | 'last_day_of_week_mon_sun' | 'last_day_of_week_sun_sat' | 'last_day_of_month' | 'last_day_of_quarter' | 'last_day_of_year' | 'fixed';
+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/types.js

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,15 +1,39 @@
-/**
- * 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.
- * Valid values are: 'today', 'first_day_of_week_mon_sun', 'first_day_of_week_sun_sat',
- * 'first_day_of_month', 'first_day_of_quarter', 'first_day_of_year', 'last_day_of_week_mon_sun',
- * 'last_day_of_week_sun_sat', 'last_day_of_month', 'last_day_of_quarter', 'last_day_of_year'.
- * @param {string} [calculationTypeKey='minus'] - Key to determine whether to add or subtract the specified value.
- * Valid values are: 'plus', 'minus'.
- * @param {string} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
- * Valid values are: 'days', 'weeks', 'months', 'quarters', 'years'.
- * @param {number} [value=0] - Value to be added or subtracted.
- * @param {string} [dateFormat=DEFAULT_DATE_FORMAT] - Format in which to return the new date.
- * @returns {string} The new date in the specified format.
- */
-export declare const calculationDateAdvanced: (dateTypeKey?: string, calculationTypeKey?: string, calculationDateKey?: any, value?: number, dateFormat?: string) => any;
+import type { Dayjs } from 'dayjs';
+import type { CellRenderInfo } from 'rc-picker/es/interface';
+import { TAdvancedType, TOperatorKey, 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.
+ * Valid values are: 'today', 'first_day_of_week_mon_sun', 'first_day_of_week_sun_sat',
+ * 'first_day_of_month', 'first_day_of_quarter', 'first_day_of_year', 'last_day_of_week_mon_sun',
+ * 'last_day_of_week_sun_sat', 'last_day_of_month', 'last_day_of_quarter', 'last_day_of_year'.
+ * @param {string} [calculationTypeKey='minus'] - Key to determine whether to add or subtract the specified value.
+ * Valid values are: 'plus', 'minus'.
+ * @param {string} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
+ * Valid values are: 'days', 'weeks', 'months', 'quarters', 'years'.
+ * @param {number} [value=0] - Value to be added or subtracted.
+ * @param {string} [dateFormat=DEFAULT_DATE_FORMAT] - Format in which to return the new date.
+ * @returns {string} The new date in the specified format.
+ */
+export declare const calculationDateAdvanced: (dateTypeKey?: string, calculationTypeKey?: string, calculationDateKey?: any, value?: number, dateFormat?: string, timezone?: 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;
+export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdvancedType, valueType?: ValueTypes, formatInputDisplay?: string) => {
+    formatDisplay: string;
+    timeFormatDisplay: string;
+};

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

@@ -1,84 +1,211 @@
-/* eslint-disable max-len */
-// Libraries
-import dayjs from 'dayjs';
-import isoWeek from 'dayjs/plugin/isoWeek';
-import quarterOfYear from 'dayjs/plugin/quarterOfYear';
-// Constants
-import { DEFAULT_DATE_FORMAT } from './constants';
-dayjs.extend(isoWeek);
-dayjs.extend(quarterOfYear);
-/**
- * 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.
- * Valid values are: 'today', 'first_day_of_week_mon_sun', 'first_day_of_week_sun_sat',
- * 'first_day_of_month', 'first_day_of_quarter', 'first_day_of_year', 'last_day_of_week_mon_sun',
- * 'last_day_of_week_sun_sat', 'last_day_of_month', 'last_day_of_quarter', 'last_day_of_year'.
- * @param {string} [calculationTypeKey='minus'] - Key to determine whether to add or subtract the specified value.
- * Valid values are: 'plus', 'minus'.
- * @param {string} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
- * Valid values are: 'days', 'weeks', 'months', 'quarters', 'years'.
- * @param {number} [value=0] - Value to be added or subtracted.
- * @param {string} [dateFormat=DEFAULT_DATE_FORMAT] - Format in which to return the new date.
- * @returns {string} The new date in the specified format.
- */
-export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKey = 'minus', calculationDateKey = 'days', value = 0, dateFormat = DEFAULT_DATE_FORMAT) => {
-    let date = dayjs();
-    switch (dateTypeKey) {
-        case 'today':
-            date = dayjs();
-            break;
-        case 'first_day_of_week_mon_sun':
-            date = dayjs().startOf('isoWeek');
-            break;
-        case 'first_day_of_week_sun_sat':
-            date = dayjs().startOf('week');
-            break;
-        case 'first_day_of_month':
-            date = dayjs().startOf('month');
-            break;
-        case 'first_day_of_quarter':
-            date = dayjs().startOf('quarter');
-            break;
-        case 'first_day_of_year':
-            date = dayjs().startOf('year');
-            break;
-        case 'last_day_of_week_mon_sun':
-            date = dayjs().endOf('isoWeek');
-            break;
-        case 'last_day_of_week_sun_sat':
-            date = dayjs().endOf('week');
-            break;
-        case 'last_day_of_month':
-            date = dayjs().endOf('month');
-            break;
-        case 'last_day_of_quarter':
-            date = dayjs().endOf('quarter');
-            break;
-        case 'last_day_of_year':
-            date = dayjs().endOf('year');
-            break;
-        default:
-            date = dayjs();
-            break;
-    }
-    let newDate = '';
-    newDate =
-        calculationTypeKey === 'plus'
-            ? dayjs(date).add(value, calculationDateKey)
-            : dayjs(date).subtract(value, calculationDateKey);
-    switch (dateTypeKey) {
-        case 'last_day_of_month':
-            if (calculationDateKey === 'months' || calculationDateKey === 'quarters') {
-                newDate = dayjs(newDate).endOf('month');
-            }
-            break;
-        case 'last_day_of_quarter':
-            if (calculationDateKey === 'months' || calculationDateKey === 'quarters') {
-                newDate = dayjs(newDate).endOf('month');
-            }
-            break;
-        default:
-            break;
-    }
-    return newDate.format(dateFormat);
-};
+/* eslint-disable max-len */
+// Libraries
+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.
+ * Valid values are: 'today', 'first_day_of_week_mon_sun', 'first_day_of_week_sun_sat',
+ * 'first_day_of_month', 'first_day_of_quarter', 'first_day_of_year', 'last_day_of_week_mon_sun',
+ * 'last_day_of_week_sun_sat', 'last_day_of_month', 'last_day_of_quarter', 'last_day_of_year'.
+ * @param {string} [calculationTypeKey='minus'] - Key to determine whether to add or subtract the specified value.
+ * Valid values are: 'plus', 'minus'.
+ * @param {string} [calculationDateKey='days'] - Key to determine the unit of time to be added or subtracted.
+ * Valid values are: 'days', 'weeks', 'months', 'quarters', 'years'.
+ * @param {number} [value=0] - Value to be added or subtracted.
+ * @param {string} [dateFormat=DEFAULT_DATE_FORMAT] - Format in which to return the new date.
+ * @returns {string} The new date in the specified format.
+ */
+export const calculationDateAdvanced = (dateTypeKey = 'today', calculationTypeKey = 'minus', calculationDateKey = 'days', value = 0, dateFormat = DEFAULT_DATE_FORMAT, timezone) => {
+    let date = dayjs().tz(timezone);
+    // let date = dayjs();
+    if (DATE_TYPE_MAPPING[dateTypeKey]) {
+        date = dateTypeKey.includes('first_day')
+            ? date.startOf(DATE_TYPE_MAPPING[dateTypeKey])
+            : dateTypeKey.includes('last_day')
+                ? date.endOf(DATE_TYPE_MAPPING[dateTypeKey])
+                : dayjs();
+    }
+    let newDate = '';
+    newDate =
+        calculationTypeKey === 'plus'
+            ? dayjs(date).add(value, calculationDateKey)
+            : dayjs(date).subtract(value, calculationDateKey);
+    switch (dateTypeKey) {
+        case 'last_day_of_month':
+            if (calculationDateKey === 'months' || calculationDateKey === 'quarters') {
+                newDate = dayjs(newDate).endOf('month');
+            }
+            break;
+        case 'last_day_of_quarter':
+            if (calculationDateKey === 'months' || calculationDateKey === 'quarters') {
+                newDate = dayjs(newDate).endOf('month');
+            }
+            break;
+        default:
+            break;
+    }
+    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]}`;
+}
+export const getFormatDisplay = (operatorKey, type, valueType, formatInputDisplay) => {
+    let formatDisplay = '';
+    let timeFormatDisplay = '';
+    const isStartDate = operatorKey === 'between' ? type === 'startDate' : operatorKey === 'after';
+    switch (valueType) {
+        case 'YEAR':
+            formatDisplay = 'YYYY';
+            break;
+        case 'YEAR_QUARTER':
+            formatDisplay = `${QUARTER_PLACEHOLDER}Q, YYYY`;
+            break;
+        case 'YEAR_MONTH':
+            formatDisplay = 'MMMM, YYYY';
+            break;
+        case 'YEAR_WEEK':
+            formatDisplay = `${WEEK_PLACEHOLDER}W, YYYY`;
+            break;
+        case 'YEAR_MONTH_DAY':
+            formatDisplay = 'MMMM DD, YYYY';
+            break;
+        case 'YEAR_MONTH_DAY_HOUR':
+            formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:00:00' : 'HH:59:59'}`;
+            timeFormatDisplay = isStartDate ? 'HH:00:00' : 'HH:59:59';
+            break;
+        case 'YEAR_MONTH_DAY_MINUTE':
+            formatDisplay = `MMMM DD, YYYY ${isStartDate ? 'HH:mm:00' : 'HH:mm:59'}`;
+            timeFormatDisplay = isStartDate ? 'HH:mm:00' : 'HH:mm:59';
+            break;
+        case 'YEAR_MONTH_DAY_SECOND':
+            formatDisplay = 'MMMM DD, YYYY HH:mm:ss';
+            timeFormatDisplay = 'HH:mm:ss';
+            break;
+        case 'QUARTER':
+            formatDisplay = `${QUARTER_PLACEHOLDER}Q`;
+            break;
+        case 'MONTH':
+            formatDisplay = 'MMMM';
+            break;
+        case 'WEEK':
+            formatDisplay = `${WEEK_PLACEHOLDER}W`;
+            break;
+        case 'MONTH_DAY':
+            formatDisplay = 'MMMM DD';
+            break;
+        case 'DAY_OF_WEEK':
+            formatDisplay = 'dddd';
+            break;
+        case 'DAY':
+            formatDisplay = 'DD';
+            break;
+        case 'HOUR':
+            formatDisplay = 'HH';
+            break;
+        case 'MINUTE':
+            formatDisplay = 'mm';
+            break;
+        default:
+            formatDisplay = `DD/MM/YYYY - ${isStartDate ? '00:00:00' : '23:59:59'}`;
+            timeFormatDisplay = isStartDate ? '00:00:00' : '23:59:59';
+            break;
+    }
+    return { formatDisplay: formatInputDisplay || formatDisplay, timeFormatDisplay };
+};

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

@@ -1,15 +1,17 @@
-import React from 'react';
-import { TShowCalculationTypeCondition } from '../AdvancedPicker/types';
-import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
-export interface AdvancedRangePickerProps {
-    disabled?: boolean;
-    showCalculationTypeCondition?: TShowCalculationTypeCondition;
-    startDateConfig?: TDateConfig;
-    endDateConfig?: TDateConfig;
-    timeRange: TTimeRange;
-    errorMessage?: string;
-    showLabel?: boolean;
-    showTime?: boolean;
-    onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
-}
-export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;
+import React from 'react';
+import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
+import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
+export interface AdvancedRangePickerProps {
+    valueType?: ValueTypes;
+    disabled?: boolean;
+    showCalculationTypeCondition?: TShowCalculationTypeCondition;
+    startDateConfig?: TDateConfig;
+    endDateConfig?: TDateConfig;
+    timeRange: TTimeRange;
+    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

@@ -1,70 +1,82 @@
-// Libraries
-import dayjs from 'dayjs';
-import React from 'react';
-import omit from 'lodash/omit';
-import isEqual from 'react-fast-compare';
-// Atoms
-import { Space } from '../../../../atoms';
-// Molecules
-import { AdvancedPicker } from '../AdvancedPicker';
-// Constants
-import { ADVANCED_RANGE_PICKER_FORMAT } from './constants';
-// Utils
-import { handleError } from '@antscorp/antsomi-ui/es/utils';
-import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-// Instance
-import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
-export const AdvancedRangePicker = props => {
-    // const { t } = useTranslation();
-    const { t } = i18nInstance;
-    // Props
-    const { timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
-    // Handles
-    const onUpdateTimeRange = (key, params, mode = 'user') => {
-        try {
-            if (typeof onChange === 'function') {
-                const newTimeRange = Object.assign(Object.assign({}, timeRange), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) });
-                if (!isEqual(newTimeRange, timeRange)) {
-                    onChange({
-                        timeRange: newTimeRange,
-                        mode,
-                    });
-                }
-            }
-        }
-        catch (error) {
-            // Handle Error
-            handleError(error, {
-                path: PATH,
-                name: 'onUpdateTimeRange',
-                args: {},
-            });
-        }
-    };
-    return (React.createElement(Space, { size: 20 },
-        React.createElement(AdvancedPicker, { 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, { 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') })));
-};
-AdvancedRangePicker.defaultProps = {
-    timeRange: {
-        startDate: {
-            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.startDate),
-            calculationDate: 'years',
-            value: 1,
-            calculationType: 'minus',
-            dateType: 'today',
-        },
-        endDate: {
-            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.endDate),
-            calculationDate: 'days',
-            value: 1,
-            calculationType: 'minus',
-            dateType: 'today',
-        },
-    },
-    errorMessage: '',
-    disabled: false,
-    showLabel: true,
-    showTime: true,
-};
+// Libraries
+import dayjs from 'dayjs';
+import React, { useState } from 'react';
+import omit from 'lodash/omit';
+import isEqual from 'react-fast-compare';
+import { useDeepCompareEffect } from '../../../../../hooks';
+// Atoms
+import { Space } from '../../../../atoms';
+// Molecules
+import { AdvancedPicker } from '../AdvancedPicker';
+// Constants
+import { ADVANCED_RANGE_PICKER_FORMAT } from './constants';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Instance
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
+export const AdvancedRangePicker = props => {
+    const { t } = i18nInstance;
+    // Props
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, onChange, } = props;
+    const [timeRangeState, setTimeRange] = useState(timeRange);
+    useDeepCompareEffect(() => {
+        if (typeof onChange === 'function') {
+            onChange({
+                timeRange: timeRangeState,
+                mode: 'system',
+            });
+        }
+    }, [timeRangeState]);
+    // Handles
+    const onUpdateTimeRange = (key, params, mode = 'user') => {
+        try {
+            if (typeof onChange === 'function') {
+                const newTimeRange = Object.assign(Object.assign({}, timeRange), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) });
+                if (!isEqual(newTimeRange, timeRange)) {
+                    setTimeRange(prev => (Object.assign(Object.assign({}, prev), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) })));
+                    if (mode === 'user') {
+                        onChange({
+                            timeRange: newTimeRange,
+                            mode,
+                        });
+                    }
+                }
+            }
+        }
+        catch (error) {
+            // Handle Error
+            handleError(error, {
+                path: PATH,
+                name: 'onUpdateTimeRange',
+                args: {},
+            });
+        }
+    };
+    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, 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: {
+        startDate: {
+            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.startDate),
+            calculationDate: 'years',
+            value: 1,
+            calculationType: 'minus',
+            dateType: 'today',
+        },
+        endDate: {
+            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.endDate),
+            calculationDate: 'days',
+            value: 1,
+            calculationType: 'minus',
+            dateType: 'today',
+        },
+    },
+    errorMessage: '',
+    disabled: false,
+    showLabel: true,
+    showTime: true,
+};

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

@@ -1,4 +1,4 @@
-export declare const ADVANCED_RANGE_PICKER_FORMAT: {
-    startDate: string;
-    endDate: string;
-};
+export declare const ADVANCED_RANGE_PICKER_FORMAT: {
+    startDate: string;
+    endDate: string;
+};

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

@@ -1,4 +1,4 @@
-export const ADVANCED_RANGE_PICKER_FORMAT = {
-    startDate: 'YYYY-MM-DD 00:00:00',
-    endDate: 'YYYY-MM-DD 23:59:59',
-};
+export const ADVANCED_RANGE_PICKER_FORMAT = {
+    startDate: 'YYYY-MM-DD 00:00:00',
+    endDate: 'YYYY-MM-DD 23:59:59',
+};

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

@@ -1,2 +1,2 @@
-export { AdvancedRangePicker } from './AdvancedRangePicker';
-export type { TTimeRange as TAdvancedRangePickerTimeRange } from './types';
+export { AdvancedRangePicker } from './AdvancedRangePicker';
+export type { TTimeRange as TAdvancedRangePickerTimeRange } from './types';