feat: support globalItems in config

src/components/DashKit/__stories__/DashKit.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Meta, Story} from '@storybook/react';
 
-import pluginText from '../../../plugins/Text/Text';
+import pluginText, {PluginTextProps} from '../../../plugins/Text/Text';
 import pluginTitle from '../../../plugins/Title/Title';
 import {cn} from '../../../utils/cn';
 import {DashKit, DashKitProps} from '../DashKit';
@@ -54,11 +54,13 @@ if (!getInitialized()) {
             w: 20,
             h: 20,
         },
-        renderer: function CustomPlugin() {
+        renderer: function CustomPlugin(props: PluginTextProps) {
             return (
                 <div className={b('custom-plugin')}>
                     <div className={b('custom-plugin-container')}>
-                        <div className={b('custom-plugin-text')}>Custom widget</div>
+                        <div className={b('custom-plugin-text')}>
+                            {props.data.text ?? 'Custom widget'}
+                        </div>
                     </div>
                 </div>
             );

src/components/DashKit/__stories__/DashKitShowcase.tsx

@@ -420,7 +420,8 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
     };
 
     private isTitleInConfig() {
-        return Boolean(this.state.config.items.find((item) => item.id === titleId));
+        const allItems = [...this.state.config.items, ...(this.state.config.globalItems || [])];
+        return Boolean(allItems.find((item) => item.id === titleId));
     }
 
     private toggleOverlayControls = () => {

src/components/DashKit/__stories__/utils.ts

@@ -83,6 +83,17 @@ export const getConfig = (withGroups?: boolean): DashKitProps['config'] => ({
               ]
             : []),
     ],
+    globalItems: [
+        {
+            id: 'mJ',
+            data: {
+                text: 'Global item',
+            },
+            type: 'custom',
+            namespace: 'default',
+            orderId: 5,
+        },
+    ],
     layout: [
         {
             h: 2,
@@ -112,6 +123,13 @@ export const getConfig = (withGroups?: boolean): DashKitProps['config'] => ({
             x: 0,
             y: 8,
         },
+        {
+            h: 10,
+            i: 'mJ',
+            w: 10,
+            x: 10,
+            y: 8,
+        },
         ...(withGroups
             ? [
                   {

src/components/GridLayout/GridLayout.js

@@ -260,7 +260,7 @@ export default class GridLayout extends React.PureComponent {
 
             const item = temporaryLayout
                 ? temporaryLayout.dragProps
-                : this.context.config.items.find(({id}) => id === layoutId);
+                : this.context.configItems.find(({id}) => id === layoutId);
 
             let {offsetX, offsetY} = e.nativeEvent || {};
             if (offsetX === undefined || offsetY === undefined) {
@@ -697,7 +697,7 @@ export default class GridLayout extends React.PureComponent {
     render() {
         const {config, groups, editMode, context} = this.context;
 
-        this.pluginsRefs.length = config.items.length;
+        this.pluginsRefs.length = this.context.configItems.length;
 
         const defaultRenderLayout = [];
         const defaultRenderItems = [];
@@ -718,7 +718,7 @@ export default class GridLayout extends React.PureComponent {
             return memo;
         }, []);
 
-        const itemsByGroup = config.items.reduce((memo, item) => {
+        const itemsByGroup = this.context.configItems.reduce((memo, item) => {
             const group = layoutMap[item.id];
             if (group) {
                 if (!memo[group]) {

src/components/MobileLayout/MobileLayout.tsx

@@ -40,9 +40,16 @@ export default class MobileLayout extends React.PureComponent<
     };
 
     render() {
-        const {config, layout, groups = [{id: DEFAULT_GROUP}], context, editMode} = this.context;
+        const {
+            config,
+            layout,
+            groups = [{id: DEFAULT_GROUP}],
+            context,
+            editMode,
+            configItems,
+        } = this.context;
 
-        this.pluginsRefs.length = config.items.length;
+        this.pluginsRefs.length = configItems.length;
 
         const sortedItems = this.getSortedLayoutItems();
         let indexOffset = 0;
@@ -104,10 +111,10 @@ export default class MobileLayout extends React.PureComponent<
 
         this._memoLayout = this.context.layout;
 
-        const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
+        const hasOrderId = Boolean(this.context.configItems.find((item) => item.orderId));
 
         this.sortedLayoutItems = groupBy(
-            getSortedConfigItems(this.context.config, hasOrderId),
+            getSortedConfigItems(this.context.config, this.context.configItems, hasOrderId),
             (item) => item.parent || DEFAULT_GROUP,
         );
 

src/components/MobileLayout/helpers.ts

@@ -26,10 +26,14 @@ const getWidgetsSortComparator = (hasOrderId: boolean) => {
               prev.y === next.y ? prev.x - next.x : prev.y - next.y;
 };
 
-export const getSortedConfigItems = (config: DashKitProps['config'], hasOrderId: boolean) => {
+export const getSortedConfigItems = (
+    config: DashKitProps['config'],
+    configItems: ConfigItem[],
+    hasOrderId: boolean,
+) => {
     const sortComparator = getWidgetsSortComparator(hasOrderId);
 
-    return config.items
+    return configItems
         .map((item, index) => Object.assign({}, item, config.layout[index]))
         .sort(sortComparator);
 };

src/context/DashKitContext.ts

@@ -39,6 +39,7 @@ export type DashKitCtxShape = DashkitPropsPassedToCtx & {
     registerManager: RegisterManager;
     forwardedMetaRef: React.ForwardedRef<any>;
 
+    configItems: ConfigItem[];
     layout: ConfigLayout[];
     temporaryLayout: ConfigLayout[] | null;
     memorizeOriginalLayout: (

src/hocs/withContext.js

@@ -12,7 +12,7 @@ import {
 } from '../constants/common';
 import {DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext} from '../context';
 import {useDeepEqualMemo} from '../hooks/useDeepEqualMemo';
-import {getItemsParams, getItemsState} from '../shared';
+import {getAllConfigItems, getItemsParams, getItemsState} from '../shared';
 import {UpdateManager, resolveLayoutGroup} from '../utils';
 
 const ITEM_PROPS = ['i', 'h', 'w', 'x', 'y', 'parent'];
@@ -104,6 +104,12 @@ function useMemoStateContext(props) {
         [props.config.layout],
     );
 
+    // to calculate items, only memorization of items and globalItems is important
+    const configItems = React.useMemo(
+        () => getAllConfigItems(props.config),
+        [props.config.items, props.config.globalItems],
+    );
+
     const onItemRemove = React.useCallback(
         (id) => {
             delete nowrapAdjustedLayouts.current[id];
@@ -130,12 +136,12 @@ function useMemoStateContext(props) {
             }
         },
         [
-            props.config,
-            props.itemsStateAndParams,
+            resetTemporaryLayout,
             temporaryLayout,
             onChange,
+            props.config,
+            props.itemsStateAndParams,
             setTemporaryLayout,
-            resetTemporaryLayout,
         ],
     );
 
@@ -433,6 +439,7 @@ function useMemoStateContext(props) {
     const dashkitContextValue = React.useMemo(
         () => ({
             config: props.config,
+            configItems,
             groups: props.groups,
             context: props.context,
             noOverlay: props.noOverlay,
@@ -481,6 +488,7 @@ function useMemoStateContext(props) {
             resultLayout,
             temporaryLayout,
             props.config,
+            configItems,
             props.groups,
             props.context,
             props.noOverlay,

src/hooks/useCalcLayout.ts

@@ -2,21 +2,33 @@ import React from 'react';
 
 import isEqual from 'lodash/isEqual';
 
-import type {Config} from '../shared';
+import {type Config, type ConfigItem, type ConfigLayout, getAllConfigItems} from '../shared';
 import {RegisterManager} from '../utils';
 
 function onUpdatePropsConfig(config: Config, registerManager: RegisterManager) {
-    return config.layout.map((itemLayout, i) => {
-        const {type} = config.items[i];
-        return {
-            ...registerManager.getItem(type).defaultLayout,
-            ...itemLayout,
-        };
-    });
+    const configItems = getAllConfigItems(config);
+
+    return config.layout.reduce<ConfigLayout[]>((acc, itemLayout, i) => {
+        const item: ConfigItem | undefined = configItems[i];
+        const foundItem =
+            item && item.id === itemLayout.i
+                ? item
+                : configItems.find((configItem) => configItem.id === itemLayout.i);
+
+        if (foundItem) {
+            acc.push({
+                ...registerManager.getItem(foundItem.type).defaultLayout,
+                ...itemLayout,
+            });
+        }
+
+        return acc;
+    }, []);
 }
 
 export const useCalcPropsLayout = (config: Config, registerManager: RegisterManager) => {
     const [prevConfig, setPrevConfig] = React.useState(config);
+
     const [layout, updateLayout] = React.useState(onUpdatePropsConfig(config, registerManager));
 
     if (!isEqual(prevConfig.layout, config.layout)) {