@wordpress/block-editor
Version:
72 lines (70 loc) • 2.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useResizeCanvas;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
/**
* Function to resize the editor window.
*
* @param {string} deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
*
* @return {Object} Inline styles to be added to resizable container.
*/
function useResizeCanvas(deviceType) {
const [actualWidth, updateActualWidth] = (0, _element.useState)(window.innerWidth);
(0, _element.useEffect)(() => {
if (deviceType === 'Desktop') {
return;
}
const resizeListener = () => updateActualWidth(window.innerWidth);
window.addEventListener('resize', resizeListener);
return () => {
window.removeEventListener('resize', resizeListener);
};
}, [deviceType]);
const getCanvasWidth = device => {
let deviceWidth;
switch (device) {
case 'Tablet':
deviceWidth = 780;
break;
case 'Mobile':
deviceWidth = 360;
break;
default:
return null;
}
return deviceWidth < actualWidth ? deviceWidth : actualWidth;
};
const contentInlineStyles = device => {
const height = device === 'Mobile' ? '768px' : '1024px';
const marginVertical = '40px';
const marginHorizontal = 'auto';
switch (device) {
case 'Tablet':
case 'Mobile':
return {
width: getCanvasWidth(device),
// Keeping margin styles separate to avoid warnings
// when those props get overridden in the iframe component
marginTop: marginVertical,
marginBottom: marginVertical,
marginLeft: marginHorizontal,
marginRight: marginHorizontal,
height,
maxWidth: '100%'
};
default:
return {
marginLeft: marginHorizontal,
marginRight: marginHorizontal
};
}
};
return contentInlineStyles(deviceType);
}
//# sourceMappingURL=index.js.map