Added switchable overlay trigger events

Author: EranNL

src/components/Overlay/OverlayTrigger.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useRef, useState } from 'react';
 import Overlay from '@/components/Overlay/index';
 import { Placement, PositioningStrategy } from '@popperjs/core';
+import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
 
 interface OverlayTriggerProps {
     arrow?: boolean;
@@ -11,6 +12,7 @@ interface OverlayTriggerProps {
     placement?: Placement;
     positionStrategy?: PositioningStrategy;
     className?: string;
+    trigger?: Trigger | string;
 }
 
 const OverlayTrigger = ({
@@ -19,29 +21,50 @@ const OverlayTrigger = ({
     className,
     overlay,
     placement,
-    positionStrategy
+    positionStrategy,
+    trigger = 'hover'
 }: OverlayTriggerProps): React.ReactElement => {
     const [shown, setShown] = useState<boolean>(false);
     const triggerRef = useRef<HTMLElement>();
 
-    return (
-        <>
-            {React.cloneElement(triggerElement, {
-                ref: triggerRef,
-                onMouseEnter: (event: React.MouseEvent): void => {
-                    if (triggerElement.props.onMouseEnter) {
-                        triggerElement.props.onMouseEnter(event)
-                    }
+    const attachEvents = (child: React.ReactElement, trigger: string) => {
+        switch (trigger) {
+            case Trigger.CLICK:
+                return {
+                    onClick: (event: React.MouseEvent) => {
+                        if (child.props.onClick) {
+                            child.props.onClick(event);
+                        }
 
-                    setShown(true);
-                },
-                onMouseLeave: (event: React.MouseEvent) => {
-                    if (triggerElement.props.onHover) {
-                        triggerElement.props.onMouseLeave(event)
+                        setShown(!shown);
                     }
+                }
+            case Trigger.HOVER:
+            default:
+                return {
+                    onMouseEnter: (event: React.MouseEvent): void => {
+                        if (child.props.onMouseEnter) {
+                            child.props.onMouseEnter(event);
+                        }
+
+                        setShown(true)
+                    },
+                    onMouseLeave: (event: React.MouseEvent) => {
+                        if (child.props.onMouseLeave) {
+                            child.props.onMouseLeave(event);
+                        }
 
-                    setShown(false);
+                        setShown(false)
+                    }
                 }
+        }
+    }
+
+    return (
+        <>
+            {React.cloneElement(triggerElement, {
+                ref: triggerRef,
+                ...attachEvents(triggerElement, trigger)
             })}
             {shown && (
                 <Overlay
@@ -63,7 +86,8 @@ OverlayTrigger.propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     overlay: PropTypes.element.isRequired,
-    placement: PropTypes.string
+    placement: PropTypes.string,
+    trigger: triggerPropTypes
 }
 
 export default OverlayTrigger;

src/components/Overlay/Placement.ts

@@ -0,0 +1,8 @@
+import Proptypes from 'prop-types';
+
+export enum Trigger {
+    CLICK = 'click',
+    HOVER = 'hover'
+}
+
+export const triggerPropTypes = Proptypes.oneOf(['click', 'hover'])

src/components/Overlay/Trigger.ts

@@ -2,21 +2,25 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import OverlayTrigger from '@/components/Overlay/OverlayTrigger';
 import { Placement } from '@popperjs/core';
+import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
 
 interface TooltipProps {
     arrow?: boolean;
     children: React.ReactElement;
     placement?: Placement;
     content: React.ReactNode;
+    trigger?: Trigger | string;
 }
 
 const Tooltip = ({
     arrow,
     children,
     content,
-    placement
+    placement,
+    trigger = 'hover'
 }: TooltipProps): React.ReactElement => (
     <OverlayTrigger
+        trigger={trigger}
         arrow={arrow}
         overlay={content}
         placement={placement}
@@ -30,7 +34,8 @@ Tooltip.displayName = 'Tooltip';
 Tooltip.propTypes = {
     children: PropTypes.element,
     placement: PropTypes.string,
-    content: PropTypes.node
+    content: PropTypes.node,
+    trigger: triggerPropTypes
 }
 
 export default Tooltip;

src/components/Tooltip/index.tsx

@@ -122,6 +122,7 @@ ReactDom.render(
                                     <Tooltip
                                         content="Megalange tekst"
                                         placement="top"
+                                        trigger="click"
                                     >
                                         <Button
                                             variant={Variant.ORANGE}