feat: delay till introduction bubble is shown can now be configured - f…

…ixes #118
hashbite · Dec 19, 2023 · 964230e · 964230e
1 parent fd4e04d
commit 964230e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/interface-default/src/index.tsx b/packages/interface-default/src/index.tsx
@@ -41,6 +41,7 @@ export interface ButtonProps {
 export interface ConsentManagerDefaultInterfaceDesignProps {
   useDefaultButtonForIntroduction?: boolean
   slideDuration?: number
+  noActionDelay?: number
   styles?: Styles
   animationStyles?: Styles
   ToggleButton?: React.ComponentType<ToggleButtonProps>

diff --git a/packages/interface-default/src/interface.tsx b/packages/interface-default/src/interface.tsx
@@ -46,6 +46,7 @@ export const Interface: React.FC<InterfaceProps> = ({
   initialValues,
   onSubmit,
   useDefaultButtonForIntroduction = true,
+  noActionDelay = 4000,
   slideDuration = 700,
   styles = defaultStyles,
   CloseIcon = IoClose,
@@ -139,6 +140,7 @@ export const Interface: React.FC<InterfaceProps> = ({
           slideDuration={slideDuration}
           CloseIcon={CloseIcon}
           Button={useDefaultButtonForIntroduction ? DefaultButton : Button}
+          noActionDelay={noActionDelay}
         />
       )}
       <Backdrop fadeDuration={slideDuration} styles={styles} />

diff --git a/packages/interface-default/src/introduction.tsx b/packages/interface-default/src/introduction.tsx
@@ -1,4 +1,10 @@
-import React, { MouseEvent, useCallback, useContext, useEffect, useState } from 'react'
+import React, {
+  MouseEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
 import clsx from 'clsx'
 import { CSSTransition } from 'react-transition-group'
 import createActivityDetector from 'activity-detector-ssr'
@@ -45,6 +51,10 @@ export const Introduction: React.FC<IntroductionProps> = ({
 
   // Listen for user interaction
   React.useEffect(() => {
+    if (noActionDelay === 0) {
+      setIsIdle(true)
+      return
+    }
     const activityDetector: ActivityDetector = createActivityDetector({
       timeToIdle: noActionDelay,
       inactivityEvents: [],