@atlaskit/modal-dialog
Version:
A modal dialog displays content that requires user interaction, in a layer above the page.
92 lines (91 loc) • 3.98 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FullScreenModalDialog = void 0;
Object.defineProperty(exports, "ModalBody", {
enumerable: true,
get: function get() {
return _modalBody.default;
}
});
Object.defineProperty(exports, "ModalFooter", {
enumerable: true,
get: function get() {
return _modalFooter.default;
}
});
Object.defineProperty(exports, "ModalHeader", {
enumerable: true,
get: function get() {
return _modalHeader.default;
}
});
Object.defineProperty(exports, "ModalTitle", {
enumerable: true,
get: function get() {
return _modalTitle.default;
}
});
Object.defineProperty(exports, "ModalTransition", {
enumerable: true,
get: function get() {
return _modalTransition.default;
}
});
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _modalWrapper = _interopRequireDefault(require("./internal/components/modal-wrapper"));
var _modalTransition = _interopRequireDefault(require("./modal-transition"));
var _modalHeader = _interopRequireDefault(require("./modal-header"));
var _modalTitle = _interopRequireDefault(require("./modal-title"));
var _modalBody = _interopRequireDefault(require("./modal-body"));
var _modalFooter = _interopRequireDefault(require("./modal-footer"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// eslint-disable-next-line @repo/internal/react/require-jsdoc
var FullScreenModalDialog = exports.FullScreenModalDialog = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
return /*#__PURE__*/_react.default.createElement(_modalWrapper.default
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
, (0, _extends2.default)({}, props, {
/**
* Making this an internal-only prop and exposing it through a facade
* component so that we can keep public types simple.
*
* Otherwise we need complex conditional types that are harder to
* understand / maintain and aren't actually any better for consumers.
*/
isFullScreen: true
/**
* Setting width and height to 100% because the `isFullScreen` prop just
* removes the spacing around the modal. We still need to set the size to
* be 100%.
*
* Intentionally reusing the existing internals as much as possible to
* keep complexity low and avoid duplication. It also makes the fullscreen
* changes easier to remove.
*/,
width: "100%",
height: "100%"
/**
* Full screen modals only support body scrolling, so that the header
* and close button will always stay visible.
*/,
shouldScrollInViewport: false
/**
* This prop is a noop for fullscreen modals, so we aren't exposing it to consumers.
* Using `false` internally to avoid potential bugs.
*/,
shouldCloseOnOverlayClick: false
/**
* The blanket is only briefly visible for fullscreen modals when fading in,
* but provides a bit more of a visual cue that it has appeared on top.
*
* We don't want consumers to disable it.
*/,
isBlanketHidden: false,
ref: ref
}));
});
FullScreenModalDialog.displayName = 'FullScreenModalDialog';