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

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

@@ -1,36 +1,14 @@
-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];
+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';

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

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

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

@@ -1,39 +1,15 @@
-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) => 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;
-};
+/**
+ * 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;

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

@@ -1,210 +1,84 @@
-/* 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) => {
-    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 };
-};
+/* 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);
+};

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

@@ -1,17 +1,15 @@
-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>;
+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>;

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

@@ -1,82 +1,70 @@
-// 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,
-};
+// 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,
+};

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';