payload
Version:
Node, React and MongoDB Headless CMS and Application Framework
101 lines (100 loc) • 8.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DeviceContainer", {
enumerable: true,
get: function() {
return DeviceContainer;
}
});
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
const _useResize = require("../../../../utilities/useResize");
const _context = require("../Context/context");
function _getRequireWildcardCache(nodeInterop) {
if (typeof WeakMap !== "function") return null;
var cacheBabelInterop = new WeakMap();
var cacheNodeInterop = new WeakMap();
return (_getRequireWildcardCache = function(nodeInterop) {
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
})(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
if (!nodeInterop && obj && obj.__esModule) {
return obj;
}
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
return {
default: obj
};
}
var cache = _getRequireWildcardCache(nodeInterop);
if (cache && cache.has(obj)) {
return cache.get(obj);
}
var newObj = {
__proto__: null
};
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
for(var key in obj){
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
if (desc && (desc.get || desc.set)) {
Object.defineProperty(newObj, key, desc);
} else {
newObj[key] = obj[key];
}
}
}
newObj.default = obj;
if (cache) {
cache.set(obj, newObj);
}
return newObj;
}
const DeviceContainer = (props)=>{
const { children } = props;
const deviceFrameRef = _react.default.useRef(null);
const { breakpoint, setMeasuredDeviceSize, size, zoom } = (0, _context.useLivePreviewContext)();
// Keep an accurate measurement of the actual device size as it is truly rendered
// This is helpful when `sizes` are non-number units like percentages, etc.
const { size: measuredDeviceSize } = (0, _useResize.useResize)(deviceFrameRef);
// Sync the measured device size with the context so that other components can use it
// This happens from the bottom up so that as this component mounts and unmounts,
// Its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
(0, _react.useEffect)(()=>{
if (measuredDeviceSize) {
setMeasuredDeviceSize(measuredDeviceSize);
}
}, [
measuredDeviceSize,
setMeasuredDeviceSize
]);
let x = '0';
let margin = '0';
if (breakpoint && breakpoint !== 'responsive') {
x = '-50%';
if (typeof zoom === 'number' && typeof size.width === 'number' && typeof size.height === 'number') {
const scaledWidth = size.width / zoom;
const difference = scaledWidth - size.width;
x = `${difference / 2}px`;
margin = '0 auto';
}
}
let width = zoom ? `${100 / zoom}%` : '100%';
let height = zoom ? `${100 / zoom}%` : '100%';
if (breakpoint !== 'responsive') {
width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
}
return /*#__PURE__*/ _react.default.createElement("div", {
ref: deviceFrameRef,
style: {
height,
margin,
transform: `translate3d(${x}, 0, 0)`,
width
}
}, children);
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L0RldmljZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VSZXNpemUgfSBmcm9tICcuLi8uLi8uLi8uLi91dGlsaXRpZXMvdXNlUmVzaXplJ1xuaW1wb3J0IHsgdXNlTGl2ZVByZXZpZXdDb250ZXh0IH0gZnJvbSAnLi4vQ29udGV4dC9jb250ZXh0J1xuXG5leHBvcnQgY29uc3QgRGV2aWNlQ29udGFpbmVyOiBSZWFjdC5GQzx7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbn0+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgY2hpbGRyZW4gfSA9IHByb3BzXG5cbiAgY29uc3QgZGV2aWNlRnJhbWVSZWYgPSBSZWFjdC51c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpXG5cbiAgY29uc3QgeyBicmVha3BvaW50LCBzZXRNZWFzdXJlZERldmljZVNpemUsIHNpemUsIHpvb20gfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgLy8gS2VlcCBhbiBhY2N1cmF0ZSBtZWFzdXJlbWVudCBvZiB0aGUgYWN0dWFsIGRldmljZSBzaXplIGFzIGl0IGlzIHRydWx5IHJlbmRlcmVkXG4gIC8vIFRoaXMgaXMgaGVscGZ1bCB3aGVuIGBzaXplc2AgYXJlIG5vbi1udW1iZXIgdW5pdHMgbGlrZSBwZXJjZW50YWdlcywgZXRjLlxuICBjb25zdCB7IHNpemU6IG1lYXN1cmVkRGV2aWNlU2l6ZSB9ID0gdXNlUmVzaXplKGRldmljZUZyYW1lUmVmKVxuXG4gIC8vIFN5bmMgdGhlIG1lYXN1cmVkIGRldmljZSBzaXplIHdpdGggdGhlIGNvbnRleHQgc28gdGhhdCBvdGhlciBjb21wb25lbnRzIGNhbiB1c2UgaXRcbiAgLy8gVGhpcyBoYXBwZW5zIGZyb20gdGhlIGJvdHRvbSB1cCBzbyB0aGF0IGFzIHRoaXMgY29tcG9uZW50IG1vdW50cyBhbmQgdW5tb3VudHMsXG4gIC8vIEl0cyBzaXplIGlzIGZyZXNobHkgcG9wdWxhdGVkIGFnYWluIHVwb24gcmUtbW91bnRpbmcsIGkuZS4gZ29pbmcgZnJvbSBpZnJhbWUtPnBvcHVwLT5pZnJhbWVcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAobWVhc3VyZWREZXZpY2VTaXplKSB7XG4gICAgICBzZXRNZWFzdXJlZERldmljZVNpemUobWVhc3VyZWREZXZpY2VTaXplKVxuICAgIH1cbiAgfSwgW21lYXN1cmVkRGV2aWNlU2l6ZSwgc2V0TWVhc3VyZWREZXZpY2VTaXplXSlcblxuICBsZXQgeCA9ICcwJ1xuICBsZXQgbWFyZ2luID0gJzAnXG5cbiAgaWYgKGJyZWFrcG9pbnQgJiYgYnJlYWtwb2ludCAhPT0gJ3Jlc3BvbnNpdmUnKSB7XG4gICAgeCA9ICctNTAlJ1xuXG4gICAgaWYgKFxuICAgICAgdHlwZW9mIHpvb20gPT09ICdudW1iZXInICYmXG4gICAgICB0eXBlb2Ygc2l6ZS53aWR0aCA9PT0gJ251bWJlcicgJiZcbiAgICAgIHR5cGVvZiBzaXplLmhlaWdodCA9PT0gJ251bWJlcidcbiAgICApIHtcbiAgICAgIGNvbnN0IHNjYWxlZFdpZHRoID0gc2l6ZS53aWR0aCAvIHpvb21cbiAgICAgIGNvbnN0IGRpZmZlcmVuY2UgPSBzY2FsZWRXaWR0aCAtIHNpemUud2lkdGhcbiAgICAgIHggPSBgJHtkaWZmZXJlbmNlIC8gMn1weGBcbiAgICAgIG1hcmdpbiA9ICcwIGF1dG8nXG4gICAgfVxuICB9XG5cbiAgbGV0IHdpZHRoID0gem9vbSA/IGAkezEwMCAvIHpvb219JWAgOiAnMTAwJSdcbiAgbGV0IGhlaWdodCA9IHpvb20gPyBgJHsxMDAgLyB6b29tfSVgIDogJzEwMCUnXG5cbiAgaWYgKGJyZWFrcG9pbnQgIT09ICdyZXNwb25zaXZlJykge1xuICAgIHdpZHRoID0gYCR7c2l6ZT8ud2lkdGggLyAodHlwZW9mIHpvb20gPT09ICdudW1iZXInID8gem9vbSA6IDEpfXB4YFxuICAgIGhlaWdodCA9IGAke3NpemU/LmhlaWdodCAvICh0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgPyB6b29tIDogMSl9cHhgXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHJlZj17ZGV2aWNlRnJhbWVSZWZ9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBoZWlnaHQsXG4gICAgICAgIG1hcmdpbixcbiAgICAgICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlM2QoJHt4fSwgMCwgMClgLFxuICAgICAgICB3aWR0aCxcbiAgICAgIH19XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiRGV2aWNlQ29udGFpbmVyIiwicHJvcHMiLCJjaGlsZHJlbiIsImRldmljZUZyYW1lUmVmIiwiUmVhY3QiLCJ1c2VSZWYiLCJicmVha3BvaW50Iiwic2V0TWVhc3VyZWREZXZpY2VTaXplIiwic2l6ZSIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJtZWFzdXJlZERldmljZVNpemUiLCJ1c2VSZXNpemUiLCJ1c2VFZmZlY3QiLCJ4IiwibWFyZ2luIiwid2lkdGgiLCJoZWlnaHQiLCJzY2FsZWRXaWR0aCIsImRpZmZlcmVuY2UiLCJkaXYiLCJyZWYiLCJzdHlsZSIsInRyYW5zZm9ybSJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFLYUE7OztlQUFBQTs7OytEQUxvQjsyQkFFUDt5QkFDWTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRS9CLE1BQU1BLGtCQUVSLENBQUNDO0lBQ0osTUFBTSxFQUFFQyxRQUFRLEVBQUUsR0FBR0Q7SUFFckIsTUFBTUUsaUJBQWlCQyxjQUFLLENBQUNDLE1BQU0sQ0FBaUI7SUFFcEQsTUFBTSxFQUFFQyxVQUFVLEVBQUVDLHFCQUFxQixFQUFFQyxJQUFJLEVBQUVDLElBQUksRUFBRSxHQUFHQyxJQUFBQSw4QkFBcUI7SUFFL0UsaUZBQWlGO0lBQ2pGLDJFQUEyRTtJQUMzRSxNQUFNLEVBQUVGLE1BQU1HLGtCQUFrQixFQUFFLEdBQUdDLElBQUFBLG9CQUFTLEVBQUNUO0lBRS9DLHFGQUFxRjtJQUNyRixpRkFBaUY7SUFDakYsOEZBQThGO0lBQzlGVSxJQUFBQSxnQkFBUyxFQUFDO1FBQ1IsSUFBSUYsb0JBQW9CO1lBQ3RCSixzQkFBc0JJO1FBQ3hCO0lBQ0YsR0FBRztRQUFDQTtRQUFvQko7S0FBc0I7SUFFOUMsSUFBSU8sSUFBSTtJQUNSLElBQUlDLFNBQVM7SUFFYixJQUFJVCxjQUFjQSxlQUFlLGNBQWM7UUFDN0NRLElBQUk7UUFFSixJQUNFLE9BQU9MLFNBQVMsWUFDaEIsT0FBT0QsS0FBS1EsS0FBSyxLQUFLLFlBQ3RCLE9BQU9SLEtBQUtTLE1BQU0sS0FBSyxVQUN2QjtZQUNBLE1BQU1DLGNBQWNWLEtBQUtRLEtBQUssR0FBR1A7WUFDakMsTUFBTVUsYUFBYUQsY0FBY1YsS0FBS1EsS0FBSztZQUMzQ0YsSUFBSSxDQUFDLEVBQUVLLGFBQWEsRUFBRSxFQUFFLENBQUM7WUFDekJKLFNBQVM7UUFDWDtJQUNGO0lBRUEsSUFBSUMsUUFBUVAsT0FBTyxDQUFDLEVBQUUsTUFBTUEsS0FBSyxDQUFDLENBQUMsR0FBRztJQUN0QyxJQUFJUSxTQUFTUixPQUFPLENBQUMsRUFBRSxNQUFNQSxLQUFLLENBQUMsQ0FBQyxHQUFHO0lBRXZDLElBQUlILGVBQWUsY0FBYztRQUMvQlUsUUFBUSxDQUFDLEVBQUVSLE1BQU1RLFFBQVMsQ0FBQSxPQUFPUCxTQUFTLFdBQVdBLE9BQU8sQ0FBQSxFQUFHLEVBQUUsQ0FBQztRQUNsRVEsU0FBUyxDQUFDLEVBQUVULE1BQU1TLFNBQVUsQ0FBQSxPQUFPUixTQUFTLFdBQVdBLE9BQU8sQ0FBQSxFQUFHLEVBQUUsQ0FBQztJQUN0RTtJQUVBLHFCQUNFLDZCQUFDVztRQUNDQyxLQUFLbEI7UUFDTG1CLE9BQU87WUFDTEw7WUFDQUY7WUFDQVEsV0FBVyxDQUFDLFlBQVksRUFBRVQsRUFBRSxPQUFPLENBQUM7WUFDcENFO1FBQ0Y7T0FFQ2Q7QUFHUCJ9