Updated TW animation and sidebar onHover handler

Author: zhadaev

components/layout/sidebar/header/ActionDropdown.es6.js

@@ -5,48 +5,57 @@ import SidebarHeaderActionButton from './SidebarHeaderActionButton.es6.js'
 import classnames from 'classnames'
 
 const ActionDropdown = forwardRef(({
-    icon,
-    actionsAvailable,
-    actionsVisible,
-    setActionsVisibility,
-    quickDialog,
-    quickActions,
-    onClick,
-    dropdownMenuLabel,
-    onQuickActionSelected,
-    isLogoDropDown,
-}, ref) => (
+  icon,
+  actionsAvailable,
+  actionsVisible,
+  setActionsVisibility,
+  quickDialog,
+  quickActions,
+  onClick,
+  dropdownMenuLabel,
+  onQuickActionSelected,
+  isLogoDropDown,
+  handleHover,
+}, ref) => {
+  const hoverHandlers = handleHover ? {
+    onMouseEnter: onClick,
+    onMouseLeave: onClick,
+  } : {}
+
+  return (
     <div
-        className={classnames({
-            'ds-dropdown': actionsAvailable && icon,
-            'ds-dropdown--right': actionsAvailable && icon && !isLogoDropDown,
-            'ds-dropdown--left': isLogoDropDown,
-            'ds-dropdown--menu-visible': actionsAvailable && actionsVisible,
-            'ds-sidebar__header-action': !actionsAvailable
-        })}
-        ref={ref}
+      className={classnames({
+        'ds-dropdown': actionsAvailable && icon,
+        'ds-dropdown--right': actionsAvailable && icon && !isLogoDropDown,
+        'ds-dropdown--left': isLogoDropDown,
+        'ds-dropdown--menu-visible': actionsAvailable && actionsVisible,
+        'ds-sidebar__header-action': !actionsAvailable
+      })}
+      ref={ref}
+      {...hoverHandlers}
     >
-        {icon && (
-            <SidebarHeaderActionButton
-                dropdown={actionsAvailable}
-                icon={icon}
-                onClick={onClick}
-            />
-        )}
+      {icon && (
+        <SidebarHeaderActionButton
+          dropdown={actionsAvailable}
+          icon={icon}
+          onClick={onClick}
+        />
+      )}
 
-        {quickDialog}
+      {quickDialog}
 
-        {actionsVisible && (
-            <QuickActions
-                actions={quickActions}
-                label={dropdownMenuLabel}
-                onSelect={(idx) => {
-                    setActionsVisibility(false)
-                    onQuickActionSelected && onQuickActionSelected(idx)
-                }}
-            />
-        )}
+      {actionsVisible && (
+        <QuickActions
+          actions={quickActions}
+          label={dropdownMenuLabel}
+          onSelect={(idx) => {
+            setActionsVisibility(false)
+            onQuickActionSelected && onQuickActionSelected(idx)
+          }}
+        />
+      )}
     </div>
-))
+  )
+})
 
 export default ActionDropdown

components/layout/sidebar/header/SidebarHeader.es6.js

@@ -127,6 +127,7 @@ class SidebarHeader extends React.Component {
               dropdownMenuLabel={dropdownMenuLabel}
               onQuickActionSelected={onQuickActionSelected}
               isLogoDropDown
+              handleHover
             />)
           }
 

components/lib/useTypingSimulation.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 
-const CHARS_PER_SEC = 50 // Simulated typing speed
+const ANIMATION_TIME = 2000 // Type text in 2 seconds
 
 export const TypingStatus = {
   IDLE: 'idle',
@@ -25,7 +25,7 @@ function useTypingSimulation(onStatusChange) {
   )
 
   const startTyping = useCallback(
-    (text, charactersPerSecond = CHARS_PER_SEC) => {
+    (text) => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current)
         intervalRef.current = null
@@ -39,25 +39,19 @@ function useTypingSimulation(onStatusChange) {
       setIsTyping(true)
       updateStatus(TypingStatus.TYPING)
 
-      const typingInterval = 1000 / charactersPerSecond
+      const intervalMs = ANIMATION_TIME / text.length
 
       intervalRef.current = window.setInterval(() => {
         charIndexRef.current++
+        const partialText = text.substring(0, charIndexRef.current)
+        setTypedText(partialText)
 
-        if (charIndexRef.current > text.length) {
-          if (intervalRef.current) {
-            clearInterval(intervalRef.current)
-            intervalRef.current = null
-          }
-
+        if (charIndexRef.current >= fullTextRef.current.length) {
+          clearInterval(intervalRef.current)
           setIsTyping(false)
           updateStatus(TypingStatus.COMPLETED)
-          return
         }
-
-        const partialText = text.substring(0, charIndexRef.current)
-        setTypedText(partialText)
-      }, typingInterval)
+      }, intervalMs)
 
       return text
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b12/metronome",
-  "version": "1.1.28",
+  "version": "1.1.29",
   "description": "",
   "main": "index.es6.js",
   "scripts": {