@reach/dialog#DialogContent JavaScript Examples
The following examples show how to use
@reach/dialog#DialogContent.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: modal.js From website with Apache License 2.0 | 6 votes |
|
Modal = ({ children, label, isOpen, onClose }) => (
<DialogOverlay
className={modalStyles.overlay}
isOpen={isOpen}
onDismiss={onClose}
>
<DialogContent aria-label={label} className={modalStyles.content}>
<button
type="button"
className={modalStyles.close}
onClick={event => {
event.preventDefault()
onClose()
}}
aria-label="Close"
>
×
</button>
{children}
</DialogContent>
</DialogOverlay>
)
Example #2
| Source File: index.js From uniswap-v1-frontend with GNU General Public License v3.0 | 5 votes |
|
FilteredDialogContent = ({ minHeight, maxHeight, isOpen, slideInAnimation, mobile, ...rest }) => (
<DialogContent {...rest} />
)
Example #3
| Source File: Dialog.js From aws-amplify-quick-notes with MIT No Attribution | 5 votes |
|
StyledDialogContent = styled(DialogContent)`
background-color: #ffffff;
border-radius: 4px;
max-width: 800px;
box-shadow: 0 0 9px rgba(255, 255, 255, 0.3);
padding: 24px;
margin: 24px auto;
`
Example #4
| Source File: index.js From sorbet-finance with GNU General Public License v3.0 | 5 votes |
|
FilteredDialogContent = ({ minHeight, maxHeight, ...rest }) => <DialogContent {...rest} />
Example #5
| Source File: index.js From pine-interface with GNU General Public License v3.0 | 5 votes |
|
FilteredDialogContent = ({ minHeight, maxHeight, ...rest }) => <DialogContent {...rest} />
Example #6
| Source File: grid.js From website with Apache License 2.0 | 4 votes |
|
Grid = ({ states, us, relatedPost, metric, disclaimer = false }) => {
const [activeState, setActiveState] = useState(false)
const [showUs, setShowUs] = useState(false)
return (
<div className={gridStyle.wrapper} aria-hidden>
<svg
className={gridStyle.us}
viewBox="0 0 150 160"
tabIndex="0"
aria-hidden
>
<US
r={50 * 1.5}
value={us.value}
className={value => metric.getColor(value)}
onClick={() => {
setShowUs(true)
setActiveState(false)
}}
inGrid
/>
</svg>
<ul className={gridStyle.grid}>
{states.map(state => (
<li key={`grid-${state.state}`}>
<button
type="button"
className={gridStyle.state}
onClick={event => {
event.preventDefault()
setActiveState(state)
}}
>
<span>
<div className={gridStyle.name}>
<abbr title={state.name}>{state.state}</abbr>
</div>
<div className={gridStyle.value}>
{metric.format(state.value)}
</div>
<div
className={classnames(
gridStyle.indicator,
metric.getColor(state.value),
)}
/>
</span>
</button>
</li>
))}
</ul>
<ul className={gridStyle.legend}>
{metric.legend.map(item => (
<li key={`grid-legend-${item.label}`}>
<div className={classnames(gridStyle.swatch, item.style)} />
{item.label}
</li>
))}
</ul>
{disclaimer && <Disclaimer text={disclaimer.childMarkdownRemark.html} />}
<DialogOverlay
className={gridStyle.overlay}
isOpen={(activeState || showUs) && true}
onDismiss={() => {
setActiveState(false)
setShowUs(false)
}}
>
<DialogContent className={gridStyle.modal}>
<button
className={gridStyle.modalClose}
type="button"
aria-label="close"
onClick={event => {
event.preventDefault()
setShowUs(false)
setActiveState(false)
}}
>
×
</button>
<Sidebar
state={showUs ? false : { state: activeState }}
relatedPost={relatedPost}
inModal
/>
</DialogContent>
</DialogOverlay>
</div>
)
}
Example #7
| Source File: mobile-menu.js From phirannodesigns-coding-challenge with MIT License | 4 votes |
|
export function MobileMenu({ isOpen, setIsOpen }) {
const AnimatedDialogOverlay = animated(DialogOverlay);
const AnimatedDialogContent = animated(DialogContent);
const transitions = useTransition(isOpen, null, {
from: { opacity: 0, x: 100 },
enter: { opacity: 1, x: 0 },
leave: { opacity: 0, x: 100 },
});
// Reach Dialog is supposed to handle closing the using the 'Escape' key but it doesn't seem to work so we're doing it ourselves
const handleEscape = (e) => {
if (typeof document !== 'undefined') {
if (e.key === 'Escape') {
setIsOpen(false);
}
}
};
if (typeof document !== 'undefined') {
document.addEventListener('keydown', handleEscape);
}
return transitions.map(
({ item, key, props: styles }) =>
item && (
<AnimatedDialogOverlay
key={key}
onClick={() => setIsOpen(false)}
style={{ opacity: styles.opacity }}
className="fixed absolute inset-0 z-40 md:hidden"
>
<div className="fixed inset-0 z-40 flex justify-end bg-gray-600 bg-opacity-75">
<AnimatedDialogContent
aria-label="Sidebar"
style={{
transform: styles.x.interpolate(
(value) => `translate3d(${value}%, 0, 0)`
),
}}
className="relative flex flex-col flex-1 w-full max-w-xs py-4 bg-teal-800 focus:outline-none"
>
<div className="flex-shrink-0 w-14">
{/* Dummy element to force sidebar to shrink to fit close icon */}
</div>
<div className="absolute top-0 left-0 p-1 -ml-14">
<button
type="button"
onClick={() => setIsOpen(false)}
aria-label="Close sidebar"
className="flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:bg-gray-600"
>
<svg
className="w-6 h-6 text-white"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="flex items-center flex-shrink-0 px-4">
<Logo className="w-auto h-10 text-teal-300 fill-current" />
</div>
<div className="flex-1 h-0 mt-5 overflow-y-auto">
<nav className="px-2">
{mainNavigation.map((node) => (
<Link
key={node.id}
to={node.slug}
className="flex items-center px-2 py-2 mt-1 text-base font-medium leading-6 text-teal-300 transition duration-150 ease-in-out rounded-md group hover:text-white hover:bg-teal-700 focus:outline-none focus:text-white focus:bg-teal-700"
activeClassName="flex items-center px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-teal-900 rounded-md group focus:outline-none focus:bg-teal-700"
>
<node.icon className="w-6 h-6 mr-4 text-teal-400 transition duration-150 ease-in-out group-hover:text-teal-300 group-focus:text-teal-300" />
{node.label}
</Link>
))}
</nav>
</div>
</AnimatedDialogContent>
</div>
</AnimatedDialogOverlay>
)
);
}
