From 4a0460f832077335d93d7d9cb4825ece7470c2d0 Mon Sep 17 00:00:00 2001
From: Serge Pavlyuk <sergeypavlyuk@yandex-team.ru>
Date: Thu, 5 Dec 2024 19:38:19 +0300
Subject: [PATCH] feat: add groups support for mobile layout

---
 .babelrc.json                               |   7 +-
 .storybook/decorators/withMobile.tsx        |  12 +-
 src/components/MobileLayout/MobileLayout.js | 123 --------------------
 3 files changed, 12 insertions(+), 130 deletions(-)
 delete mode 100644 src/components/MobileLayout/MobileLayout.js

diff --git a/.babelrc.json b/.babelrc.json
index b5cf683..cb666fc 100644
--- a/.babelrc.json
+++ b/.babelrc.json
@@ -9,7 +9,12 @@
         }
       }
     ],
-    "@babel/preset-typescript",
+    [
+      "@babel/preset-typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ],
     "@babel/preset-react"
   ],
   "plugins": []
diff --git a/.storybook/decorators/withMobile.tsx b/.storybook/decorators/withMobile.tsx
index c2e7ba2..9c460cc 100644
--- a/.storybook/decorators/withMobile.tsx
+++ b/.storybook/decorators/withMobile.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import type {Decorator} from '@storybook/react';
-import {MobileProvider} from '@gravity-ui/uikit';
+import {DashKit} from '../../src/components/DashKit/DashKit';
 
 export const withMobile: Decorator = (Story, context) => {
     const platform = context.globals.platform;
 
-    return (
-        <MobileProvider mobile={platform === 'mobile'} platform={platform}>
-            <Story key={platform} {...context} />
-        </MobileProvider>
-    );
+    DashKit.setSettings({
+        isMobile: platform === 'mobile',
+    });
+
+    return <Story key={platform} {...context} />;
 };
diff --git a/src/components/MobileLayout/MobileLayout.js b/src/components/MobileLayout/MobileLayout.js
deleted file mode 100644
index 29c29a8..0000000
--- a/src/components/MobileLayout/MobileLayout.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-
-import {DashKitContext} from '../../context/DashKitContext';
-import {cn} from '../../utils/cn';
-import Item from '../Item/Item';
-
-import {getSortedConfigItems} from './helpers';
-
-import './MobileLayout.scss';
-
-const b = cn('dashkit-mobile-layout');
-
-export default class MobileLayout extends React.PureComponent {
-    static contextType = DashKitContext;
-
-    pluginsRefs = [];
-    sortedLayoutItems;
-
-    _memoLayout = this.context.layout;
-    _memoForwardedPluginRef = [];
-    _memoAdjustWidgetLayout = [];
-
-    state = {
-        activeTabId: null,
-        indexesOfItemsWithActiveAutoheight: {},
-    };
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.activeTabId !== this.context.config.id) {
-            this.setState({
-                activeTabId: this.context.config.id,
-                indexesOfItemsWithActiveAutoheight: {},
-            });
-        }
-    }
-
-    getSortedLayoutItems() {
-        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
-            return this.sortedLayoutItems;
-        }
-
-        this._memoLayout = this.context.layout;
-
-        const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
-
-        this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
-
-        return this.sortedLayoutItems;
-    }
-
-    getMemoForwardRefCallback = (refIndex) => {
-        if (!this._memoForwardedPluginRef[refIndex]) {
-            this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
-                this.pluginsRefs[refIndex] = pluginRef;
-            };
-        }
-
-        return this._memoForwardedPluginRef[refIndex];
-    };
-
-    adjustWidgetLayout = (index, {needSetDefault}) => {
-        if (needSetDefault) {
-            const indexesOfItemsWithActiveAutoheight = {
-                ...this.state.indexesOfItemsWithActiveAutoheight,
-            };
-            delete indexesOfItemsWithActiveAutoheight[index];
-
-            this.setState({indexesOfItemsWithActiveAutoheight});
-        } else {
-            this.setState({
-                indexesOfItemsWithActiveAutoheight: Object.assign(
-                    {},
-                    this.state.indexesOfItemsWithActiveAutoheight,
-                    {[index]: true},
-                ),
-            });
-        }
-    };
-
-    getMemoAdjustWidgetLayout = (index) => {
-        if (!this._memoAdjustWidgetLayout[index]) {
-            this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
-        }
-
-        return this._memoAdjustWidgetLayout[index];
-    };
-
-    render() {
-        const {config, layout} = this.context;
-
-        this.pluginsRefs.length = config.items.length;
-
-        const sortedItems = this.getSortedLayoutItems();
-
-        return (
-            <div className={b()}>
-                {sortedItems.map((item, index) => {
-                    const isItemWithActiveAutoheight =
-                        index in this.state.indexesOfItemsWithActiveAutoheight;
-
-                    return (
-                        <div
-                            className={b('item', {autoheight: isItemWithActiveAutoheight})}
-                            key={item.id}
-                        >
-                            <Item
-                                id={item.id}
-                                item={item}
-                                layout={layout}
-                                shouldItemUpdate={false}
-                                adjustWidgetLayout={this.getMemoAdjustWidgetLayout(index)}
-                                forwardedPluginRef={this.getMemoForwardRefCallback(index)}
-                                onMountChange={this.onMountChange}
-                                onItemMountChange={this.context.onItemMountChange}
-                                onItemRender={this.context.onItemRender}
-                            />
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
-}