GridLayout.tsx

widgetMapping distribution

This is a fairly stable prop and is used in almost all places. It should be shared via a simple "configuration" context within this module.

drop item template

const droppingItemTemplate: ReactGridLayoutProps['droppingItem'] = useMemo(() => {if (currentDropInItem && isWidgetType(widgetMapping, currentDropInItem)) {const widget = widgetMapping[currentDropInItem];if (!widget)

{return undefined;}

return

{ ...widget.defaults,i: droppingElemId,widgetType: currentDropInItem,title: 'New title',config: widget.config,}

;}return undefined;}, [currentDropInItem, widgetMapping]);
 
The title: 'New title', is not customizable. It should be. A new widget title should be either provided within the widget mapping and have a configurable default value. It can also be provided via the customization context.

ExtendedLayoutItem type

Because of the widget mapping, we also have to make this type generic. The top level props item needs to have additional generic interface in itself so the type of individual items can be further customized. For example, HCC will require additional scope, module, and importName props on our widget mapping as we will use a single component for all widgets.

LayoutEmptyState interface

Needs to be exported in case customization of empty state is needed to avoid extensive prop passing.

Needs additional interface to customize the default text. Required for translations.

internal state handling

const [internalTemplate, setInternalTemplate] = useState<ExtendedTemplateConfig>(template);
 
Should not exist, the template should be always passed by the package consumer.

inline css

style={{ position: 'relative' }}
 

generic id

<div id="widget-layout-container" style={{ position: 'relative' }} ref=

{layoutRef}

>
 
This will either have to be configurable (config context) or have a random ID so it's not causing issues with duplicate IDs. PF does have a system to generate IDs.

resize handle customization

resizeHandles=

{['sw', 'nw', 'se', 'ne']}

 
We may not always want these. Needs to be customizable.