@razorpay/blade
Version:
The Design System that powers Razorpay
400 lines (395 loc) • 24.6 kB
JavaScript
import _typeof from '@babel/runtime/helpers/typeof';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default, { useCallback, useState, useEffect } from 'react';
import { useControls, TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import styled from 'styled-components';
import { usePreviewContext, PreviewProvider } from './PreviewContext.js';
import '../Box/BaseBox/index.js';
import '../Icons/index.js';
import '../Typography/index.js';
import '../ButtonGroup/index.js';
import '../Button/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../Divider/index.js';
import { useControllableState } from '../../utils/useControllable.js';
import { componentZIndices } from '../../utils/componentZIndices.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import Button from '../Button/Button/Button.js';
import FullScreenExitIcon from '../Icons/FullScreenExitIcon/FullScreenExitIcon.js';
import FullScreenEnterIcon from '../Icons/FullScreenEnterIcon/FullScreenEnterIcon.js';
import { Heading } from '../Typography/Heading/Heading.js';
import { Divider } from '../Divider/Divider.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import ZoomInIcon from '../Icons/ZoomInIcon/ZoomInIcon.js';
import { Text } from '../Typography/Text/Text.js';
import ZoomOutIcon from '../Icons/ZoomOutIcon/ZoomOutIcon.js';
import RefreshIcon from '../Icons/RefreshIcon/RefreshIcon.js';
import { ButtonGroup } from '../ButtonGroup/ButtonGroup.web.js';
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
var _PreviewHeader = function _PreviewHeader(_ref) {
var title = _ref.title,
_onFullScreen = _ref._onFullScreen,
trailing = _ref.trailing;
var _usePreviewContext = usePreviewContext(),
isFullScreen = _usePreviewContext.isFullScreen;
if (!title) {
return /*#__PURE__*/jsxs(BaseBox, {
position: "absolute",
top: "spacing.0",
right: "spacing.2",
zIndex: componentZIndices.previewPanel,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "spacing.4",
children: [/*#__PURE__*/jsx(BaseBox, {
backgroundColor: "surface.background.gray.moderate",
borderRadius: "medium",
children: /*#__PURE__*/jsx(Button, {
icon: isFullScreen ? FullScreenExitIcon : FullScreenEnterIcon,
variant: "tertiary",
onClick: _onFullScreen
})
}), trailing]
});
}
return /*#__PURE__*/jsxs(BaseBox, {
zIndex: componentZIndices.previewPanel,
position: "absolute",
top: "spacing.0",
left: "spacing.0",
backgroundColor: "surface.background.gray.moderate",
width: "100%",
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "spacing.5",
height: "100%",
width: "100%",
children: [/*#__PURE__*/jsx(Heading, {
size: "medium",
weight: "regular",
color: "surface.text.gray.subtle",
children: title
}), /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
alignItems: "center",
gap: "spacing.3",
children: [/*#__PURE__*/jsx(Button, {
icon: isFullScreen ? FullScreenExitIcon : FullScreenEnterIcon,
variant: "tertiary",
onClick: _onFullScreen
}), trailing]
})]
}), /*#__PURE__*/jsx(Divider, {
orientation: "horizontal"
})]
});
};
var PreviewHeader = /*#__PURE__*/assignWithoutSideEffects(_PreviewHeader, {
componentId: MetaConstants.PreviewHeader
});
var _PreviewBody = function _PreviewBody(PreviewBodyProps) {
var children = PreviewBodyProps.children;
return /*#__PURE__*/jsx(BaseBox, {
children: children
});
};
var PreviewBody = /*#__PURE__*/assignWithoutSideEffects(_PreviewBody, {
componentId: MetaConstants.PreviewBody
});
var _PreviewFooter = function _PreviewFooter(PreviewFooterProps) {
var showZoomPercentage = PreviewFooterProps.showZoomPercentage,
trailing = PreviewFooterProps.trailing;
var _useControls = useControls(),
zoomIn = _useControls.zoomIn,
zoomOut = _useControls.zoomOut,
centerView = _useControls.centerView;
var _usePreviewContext2 = usePreviewContext(),
zoom = _usePreviewContext2.zoom,
zoomScaleStep = _usePreviewContext2.zoomScaleStep,
defaultZoom = _usePreviewContext2.defaultZoom;
var handleZoomIn = useCallback(function () {
zoomIn(zoomScaleStep);
}, [zoomScaleStep, zoomIn]);
var handleZoomOut = useCallback(function () {
zoomOut(zoomScaleStep);
}, [zoomScaleStep, zoomOut]);
var handleReset = useCallback(function () {
// thanks to https://github.com/BetterTyped/react-zoom-pan-pinch/issues/286#issuecomment-1442888219
centerView(defaultZoom, 0);
}, [defaultZoom, centerView]);
return /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
justifyContent: "space-between",
width: "100%",
backgroundColor: "surface.background.gray.moderate",
position: "absolute",
bottom: "spacing.0",
left: "spacing.0",
right: "spacing.0",
padding: "spacing.5",
zIndex: componentZIndices.previewPanel,
borderTopWidth: "thin",
borderTopColor: "surface.border.gray.muted",
children: [/*#__PURE__*/jsx(BaseBox, {
padding: "spacing.2",
backgroundColor: "surface.background.gray.intense",
borderRadius: "medium",
borderWidth: "thin",
borderColor: "surface.border.gray.muted",
children: showZoomPercentage ? /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
alignItems: "center",
gap: "spacing.2",
children: [/*#__PURE__*/jsx(Button, {
icon: ZoomInIcon,
onClick: handleZoomIn,
variant: "tertiary",
"aria-label": "Zoom in",
isDisabled: zoom >= 8
}), /*#__PURE__*/jsxs(Text, {
size: "medium",
children: [" ", Math.round(zoom * 100), "%"]
}), /*#__PURE__*/jsx(Button, {
icon: ZoomOutIcon,
onClick: handleZoomOut,
variant: "tertiary",
"aria-label": "Zoom out",
isDisabled: zoom <= 0.1
}), /*#__PURE__*/jsx(Button, {
icon: RefreshIcon,
onClick: function onClick() {
return handleReset();
},
variant: "tertiary",
"aria-label": "Reset zoom"
})]
}) : /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
alignItems: "center",
gap: "spacing.2",
children: [/*#__PURE__*/jsxs(ButtonGroup, {
variant: "tertiary",
children: [/*#__PURE__*/jsx(Button, {
icon: ZoomInIcon,
onClick: handleZoomIn,
"aria-label": "Zoom in"
}), /*#__PURE__*/jsx(Button, {
icon: ZoomOutIcon,
onClick: handleZoomOut,
"aria-label": "Zoom out"
})]
}), /*#__PURE__*/jsx(Button, {
icon: RefreshIcon,
onClick: function onClick() {
return handleReset();
},
"aria-label": "Reset zoom",
variant: "tertiary"
})]
})
}), trailing]
});
};
var PreviewFooter = /*#__PURE__*/assignWithoutSideEffects(_PreviewFooter, {
componentId: MetaConstants.PreviewFooter
});
var dotSpacing = 16;
var dotOpacity = 0.1;
var dotSize = 1;
var ZoomContainer = /*#__PURE__*/styled.div.withConfig({
displayName: "Previewweb__ZoomContainer",
componentId: "sc-1k59t11-0"
})(["width:100%;height:100%;cursor:", ";background-image:", ";background-size:", "px ", "px;.zoom-wrapper,.zoom-content{width:100%;height:100%;overflow:visible;display:flex;justify-content:center;align-items:center;}transition:cursor 0.1s ease;"], function (_ref2) {
var isDragEnabled = _ref2.isDragEnabled,
isDragging = _ref2.isDragging;
if (!isDragEnabled) return 'default';
return isDragging ? 'grabbing' : 'grab';
}, function (_ref3) {
var isDragEnabled = _ref3.isDragEnabled;
return isDragEnabled ? "radial-gradient(\n circle,\n rgba(0, 0, 0, ".concat(dotOpacity, ") ").concat(dotSize, "px,\n transparent ").concat(dotSize, "px\n )") : 'none';
}, dotSpacing, dotSpacing);
var TransFormWrapperContainer = /*#__PURE__*/styled.div.withConfig({
displayName: "Previewweb__TransFormWrapperContainer",
componentId: "sc-1k59t11-1"
})(["width:100%;height:100%;position:relative;overflow:hidden;background-color:", ";"], function (_ref4) {
var theme = _ref4.theme;
return theme.colors.surface.background.gray.moderate;
});
var Preview = function Preview(_ref5) {
var children = _ref5.children,
onFullScreenProp = _ref5.onFullScreen,
onZoomChange = _ref5.onZoomChange,
_ref5$zoomScaleStep = _ref5.zoomScaleStep,
zoomScaleStep = _ref5$zoomScaleStep === void 0 ? 0.1 : _ref5$zoomScaleStep,
_ref5$isDragAndZoomDi = _ref5.isDragAndZoomDisabled,
isDragAndZoomDisabled = _ref5$isDragAndZoomDi === void 0 ? false : _ref5$isDragAndZoomDi,
defaultZoom = _ref5.defaultZoom,
onDragChange = _ref5.onDragChange;
var _useControllableState = useControllableState({
onChange: onZoomChange,
defaultValue: defaultZoom !== null && defaultZoom !== void 0 ? defaultZoom : 1
}),
_useControllableState2 = _slicedToArray(_useControllableState, 2),
controlledZoom = _useControllableState2[0],
setControlledZoom = _useControllableState2[1];
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isFullScreen = _useState2[0],
setIsFullScreen = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isDragging = _useState4[0],
setIsDragging = _useState4[1];
var containerRef = React__default.useRef(null);
var handleTransformed = function handleTransformed(_ref6) {
var state = _ref6.state;
var scale = state.scale,
positionX = state.positionX,
positionY = state.positionY;
setControlledZoom(function () {
return scale;
});
onDragChange === null || onDragChange === void 0 ? void 0 : onDragChange({
x: positionX,
y: positionY
});
};
var handleFullScreenError = function handleFullScreenError(err) {
if (err instanceof DOMException) {
console.error("Fullscreen request failed: ".concat(err.name, " - ").concat(err.message));
} else {
console.error('Unexpected error during fullscreen request:', err);
}
};
var handleFullScreen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
var _containerRef$current;
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (document.fullscreenElement) {
_context.next = 13;
break;
}
_context.prev = 1;
_context.next = 4;
return (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.requestFullscreen();
case 4:
setIsFullScreen(true);
onFullScreenProp === null || onFullScreenProp === void 0 ? void 0 : onFullScreenProp();
_context.next = 11;
break;
case 8:
_context.prev = 8;
_context.t0 = _context["catch"](1);
handleFullScreenError(_context.t0);
case 11:
_context.next = 23;
break;
case 13:
_context.prev = 13;
_context.next = 16;
return document.exitFullscreen();
case 16:
setIsFullScreen(false);
onFullScreenProp === null || onFullScreenProp === void 0 ? void 0 : onFullScreenProp();
_context.next = 23;
break;
case 20:
_context.prev = 20;
_context.t1 = _context["catch"](13);
handleFullScreenError(_context.t1);
case 23:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 8], [13, 20]]);
})), [onFullScreenProp]);
// this is added to handle the fullscreen change if user exits fullscreen using the escape key, or browser's exit fullscreen button
useEffect(function () {
var handleFullScreenChange = function handleFullScreenChange() {
setIsFullScreen(!!document.fullscreenElement);
};
document.addEventListener('fullscreenchange', handleFullScreenChange);
return function () {
document.removeEventListener('fullscreenchange', handleFullScreenChange);
};
}, []);
// filter out preview header, preview body, preview footer separately using componentId
var previewHeader = React__default.Children.toArray(children).filter(function (child) {
return getComponentId(child) === MetaConstants.PreviewHeader;
}).map(function (child) {
if ( /*#__PURE__*/React__default.isValidElement(child)) {
return /*#__PURE__*/React__default.cloneElement(child, {
// @ts-expect-error
_onFullScreen: handleFullScreen
});
}
return child;
});
var previewBody = React__default.Children.toArray(children).filter(function (child) {
return getComponentId(child) === MetaConstants.PreviewBody;
});
var previewFooter = React__default.Children.toArray(children).filter(function (child) {
return getComponentId(child) === MetaConstants.PreviewFooter;
});
return /*#__PURE__*/jsx(PreviewProvider, {
value: {
zoom: controlledZoom,
isFullScreen: isFullScreen,
zoomScaleStep: zoomScaleStep,
defaultZoom: defaultZoom !== null && defaultZoom !== void 0 ? defaultZoom : 1
},
children: /*#__PURE__*/jsx(TransFormWrapperContainer, {
ref: containerRef,
children: /*#__PURE__*/jsx(TransformWrapper, {
onTransformed: handleTransformed,
minScale: 0.1,
maxScale: 8,
disabled: isDragAndZoomDisabled,
initialScale: defaultZoom !== null && defaultZoom !== void 0 ? defaultZoom : controlledZoom,
doubleClick: {
disabled: false
},
onPanningStart: function onPanningStart() {
return setIsDragging(true);
},
onPanningStop: function onPanningStop() {
return setIsDragging(false);
},
panning: {
velocityDisabled: true
},
limitToBounds: false,
centerOnInit: true,
children: function children() {
return /*#__PURE__*/jsxs(BaseBox, {
width: "100%",
height: "100%",
position: "relative",
overflow: "visible",
children: [previewFooter, previewHeader, /*#__PURE__*/jsx(ZoomContainer, {
isDragEnabled: !isDragAndZoomDisabled,
isDragging: isDragging,
children: /*#__PURE__*/jsx(TransformComponent, {
wrapperClass: "zoom-wrapper",
contentClass: "zoom-content",
children: previewBody
})
})]
});
}
})
})
});
};
export { Preview, PreviewBody, PreviewFooter, PreviewHeader };
//# sourceMappingURL=Preview.web.js.map