Fix mobile layout widgets order

datalens-tech · Dec 23, 2024 · bb48868 · bb48868
1 parent 39fdcd0
commit bb48868
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 28 deletions.
diff --git a/src/ui/units/dash/containers/Body/Body.tsx b/src/ui/units/dash/containers/Body/Body.tsx
@@ -114,6 +114,7 @@ import {
 import {getPropertiesWithResizeHandles} from '../../utils/dashkitProps';
 import {scrollIntoView} from '../../utils/scrollUtils';
 import {DashError} from '../DashError/DashError';
+import {getGroupedItems} from '../Dialogs/Tabs/PopupWidgetsOrder/helpers';
 import {FixedHeaderContainer, FixedHeaderControls} from '../FixedHeader/FixedHeader';
 import TableOfContent from '../TableOfContent/TableOfContent';
 import {Tabs} from '../Tabs/Tabs';
@@ -283,6 +284,10 @@ class Body extends React.PureComponent<BodyProps> {
         byId: {},
         columns: 0,
     };
+    _memoizedOrderedConfig?: {
+        key: DashKitProps['config']['items'];
+        config: DashKitProps['config'];
+    };
 
     state: DashBodyState = {
         fixedHeaderCollapsed: {},
@@ -887,14 +892,43 @@ class Body extends React.PureComponent<BodyProps> {
             [DASH_INFO_HEADER]: new URLSearchParams(dashInfo).toString(),
         };
     };
+    private getConfig = () => {
+        const {tabData} = this.props;
+        const tabDataConfig = tabData;
+
+        if (!tabDataConfig || !DL.IS_MOBILE) {
+            return tabDataConfig;
+        }
+
+        const memoItems = this._memoizedOrderedConfig;
+
+        if (!memoItems || memoItems.key !== tabDataConfig.items) {
+            const sortedItems = getGroupedItems(tabDataConfig.items, tabDataConfig.layout).reduce(
+                (list, group) => {
+                    list.push(...group);
+                    return list;
+                },
+                [],
+            );
+
+            this._memoizedOrderedConfig = {
+                key: tabDataConfig.items as ConfigItem[],
+                config: {
+                    ...tabDataConfig,
+                    items: sortedItems as ConfigItem[],
+                },
+            };
+        }
+
+        return this._memoizedOrderedConfig?.config;
+    };
 
     private renderDashkit = () => {
         const {isGlobalDragging} = this.state;
         const {
             mode,
             settings,
             tabs,
-            tabData,
             handlerEditClick,
             isEditModeLoading,
             globalParams,
@@ -904,7 +938,7 @@ class Body extends React.PureComponent<BodyProps> {
 
         const context = this.getContext();
 
-        const tabDataConfig = tabData as DashKitProps['config'] | null;
+        const tabDataConfig = this.getConfig();
 
         const isEmptyTab = !tabDataConfig?.items.length;
 

diff --git a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/PopupWidgetsOrder.tsx
@@ -1,19 +1,16 @@
 import React from 'react';
 
-import {DEFAULT_GROUP} from '@gravity-ui/dashkit/helpers';
 import type {PopupProps} from '@gravity-ui/uikit';
 import {Button, Dialog, List, Popup} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {I18n} from 'i18n';
-import cloneDeep from 'lodash/cloneDeep';
 import type {DashTabItem, DashTabLayout} from 'shared';
 import {DialogTabsQA, EntryDialogQA} from 'shared';
-import {FIXED_GROUP_CONTAINER_ID, FIXED_GROUP_HEADER_ID} from 'ui/components/DashKit/constants';
 import {registry} from 'ui/registry';
 
 import {getLayoutMap, sortByLayoutComparator} from '../../../../modules/helpers';
 
-import {getPreparedItems, getUpdatedItems, getWidgetRowText} from './helpers';
+import {getGroupedItems, getUpdatedItems, getWidgetRowText} from './helpers';
 
 import './PopupWidgetsOrder.scss';
 
@@ -51,22 +48,6 @@ const WidgetRow = (item: DashTabItem) => {
     );
 };
 
-const getGroupedItems = (items: Array<DashTabItem>, layout: Array<DashTabLayout>) => {
-    const preparedItems = getPreparedItems(cloneDeep(items), layout);
-
-    const parentByItem = layout.reduce<Record<string, string>>((memo, item) => {
-        const parent = item.parent ?? DEFAULT_GROUP;
-
-        memo[item.i] = parent;
-
-        return memo;
-    }, {});
-
-    return [FIXED_GROUP_HEADER_ID, FIXED_GROUP_CONTAINER_ID, DEFAULT_GROUP].map((group) => {
-        return preparedItems.filter((item) => parentByItem[item.id] === group);
-    });
-};
-
 export const PopupWidgetsOrder = (props: PopupWidgetsOrderProps) => {
     const {anchorRef, onClose, onApply, items, layout, tabId} = props;
     const [groupedItems, setGroupedItems] = React.useState<Array<Array<DashTabItem>>>([]);

diff --git a/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/helpers.ts b/src/ui/units/dash/containers/Dialogs/Tabs/PopupWidgetsOrder/helpers.ts
@@ -1,3 +1,4 @@
+import {DEFAULT_GROUP} from '@gravity-ui/dashkit/helpers';
 import {i18n} from 'i18n';
 import update from 'immutability-helper';
 import {isNumber} from 'lodash';
@@ -10,6 +11,7 @@ import type {
     DashTabLayout,
 } from 'shared';
 import {DashTabItemType} from 'shared';
+import {FIXED_GROUP_CONTAINER_ID, FIXED_GROUP_HEADER_ID} from 'ui/components/DashKit/constants';
 
 import {getTextOverflowedStr} from '../../../../../../utils/stringUtils';
 import {getLayoutMap, sortByOrderIdOrLayoutComparator} from '../../../../modules/helpers';
@@ -95,6 +97,22 @@ export const getPreparedItems = (items: Array<DashTabItem>, layout: Array<DashTa
     });
 };
 
+export const getGroupedItems = (items: Array<DashTabItem>, layout: Array<DashTabLayout>) => {
+    const preparedItems = getPreparedItems(items, layout);
+
+    const parentByItem = layout.reduce<Record<string, string>>((memo, item) => {
+        const parent = item.parent ?? DEFAULT_GROUP;
+
+        memo[item.i] = parent;
+
+        return memo;
+    }, {});
+
+    return [FIXED_GROUP_HEADER_ID, FIXED_GROUP_CONTAINER_ID, DEFAULT_GROUP].map((group) => {
+        return preparedItems.filter((item) => parentByItem[item.id] === group);
+    });
+};
+
 export const getUpdatedItems = ({
     items,
     dragItem,

diff --git a/src/ui/units/dash/modules/helpers.ts b/src/ui/units/dash/modules/helpers.ts
@@ -274,12 +274,7 @@ export const sortByOrderIdOrLayoutComparator = (
         return sortByLayoutComparator(prev, next, layout, columns);
     }
 
-    if (prevOrderId > nextOrderId) {
-        return 1;
-    } else if (prevOrderId < nextOrderId) {
-        return -1;
-    }
-    return 0;
+    return prevOrderId - nextOrderId;
 };
 
 export const getLayoutParentId = (layout: DashTabLayout) => {