Display relevant PreviewImages on ResponsiveModes changed.

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -14,6 +14,7 @@ function DataOptions(props = {}) {
 
   const initialState = {dataName: 'default', data: {}, dataOptions: [], designPreview: []};
   const [state, setState] = useState(initialState);
+  const [previewOption, setPreviewOption] = useState(getDesignPreviewImage(state.dataName, state.designPreview));
   const updateState = (update) => setState(Object.assign({}, state, update));
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -40,8 +41,16 @@ function DataOptions(props = {}) {
     }
   }, [handleCloseSidebarEscEvent]);
 
+  useEffect(() => {
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
+  }, [state]);
+
+  useEffect(() => {
+    setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
+  }, [state.designPreview]);
+
   const handleBlur = async (e) => await isClickOutside(e) ? closeSidebar() : null;
-  const previewOption = getDesignPreviewImage(state.dataName, state.designPreview);
 
   return <div style={{display: 'flex', gap: '1rem', alignItems: 'center'}}>
     <SidebarButtonToggleStyle onClick={() => openSidebar()} title="Open a Sidebar with Data Options"/>
@@ -72,6 +81,10 @@ function DataOptions(props = {}) {
     </SidebarStyle>
   </div>;
 
+  //
+  // Functions
+  //
+
   function openSidebar() {
     setSidebarOpen(true);
     setTimeout(() => document.querySelector('.sidebar-active').focus());
@@ -101,11 +114,23 @@ function DataOptions(props = {}) {
     });
 
     dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
+    let size = window.responsiveState.breakpoint;
+    if (size === '100%') {
+      size = window.innerWidth;
+    }
 
     return dataOptions.find((item) => {
-      return item.widthDimension // first
+      return size >= item.widthDimension;
     });
   }
+
+  function responsiveModeChangesHandler(e) {
+    if (e.data !== 'responsiveUpdate') {
+      return;
+    }
+
+    setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
+  }
 }
 
 export function setupDataOptions(rootAttributes) {

layouts/scripts/toolbar/data-options/DesignPreview.jsx

@@ -7,7 +7,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
   const reference = createRef();
   const [active, setActive] = useState(false);
   const [position, setPosition] = useState({x: getInitialXPosition(previewOption), y: 0});
-  const [opacity, setOpacity] = useState(100);
+  const [opacity, setOpacity] = useState(85);
 
   const keyDownHandler = useCallback(
     function (e) {
@@ -38,12 +38,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
 
   useEffect(() => {
     updatePosition({x: getInitialXPosition(previewOption), y: 0});
-  }, [previewOption.widthDimension])
-
-  useEffect(() => {
-    setActive(false);
-  }, [previewOption.dataSource])
 
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
+  }, [previewOption.widthDimension]);
 
   if (!previewOption) {
     return;
@@ -52,7 +50,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
   const disabled = !previewOption.url;
 
   const classNames = [];
-  if (active) {
+  if (!disabled && active) {
     classNames.push('active');
   }
 
@@ -67,7 +65,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
   return <>
     <PreviewButtonStyle onClick={() => toggle()} className={classNames.join(' ')} disabled={disabled}/>
 
-    {active &&
+    {active && !disabled &&
       <>
         <input type="range" value={opacity} min="0" max="100" onChange={handleOpacityChange}/>
         <PreviewStyle onMouseUp={e => stop(e)} style={{opacity: opacity / 100}}>
@@ -81,6 +79,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
     }
   </>
 
+  //
+  // Functions
+  //
+
   function start(e) {
     startDragPosition.x = e.clientX;
     startDragPosition.y = e.clientY;
@@ -130,4 +132,14 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
 
     return window.innerWidth / 2 - previewOption.widthDimension / 2;
   }
+
+  function responsiveModeChangesHandler(e) {
+    if (e.data !== 'responsiveUpdate') {
+      return;
+    }
+
+    if (window.responsiveState.breakpoint === '100%') {
+      updatePosition({x: getInitialXPosition(previewOption), y: 0});
+    }
+  }
 }

layouts/scripts/toolbar/responsive.jsx

@@ -22,14 +22,12 @@ function Responsive(props = {}) {
   props.rootAttributes = props.rootAttributes ?? {};
 
   const initialState = {mode: 'default', breakpoint: '100%'}
-
-  const [state, setState] = useState(initialState);
-  const updateState = (update) => setState(Object.assign({}, state, update));
+  const [mode, setMode] = useState(initialState.mode);
+  const [breakpoint, setBreakpoint] = useState(initialState.breakpoint);
 
   useEffect(() => {
-    // Update the document title using the browser API
-    updateController(state);
-  });
+    updateController();
+  }, [mode, breakpoint]);
 
   const previewFrame = props.rootAttributes.previewFrame;
   return render();
@@ -50,22 +48,26 @@ function Responsive(props = {}) {
 
   function selectMode(mode, breakpoint) {
     if (mode === 'reset') {
-      updateState(initialState);
+      setMode(initialState.mode);
+      setBreakpoint(initialState.breakpoint);
       return;
     }
 
-    updateState({mode, breakpoint})
+    setMode(mode);
+    setBreakpoint(breakpoint);
   }
 
 
-  function isActive(mode) {
-    return mode === state.mode;
+  function isActive(requestedMode) {
+    return mode === requestedMode;
   }
 
   function updateController() {
-    const unit = typeof state.breakpoint === 'string' ? '' : 'px';
-    previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
+    const unit = typeof breakpoint === 'string' ? '' : 'px';
+    previewFrame.style.setProperty('--breakpoint', breakpoint + unit);
     previewFrame.classList.add('has-breakpoint');
+    window.postMessage('responsiveUpdate');
+    window.responsiveState = {mode, breakpoint};
   }
 
 }