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 [mode, setMode] = react.exports.useState(initialState.mode);
-
+  const [breakpoint, setBreakpoint] = react.exports.useState(initialState.breakpoint);
-  const updateState = update => setState(Object.assign({}, state, update));
-
   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({
+    setMode(mode);
-      mode,
+    setBreakpoint(breakpoint);
-      breakpoint
-    });
   }
 
-  function isActive(mode) {
+  function isActive(requestedMode) {
-    return mode === state.mode;
+    return mode === requestedMode;
   }
 
   function updateController() {
-    const unit = typeof state.breakpoint === 'string' ? '' : 'px';
+    const unit = typeof breakpoint === 'string' ? '' : 'px';
-    previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
+    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) {

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 [mode, setMode] = useState(initialState.mode);
-  const [state, setState] = useState(initialState);
+  const [breakpoint, setBreakpoint] = useState(initialState.breakpoint);
-  const updateState = (update) => setState(Object.assign({}, state, update));
 
   useEffect(() => {
-    // Update the document title using the browser API
+    updateController();
-    updateController(state);
+  }, [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) {
+  function isActive(requestedMode) {
-    return mode === state.mode;
+    return mode === requestedMode;
   }
 
   function updateController() {
-    const unit = typeof state.breakpoint === 'string' ? '' : 'px';
+    const unit = typeof breakpoint === 'string' ? '' : 'px';
-    previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
+    previewFrame.style.setProperty('--breakpoint', breakpoint + unit);
     previewFrame.classList.add('has-breakpoint');
+    window.postMessage('responsiveUpdate');
+    window.responsiveState = {mode, breakpoint};
   }
 
 }