From 7c3543ab840ed137eb878b8bfdf9b57b78038ad0 Mon Sep 17 00:00:00 2001
From: Serge Pavlyuk <sergeypavlyuk@yandex-team.ru>
Date: Mon, 16 Dec 2024 13:55:56 +0300
Subject: [PATCH] feat: mobile layout render groups

---
 src/components/GridLayout/GridLayout.js      |  1 +
 src/components/MobileLayout/MobileLayout.tsx | 72 +++++++++++++-------
 src/typings/config.ts                        |  1 +
 3 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js
index fb567c9..a4fa768 100644
--- a/src/components/GridLayout/GridLayout.js
+++ b/src/components/GridLayout/GridLayout.js
@@ -731,6 +731,7 @@ export default class GridLayout extends React.PureComponent {
 
                 if (group.render) {
                     const groupContext = {
+                        isMobile: false,
                         config,
                         editMode,
                         items,
diff --git a/src/components/MobileLayout/MobileLayout.tsx b/src/components/MobileLayout/MobileLayout.tsx
index f3f45af..699f09d 100644
--- a/src/components/MobileLayout/MobileLayout.tsx
+++ b/src/components/MobileLayout/MobileLayout.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
+import groupBy from 'lodash/groupBy';
+
+import {DEFAULT_GROUP} from '../../constants';
 import {DashKitContext} from '../../context';
 import {cn} from '../../utils/cn';
 import Item from '../Item/Item';
@@ -26,7 +29,7 @@ export default class MobileLayout extends React.PureComponent<
     context!: React.ContextType<typeof DashKitContext>;
 
     pluginsRefs: PlugibRefObject[] = [];
-    sortedLayoutItems: ReturnType<typeof getSortedConfigItems> | null = null;
+    sortedLayoutItems: Record<string, ReturnType<typeof getSortedConfigItems>> | null = null;
 
     _memoLayout = this.context.layout;
     _memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void> = [];
@@ -37,7 +40,7 @@ export default class MobileLayout extends React.PureComponent<
     };
 
     render() {
-        const {config, layout} = this.context;
+        const {config, layout, groups = [{id: DEFAULT_GROUP}], context, editMode} = this.context;
 
         this.pluginsRefs.length = config.items.length;
 
@@ -45,27 +48,45 @@ export default class MobileLayout extends React.PureComponent<
 
         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>
-                    );
+                {groups.map((group) => {
+                    const groupId = group.id || DEFAULT_GROUP;
+                    const items = sortedItems[groupId];
+
+                    const children = items.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>
+                        );
+                    });
+
+                    if (group.render) {
+                        return group.render(groupId, children, {
+                            isMobile: true,
+                            config,
+                            context,
+                            editMode,
+                            items,
+                            layout,
+                        });
+                    }
+
+                    return children;
                 })}
             </div>
         );
@@ -80,7 +101,10 @@ export default class MobileLayout extends React.PureComponent<
 
         const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
 
-        this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
+        this.sortedLayoutItems = groupBy(
+            getSortedConfigItems(this.context.config, hasOrderId),
+            (item) => item.parent || DEFAULT_GROUP,
+        );
 
         return this.sortedLayoutItems;
     }
diff --git a/src/typings/config.ts b/src/typings/config.ts
index 3b0dcb2..6a0719f 100644
--- a/src/typings/config.ts
+++ b/src/typings/config.ts
@@ -36,6 +36,7 @@ export type AddNewItemOptions = SetItemOptions & {
 export interface DashkitGroupRenderProps {
     config: Config;
     editMode: boolean;
+    isMobile: boolean;
     items: ConfigItem[];
     layout: ConfigLayout[];
     context: any;