feat: add groups support for mobile layout

.babelrc.json

@@ -9,7 +9,12 @@
         }
       }
     ],
-    "@babel/preset-typescript",
+    [
+      "@babel/preset-typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ],
     "@babel/preset-react"
   ],
   "plugins": []

.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} />;
 };

src/components/MobileLayout/MobileLayout.js → src/components/MobileLayout/MobileLayout.tsx

@@ -10,22 +10,35 @@ import './MobileLayout.scss';
 
 const b = cn('dashkit-mobile-layout');
 
-export default class MobileLayout extends React.PureComponent {
+type MobileLayoutProps = {};
+
+type MobileLayoutState = {
+    activeTabId: string | null;
+    indexesOfItemsWithActiveAutoheight: Record<string, boolean>;
+};
+
+type PlugibRefObject = React.RefObject<any>;
+
+export default class MobileLayout extends React.PureComponent<
+    MobileLayoutProps,
+    MobileLayoutState
+> {
     static contextType = DashKitContext;
+    declare context: React.ContextType<typeof DashKitContext>;
 
-    pluginsRefs = [];
-    sortedLayoutItems;
+    pluginsRefs: PlugibRefObject[] = [];
+    sortedLayoutItems: ReturnType<typeof getSortedConfigItems> | null = null;
 
     _memoLayout = this.context.layout;
-    _memoForwardedPluginRef = [];
-    _memoAdjustWidgetLayout = [];
+    _memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void> = [];
+    _memoAdjustWidgetLayout: Array<(props: {needSetDefault: boolean}) => void> = [];
 
-    state = {
+    state: MobileLayoutState = {
         activeTabId: null,
         indexesOfItemsWithActiveAutoheight: {},
     };
 
-    componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(_prevProps: MobileLayoutProps, prevState: MobileLayoutState) {
         if (prevState.activeTabId !== this.context.config.id) {
             this.setState({
                 activeTabId: this.context.config.id,
@@ -34,6 +47,41 @@ export default class MobileLayout extends React.PureComponent {
         }
     }
 
+    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)}
+                                onItemMountChange={this.context.onItemMountChange}
+                                onItemRender={this.context.onItemRender}
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+
     getSortedLayoutItems() {
         if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
             return this.sortedLayoutItems;
@@ -48,21 +96,22 @@ export default class MobileLayout extends React.PureComponent {
         return this.sortedLayoutItems;
     }
 
-    getMemoForwardRefCallback = (refIndex) => {
+    getMemoForwardRefCallback(refIndex: number) {
         if (!this._memoForwardedPluginRef[refIndex]) {
-            this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+            this._memoForwardedPluginRef[refIndex] = (pluginRef: PlugibRefObject) => {
                 this.pluginsRefs[refIndex] = pluginRef;
             };
         }
 
         return this._memoForwardedPluginRef[refIndex];
-    };
+    }
 
-    adjustWidgetLayout = (index, {needSetDefault}) => {
+    adjustWidgetLayout(index: number, {needSetDefault}: {needSetDefault: boolean}) {
         if (needSetDefault) {
             const indexesOfItemsWithActiveAutoheight = {
                 ...this.state.indexesOfItemsWithActiveAutoheight,
             };
+
             delete indexesOfItemsWithActiveAutoheight[index];
 
             this.setState({indexesOfItemsWithActiveAutoheight});
@@ -75,49 +124,13 @@ export default class MobileLayout extends React.PureComponent {
                 ),
             });
         }
-    };
+    }
 
-    getMemoAdjustWidgetLayout = (index) => {
+    getMemoAdjustWidgetLayout(index: number) {
         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>
-        );
     }
 }