File tree Expand file tree Collapse file tree 4 files changed +53
-1
lines changed
documentation/src/components/Demos/Utils Expand file tree Collapse file tree 4 files changed +53
-1
lines changed Original file line number Diff line number Diff line change
1
+ The ` useHoverMode ` hook can also be updated to implement a "sticky" spec that
2
+ allows the user to click the element to toggle the visibility state. Once the
3
+ element has been clicked, the ` onMouseEnter ` and ` onMouseLeave ` behavior will be
4
+ disabled until the visibility is set to ` false ` once more.
Original file line number Diff line number Diff line change
1
+ import React , { ReactElement , useRef } from "react" ;
2
+ import { Button } from "@react-md/button" ;
3
+ import { DialogContent , FixedDialog } from "@react-md/dialog" ;
4
+ import { BELOW_CENTER_ANCHOR , useHoverMode } from "@react-md/utils" ;
5
+
6
+ export default function StickyHoverMode ( ) : ReactElement {
7
+ const {
8
+ stuck,
9
+ active,
10
+ handlers,
11
+ stickyHandlers,
12
+ visible,
13
+ setVisible,
14
+ } = useHoverMode ( {
15
+ sticky : true ,
16
+ } ) ;
17
+ const buttonRef = useRef < HTMLButtonElement > ( null ) ;
18
+
19
+ return (
20
+ < >
21
+ < Button { ...stickyHandlers } ref = { buttonRef } >
22
+ Button
23
+ </ Button >
24
+ < FixedDialog
25
+ aria-label = "Additional Information"
26
+ id = "some-dialog-id"
27
+ visible = { visible }
28
+ onRequestClose = { ( ) => setVisible ( false ) }
29
+ { ...handlers }
30
+ anchor = { BELOW_CENTER_ANCHOR }
31
+ fixedTo = { buttonRef }
32
+ options = { { preventOverlap : true } }
33
+ overlay = { ! stuck && active ? false : undefined }
34
+ disableScrollLock = { ! active }
35
+ >
36
+ < DialogContent > Some amazing content!</ DialogContent >
37
+ </ FixedDialog >
38
+ </ >
39
+ ) ;
40
+ }
Original file line number Diff line number Diff line change @@ -26,6 +26,9 @@ import gridListSize from "./GridListSize.md";
26
26
import HoverMode from "./HoverMode" ;
27
27
import hoverMode from "./HoverMode.md" ;
28
28
29
+ import StickyHoverMode from "./StickyHoverMode" ;
30
+ import stickyHoverMode from "./StickyHoverMode.md" ;
31
+
29
32
const demos = [
30
33
{
31
34
name : "App Size Listener Example" ,
@@ -67,6 +70,11 @@ const demos = [
67
70
description : hoverMode ,
68
71
children : < HoverMode /> ,
69
72
} ,
73
+ {
74
+ name : "Sticky Hover Mode" ,
75
+ description : stickyHoverMode ,
76
+ children : < StickyHoverMode /> ,
77
+ } ,
70
78
] ;
71
79
72
80
export default function Utils ( ) : ReactElement {
Original file line number Diff line number Diff line change @@ -195,7 +195,7 @@ export interface HoverModeReturnValue<E extends HTMLElement>
195
195
* onRequestClose={() => setVisible(false)}
196
196
* fixedTo={buttonRef}
197
197
* overlay={!stuck && active ? false : undefined}
198
- * disableFocusOnMount ={active}
198
+ * disableScrollLock ={active}
199
199
* >
200
200
* <YourDialogContent />
201
201
* </FixedDialog>
You can’t perform that action at this time.
0 commit comments