refactored button navigation

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx

@@ -4,6 +4,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { Placement } from 'react-bootstrap/esm/Overlay'
 
 import './copy-to-clipboard.css'
+import { CustomTooltip } from '@remix-ui/helper'
 
 interface ICopyToClipboard {
   content?: any,
@@ -50,20 +51,22 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
     setTimeout(() => setMessage(tip), 500)
   }
 
-  return (
+  const childJSX = (
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a href='#' onClick={handleClick} onMouseLeave={reset}>
-      <OverlayTrigger placement={direction} overlay={
-        <Tooltip id="overlay-tooltip">
-          { message }
-        </Tooltip>
-      }>
-        {
     children || (<i className={`far ${icon} ml-1 p-2`} aria-hidden="true"
             {...otherProps}
           ></i>)
-        }
+  )
-      </OverlayTrigger>
+
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a href='#' onClick={handleClick} onMouseLeave={reset}>
+      <CustomTooltip
+        tooltipText={message}
+        tooltipId="overlay-tooltip"
+        placement={direction}
+      >
+        {childJSX}
+      </CustomTooltip>
     </a>
   )
 }

libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx

@@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useState, useEffect } from 'react' // eslint-disable-line
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import './button-navigator.css'
@@ -55,46 +56,32 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
   const disableStepBtnStyle = 'stepButtonDisabled'
   const jumpBtnStyle = 'd-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1'
   const disableJumpBtnStyle = 'jumpButtonDisabled'
-
+  const stepMarkupStructure = {
-  return (
+    stepOverBackJSX : {
-    <div className="buttons">
+      markup: (<div className={state.overBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepOverBack && stepOverBack() }}>
-      <div className="stepButtons btn-group py-1">
-        <OverlayTrigger
-          placement="top-start"
-          overlay={
-            <Tooltip className="text-nowrap" id="overbackTooltip">
-              <span>Step over back</span>
-            </Tooltip>
-          }
-        >
-          <div className={state.overBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepOverBack && stepOverBack() }}>
         <button id='overback' className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
             <span className="fas fa-reply"></span>
         </button>
-          </div>
+      </div>),
-        </OverlayTrigger>
+      placement: 'top-start',
-        <OverlayTrigger
+      tagId: 'overbackTooltip',
-          placement="top-start"
+      tooltipMsg: 'Step over back'
-          overlay={
+  },
-            <Tooltip className="text-nowrap" id="intobackTooltip">
+    stepBackJSX : {
-              <span>Step back</span>
+      markup: (
-            </Tooltip>
-          }
-        >
       <div className={state.intoBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepIntoBack && stepIntoBack() }} data-id="buttonNavigatorIntoBack" id="buttonNavigatorIntoBackContainer">
         <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
             <span className="fas fa-level-up-alt"></span>
         </button>
       </div>
-        </OverlayTrigger>
+    ),
-        <OverlayTrigger
+    placement: 'top-start',
-          placement="top-start"
+    tagId: 'intobackTooltip',
-          overlay={
+    tooltipMsg: 'Step back'
-            <Tooltip className="text-nowrap" id="intoforwardTooltip">
+  },
-              <span>Step into</span>
+    
-            </Tooltip>
+    stepIntoJSX : {
-          }
+      markup: (
-        >
       <div className={state.intoForwardDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepIntoForward && stepIntoForward() }} data-id="buttonNavigatorIntoForward" id="buttonNavigatorIntoFowardContainer">
         <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}
         style={{ pointerEvents: 'none', color: 'white' }}
@@ -102,66 +89,92 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
             <span className="fas fa-level-down-alt"></span>
         </button>
       </div>
-        </OverlayTrigger>
+    ),
-        <OverlayTrigger
+    placement: 'top-start',
-          placement="top-end"
+    tagId: 'intoforwardTooltip',
-          overlay={
+    tooltipMsg: 'Step into'
-            <Tooltip className="text-nowrap" id="overforwardTooltip">
+  },
-              <span>Step over forward</span>
+    stepOverForwardJSX : { 
-            </Tooltip>
+      markup: (
-          }
-        >
       <div className={state.overForwardDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepOverForward && stepOverForward() }} data-id="buttonNavigatorOverForward" id="buttonNavigatorOverForwardContainer">
         <button id='overforward' className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
             <span className="fas fa-share"></span>
         </button>
       </div>
