@antscorp/antsomi-ui 1.3.5-beta.717 → 1.3.5-beta.719

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -2,10 +2,10 @@
 export declare const LazyIcon: {
     AccountCircleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountCircleOutlineIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    Accounts30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountSharing30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountSharingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountTreeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    Accounts30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddChartIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddFolderIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AddIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -101,7 +101,6 @@ export declare const LazyIcon: {
     DataSource30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataView30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DataViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    Dataflows30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DatasourceIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DatasourceSegment30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     DeleteRemoveTrashIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -283,7 +282,6 @@ export declare const LazyIcon: {
     ResumeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     RightExpandIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Role30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    SQLWorkspace30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SaveAsIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SaveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ScheduleEmailDeliveryIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -2,10 +2,10 @@ import { lazy } from 'react';
 export const LazyIcon = {
     AccountCircleIcon: lazy(() => import('../AccountCircleIcon').then(m => ({ default: m.AccountCircleIcon }))),
     AccountCircleOutlineIcon: lazy(() => import('../AccountCircleOutlineIcon').then(m => ({ default: m.AccountCircleOutlineIcon }))),
+    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AccountSharing30Icon: lazy(() => import('../AccountSharing30Icon').then(m => ({ default: m.AccountSharing30Icon }))),
     AccountSharingIcon: lazy(() => import('../AccountSharingIcon').then(m => ({ default: m.AccountSharingIcon }))),
     AccountTreeIcon: lazy(() => import('../AccountTreeIcon').then(m => ({ default: m.AccountTreeIcon }))),
-    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AddChartIcon: lazy(() => import('../AddChartIcon').then(m => ({ default: m.AddChartIcon }))),
     AddFolderIcon: lazy(() => import('../AddFolderIcon').then(m => ({ default: m.AddFolderIcon }))),
     AddIcon: lazy(() => import('../AddIcon').then(m => ({ default: m.AddIcon }))),
@@ -107,7 +107,6 @@ export const LazyIcon = {
     DataSource30Icon: lazy(() => import('../DataSource30Icon').then(m => ({ default: m.DataSource30Icon }))),
     DataView30Icon: lazy(() => import('../DataView30Icon').then(m => ({ default: m.DataView30Icon }))),
     DataViewIcon: lazy(() => import('../DataViewIcon').then(m => ({ default: m.DataViewIcon }))),
-    Dataflows30Icon: lazy(() => import('../Dataflows30Icon').then(m => ({ default: m.Dataflows30Icon }))),
     DatasourceIcon: lazy(() => import('../DatasourceIcon').then(m => ({ default: m.DatasourceIcon }))),
     DatasourceSegment30Icon: lazy(() => import('../DatasourceSegment30Icon').then(m => ({ default: m.DatasourceSegment30Icon }))),
     DeleteRemoveTrashIcon: lazy(() => import('../DeleteRemoveTrashIcon').then(m => ({ default: m.DeleteRemoveTrashIcon }))),
@@ -289,7 +288,6 @@ export const LazyIcon = {
     ResumeIcon: lazy(() => import('../ResumeIcon').then(m => ({ default: m.ResumeIcon }))),
     RightExpandIcon: lazy(() => import('../RightExpandIcon').then(m => ({ default: m.RightExpandIcon }))),
     Role30Icon: lazy(() => import('../Role30Icon').then(m => ({ default: m.Role30Icon }))),
-    SQLWorkspace30Icon: lazy(() => import('../SQLWorkspace30Icon').then(m => ({ default: m.SQLWorkspace30Icon }))),
     SaveAsIcon: lazy(() => import('../SaveAsIcon').then(m => ({ default: m.SaveAsIcon }))),
     SaveIcon: lazy(() => import('../SaveIcon').then(m => ({ default: m.SaveIcon }))),
     ScheduleEmailDeliveryIcon: lazy(() => import('../ScheduleEmailDeliveryIcon').then(m => ({ default: m.ScheduleEmailDeliveryIcon }))),

package/es/components/icons/index.d.ts

@@ -98,10 +98,10 @@ export { DataRefreshIcon } from './DataRefreshIcon';
 export { DataSchema30Icon } from './DataSchema30Icon';
 export { DataSource30Icon } from './DataSource30Icon';
 export { DataView30Icon } from './DataView30Icon';
-export { DataViewIcon } from './DataViewIcon';
 export { Dataflows30Icon } from './Dataflows30Icon';
 export { DatasourceIcon } from './DatasourceIcon';
 export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
+export { DataViewIcon } from './DataViewIcon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
 export { DesktopLaptopIcon } from './DesktopLaptopIcon';

package/es/components/icons/index.js

@@ -98,10 +98,10 @@ export { DataRefreshIcon } from './DataRefreshIcon';
 export { DataSchema30Icon } from './DataSchema30Icon';
 export { DataSource30Icon } from './DataSource30Icon';
 export { DataView30Icon } from './DataView30Icon';
-export { DataViewIcon } from './DataViewIcon';
 export { Dataflows30Icon } from './Dataflows30Icon';
 export { DatasourceIcon } from './DatasourceIcon';
 export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
+export { DataViewIcon } from './DataViewIcon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
 export { DesktopLaptopIcon } from './DesktopLaptopIcon';

package/es/components/molecules/IconSelection/components/Icon/index.js

@@ -16,7 +16,7 @@ export const IconSelectionRenderer = forwardRef((props, ref) => {
     const { iconType } = props;
     if (iconType === ICON_TYPE.FONT_AWESOME) {
         const { iconName, iconType } = props, rest = __rest(props, ["iconName", "iconType"]);
-        return React.createElement(FontAwesomeIcon, Object.assign({ ref: ref }, rest, { icon: iconName.split(' ') }));
+        return (React.createElement(FontAwesomeIcon, Object.assign({ ref: ref }, rest, { icon: iconName.split(' ') })));
     }
     if (iconType === ICON_TYPE.CUSTOM) {
         const { iconName, iconType } = props, rest = __rest(props, ["iconName", "iconType"]);

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -9,13 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/* eslint-disable react/no-danger */
 /* eslint-disable react/function-component-definition */
 /* eslint-disable react/destructuring-assignment */
 // Libraries
 import { ConfigProvider } from 'antd';
 import clsx from 'clsx';
 import { isEmpty, uniqBy } from 'lodash';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 // Components
 import { Button, Flex, Icon, Input, Popover, Spin, Tooltip, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { EmptyData, PopoverSelect, Select } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -34,7 +35,7 @@ import { useDeepCompareEffect, useDeepCompareMemo, useIntersectionObserver, } fr
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
 import { getSelectedTreeData } from './utils';
 // Icons
-import { DataIcon, WarningIcon } from '../../icons';
+import { DataIcon, LongerIcon, WarningIcon } from '../../icons';
 const initialState = {
     isOpenPopover: false,
     searchValue: '',
@@ -54,7 +55,7 @@ export function MatchesAny(props) {
     const [state, setState] = useState(matchesAnyInitialState);
     // Variables
     const { selectedItems, selectedTreeData, isShowLoadMoreEl } = state;
-    const _a = listEmptyProps || {}, { icon: listEmptyIcon, description: listEmptyDescription = t(translations.global.noResultsMatchesKeyWord).toString() } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
+    const _a = listEmptyProps || {}, { icon: listEmptyIcon = React.createElement(LongerIcon, null), description: listEmptyDescription = (React.createElement("div", { dangerouslySetInnerHTML: { __html: t(translations.matchesAnySelect.noData) } })) } = _a, restListEmptyProps = __rest(_a, ["icon", "description"]);
     const _b = selectedListEmptyProps || {}, { description: selectedListEmptyDescription = t(translations.global.selectItemsFromList).toString(), icon: selectedListEmptyIcon = React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }) } = _b, restSelectedListEmptyProps = __rest(_b, ["description", "icon"]);
     // Refs
     const { ref: loadMoreRef } = useIntersectionObserver({
@@ -74,19 +75,29 @@ export function MatchesAny(props) {
     useDeepCompareEffect(() => {
         setState(prev => (Object.assign(Object.assign({}, prev), { selectedItems: selectedItemsProp })));
     }, [selectedItemsProp]);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
+        var _a;
+        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         // Delay for show load more el
-        setTimeout(() => {
-            var _a;
-            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
-        }, 500);
-    }, []);
+        if (!isEmpty(items)) {
+            setTimeout(() => {
+                setState(prev => (Object.assign(Object.assign({}, prev), { isShowLoadMoreEl: true })));
+            }, 500);
+        }
+    }, [items]);
     useDeepCompareEffect(() => {
+        // If `selectedTreeData` prop is not empty, update the `selectedTreeData` state directly.
         if (!isEmpty(selectedTreeDataProp)) {
             setState(prev => (Object.assign(Object.assign({}, prev), { selectedTreeData: selectedTreeDataProp })));
         }
-    }, [selectedTreeDataProp]);
+        // If `selectedTreeData` prop is empty and `selectedItems` prop is not empty,
+        // calculate the `selectedTreeData` from the `selectedItems` prop and update the state.
+        else if (!isEmpty(selectedItemsProp)) {
+            const newSelectedTreeData = getSelectedTreeData(items || [], selectedItemsProp || []);
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedTreeData: newSelectedTreeData })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedTreeDataProp, selectedItemsProp]);
     // Handlers
     const onSelectItem = (item) => {
         let newSelectedItems = [...(selectedItems || [])];
@@ -249,17 +260,15 @@ export function MatchesAny(props) {
                     React.createElement(Flex, { align: "center", gap: 10 },
                         renderExtraValueLabels(),
                         React.createElement(TextButton, { disabled: isDisableSelectAll, onClick: onSelectAll }, t(translations.global.selectAll).toString()))),
-                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) > 1 ? (React.createElement(React.Fragment, null,
-                    React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
-                            ? matchedParents.map(item => item.key)
-                            : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
-                                transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
-                                transition: 'transform 0.3s ease',
-                            }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), titleRender: (item) => isShowLoadMoreEl && item.isLoadMore ? (React.createElement("div", { ref: loadMoreRef })) : (renderItemNodeTitle({
-                            item,
-                            onSelectItem,
-                        })), height: 396 }),
-                    isShowLoadMoreEl && React.createElement("div", { ref: loadMoreRef }))) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps)))))));
+                React.createElement(Spin, { spinning: loading }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) > 1 ? (React.createElement(StyledTree, { key: searchValue, defaultExpandedKeys: (matchedParents === null || matchedParents === void 0 ? void 0 : matchedParents.length)
+                        ? matchedParents.map(item => item.key)
+                        : items === null || items === void 0 ? void 0 : items.map(item => item.key), selectable: false, treeData: treeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                            transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
+                            transition: 'transform 0.3s ease',
+                        }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })), titleRender: (item) => isShowLoadMoreEl && item.isLoadMore ? (React.createElement("div", { ref: loadMoreRef })) : (renderItemNodeTitle({
+                        item,
+                        onSelectItem,
+                    })), height: 396 })) : (React.createElement(EmptyData, Object.assign({ icon: listEmptyIcon, showIcon: !!listEmptyIcon, description: listEmptyDescription }, restListEmptyProps)))))));
     };
     const renderSelectedList = () => (React.createElement("div", { className: "matches-any__section" },
         React.createElement(Flex, { className: "matches-any__header", justify: "space-between" },

package/es/components/molecules/MatchAnySelect/utils.js

@@ -16,6 +16,9 @@ const customMergeTreeData = (key) => (target, source) => {
 export const getSelectedTreeData = (items, selectedItems, selectedTreeData = []) => {
     const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
     const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
+    const notFoundItems = !(selectedTreeData === null || selectedTreeData === void 0 ? void 0 : selectedTreeData.length)
+        ? notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.filter(item => !(items === null || items === void 0 ? void 0 : items.some(i => i.key === item.key)))
+        : [];
     const serializeTreeData = (list) => {
         var _a;
         return ((_a = list
@@ -38,5 +41,5 @@ export const getSelectedTreeData = (items, selectedItems, selectedTreeData = [])
     const mergeItems = deepmerge(selectedTreeData || [], items || [], {
         arrayMerge: customMergeTreeData('key'),
     });
-    return serializeTreeData(mergeItems).concat(extendValueSelectedItems);
+    return serializeTreeData(mergeItems).concat([...notFoundItems, ...extendValueSelectedItems]);
 };

package/es/components/organism/ActivityTimeline/ActivityTimeline.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ActivityTimeLineProps } from './types';
+export declare const ActivityTimeline: (props: ActivityTimeLineProps) => React.JSX.Element;

package/es/components/organism/ActivityTimeline/ActivityTimeline.js

@@ -0,0 +1,93 @@
+/* eslint-disable no-underscore-dangle */
+import React, { useMemo } from 'react';
+import { StyledNoData, StyldTitle, StyledRoot, TimelineBottom } from './styled';
+import { Spin } from '../../atoms';
+import { ItemEvent, TimeLineTitle, ItemGroupEvent } from './components';
+import { differenceInMonths, formatDateTZ, startOfMonth, subMonths } from 'src/utils/date';
+import { useInView } from 'react-intersection-observer';
+import { getTranslateMessage, translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { isEmpty } from 'lodash';
+export const ActivityTimeline = (props) => {
+    const { timelines = [], isLoading = false, title = 'Time line', timezone = Intl.DateTimeFormat().resolvedOptions().timeZone, objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], } = props;
+    let { timelineAvailable } = props;
+    timelineAvailable = (timelines.length > 0 && !!timelineAvailable) || false;
+    const eventTracking = useMemo(() => {
+        const list = [...eventTrackingProp];
+        const map = Object.fromEntries(list.map(item => [`${item.eventCategoryId}@@${item.eventActionId}`, item]));
+        return { list, map };
+    }, [eventTrackingProp]);
+    const [bottomRef] = useInView({
+        threshold: 1,
+        onChange: inView => {
+            if (inView || !timelineAvailable || !onFetchMore)
+                return;
+            onFetchMore();
+        },
+    });
+    const showBottomComponent = () => {
+        if (isEmpty(timelines))
+            return null;
+        return (React.createElement(TimelineBottom, { ref: bottomRef, align: "center", justify: "center" }, timelineAvailable ? (React.createElement(Spin, { indicatorSize: 24 })) : (getTranslateMessage(translations._INFO_NO_MORE_ACTIVITY, 'No more activities!'))));
+    };
+    const showMainContent = (timelines, customerName) => {
+        const result = [];
+        if (timelines.length > 0) {
+            const startDate = startOfMonth(new Date()).getTime();
+            let firstDateEvent = startOfMonth(new Date(formatDateTZ(timelines[0].trackedDateTimeUTC, 'MM/DD/YYYY', timezone))).getTime();
+            let diffTempt = differenceInMonths(new Date(startDate), new Date(firstDateEvent));
+            if (diffTempt === 0) {
+                result.push(React.createElement(TimeLineTitle, { key: `time-heading--${startDate}`, type: "label", data: { date: firstDateEvent } }));
+            }
+            else if (diffTempt === 1) {
+                result.push(React.createElement(TimeLineTitle, { key: `time-heading--${startDate}`, type: "nodata-single", data: { date: startDate } }));
+                result.push(React.createElement(TimeLineTitle, { key: `time-heading--v2-${firstDateEvent}`, type: "label", data: { date: firstDateEvent } }));
+            }
+            else {
+                const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEvent), -1)).getTime();
+                result.push(React.createElement(TimeLineTitle, { key: `time-heading--${startDate}`, type: "nodata-multi", data: { startDate, endDate: dateNextMonthEvent } }));
+                result.push(React.createElement(TimeLineTitle, { key: `time-heading--v2-${firstDateEvent}`, type: "label", data: { date: firstDateEvent } }));
+            }
+            timelines.forEach((item, index) => {
+                const firstDateEventTempt = startOfMonth(new Date(formatDateTZ(item.trackedDateTimeUTC, 'MM/DD/YYYY', timezone))).getTime();
+                if (firstDateEvent !== firstDateEventTempt) {
+                    diffTempt = differenceInMonths(new Date(firstDateEvent), new Date(firstDateEventTempt));
+                    if (diffTempt === 0) {
+                        result.push(React.createElement(TimeLineTitle, { key: `time-heading--${item.timestamp}`, type: "label", data: { date: firstDateEventTempt } }));
+                    }
+                    else if (diffTempt === 1) {
+                        result.push(React.createElement(TimeLineTitle, { key: `time-heading--${item.timestamp}`, type: "label", data: { date: firstDateEventTempt } }));
+                    }
+                    else if (diffTempt === 2) {
+                        const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEventTempt), -1)).getTime();
+                        result.push(React.createElement(TimeLineTitle, { key: `time-heading--${item.timestamp}`, type: "nodata-single", data: { date: dateNextMonthEvent } }));
+                        result.push(React.createElement(TimeLineTitle, { key: `time-heading-v2-${item.timestamp}`, type: "label", data: { date: firstDateEventTempt } }));
+                    }
+                    else {
+                        const datePrevMonthEvent = startOfMonth(subMonths(new Date(firstDateEvent), 1)).getTime();
+                        const dateNextMonthEvent = startOfMonth(subMonths(new Date(firstDateEventTempt), -1)).getTime();
+                        result.push(React.createElement(TimeLineTitle, { key: `time-heading--${item.timestamp}`, type: "nodata-multi", data: {
+                                startDate: datePrevMonthEvent,
+                                endDate: dateNextMonthEvent,
+                            } }));
+                        result.push(React.createElement(TimeLineTitle, { key: `time-heading-v2-${item.timestamp}`, type: "label", data: { date: firstDateEventTempt } }));
+                    }
+                    firstDateEvent = firstDateEventTempt;
+                }
+                const key = `${item.etype}-${item.timestamp}-${item.sectionKey}-${index}`;
+                if (item.data.totalActivityCount === 1) {
+                    result.push(React.createElement(ItemEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking, key: key }));
+                }
+                else if (item.data.totalActivityCount > 1) {
+                    result.push(React.createElement(ItemGroupEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking, key: key }));
+                }
+            });
+        }
+        return result;
+    };
+    return (React.createElement(StyledRoot, null,
+        React.createElement(StyldTitle, null, title),
+        isLoading && React.createElement(Spin, null),
+        !isLoading && !timelines.length && React.createElement(StyledNoData, null, "No data"),
+        showMainContent(timelines, objectName),
+        showBottomComponent()));
+};