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});
+    }
+  }
 }