From ac39f677a0131b3196e0d913c0952fa0eab1ee26 Mon Sep 17 00:00:00 2001
From: Serge Pavlyuk <sergeypavlyuk@yandex-team.ru>
Date: Thu, 4 Jul 2024 12:07:43 +0300
Subject: [PATCH] feat: group properties (#152)

---
 .../__stories__/DashKitGroupsShowcase.tsx     |  7 ++++++-
 src/components/GridLayout/GridLayout.js       | 14 +++++++++----
 src/typings/config.ts                         | 20 +++++++++++++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx
index e4d30a4..4976162 100644
--- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx
+++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx
@@ -7,8 +7,10 @@ import {
     ActionPanel,
     DashKit,
     DashKitDnDWrapper,
+    DashKitGroup,
     DashKitProps,
     DashkitGroupRenderProps,
+    ReactGridLayoutProps,
 } from '../../..';
 import {DEFAULT_GROUP, MenuItems} from '../../../helpers';
 import {i18n} from '../../../i18n';
@@ -153,7 +155,7 @@ export const DashKitGroupsShowcase: React.FC = () => {
         [config],
     );
 
-    const groups = React.useMemo(
+    const groups = React.useMemo<DashKitGroup[]>(
         () => [
             {
                 id: fixedGroup,
@@ -185,6 +187,9 @@ export const DashKitGroupsShowcase: React.FC = () => {
                         </div>
                     );
                 },
+                gridProperties: (props: ReactGridLayoutProps) => {
+                    return {...props, compactType: 'horizontal'};
+                },
             },
             {
                 id: DEFAULT_GROUP,
diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js
index 4fabddd..69e9c9a 100644
--- a/src/components/GridLayout/GridLayout.js
+++ b/src/components/GridLayout/GridLayout.js
@@ -203,7 +203,7 @@ export default class GridLayout extends React.PureComponent {
         );
     }
 
-    renderGroup(group, renderLayout, renderItems, offset = 0) {
+    renderGroup(group, renderLayout, renderItems, offset = 0, groupGridProperties) {
         const {
             registerManager,
             editMode,
@@ -213,11 +213,17 @@ export default class GridLayout extends React.PureComponent {
             outerDnDEnable,
         } = this.context;
 
+        const properties = groupGridProperties
+            ? groupGridProperties({
+                  ...registerManager.gridLayout,
+              })
+            : registerManager.gridLayout;
+
         return (
             <Layout
-                {...registerManager.gridLayout}
-                key={`group_${group}`}
+                {...properties}
                 layout={renderLayout}
+                key={`group_${group}`}
                 isDraggable={editMode}
                 isResizable={editMode}
                 onDragStart={this._onStart}
@@ -314,7 +320,7 @@ export default class GridLayout extends React.PureComponent {
                     items = itemsByGroup[id] || [];
                 }
 
-                const element = this.renderGroup(id, layout, items, offset);
+                const element = this.renderGroup(id, layout, items, offset, group.gridProperties);
                 offset += items.length;
 
                 if (group.render) {
diff --git a/src/typings/config.ts b/src/typings/config.ts
index 8878604..8604ff8 100644
--- a/src/typings/config.ts
+++ b/src/typings/config.ts
@@ -21,6 +21,25 @@ export interface DashkitGroupRenderProps {
     layout: ConfigLayout[];
 }
 
+export type ReactGridLayoutProps = Omit<
+    ReactGridLayout.ReactGridLayoutProps,
+    | 'children'
+    | 'innerRef'
+    | 'key'
+    | 'layout'
+    | 'isDraggable'
+    | 'isResizable'
+    | 'onDragStart'
+    | 'onDragStop'
+    | 'onResizeStart'
+    | 'onResizeStop'
+    | 'draggableHandle'
+    | 'isDroppable'
+    | 'onDropDragOver'
+    | 'onDrop'
+    | 'draggableCancel'
+>;
+
 export interface DashKitGroup {
     id?: string;
     render?: (
@@ -28,4 +47,5 @@ export interface DashKitGroup {
         children: React.ReactNode,
         props: DashkitGroupRenderProps,
     ) => React.ReactNode;
+    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }