Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
chore(docs): Added Sticky Hover Mode Example
  • Loading branch information
mlaursen committed Apr 18, 2021
1 parent 1e0e783 commit 1a94a31
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 1 deletion.
@@ -0,0 +1,4 @@
The `useHoverMode` hook can also be updated to implement a "sticky" spec that
allows the user to click the element to toggle the visibility state. Once the
element has been clicked, the `onMouseEnter` and `onMouseLeave` behavior will be
disabled until the visibility is set to `false` once more.
@@ -0,0 +1,40 @@
import React, { ReactElement, useRef } from "react";
import { Button } from "@react-md/button";
import { DialogContent, FixedDialog } from "@react-md/dialog";
import { BELOW_CENTER_ANCHOR, useHoverMode } from "@react-md/utils";

export default function StickyHoverMode(): ReactElement {
const {
stuck,
active,
handlers,
stickyHandlers,
visible,
setVisible,
} = useHoverMode({
sticky: true,
});
const buttonRef = useRef<HTMLButtonElement>(null);

return (
<>
<Button {...stickyHandlers} ref={buttonRef}>
Button
</Button>
<FixedDialog
aria-label="Additional Information"
id="some-dialog-id"
visible={visible}
onRequestClose={() => setVisible(false)}
{...handlers}
anchor={BELOW_CENTER_ANCHOR}
fixedTo={buttonRef}
options={{ preventOverlap: true }}
overlay={!stuck && active ? false : undefined}
disableScrollLock={!active}
>
<DialogContent>Some amazing content!</DialogContent>
</FixedDialog>
</>
);
}
8 changes: 8 additions & 0 deletions packages/documentation/src/components/Demos/Utils/index.tsx
Expand Up @@ -26,6 +26,9 @@ import gridListSize from "./GridListSize.md";
import HoverMode from "./HoverMode";
import hoverMode from "./HoverMode.md";

import StickyHoverMode from "./StickyHoverMode";
import stickyHoverMode from "./StickyHoverMode.md";

const demos = [
{
name: "App Size Listener Example",
Expand Down Expand Up @@ -67,6 +70,11 @@ const demos = [
description: hoverMode,
children: <HoverMode />,
},
{
name: "Sticky Hover Mode",
description: stickyHoverMode,
children: <StickyHoverMode />,
},
];

export default function Utils(): ReactElement {
Expand Down
2 changes: 1 addition & 1 deletion packages/utils/src/hover/useHoverMode.ts
Expand Up @@ -195,7 +195,7 @@ export interface HoverModeReturnValue<E extends HTMLElement>
* onRequestClose={() => setVisible(false)}
* fixedTo={buttonRef}
* overlay={!stuck && active ? false : undefined}
* disableFocusOnMount={active}
* disableScrollLock={active}
* >
* <YourDialogContent />
* </FixedDialog>
Expand Down

0 comments on commit 1a94a31

Please sign in to comment.