diff --git a/README.md b/README.md index d8f4509..b27b8e1 100644 --- a/README.md +++ b/README.md @@ -193,6 +193,12 @@ export interface MosaicBaseProps { * default: Simple NonIdealState view */ zeroStateView?: JSX.Element; + /** + * Override the mosaicId passed to `react-dnd` to control how drag and drop works with other components + * Note: does not support updating after instantiation + * default: Random UUID + */ + mosaicId?: string; } export interface MosaicControlledProps extends MosaicBaseProps { diff --git a/src/Mosaic.tsx b/src/Mosaic.tsx index e12a757..cf1917c 100644 --- a/src/Mosaic.tsx +++ b/src/Mosaic.tsx @@ -46,6 +46,12 @@ export interface MosaicBaseProps { * default: Simple NonIdealState view */ zeroStateView?: JSX.Element; + /** + * Override the mosaicId passed to `react-dnd` to control how drag and drop works with other components + * Note: does not support updating after instantiation + * default: Random UUID + */ + mosaicId?: string; } export interface MosaicControlledProps extends MosaicBaseProps { @@ -89,6 +95,10 @@ export class MosaicWithoutDragDropContext extends nextProps: Readonly>, prevState: MosaicState, ): Partial> | null { + if (nextProps.mosaicId && prevState.mosaicId !== nextProps.mosaicId && process.env.NODE_ENV !== 'production') { + throw new Error('Mosaic does not support updating the mosaicId after instantiation'); + } + if (isUncontrolled(nextProps) && nextProps.initialValue !== prevState.lastInitialValue) { return { lastInitialValue: nextProps.initialValue, @@ -102,7 +112,7 @@ export class MosaicWithoutDragDropContext extends state: MosaicState = { currentNode: null, lastInitialValue: null, - mosaicId: uuid(), + mosaicId: this.props.mosaicId ?? uuid(), }; render() { diff --git a/src/MosaicWindow.tsx b/src/MosaicWindow.tsx index 4c633ed..c831222 100644 --- a/src/MosaicWindow.tsx +++ b/src/MosaicWindow.tsx @@ -14,7 +14,7 @@ import { DropTarget, } from 'react-dnd'; -import { DEFAULT_CONTROLS_WITH_CREATION, DEFAULT_CONTROLS_WITHOUT_CREATION } from './buttons/defaultToolbarControls'; +import { DEFAULT_CONTROLS_WITHOUT_CREATION, DEFAULT_CONTROLS_WITH_CREATION } from './buttons/defaultToolbarControls'; import { Separator } from './buttons/Separator'; import { MosaicContext, MosaicWindowContext } from './contextTypes'; import { MosaicDragItem, MosaicDropData, MosaicDropTargetPosition } from './internalTypes';