@wordpress/block-editor
Version:
81 lines (79 loc) • 2.73 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/use-resize-canvas/index.js
var use_resize_canvas_exports = {};
__export(use_resize_canvas_exports, {
default: () => useResizeCanvas
});
module.exports = __toCommonJS(use_resize_canvas_exports);
var import_element = require("@wordpress/element");
function useResizeCanvas(deviceType) {
const [actualWidth, updateActualWidth] = (0, import_element.useState)(window.innerWidth);
(0, import_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,
overflowY: "auto"
};
default:
return {
marginLeft: marginHorizontal,
marginRight: marginHorizontal
};
}
};
return contentInlineStyles(deviceType);
}
//# sourceMappingURL=index.js.map