feat: mobile layout render groups

gravity-ui · Dec 16, 2024 · 7c3543a · 7c3543a
1 parent 1c0ea1c
commit 7c3543a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 24 deletions.
diff --git 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
@@ -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,35 +40,53 @@ 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;
 
         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>
-                    );
+                {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
@@ -36,6 +36,7 @@ export type AddNewItemOptions = SetItemOptions & {
 export interface DashkitGroupRenderProps {
     config: Config;
     editMode: boolean;
+    isMobile: boolean;
     items: ConfigItem[];
     layout: ConfigLayout[];
     context: any;