@antscorp/antsomi-ui 2.0.89 → 2.0.91-text-editor-beta.1

package/es/components/molecules/VirtualizedMenu/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { MODE } from './config';
+import type { MODE } from './config';
+import type { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
 export type Mode = (typeof MODE)[keyof typeof MODE];
 export type ItemKey = string;
 export type ItemType = {
@@ -11,11 +12,6 @@ export type ItemType = {
     errorMessage?: string | undefined;
     disabled?: boolean;
 };
-export type SerializedItemType = ItemType & {
-    level: number;
-    pathKey: PathKey;
-    parent: ItemType | null;
-};
 type VirtualizedMenuBaseProps = Partial<{
     items: ItemType[];
     inlineIndent: number;
@@ -24,22 +20,43 @@ type VirtualizedMenuBaseProps = Partial<{
     selectable: boolean;
     className: string;
     itemSize: number;
-    selected: string[];
+    selected: string | string[];
     expanded: string[];
     onClick: (args: {
         item: ItemType;
-        pathKey: PathKey;
+        domEvent?: React.MouseEvent;
+        elKey: 'item' | 'item-expand-el';
     }) => void;
-    action: React.ReactNode | ((item: ItemType) => React.ReactNode);
+    action: React.ReactNode | ((item: ItemType, others: {
+        expandEl: React.ReactNode;
+    }) => React.ReactNode);
 }>;
 export type VirtualizedMenuBaseHandle = {
     expandAll: () => void;
 };
-export type PathKey = (string | number)[];
 export type MenuInlineHandle = VirtualizedMenuBaseHandle;
 export type MenuInlineProps = VirtualizedMenuBaseProps & {
     mode?: typeof MODE.Inline;
 };
 export type VirtualizedMenuHandle = MenuInlineHandle;
 export type VirtualizedMenuProps = MenuInlineProps;
+export type MemoryData = {
+    itemSpacing: number;
+    inlineIndent: number;
+    inlinePadding: number;
+    selectedKeys: Set<string>;
+    expandedKeys: Set<string>;
+    items: NormalizedNode<ItemType & {
+        ref: (el: HTMLLIElement) => void;
+    }>[];
+    normalizeTreeItems: Map<string, NormalizedNode<ItemType>>;
+    action: MenuInlineProps['action'];
+    focusId: string | null;
+    onClick: (args: {
+        item: NormalizedNode<ItemType>;
+        index: number;
+        elKey: 'item' | 'item-expand-el';
+        domEvent: React.MouseEvent;
+    }) => void;
+};
 export {};

package/es/components/molecules/VirtualizedMenu/utils.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="lodash" />
-import { ItemType, SerializedItemType } from './types';
-export declare const getFlattenItems: (args: {
+import { ItemType } from './types';
+import { NormalizedTreeState } from '@antscorp/antsomi-ui/es/utils/tree';
+export declare const itemToTreeNode: (item: ItemType) => any;
+export declare const serializeItems: (args: {
     items: ItemType[];
-}) => SerializedItemType[];
+}) => NormalizedTreeState<ItemType>;
 export declare const CLS: {
     readonly Root: {
         readonly default: string;
@@ -27,7 +29,8 @@ export declare const CLS: {
         readonly disabled: string;
         readonly selected: string;
         readonly expanded: string;
+        readonly selectedDescendant: string;
     };
 };
-export declare const getItemSize: ((itemSize: number, itemSpacing: number) => (index: number) => number) & import("lodash").MemoizedFunction;
-export declare const calInlineListSize: (itemLength: number, itemSize: number, itemSpacing: number) => number;
+export declare const getItemSize: ((itemSize?: number, itemSpacing?: number) => (index: number) => number) & import("lodash").MemoizedFunction;
+export declare const calInlineListSize: (itemLength: number, itemSize?: number, itemSpacing?: number) => number;

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

@@ -1,22 +1,16 @@
 import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
-import { COMPONENT_NAME, MODE } from './config';
+import { COMPONENT_NAME, ITEM_SIZE, ITEM_SPACING, MODE } from './config';
 import { memoize } from 'lodash';
-export const getFlattenItems = (args) => {
+import { normalizeTreeData } from '@antscorp/antsomi-ui/es/utils/tree';
+export const itemToTreeNode = (item) => ({
+    id: item.key,
+    data: item,
+    children: item.children?.map(itemToTreeNode),
+});
+export const serializeItems = (args) => {
     const { items } = args;
-    const result = [];
-    function recursively(items, level, pathKey, parent) {
-        items.forEach((item, idx) => {
-            const currentPathKey = [...pathKey, idx, item.key.toString()];
-            result.push({ ...item, level, pathKey: currentPathKey, parent });
-            if (item.children && item.children.length > 0) {
-                recursively(item.children, level + 1, currentPathKey, item);
-            }
-        });
-    }
-    if (items.length) {
-        recursively(items, 1, [], null);
-    }
-    return result;
+    const nodes = items.map(itemToTreeNode);
+    return normalizeTreeData(nodes);
 };
 const componentCls = antsomiClsx(COMPONENT_NAME);
 export const CLS = {
@@ -43,15 +37,16 @@ export const CLS = {
         disabled: componentCls('item-disabled'),
         selected: componentCls('item-selected'),
         expanded: componentCls('item-expanded'),
+        selectedDescendant: componentCls('item-selected-descendant'),
     },
 };
-export const getItemSize = memoize((itemSize, itemSpacing) => (index) => {
+export const getItemSize = memoize((itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING) => (index) => {
     if (index === 0) {
         return itemSize;
     }
     return itemSize + itemSpacing;
 });
-export const calInlineListSize = (itemLength, itemSize, itemSpacing) => {
+export const calInlineListSize = (itemLength, itemSize = ITEM_SIZE, itemSpacing = ITEM_SPACING) => {
     let result = 0;
     const calItemSize = getItemSize(itemSize, itemSpacing);
     for (let i = 0; i < itemLength; i++) {

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

@@ -67,6 +67,8 @@ export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
 export * from './CodeStructure';
+export * from './FontSizeInput';
+export * from './ItemNotFound';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js

@@ -67,6 +67,8 @@ export * from './EmojiCollections';
 export * from './EmojiPopover';
 export * from './DisplayFormat';
 export * from './CodeStructure';
+export * from './FontSizeInput';
+export * from './ItemNotFound';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.scss

@@ -0,0 +1 @@
+@import url('./FontSizeInput/styles.scss');

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

@@ -20,7 +20,7 @@ export const ActivityTimeline = (props) => {
         const map = Object.fromEntries(list.map(item => [`${item.eventCategoryId}@@${item.eventActionId}`, item]));
         return { list, map };
     }, [eventTrackingProp]);
-    const [bottomRef] = useInView({
+    const [lastRef] = useInView({
         threshold: 0.7,
         onChange: inView => {
             if (!inView || isLoading || !timelineAvailable || !onFetchMore)
@@ -31,7 +31,7 @@ export const ActivityTimeline = (props) => {
     const showBottomComponent = () => {
         if (isEmpty(timelines) || isLoading)
             return null;
-        return (_jsx(TimelineBottom, { align: "center", justify: "center", children: timelineAvailable && onFetchMore ? (_jsx(Flex, { ref: bottomRef, children: _jsx(Spin, { indicatorSize: 24 }) })) : (translate(translations._INFO_NO_MORE_ACTIVITY, 'No more activities!')) }));
+        return (_jsx(TimelineBottom, { align: "center", justify: "center", children: timelineAvailable && onFetchMore ? (_jsx(Flex, { children: _jsx(Spin, { indicatorSize: 24 }) })) : (translate(translations._INFO_NO_MORE_ACTIVITY, 'No more activities!')) }));
     };
     const showMainContent = (timelines, customerName) => {
         const result = [];
@@ -78,11 +78,17 @@ export const ActivityTimeline = (props) => {
                     firstDateEvent = firstDateEventTempt;
                 }
                 const key = `${item.etype}-${item.timestamp}-${item.sectionKey}-${index}`;
+                const isLast = index === timelines.length - 1;
+                const setRef = (el) => {
+                    if (isLast && el) {
+                        lastRef(el);
+                    }
+                };
                 if (item.data.totalActivityCount === 1) {
-                    result.push(_jsx(ItemEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
+                    result.push(_jsx(ItemEvent, { ref: setRef, keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
                 }
                 else if (item.data.totalActivityCount > 1) {
-                    result.push(_jsx(ItemGroupEvent, { keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
+                    result.push(_jsx(ItemGroupEvent, { ref: setRef, keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
                 }
             });
         }
@@ -90,12 +96,12 @@ export const ActivityTimeline = (props) => {
     };
     const renderContent = () => {
         if (isLoading) {
-            return (_jsxs(_Fragment, { children: [header, _jsx(Flex, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(Spin, { indicatorSize: 24 }) })] }));
+            return (_jsx(Flex, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(Spin, { indicatorSize: 24 }) }));
         }
-        if (!timelines.length) {
-            return (_jsxs(_Fragment, { children: [header, _jsx(StyledNoData, { align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, title: translate(translations._PROFILES_NO_DATA), description: translate(translations._PROFILES_MESSAGE_NO_DATA_TIMELINE).toString() }) })] }));
+        if (isEmpty(timelines)) {
+            return (_jsx(StyledNoData, { align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, title: translate(translations._PROFILES_NO_DATA), description: translate(translations._PROFILES_MESSAGE_NO_DATA_TIMELINE).toString() }) }));
         }
-        return (_jsxs(_Fragment, { children: [header, showMainContent(timelines, objectName), showBottomComponent()] }));
+        return (_jsxs(_Fragment, { children: [showMainContent(timelines, objectName), showBottomComponent()] }));
     };
-    return (_jsxs(StyledRoot, { className: clsx(className, 'activity-timeline'), children: [_jsx(StyldTitle, { children: title }), renderContent()] }));
+    return (_jsxs(StyledRoot, { className: clsx(className, 'activity-timeline'), children: [_jsx(StyldTitle, { children: title }), header, renderContent()] }));
 };