Display relevant PreviewImages on ResponsiveModes changed.

layouts/scripts/dist/index.min.js

@@ -11265,14 +11265,11 @@ function Responsive(props = {}) {
     mode: 'default',
     breakpoint: '100%'
   };
-  const [state, setState] = react.exports.useState(initialState);
-
-  const updateState = update => setState(Object.assign({}, state, update));
-
+  const [mode, setMode] = react.exports.useState(initialState.mode);
+  const [breakpoint, setBreakpoint] = react.exports.useState(initialState.breakpoint);
   react.exports.useEffect(() => {
-    // Update the document title using the browser API
     updateController();
-  });
+  }, [mode, breakpoint]);
   const previewFrame = props.rootAttributes.previewFrame;
   return render(); //
   // Functions
@@ -11290,24 +11287,28 @@ 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
+    };
   }
 }
 
@@ -11552,7 +11553,7 @@ function DesignPreview({
     x: getInitialXPosition(previewOption),
     y: 0
   });
-  const [opacity, setOpacity] = react.exports.useState(100);
+  const [opacity, setOpacity] = react.exports.useState(85);
   const keyDownHandler = react.exports.useCallback(function (e) {
     if (!active) {
       return;
@@ -11589,10 +11590,9 @@ function DesignPreview({
       x: getInitialXPosition(previewOption),
       y: 0
     });
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
   }, [previewOption.widthDimension]);
-  react.exports.useEffect(() => {
-    setActive(false);
-  }, [previewOption.dataSource]);
 
   if (!previewOption) {
     return;
@@ -11601,7 +11601,7 @@ function DesignPreview({
   const disabled = !previewOption.url;
   const classNames = [];
 
-  if (active) {
+  if (!disabled && active) {
     classNames.push('active');
   }
 
@@ -11617,7 +11617,7 @@ function DesignPreview({
     onClick: () => toggle(),
     className: classNames.join(' '),
     disabled: disabled
-  }), active && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+  }), active && !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     type: "range",
     value: opacity,
     min: "0",
@@ -11638,7 +11638,9 @@ function DesignPreview({
       top: position.y + 'px',
       left: position.x + 'px'
     }
-  }))));
+  })))); //
+  // Functions
+  //
 
   function start(e) {
     startDragPosition.x = e.clientX;
@@ -11693,6 +11695,19 @@ function DesignPreview({
 
     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
+      });
+    }
+  }
 }
 
 function DataOptions(props = {}) {
@@ -11704,6 +11719,7 @@ function DataOptions(props = {}) {
     designPreview: []
   };
   const [state, setState] = react.exports.useState(initialState);
+  const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
 
   const updateState = update => setState(Object.assign({}, state, update));
 
@@ -11726,10 +11742,16 @@ function DataOptions(props = {}) {
       document.removeEventListener("keydown", handleCloseSidebarEscEvent);
     };
   }, [handleCloseSidebarEscEvent]);
+  react.exports.useEffect(() => {
+    window.addEventListener('message', responsiveModeChangesHandler);
+    return () => window.removeEventListener('message', responsiveModeChangesHandler);
+  }, [state]);
+  react.exports.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 /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -11760,7 +11782,9 @@ function DataOptions(props = {}) {
       value: item,
       selected: isSelected
     }, item);
-  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2))));
+  }))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2)))); //
+  // Functions
+  //
 
   function openSidebar() {
     setSidebarOpen(true);
@@ -11793,10 +11817,24 @@ function DataOptions(props = {}) {
       return item.dataSource === currentDataName;
     });
     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));
+  }
 }
 
 function setupDataOptions(rootAttributes) {