Support enabled prop in singletons (#138)

* Support `enabled` prop in singletons

* Add enabled prop type

Author: atomiks

index.d.ts

@@ -27,6 +27,7 @@ export const tippy: typeof tippyCore;
 
 export interface TippySingletonProps extends Partial<KnownProps> {
   children: Array<React.ReactElement<any>>;
+  enabled?: boolean;
   className?: string;
   plugins?: Plugin[];
   [key: string]: any;

src/Tippy.js

@@ -7,7 +7,7 @@ import {
   useInstance,
   useIsomorphicLayoutEffect,
   useUpdateClassName,
-} from './hooks';
+} from './util-hooks';
 
 export function Tippy({
   children,

src/TippySingleton.js

@@ -1,16 +1,17 @@
 import {Children, cloneElement} from 'react';
 import PropTypes from 'prop-types';
-import {createSingleton} from 'tippy.js';
 import {
-  useIsomorphicLayoutEffect,
   useInstance,
   useUpdateClassName,
-} from './hooks';
+  useSingletonUpdate,
+  useSingletonCreate,
+} from './util-hooks';
 
 export default function TippySingleton({
   children,
   className,
   plugins,
+  enabled = true,
   ignoreAttributes = true,
   ...restOfNativeProps
 }) {
@@ -24,28 +25,11 @@ export default function TippySingleton({
     ...restOfNativeProps,
   };
 
-  useIsomorphicLayoutEffect(() => {
-    const {instances} = component;
-    const instance = createSingleton(instances, props, plugins);
+  const deps = [children.length];
 
-    component.instance = instance;
-
-    return () => {
-      instance.destroy();
-      component.instances = instances.filter(i => !i.state.isDestroyed);
-    };
-  }, [children.length]);
-
-  useIsomorphicLayoutEffect(() => {
-    if (component.renders === 1) {
-      component.renders++;
-      return;
-    }
-
-    component.instance.setProps(props);
-  });
-
-  useUpdateClassName(component, className, children.length);
+  useSingletonCreate(component, props, plugins, enabled, deps);
+  useSingletonUpdate(component, props, enabled);
+  useUpdateClassName(component, className, deps);
 
   return Children.map(children, child => {
     return cloneElement(child, {

src/hooks.js

@@ -1,39 +1,14 @@
-import {isBrowser, updateClassName} from './utils';
-import {useLayoutEffect, useEffect, useRef} from 'react';
-import {createSingleton} from 'tippy.js';
-
-export const useIsomorphicLayoutEffect = isBrowser
-  ? useLayoutEffect
-  : useEffect;
-
-export function useUpdateClassName(component, className, childrenDep) {
-  useIsomorphicLayoutEffect(() => {
-    const {tooltip} = component.instance.popperChildren;
-    if (className) {
-      updateClassName(tooltip, 'add', className);
-      return () => {
-        updateClassName(tooltip, 'remove', className);
-      };
-    }
-  }, [className, childrenDep]);
-}
-
-export function useInstance(initialValue) {
-  // Using refs instead of state as it's recommended to not store imperative
-  // values in state due to memory problems in React(?)
-  const ref = useRef();
-
-  if (!ref.current) {
-    ref.current =
-      typeof initialValue === 'function' ? initialValue() : initialValue;
-  }
-
-  return ref.current;
-}
+import {
+  useInstance,
+  useSingletonCreate,
+  useSingletonUpdate,
+  useUpdateClassName,
+} from './util-hooks';
 
 export function useSingleton({
   className,
   plugins,
+  enabled = true,
   ignoreAttributes = true,
   ...restOfNativeProps
 } = {}) {
@@ -48,28 +23,11 @@ export function useSingleton({
     ...restOfNativeProps,
   };
 
-  useIsomorphicLayoutEffect(() => {
-    const {instances} = component;
-    const instance = createSingleton(instances, props, plugins);
-
-    component.instance = instance;
-
-    return () => {
-      instance.destroy();
-      component.instances = instances.filter(i => !i.state.isDestroyed);
-    };
-  }, [component.instances.length]);
-
-  useIsomorphicLayoutEffect(() => {
-    if (component.renders === 1) {
-      component.renders++;
-      return;
-    }
-
-    component.instance.setProps(props);
-  });
+  const deps = [component.instances.length];
 
-  useUpdateClassName(component, className, component.instances.length);
+  useSingletonCreate(component, props, plugins, enabled, deps);
+  useSingletonUpdate(component, props, enabled);
+  useUpdateClassName(component, className, deps);
 
   return instance => {
     component.instances.push(instance);

src/util-hooks.js

@@ -0,0 +1,69 @@
+import {isBrowser, updateClassName} from './utils';
+import {useLayoutEffect, useEffect, useRef} from 'react';
+import {createSingleton} from 'tippy.js';
+
+export const useIsomorphicLayoutEffect = isBrowser
+  ? useLayoutEffect
+  : useEffect;
+
+export function useUpdateClassName(component, className, deps) {
+  useIsomorphicLayoutEffect(() => {
+    const {tooltip} = component.instance.popperChildren;
+    if (className) {
+      updateClassName(tooltip, 'add', className);
+      return () => {
+        updateClassName(tooltip, 'remove', className);
+      };
+    }
+  }, [className, ...deps]);
+}
+
+export function useInstance(initialValue) {
+  // Using refs instead of state as it's recommended to not store imperative
+  // values in state due to memory problems in React(?)
+  const ref = useRef();
+
+  if (!ref.current) {
+    ref.current =
+      typeof initialValue === 'function' ? initialValue() : initialValue;
+  }
+
+  return ref.current;
+}
+
+export function useSingletonCreate(component, props, plugins, enabled, deps) {
+  useIsomorphicLayoutEffect(() => {
+    const {instances} = component;
+    const instance = createSingleton(instances, props, plugins);
+
+    component.instance = instance;
+
+    if (!enabled) {
+      instance.disable();
+    }
+
+    return () => {
+      instance.destroy();
+      component.instances = instances.filter(i => !i.state.isDestroyed);
+    };
+  }, deps);
+}
+
+export function useSingletonUpdate(component, props, enabled) {
+  useIsomorphicLayoutEffect(() => {
+    if (component.renders === 1) {
+      component.renders++;
+      return;
+    }
+
+    const {instance} = component;
+
+    instance.setProps(props);
+
+    if (enabled) {
+      instance.enable();
+    } else {
+      instance.disable();
+    }
+  });
+}

test/TippySingleton.test.js

@@ -228,6 +228,62 @@ describe('<TippySingleton />', () => {
     expect(tooltip.classList.contains('one')).toBe(true);
   });
 
+  test('props.enabled initially `true`', () => {
+    const {rerender} = render(
+      <TippySingleton enabled={true}>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+      </TippySingleton>,
+    );
+
+    expect(instance.state.isEnabled).toBe(true);
+
+    rerender(
+      <TippySingleton enabled={false}>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+      </TippySingleton>,
+    );
+
+    expect(instance.state.isEnabled).toBe(false);
+  });
+
+  test('props.enabled initially `false`', () => {
+    const {rerender} = render(
+      <TippySingleton enabled={false}>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+      </TippySingleton>,
+    );
+
+    expect(instance.state.isEnabled).toBe(false);
+
+    rerender(
+      <TippySingleton enabled={true}>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+        <Tippy content="tooltip">
+          <button />
+        </Tippy>
+      </TippySingleton>,
+    );
+
+    expect(instance.state.isEnabled).toBe(true);
+  });
+
   test('props.plugins', () => {
     const plugins = [{fn: () => ({})}];
 

test/useSingleton.test.js

@@ -202,6 +202,60 @@ describe('The useSingleton hook', () => {
     ).toBe(true);
   });
 
+  test('props.enabled initially `true`', () => {
+    let instance;
+
+    function App({enabled}) {
+      const singleton = useSingleton({
+        enabled,
+        onCreate(i) {
+          instance = i;
+        },
+      });
+
+      return (
+        <Tippy singleton={singleton}>
+          <button />
+        </Tippy>
+      );
+    }
+
+    const {rerender} = render(<App enabled={true} />);
+
+    expect(instance.state.isEnabled).toBe(true);
+
+    rerender(<App enabled={false} />);
+
+    expect(instance.state.isEnabled).toBe(false);
+  });
+
+  test('props.enabled initially `false`', () => {
+    let instance;
+
+    function App({enabled}) {
+      const singleton = useSingleton({
+        enabled,
+        onCreate(i) {
+          instance = i;
+        },
+      });
+
+      return (
+        <Tippy singleton={singleton}>
+          <button />
+        </Tippy>
+      );
+    }
+
+    const {rerender} = render(<App enabled={false} />);
+
+    expect(instance.state.isEnabled).toBe(false);
+
+    rerender(<App enabled={true} />);
+
+    expect(instance.state.isEnabled).toBe(true);
+  });
+
   test('props.plugins', () => {
     const plugins = [{fn: () => ({})}];