diff --git a/__tests__/integration/mirador/plugins/add.html b/__tests__/integration/mirador/plugins/add.html index fd3cd963109d415c3cd13ba1190698ab408bc861..d2dc92960a44ba00b9a3b5429f7160e27cf4263b 100644 --- a/__tests__/integration/mirador/plugins/add.html +++ b/__tests__/integration/mirador/plugins/add.html @@ -61,7 +61,7 @@ config: { foo: 'bar', }, - component: AddPluginComponentA, + component: <AddPluginComponentA />, }; const addPluginB = { diff --git a/__tests__/src/extend/pluginMapping.test.js b/__tests__/src/extend/pluginMapping.test.js index 735d9f6033831d4fe0fad840edc191a3a9c5909f..2d699e3f6c8962bcede3ac59a433ad41a22e454a 100644 --- a/__tests__/src/extend/pluginMapping.test.js +++ b/__tests__/src/extend/pluginMapping.test.js @@ -58,8 +58,12 @@ describe('connectPluginsToStore', () => { const ComponentB = props => null; const plugins = [ - { component: ComponentA, mode: 'wrap', target: 'Window' }, - { component: ComponentB, mode: 'add', target: 'TopBar' }, + { + component: ComponentA, mapStateToProps: {}, mode: 'wrap', target: 'Window', + }, + { + component: ComponentB, mapDispatchToProps: {}, mode: 'add', target: 'TopBar', + }, ]; const result = connectPluginsToStore(plugins); @@ -67,6 +71,20 @@ describe('connectPluginsToStore', () => { expect(result[0].component.displayName).toBe('Connect(ComponentA)'); expect(result[1].component.displayName).toBe('Connect(ComponentB)'); }); + + it('returns plugins unchanged that do not need a connection to the store', () => { + /** */ + const ComponentA = props => null; + + const plugins = [ + { + component: ComponentA, mode: 'wrap', target: 'Window', + }, + ]; + + const result = connectPluginsToStore(plugins); + expect(result[0].component).toEqual(ComponentA); + }); }); describe('addPluginsToCompanionWindowsRegistry', () => { diff --git a/src/components/PluginHook.js b/src/components/PluginHook.js index bdfcb325c179b88262320ee513af68b6b14a90dc..5c16c579c4626486181a9b7c523ce366eaadf7b8 100644 --- a/src/components/PluginHook.js +++ b/src/components/PluginHook.js @@ -6,11 +6,15 @@ export const PluginHook = React.forwardRef((props, ref) => { const { classes, ...otherProps } = props; // eslint-disable-line react/prop-types return PluginComponents ? ( PluginComponents.map((PluginComponent, index) => ( // eslint-disable-line react/prop-types - <PluginComponent - ref={ref} - {...otherProps} - key={index} // eslint-disable-line react/no-array-index-key - /> + React.isValidElement(PluginComponent) + ? React.cloneElement(PluginComponent, { ...otherProps, ref }) + : ( + <PluginComponent + ref={ref} + {...otherProps} + key={index} // eslint-disable-line react/no-array-index-key + /> + ) )) ) : null; }); diff --git a/src/extend/pluginMapping.js b/src/extend/pluginMapping.js index 895c7e8c16bdda2e29841c907d97fa55f67d8647..efc449252abff501d89a04062516592fe7c2dd9b 100644 --- a/src/extend/pluginMapping.js +++ b/src/extend/pluginMapping.js @@ -40,6 +40,8 @@ export function addPluginsToCompanionWindowsRegistry(plugins) { /** Connect plugin component to state */ function connectPluginComponent(plugin) { + if (!plugin.mapStateToProps && !plugin.mapDispatchToProps) return plugin.component; + return connect( plugin.mapStateToProps, plugin.mapDispatchToProps,