-        </OverlayTrigger>
+    ),
-      </div>
+    placement: 'top-end',
-
+    tagId: 'overbackTooltip',
-      <div className="jumpButtons btn-group py-1">
+    tooltipMsg: 'Step over forward',
-          <OverlayTrigger
-            placement="top-start"
-            overlay={
-              <Tooltip id="jumppreviousbreakpointTooltip" className="text-nowrap">
-                <span>{'Jump to the previous breakpoint'}</span>
-              </Tooltip>
   }
-          >
+}
+  const jumpMarkupStructure = {
+    jumpPreviousBreakpointJSX : {
+      markup: (
       <div className={state.jumpPreviousBreakpointDisabled ? `${stepBtnStyle} ${disableJumpBtnStyle}`: `${stepBtnStyle}`} id="buttonNavigatorJumpPreviousBreakpointContainer" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} data-id="buttonNavigatorJumpPreviousBreakpoint">
                 <button className='btn btn-link btn-sm jumpButton m-0 p-0' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none', backgroundColor: 'inherit', color: 'white' }}>
                     <span className="fas fa-step-backward"></span>
                 </button>
               </div>
-          </OverlayTrigger>
+    ),
-          <OverlayTrigger
+    placement: 'bottom-start',
-            placement="top-end"
+    tagId: 'jumppreviousbreakpointTooltip',
-            overlay={
+    tooltipMsg: 'Jump to the previous breakpoint'
-              <Tooltip id="jumpoutTooltip" className="text-nowrap">
+  },
-                <span>{'Jump out'}</span>
+    jumpOutJSX : {
-              </Tooltip>
+      markup: (
-            }
-          >
       <div className={state.jumpOutDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { jumpOut && jumpOut() }} data-id="buttonNavigatorJumpOut" id="buttonNavigatorJumpOutContainer">
                 <button className='btn btn-link btn-sm jumpButton m-0 p-0' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none', backgroundColor: 'inherit', color: 'white' }} data-id="buttonNavigatorJumpOut">
                     <span className="fas fa-eject"></span>
                 </button>
               </div>
-          </OverlayTrigger>
+    ),
-          <OverlayTrigger
+    placement: 'bottom-end',
-            placement="top-end"
+    tagId: 'jumpoutTooltip',
-            overlay={
+    tooltipMsg: 'Jump out'
-              <Tooltip id="jumpnextbreakpointTooltip" className="text-nowrap">
+    },
-                <span>{'Jump to the next breakpoint'}</span>
+    jumpNextBreakpointJSX : {
-              </Tooltip>
+      markup: (
-            }
-          >
       <div className={state.jumpNextBreakpointDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} data-id="buttonNavigatorJumpNextBreakpoint" id="buttonNavigatorJumpNextBreakpointContainer">
                 <button className='btn btn-link btn-sm jumpButton m-0 p-0' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
                     <span className="fas fa-step-forward"></span>
                 </button>
               </div>
-          </OverlayTrigger>
+    ),
+    placement: 'bottom-end',
+      tagId: 'jumpnextbreakpointTooltip',
+      tooltipMsg: 'Jump to the next breakpoint'
+    }
+  }
+
+  return (
+    <div className="buttons">
+      <div className="stepButtons btn-group py-1">
+        {
+          Object.keys(stepMarkupStructure).map(x => (
+            <CustomTooltip
+              placement={stepMarkupStructure[x].placement}
+              tooltipId={stepMarkupStructure[x].tagId}
+              tooltipText={stepMarkupStructure[x].tooltipMsg}
+              key={`${stepMarkupStructure[x].placement}-${stepMarkupStructure[x].tooltipMsg}-${stepMarkupStructure[x].tagId}`}
+            >
+              {stepMarkupStructure[x].markup}
+            </CustomTooltip>
+          ))
+        }
+      </div>
+
+      <div className="jumpButtons btn-group py-1">
+          {
+            Object.keys(jumpMarkupStructure).map(x => (
+              <CustomTooltip
+                placement={jumpMarkupStructure[x].placement}
+                tooltipText={jumpMarkupStructure[x].tooltipMsg}
+                tooltipId={jumpMarkupStructure[x].tooltipId}
+              >
+                {jumpMarkupStructure[x].markup}
+            </CustomTooltip>
+            ))
+          }
       </div>
       <div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
         <span className='text-warning'>This call has reverted, state changes made during the call will be reverted.</span>