@amaui/ui-react
Version:
UI for React
279 lines (278 loc) • 15.2 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const Portal_1 = __importDefault(require("../Portal"));
const Focus_1 = __importDefault(require("../Focus"));
const Fade_1 = __importDefault(require("../Fade"));
const Surface_1 = __importDefault(require("../Surface"));
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'fixed',
inset: '0',
zIndex: theme.z_index.modal,
pointerEvents: 'none'
},
// Size
size_small: {
padding: theme.methods.space.value(2, 'px'),
borderRadius: `${(theme.shape.radius.unit * 2) + (theme.shape.radius.unit / 2)}px`
},
size_regular: {
padding: theme.methods.space.value('md', 'px'),
borderRadius: `${(theme.shape.radius.unit * 3) + (theme.shape.radius.unit / 2)}px`
},
size_large: {
padding: theme.methods.space.value('lg', 'px'),
borderRadius: `${(theme.shape.radius.unit * 4) + (theme.shape.radius.unit / 2)}px`
},
background: {
position: 'absolute',
inset: '0',
width: '100%',
height: '100%',
background: 'rgba(0, 0, 0, 0.44)',
zIndex: -1,
pointerEvents: 'all'
},
backgroundInvisible: {
background: 'transparent'
},
modalRoot: {
position: 'relative',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
pointerEvents: 'none'
},
surface: {
display: 'flex',
flexDirection: 'column',
minWidth: `280px`,
maxHeight: `calc(100% - ${theme.methods.space.value('xl') * 2}px)`,
margin: theme.methods.space.value('xl', 'px'),
overflow: 'hidden',
pointerEvents: 'all'
},
noSurface: {
pointerEvents: 'all',
maxWidth: '100%'
},
fullScreen: {
width: '100%',
height: '100%',
borderRadius: '0 !important',
maxWidth: 'unset !important',
maxHeight: 'unset !important',
margin: '0 !important'
},
fullWidth: { width: `calc(100% - ${theme.methods.space.value('xl') * 2}px)` },
// minWidth
minWidth_xxs: { minWidth: 'clamp(0px, 320px, calc(100vw - 48px))' },
minWidth_xs: { minWidth: 'clamp(0px, 400px, calc(100vw - 48px))' },
minWidth_sm: { minWidth: 'clamp(0px, 480px, calc(100vw - 48px))' },
minWidth_rg: { minWidth: 'clamp(0px, 560px, calc(100vw - 48px))' },
minWidth_lg: { minWidth: 'clamp(0px, 800px, calc(100vw - 48px))' },
minWidth_xl: { minWidth: 'clamp(0px, 1120px, calc(100vw - 48px))' },
minWidth_xxl: { minWidth: 'clamp(0px, 1360px, calc(100vw - 48px))' },
minWidth_unset: { minWidth: `unset` },
// maxWidth
maxWidth_xxs: { maxWidth: `320px` },
maxWidth_xs: { maxWidth: `400px` },
maxWidth_sm: { maxWidth: `480px` },
maxWidth_rg: { maxWidth: `560px` },
maxWidth_lg: { maxWidth: `800px` },
maxWidth_xl: { maxWidth: `1120px` },
maxWidth_xxl: { maxWidth: `1360px` },
maxWidth_unset: { maxWidth: `unset` }
}), { name: 'amaui-Modal' });
let MODALS_OPEN = 0;
const Modal = react_1.default.forwardRef((props_, ref) => {
var _a;
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiModal) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
const Portal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Portal) || Portal_1.default; }, [theme]);
const Focus = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Focus) || Focus_1.default; }, [theme]);
const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
const { tonal = true, color = 'primary', size = 'regular', open: open_, openDefault, mainRef, backgroundRef, partialyOpened, minWidth: minWidth_, maxWidth: maxWidth_ = 'rg', fullScreen, fullWidth, background = true, modalWrapper = true, modalWrapperSurface = true, portal = true, focus = true, freezeScroll = true, disableKeyboardClose, disableBackgroundClose, backgroundInvisible, onClose: onClose_, NoSurfaceProps, SurfaceProps, BackgroundProps, PortalProps: PortalProps_, TransitionComponentProps, BackgroundComponent = Fade, TransitionComponent = Fade, Component = 'div', className, children } = props, other = __rest(props, ["tonal", "color", "size", "open", "openDefault", "mainRef", "backgroundRef", "partialyOpened", "minWidth", "maxWidth", "fullScreen", "fullWidth", "background", "modalWrapper", "modalWrapperSurface", "portal", "focus", "freezeScroll", "disableKeyboardClose", "disableBackgroundClose", "backgroundInvisible", "onClose", "NoSurfaceProps", "SurfaceProps", "BackgroundProps", "PortalProps", "TransitionComponentProps", "BackgroundComponent", "TransitionComponent", "Component", "className", "children"]);
const { classes } = useStyle();
const [open, setOpen] = react_1.default.useState(openDefault !== undefined ? openDefault : open_);
const [inProp, setInProp] = react_1.default.useState(open_);
const [portalElement, setPortalElement] = react_1.default.useState();
const refs = {
root: react_1.default.useRef(undefined),
focus: react_1.default.useRef(undefined),
open: react_1.default.useRef(open),
freezeScroll: react_1.default.useRef(undefined),
interval: react_1.default.useRef(undefined)
};
const mobile = (0, useMediaQuery_1.default)('(max-width: 767px)', { element: refs.root.current });
const minWidth = minWidth_ !== undefined ? minWidth_ : !mobile ? 'sm' : undefined;
refs.open.current = open;
refs.freezeScroll.current = freezeScroll;
const modal = {
open: () => {
var _a;
MODALS_OPEN++;
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
if (freezeScroll)
rootDocument.body.style.overflow = 'hidden';
},
close: () => {
var _a;
MODALS_OPEN--;
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
if (MODALS_OPEN <= 0 && freezeScroll)
rootDocument.body.style.removeProperty('overflow');
}
};
let maxWidth = maxWidth_;
if (fullWidth)
maxWidth = undefined;
const onClose = () => {
if ((0, utils_1.is)('function', onClose_) && open)
onClose_();
};
const onKeyDown = (event) => {
if (!refs.open.current)
return;
if (event.key === 'Escape' && !disableKeyboardClose) {
event.stopPropagation();
onClose();
}
};
react_1.default.useEffect(() => {
var _a;
const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
if (open)
modal.open();
// Bug clean up fix
refs.interval.current = setInterval(() => {
if (MODALS_OPEN <= 0 && refs.freezeScroll.current && rootDocument.body.style.overflow === 'hidden') {
rootDocument.body.style.removeProperty('overflow');
}
}, 1400);
return () => {
if (open)
modal.close();
clearInterval(refs.interval.current);
};
}, []);
react_1.default.useEffect(() => {
if (open_ && !open) {
setOpen(true);
setInProp(true);
modal.open();
}
else if (!open_ && open)
modalWrapper ? setInProp(false) : setOpen(false);
}, [open_]);
react_1.default.useEffect(() => {
var _a;
if (open)
(_a = refs.focus.current) === null || _a === void 0 ? void 0 : _a.focus();
}, [open]);
const onExited = (value) => {
setOpen(false);
modal.close();
if ((0, utils_1.is)('function', TransitionComponentProps === null || TransitionComponentProps === void 0 ? void 0 : TransitionComponentProps.onExited))
TransitionComponentProps === null || TransitionComponentProps === void 0 ? void 0 : TransitionComponentProps.onExited(value);
};
if (!open && !partialyOpened)
return null;
const PortalComponent = portal ? Portal : react_1.default.Fragment;
let PortalProps = {};
if (portal) {
const rootDocumentElement = (0, utils_1.isEnvironment)('browser') ? (((_a = (portalElement || refs.root.current)) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
if ((0, utils_1.isEnvironment)('browser'))
PortalProps.element = rootDocumentElement.body;
PortalProps = Object.assign(Object.assign({}, PortalProps), PortalProps_);
}
const FocusComponent = focus ? Focus : react_1.default.Fragment;
const FocusProps = focus ? {
ref: refs.focus,
onKeyDown
} : {};
const MainProps = {
role: 'dialog',
'aria-labelledby': 'amaui-modal-title',
'aria-describedby': 'amaui-modal-text',
'aria-modal': 'true',
'aria-live': 'assertive'
};
let Main = children && react_1.default.cloneElement(children, Object.assign({}, MainProps));
if (modalWrapper)
Main = ((0, jsx_runtime_1.jsx)("div", Object.assign({}, MainProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Modal', theme) && [
'amaui-Modal-modal-root'
],
classes.modalRoot
]) }, { children: (0, jsx_runtime_1.jsx)(TransitionComponent, Object.assign({ in: inProp }, TransitionComponentProps, { onExited: onExited, add: true }, { children: !modalWrapperSurface ?
((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Modal', theme) && [
'amaui-Modal-no-surface'
],
NoSurfaceProps === null || NoSurfaceProps === void 0 ? void 0 : NoSurfaceProps.className,
classes.noSurface
]) }, { children: children }))) :
(0, jsx_runtime_1.jsx)(Surface, Object.assign({ ref: mainRef, tonal: tonal, color: color, tabIndex: '-1' }, SurfaceProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Modal', theme) && [
'amaui-Modal-surface',
`amaui-Modal-size-${size}`
],
classes.surface,
classes[`minWidth_${minWidth}`],
classes[`maxWidth_${maxWidth}`],
classes[`size_${size}`],
fullScreen && classes.fullScreen,
fullWidth && classes.fullWidth,
SurfaceProps === null || SurfaceProps === void 0 ? void 0 : SurfaceProps.className
]), onKeyDown: onKeyDown }, { children: children })) })) })));
return ((0, jsx_runtime_1.jsx)(PortalComponent, Object.assign({}, PortalProps, { children: (0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
setPortalElement(item);
}, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Modal', theme) && [
'amaui-Modal-root',
open && `amaui-Modal-open`,
focus && `amaui-Modal-focus`
],
className,
classes.root
]) }, other, { children: (0, jsx_runtime_1.jsxs)(FocusComponent, Object.assign({}, FocusProps, { children: [background && ((0, jsx_runtime_1.jsx)(BackgroundComponent, Object.assign({ in: inProp, add: true }, BackgroundProps, { children: (0, jsx_runtime_1.jsx)("div", { ref: backgroundRef, onClick: () => !disableBackgroundClose && onClose(), className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Modal', theme) && [
'amaui-Modal-background',
backgroundInvisible && 'amaui-Modal-background-invisible'
],
classes.background,
backgroundInvisible && classes.backgroundInvisible
]) }) }))), Main] })) })) })));
});
Modal.displayName = 'amaui-Modal';
exports.default = Modal;