Improved Responsiveness controllers - "remember" latest state of selected breakpoint.

layouts/scripts/toolbar/responsive-button/ResponsiveButton.jsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {ButtonStyling, ResponsiveButtonStyle, ResponsiveOptionsDropdown} from "./responsive-button.style.js";
 
 const responsiveOptions = {
@@ -15,12 +15,8 @@ const defaultResponsiveOptions = {
 }
 
 export function ResponsiveButton({mode, active, onSelect}) {
-  // active = true;
-  const [state, setState] = useState({open: true, breakpoint: defaultResponsiveOptions[mode]});
-  const updateState = (update) => {
-    // update.open = true;
-    setState(Object.assign({}, state, update));
-  }
+  const [state, setState] = useState({open: true, activeBreakpoint: defaultResponsiveOptions[mode]});
+  const updateState = (update) => setState(Object.assign({}, state, update));
 
   useEffect(() => {
     const closeDropdown = (e) => isEscHit(e) ? updateState({open: false}) : null;
@@ -36,8 +32,7 @@ export function ResponsiveButton({mode, active, onSelect}) {
   });
 
   // Blur event / Outside click
-  const outsideClickAction = async (e) => await isClickOutside(e) ? updateState({open: false}) : null;
-  const handleBlur = useCallback(outsideClickAction, []);
+  const handleBlur = async (e) => await isClickOutside(e) ? updateState({open: false}) : null;
 
   return <ResponsiveButtonStyle tabIndex='0' onBlur={handleBlur}>
     <ButtonStyling data-mode={mode} data-active={active} onClick={() => select()}>{mode}</ButtonStyling>
@@ -45,7 +40,7 @@ export function ResponsiveButton({mode, active, onSelect}) {
       <ResponsiveOptionsDropdown>
         {responsiveOptions[mode].map((breakpoint) => {
           return <li>
-            <a className={state.breakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a>
+            <a className={state.activeBreakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a>
           </li>;
         })}
       </ResponsiveOptionsDropdown>
@@ -56,17 +51,17 @@ export function ResponsiveButton({mode, active, onSelect}) {
   // Actions
   //
 
-  function select(breakpoint = null) {
+  function select(activeBreakpoint = null) {
     // Click on option in Dropdown.
-    if (breakpoint) {
-      updateState({open: false, breakpoint});
-      onSelect(breakpoint);
+    if (activeBreakpoint) {
+      updateState({open: false, activeBreakpoint});
+      onSelect(activeBreakpoint);
       return;
     }
 
     // Click on device button.
     if (!active) {
-      onSelect(state.breakpoint)
+      onSelect(state.activeBreakpoint)
       updateState({open: false});
     } else {
       updateState({open: true});
@@ -82,9 +77,7 @@ export async function isClickOutside(e) {
   const currentTarget = e.currentTarget;
 
   return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(!currentTarget.contains(document.activeElement));
-    }, 100);
+    setTimeout(() => resolve(!currentTarget.contains(document.activeElement)));
   })
 }