diff --git a/demo/index.js b/demo/index.js index 619dc37..913865a 100644 --- a/demo/index.js +++ b/demo/index.js @@ -168,6 +168,34 @@ function Singleton() { ); } +function SingletonHeadlessDynamicContent() { + const [source, target] = useSingletonHeadless(); + const [count, setCount] = useState(0); + + useEffect(() => { + setInterval(() => { + setCount(c => c + 1); + }, 1000); + }, []); + + return ( + <> + ( + {content} + )} + singleton={source} + /> + + + + + + + + ); +} + function SingletonHeadless() { const [source, target] = useSingletonHeadless({overrides: ['placement']}); const [enabled, setEnabled] = useState(false); @@ -365,6 +393,8 @@ function App() {

Singleton Headless

+

Singleton Headless Dynamic Content

+

Nested Singleton

Plugins

diff --git a/src/Tippy.js b/src/Tippy.js index 393fa56..10a4098 100644 --- a/src/Tippy.js +++ b/src/Tippy.js @@ -71,22 +71,27 @@ export default function TippyGenerator(tippy) { if (render) { computedProps = { ...props, - plugins: isSingletonMode - ? [ - ...plugins, - { - fn: () => ({ - onTrigger(_, event) { - const {content} = singleton.data.children.find( - ({instance}) => - instance.reference === event.currentTarget, - ); - setSingletonContent(content); + plugins: + isSingletonMode && singleton.data != null + ? [ + ...plugins, + { + fn() { + return { + onTrigger(instance, event) { + const node = singleton.data.children.find( + ({instance}) => + instance.reference === event.currentTarget, + ); + instance.state.$$activeSingletonInstance = + node.instance; + setSingletonContent(node.content); + }, + }; }, - }), - }, - ] - : plugins, + }, + ] + : plugins, render: () => ({popper: mutableBox.container}), }; } @@ -120,6 +125,7 @@ export default function TippyGenerator(tippy) { instance, content, props: computedProps, + setSingletonContent, }); } @@ -165,6 +171,7 @@ export default function TippyGenerator(tippy) { instance, content, props: computedProps, + setSingletonContent, }); } }); diff --git a/src/useSingleton.js b/src/useSingleton.js index faf7921..a675946 100644 --- a/src/useSingleton.js +++ b/src/useSingleton.js @@ -95,6 +95,7 @@ export default function useSingletonGenerator(createSingleton) { data: mutableBox, hook(data) { mutableBox.sourceData = data; + mutableBox.setSingletonContent = data.setSingletonContent; }, cleanup() { mutableBox.sourceData = null; @@ -103,18 +104,23 @@ export default function useSingletonGenerator(createSingleton) { const target = { hook(data) { + mutableBox.children = mutableBox.children.filter( + ({instance}) => data.instance !== instance, + ); + mutableBox.children.push(data); + if ( - !mutableBox.children.find( - ({instance}) => data.instance === instance, - ) + mutableBox.instance?.state.isMounted && + mutableBox.instance?.state.$$activeSingletonInstance === + data.instance ) { - mutableBox.children.push(data); + mutableBox.setSingletonContent?.(data.content); + } - if (mutableBox.instance && !mutableBox.instance.state.isDestroyed) { - mutableBox.instance.setInstances( - mutableBox.children.map(child => child.instance), - ); - } + if (mutableBox.instance && !mutableBox.instance.state.isDestroyed) { + mutableBox.instance.setInstances( + mutableBox.children.map(child => child.instance), + ); } }, cleanup(instance) {