How to use @arch-ui/modal-utils - 10 common examples
To help you get started, we’ve selected a few @arch-ui/modal-utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
keystonejs / keystone / packages / arch / packages / popout / src / index.js View on Github 
style={style} // style comes from Transition
>
{children}
,
attachTo
)
: null;
}
}
export default withModalHandlers(Popout, { transition: springDown });useKeydownHandler(event => {
if (onKeyDown && stackIndex === 0) {
onKeyDown(event);
}
});
const dialogTitleId = useMemo(generateUEID, []);
if (!attachTo) {
return null;
}
return createPortal(
{isOpen ? (
) : null}render() {
const { attachTo, children, component, width, transitionState } = this.props;
if (!attachTo) {
return null;
}
return createPortal(
<dialog width="{width}">
{children}
</dialog>
,
attachTo
);
}
}{transitionState => (
{content}
)}
heading,
initialFocus,
onClose,
width,
transitionState,
} = this.props;
const dialogTitleId = generateUEID();
if (!attachTo) {
return null;
}
return createPortal(
<dialog aria-labelledby="{dialogTitleId}">
{heading} Dialog
{heading ? (
<header>
<title>{heading}</title>
</header></dialog>,
attachTo
);
}
ModalDialogComponent.defaultProps = {
attachTo: typeof document !== 'undefined' ? document.body : null,
closeOnBlanketClick: false,
component: 'div',
width: 640,
};
const ModalDialog = memo(ModalDialogComponent);
export default withTransitionState(ModalDialog);<title>{heading}</title>
) : null}
{children}
{footer ? <footer>{footer}</footer> : null}
,
attachTo
);
}
}
export default withTransitionState(ModalDialog);<dialog width="{width}">
{children}
</dialog>
,
attachTo
);
}
}
export default withTransitionState(ModalConfirm);>
{content}
);
})}
,
attachTo
);
} else {
return null;
}
}
}
export default withModalHandlers(Dropdown, { transition: slideDown });render() {
const {
attachTo,
children,
closeOnBlanketClick,
component,
footer,
heading,
initialFocus,
onClose,
width,
transitionState,
} = this.props;
const dialogTitleId = generateUEID();
if (!attachTo) {
return null;
}
return createPortal(@arch-ui/modal-utils
Modal Utilities as used in @keystonejs Admin UI.
