@braineet/ui
Version:
Braineet design system
156 lines (155 loc) • 6.82 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.ModalWrapper = exports.ModalOverlay = exports.ModalInner = exports.ModalContentInner = void 0;
var _renderprops = require("react-spring/renderprops.cjs");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _styledSystem = require("styled-system");
var _utils = require("../../utils");
var _box = _interopRequireDefault(require("../box"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(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 = {}; 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; }
var types = {
standard: {
direction: 'column'
},
confirmation: {
alignItems: 'center',
direction: 'column'
}
};
var DefaultModalwrapper = _styledComponents.default.div.withConfig({
displayName: "styles__DefaultModalwrapper",
componentId: "sc-1oll552-0"
})(["display:flex;justify-content:center;position:fixed;width:100vw;height:100vh;left:0px;top:0px;overflow:", ";z-index:", ";", ""], function (p) {
return p.scrollBehavior && p.scrollBehavior === 'inside' ? 'hidden' : 'auto';
}, function (props) {
return props.theme.zIndex.modal;
}, function (p) {
return p.isCentered && (0, _styledComponents.css)(["align-items:center !important;"]);
});
var ModalWrapper = (0, _styledComponents.default)(DefaultModalwrapper).withConfig({
displayName: "styles__ModalWrapper",
componentId: "sc-1oll552-1"
})((0, _styledSystem.variant)({
variants: {
standard: {
alignItems: 'flex-start'
},
confirmation: {
alignItems: 'center'
}
}
}));
exports.ModalWrapper = ModalWrapper;
var ModalInner = (0, _styledComponents.default)(_renderprops.animated.div).withConfig({
displayName: "styles__ModalInner",
componentId: "sc-1oll552-2"
})(["position:relative;display:flex;", " padding:", ";", " box-shadow:0 8px 16px -8px ", ";background-color:", ";animation-timing-function:cubic-bezier(0,1,1,1);color:inherit;z-index:", ";max-width:692px;border:2px solid ", ";outline:0px;.focusLockModal{display:flex;flex-direction:column;flex-grow:1;border-radius:inherit;width:100%;}", " ", ""], function (p) {
return p.$standalone ? 'flex-direction: column;' : '';
}, function (p) {
return p.theme.spaces.md;
}, (0, _utils.borderRadius)(16), function (p) {
return p.theme.utils.lighten('black', 0.32);
}, function (p) {
return p.theme.colors.background.white;
}, function (props) {
return props.theme.zIndex.modal;
}, function (p) {
return p.theme.utils.lighten('black', 0.1);
}, function (props) {
return (0, _styledSystem.variant)({
prop: 'size',
variants: {
xxs: {
width: props.$width || '100%',
maxWidth: '24rem',
marginTop: '3.75rem',
marginBottom: '3.75rem',
maxHeight: props.$scrollBehavior === 'inside' ? 'calc(100% - 7.5rem)' : null
},
xs: {
width: props.$width || '100%',
maxWidth: '28rem',
marginTop: '3.75rem',
marginBottom: '3.75rem',
maxHeight: props.$scrollBehavior === 'inside' ? 'calc(100% - 7.5rem)' : null
},
sm: {
width: props.$width || '100%',
maxWidth: '32rem',
marginTop: '3.75rem',
marginBottom: '3.75rem',
maxHeight: props.$scrollBehavior === 'inside' ? 'calc(100% - 7.5rem)' : null
},
md: {
width: props.$width || '100%',
maxWidth: '36rem',
marginTop: '3.75rem',
marginBottom: '3.75rem',
maxHeight: props.$scrollBehavior === 'inside' ? 'calc(100% - 7.5rem)' : null
},
lg: {
width: props.$width || '100%',
maxWidth: '40rem',
marginTop: '3.75rem',
marginBottom: '3.75rem',
maxHeight: props.$scrollBehavior === 'inside' ? 'calc(100% - 7.5rem)' : null
},
xl: {
width: props.$width || '100%',
maxWidth: '44rem',
marginTop: '3.75rem',
marginBottom: '3.75rem',
maxHeight: props.$scrollBehavior === 'inside' ? 'calc(100% - 7.5rem)' : null
},
fullscreen: {
width: props.$width || '100%',
maxWidth: '100%',
marginTop: '0',
marginBottom: '0',
height: props.$scrollBehavior === 'inside' ? '100%' : null,
minHeight: props.$scrollBehavior === 'outside' ? '100%' : null
},
fullscreenSticky: {
width: props.$width || 'calc(100vw - 1rem)',
maxWidth: 'calc(100vw - 1rem)',
marginTop: '8px',
marginBottom: '0',
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
borderBottom: 'none',
height: props.$scrollBehavior === 'inside' ? 'calc(100% - 8px)' : null,
minHeight: props.$scrollBehavior === 'outside' ? 'calc(100% - 8px)' : null
}
}
});
}, function (p) {
return p.$modalInnerStyles;
});
exports.ModalInner = ModalInner;
var ModalContentInner = (0, _styledComponents.default)(_box.default).withConfig({
displayName: "styles__ModalContentInner",
componentId: "sc-1oll552-3"
})({
display: 'flex',
height: '100%',
flexDirection: function flexDirection(props) {
return types[props.variant].direction;
},
alignItems: function alignItems(props) {
return types[props.variant].alignItems;
}
});
exports.ModalContentInner = ModalContentInner;
var ModalOverlay = (0, _styledComponents.default)(_box.default).withConfig({
displayName: "styles__ModalOverlay",
componentId: "sc-1oll552-4"
})(["position:fixed;left:0px;top:0px;width:100vw;height:100vh;z-index:", ";background-color:", ";", ""], function (props) {
return props.theme.zIndex.modal;
}, function (p) {
return p.theme.utils.lighten(p.theme.colors.black90, 0.6);
}, function (p) {
return p.overlayStyles;
});
exports.ModalOverlay = ModalOverlay;