diff --git a/src/components/DashKit/DashKit.tsx b/src/components/DashKit/DashKit.tsx index 301ed38..edefd71 100644 --- a/src/components/DashKit/DashKit.tsx +++ b/src/components/DashKit/DashKit.tsx @@ -168,12 +168,20 @@ export class DashKit extends React.PureComponent { return UpdateManager.removeItem({id, config, itemsStateAndParams}); } - static reflowLayout( - newLayoutItem: ConfigLayout, - layout: ConfigLayout[], - groups?: DashKitGroup[], - ) { - return reflowLayout(newLayoutItem, layout, getReflowGroupsConfig(groups)); + static reflowLayout({ + newLayoutItem, + layout, + groups, + }: { + newLayoutItem?: ConfigLayout; + layout: ConfigLayout[]; + groups?: DashKitGroup[]; + }) { + return reflowLayout({ + newLayoutItem, + layout, + reflowLayoutOptions: getReflowGroupsConfig(groups), + }); } metaRef = React.createRef(); diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index 10a8d96..be809de 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx @@ -167,11 +167,11 @@ export const DashKitGroupsShowcase: React.FC = () => { setConfig({ ...config, - layout: DashKit.reflowLayout( - copyItem, - config.layout.filter(({i}) => i !== itemId), + layout: DashKit.reflowLayout({ + newLayoutItem: copyItem, + layout: config.layout.filter(({i}) => i !== itemId), groups, - ), + }), }); }; diff --git a/src/utils/update-manager.ts b/src/utils/update-manager.ts index 8e99b5d..1b8679f 100644 --- a/src/utils/update-manager.ts +++ b/src/utils/update-manager.ts @@ -391,11 +391,15 @@ function changeGroupParams({ return update(itemsStateAndParams, obj); } -export function reflowLayout( - newLayoutItem: ConfigLayout, - layout: ConfigLayout[], - reflowLayoutOptions: ReflowLayoutOptions, -) { +export function reflowLayout({ + newLayoutItem, + layout, + reflowLayoutOptions, +}: { + newLayoutItem?: ConfigLayout; + layout: ConfigLayout[]; + reflowLayoutOptions: ReflowLayoutOptions; +}) { const byGroup: Record = {}; const reducer = ( memo: Record, @@ -421,7 +425,10 @@ export function reflowLayout( }; const orderById = layout.reduce>(reducer, {}); - reducer(orderById, newLayoutItem, layout.length, layout, true); + + if (newLayoutItem) { + reducer(orderById, newLayoutItem, layout.length, layout, true); + } const {defaultProps} = reflowLayoutOptions; @@ -489,11 +496,11 @@ export class UpdateManager { const newLayoutItem = {...saveDefaultLayout, i: newItem.id}; if (options.reflowLayoutOptions) { - newLayout = reflowLayout( + newLayout = reflowLayout({ newLayoutItem, - config.layout.map((t) => ({...t, ...(byId[t.i] || {})})), - options.reflowLayoutOptions, - ); + layout: config.layout.map((t) => ({...t, ...(byId[t.i] || {})})), + reflowLayoutOptions: options.reflowLayoutOptions, + }); } else { newLayout = [ ...config.layout.map((t) => ({...t, ...(byId[t.i] || {})})), @@ -511,7 +518,11 @@ export class UpdateManager { const newLayoutItem = {...saveDefaultLayout, i: newItem.id}; if (options.reflowLayoutOptions) { - newLayout = reflowLayout(newLayoutItem, config.layout, options.reflowLayoutOptions); + newLayout = reflowLayout({ + newLayoutItem, + layout: config.layout, + reflowLayoutOptions: options.reflowLayoutOptions, + }); } else { newLayout = [...config.layout, newLayoutItem]; }