feat: group properties (#152)

gravity-ui · Jul 4, 2024 · ac39f67 · ac39f67
1 parent e3a919d
commit ac39f67
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git 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
@@ -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
@@ -21,11 +21,31 @@ 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?: (
         id: string,
         children: React.ReactNode,
         props: DashkitGroupRenderProps,
     ) => React.ReactNode;
+    gridProperties?: (props: ReactGridLayoutProps) => ReactGridLayoutProps;
 }