feat: pass gridLayout setting for each group (#220)

* feat: pass gridLayout setting for each group * fix: added deep check for gridLayout item prop
gravity-ui · Nov 21, 2024 · f148978 · f148978
1 parent af61e22
commit f148978
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx
@@ -284,6 +284,11 @@ export const DashKitGroupsShowcase: React.FC = () => {
         [config],
     );
 
+    const context = React.useMemo(
+        () => ({editModeHeader: headerInteractions}),
+        [headerInteractions],
+    );
+
     return (
         <DashKitDnDWrapper
             onDragStart={() => {
@@ -328,7 +333,7 @@ export const DashKitGroupsShowcase: React.FC = () => {
                         overlayMenuItems={overlayMenuItems}
                         onDragStart={updateConfigOrder}
                         onResizeStart={updateConfigOrder}
-                        context={{editModeHeader: headerInteractions}}
+                        context={context}
                     />
                     <ActionPanel items={items} />
                 </DemoRow>

diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js
@@ -48,6 +48,7 @@ const windowFocusObserver = new WindowFocusObserver();
 class GridItem extends React.PureComponent {
     static propTypes = {
         adjustWidgetLayout: PropTypes.func.isRequired,
+        gridLayout: PropTypes.object,
         id: PropTypes.string,
         item: PropTypes.object,
         isDragging: PropTypes.bool,
@@ -222,6 +223,7 @@ class GridItem extends React.PureComponent {
                         forwardedPluginRef={this.props.forwardedPluginRef}
                         onItemMountChange={this.props.onItemMountChange}
                         onItemRender={this.props.onItemRender}
+                        gridLayout={this.props.gridLayout}
                     />
                 </div>
                 {!noOverlay && this.renderOverlay()}

diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js
@@ -551,7 +551,7 @@ export default class GridLayout extends React.PureComponent {
         return false;
     };
 
-    renderTemporaryPlaceholder() {
+    renderTemporaryPlaceholder(gridLayout) {
         const {temporaryLayout, noOverlay, draggableHandleClassName} = this.context;
 
         if (!temporaryLayout || !temporaryLayout.dragProps) {
@@ -572,6 +572,7 @@ export default class GridLayout extends React.PureComponent {
                 isPlaceholder={true}
                 noOverlay={noOverlay}
                 withCustomHandle={Boolean(draggableHandleClassName)}
+                gridLayout={gridLayout}
             />
         );
     }
@@ -662,10 +663,11 @@ export default class GridLayout extends React.PureComponent {
                             withCustomHandle={Boolean(draggableHandleClassName)}
                             onItemMountChange={onItemMountChange}
                             onItemRender={onItemRender}
+                            gridLayout={properties}
                         />
                     );
                 })}
-                {this.renderTemporaryPlaceholder()}
+                {this.renderTemporaryPlaceholder(properties)}
             </Layout>
         );
     }

diff --git a/src/hocs/prepareItem.js b/src/hocs/prepareItem.js
@@ -1,12 +1,14 @@
 import React from 'react';
 
+import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 
 import {DashKitContext} from '../context/DashKitContext';
 
 export function prepareItem(Component) {
     return class PrepareItem extends React.Component {
         static propTypes = {
+            gridLayout: PropTypes.object,
             adjustWidgetLayout: PropTypes.func.isRequired,
             layout: PropTypes.array,
             id: PropTypes.string,
@@ -45,7 +47,8 @@ export function prepareItem(Component) {
 
         _currentRenderProps = {};
         getRenderProps = () => {
-            const {id, width, height, item, adjustWidgetLayout, layout, isPlaceholder} = this.props;
+            const {id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, gridLayout} =
+                this.props;
             const {itemsState, itemsParams, registerManager, settings, context, editMode} =
                 this.context;
             const {data, defaults, namespace} = item;
@@ -64,14 +67,19 @@ export function prepareItem(Component) {
                 settings,
                 context,
                 layout,
-                gridLayout: registerManager.gridLayout,
+                gridLayout: gridLayout || registerManager.gridLayout,
                 adjustWidgetLayout,
                 isPlaceholder,
             };
 
-            const changedProp = Object.entries(rendererProps).find(
-                ([key, value]) => this._currentRenderProps[key] !== value,
-            );
+            const changedProp = Object.entries(rendererProps).find(([key, value]) => {
+                // Checking gridLayoout deep as groups gridProperties method has tendancy to creat new objects
+                if (key === 'gridLayout') {
+                    return !isEqual(this._currentRenderProps[key], value);
+                }
+
+                return this._currentRenderProps[key] !== value;
+            });
 
             if (changedProp) {
                 this._currentRenderProps = rendererProps;