feat: updating custom breakpoint props

Author: Jakub007d

packages/module/src/WidgetLayout/GridLayout.tsx

@@ -12,14 +12,13 @@ import {
   ExtendedTemplateConfig,
   AnalyticsTracker,
   WidgetConfiguration,
+  Breakpoints,
 } from './types';
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateVariant, PageSection } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import { columns, breakpoints, droppingElemId, getWidgetIdentifier, extendLayout, getGridDimensions } from './utils';
-
-export const defaultBreakpoints = breakpoints;
+import { defaultBreakpoints, defaultColumns, droppingElemId, getWidgetIdentifier, extendLayout, getGridDimensions } from './utils';
 
 const createSerializableConfig = (config?: WidgetConfiguration) => {
   if (!config) { return undefined; }
@@ -63,9 +62,9 @@ export interface GridLayoutProps {
   /** Resize configuration options */
   resizeWidgetConfig?: Partial<ResizeConfig>;
   /** Custom breakpoints for responsive layout (container width thresholds in px) */
-  customBreakpoints?: Record<Variants, number>;
+  breakpoints?: Breakpoints;
   /** Custom column counts per breakpoint variant */
-  customColumns?: Record<Variants, number>;
+  columns?: Record<Variants, number>;
 }
 
 const LayoutEmptyState = ({
@@ -111,10 +110,10 @@ const GridLayout = ({
   onActiveWidgetsChange,
   droppingWidgetType,
   resizeWidgetConfig,
-  customBreakpoints,
-  customColumns,
+  breakpoints = defaultBreakpoints,
+  columns = defaultColumns,
 }: GridLayoutProps) => {
-  const activeColumns = customColumns ?? columns;
+  const activeColumns = columns;
   const [isDragging, setIsDragging] = useState(false);
   const [isInitialRender, setIsInitialRender] = useState(true);
   const [layoutVariant, setLayoutVariant] = useState<Variants>('xl');
@@ -233,10 +232,10 @@ const GridLayout = ({
   // Update layout variant when container width changes
   useEffect(() => {
     if (mounted && layoutWidth > 0) {
-      const variant: Variants = getGridDimensions(layoutWidth, customBreakpoints);
+      const variant: Variants = getGridDimensions(layoutWidth, breakpoints);
       setLayoutVariant(variant);
     }
-  }, [layoutWidth, mounted]);
+  }, [layoutWidth, mounted, breakpoints]);
 
   const activeLayout = internalTemplate[layoutVariant] || [];
 

packages/module/src/WidgetLayout/index.ts

@@ -5,8 +5,8 @@ export { default as WidgetDrawer } from './WidgetDrawer';
 
 export * from './types';
 export {
-  columns,
-  breakpoints,
+  defaultColumns,
+  defaultBreakpoints,
   droppingElemId,
   getWidgetIdentifier,
   mapWidgetDefaults,

packages/module/src/WidgetLayout/types.ts

@@ -5,6 +5,13 @@ export const widgetIdSeparator = '#';
 
 export type Variants = 'sm' | 'md' | 'lg' | 'xl';
 
+export interface Breakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+
 export type LayoutWithTitle = LayoutItem & { title: string };
 
 export type TemplateConfig = {

packages/module/src/WidgetLayout/utils.ts

@@ -1,10 +1,10 @@
-import { ExtendedTemplateConfig, TemplateConfig, Variants, widgetIdSeparator } from './types';
+import { ExtendedTemplateConfig, TemplateConfig, Variants, widgetIdSeparator, Breakpoints } from './types';
 
 export const droppingElemId = '__dropping-elem__';
 
-export const columns: Record<Variants, number> = { xl: 4, lg: 3, md: 2, sm: 1 };
+export const defaultColumns: Record<Variants, number> = { xl: 4, lg: 3, md: 2, sm: 1 };
 
-export const breakpoints: Record<Variants, number> = { xl: 1550, lg: 1400, md: 1100, sm: 800 };
+export const defaultBreakpoints: Breakpoints = { xl: 1550, lg: 1400, md: 1100, sm: 800 };
 
 /**
  * Generate a unique widget identifier
@@ -52,15 +52,14 @@ export const extendLayout = (extendedTemplateConfig: ExtendedTemplateConfig): Ex
 /**
  * Get grid dimensions based on container width
  */
-export function getGridDimensions(currentWidth: number, customBreakpoints?: Record<Variants, number>): Variants {
-  const bp = customBreakpoints ?? breakpoints;
-  if (currentWidth >= bp.xl) {
+export function getGridDimensions(currentWidth: number, breakpoints: Breakpoints = defaultBreakpoints): Variants {
+  if (currentWidth >= breakpoints.xl) {
     return 'xl';
   }
-  if (currentWidth >= bp.lg) {
+  if (currentWidth >= breakpoints.lg) {
     return 'lg';
   }
-  if (currentWidth >= bp.md) {
+  if (currentWidth >= breakpoints.md) {
     return 'md';
   }
   return 'sm';