@antscorp/antsomi-ui 1.3.5-beta.718 → 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/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()));
+};