diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index 81f1099..438e628 100644 --- 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 ( { @@ -328,7 +333,7 @@ export const DashKitGroupsShowcase: React.FC = () => { overlayMenuItems={overlayMenuItems} onDragStart={updateConfigOrder} onResizeStart={updateConfigOrder} - context={{editModeHeader: headerInteractions}} + context={context} /> diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js index ae7bf24..be69810 100644 --- 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} /> {!noOverlay && this.renderOverlay()} diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index 129a1b5..6c65d8f 100644 --- 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)} ); } diff --git a/src/hocs/prepareItem.js b/src/hocs/prepareItem.js index 229f1bd..98e60d8 100644 --- a/src/hocs/prepareItem.js +++ b/src/hocs/prepareItem.js @@ -1,5 +1,6 @@ import React from 'react'; +import isEqual from 'lodash/isEqual'; import PropTypes from 'prop-types'; import {DashKitContext} from '../context/DashKitContext'; @@ -7,6 +8,7 @@ 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;