diff --git a/README.md b/README.md index eaf6df1..460d4e4 100644 --- a/README.md +++ b/README.md @@ -224,7 +224,8 @@ connect components easily: - `bindToggle`: creates props for a component that toggles the popup when clicked. - `bindHover`: creates props for a component that opens the popup while hovered. **NOTE**: See [this guidance](#using-popover-and-menu-with-bindhover) if you are using `bindHover` with `Popover` or `Menu`. -- `bindFocus`: creates props for a component that opens the popup while hovered. +- `bindFocus`: creates props for a component that opens the popup while focus. +- `bindDoubleClick`: creates props for a component that opens the popup while double click. To use one of these functions, you should call it with the object returned by `usePopupState` and spread the return value into the desired diff --git a/demo/Root.js b/demo/Root.js index 94c6cb4..46dd3ba 100644 --- a/demo/Root.js +++ b/demo/Root.js @@ -22,6 +22,10 @@ import FocusPopover from './examples/FocusPopover' import FocusPopoverCode from '!!raw-loader!./examples/FocusPopover' import FocusPopoverHooks from './examples/FocusPopover.hooks' import FocusPopoverHooksCode from '!!raw-loader!./examples/FocusPopover.hooks' +import DoubleClickPopover from './examples/DoubleClickPopover' +import DoubleClickPopoverCode from '!!raw-loader!./examples/DoubleClickPopover' +import DoubleClickPopoverHooks from './examples/DoubleClickPopover.hooks' +import DoubleClickPopoverHooksCode from '!!raw-loader!./examples/DoubleClickPopover.hooks' import HoverMenu from './examples/HoverMenu' import HoverMenuCode from '!!raw-loader!./examples/HoverMenu' import HoverMenuHooks from './examples/HoverMenu.hooks' @@ -106,6 +110,14 @@ const Root = ({ classes }) => ( hooksExample={} hooksCode={FocusPopoverHooksCode} /> + } + code={DoubleClickPopoverCode} + hooksExample={} + hooksCode={DoubleClickPopoverHooksCode} + /> { + const popupState = usePopupState({ + variant: 'popover', + popupId: 'demoPopover', + }) + + return ( +
+ + + + The content of the Popover. + + +
+ ) +} + +export default DoubleClickPoperPopupState diff --git a/demo/examples/DoubleClickPopover.js b/demo/examples/DoubleClickPopover.js new file mode 100644 index 0000000..4f8b6a6 --- /dev/null +++ b/demo/examples/DoubleClickPopover.js @@ -0,0 +1,38 @@ +import React from 'react' +import Typography from '@mui/material/Typography' +import Popover from '@mui/material/Popover' +import Button from '@mui/material/Button' +import PopupState, { + bindDoubleClick, + bindPopper, +} from 'material-ui-popup-state' +import { ClickAwayListener } from '@mui/material' + +const DoubleClickPoperPopupState = ({ classes }) => ( + + {(popupState) => ( + + + + + The content of the Popover. + + + + )} + +) + +export default DoubleClickPoperPopupState diff --git a/src/core.d.ts b/src/core.d.ts index 80cddab..796d4bf 100644 --- a/src/core.d.ts +++ b/src/core.d.ts @@ -122,6 +122,19 @@ export function bindFocus(popupState: PopupState): ControlAriaProps & { onBlur: (event: FocusEvent) => void } +/** + * Creates props for a component that opens the popup while double click. + * + * @param {object} popupState the argument passed to the child function of + * `PopupState` + */ +export function bindDoubleClick(popupState: PopupState): { + 'aria-controls'?: string + 'aria-describedby'?: string + 'aria-haspopup': true | undefined + onDoubleClick: (event: SyntheticEvent) => any +} + /** * Creates props for a `Popover` component. * diff --git a/src/core.js b/src/core.js index 20aeda2..d3d5b0f 100644 --- a/src/core.js +++ b/src/core.js @@ -373,6 +373,33 @@ export function bindFocus(popupState: PopupState): {| } } +/** + * Creates props for a component that opens the popup while double click. + * + * @param {object} popupState the argument passed to the child function of + * `PopupState` + */ +export function bindDoubleClick({ + isOpen, + open, + popupId, + variant, +}: PopupState): {| + 'aria-controls'?: ?string, + 'aria-describedby'?: ?string, + 'aria-haspopup': ?true, + onDoubleClick: (event: SyntheticEvent) => any, +|} { + return { + // $FlowFixMe + [variant === 'popover' ? 'aria-controls' : 'aria-describedby']: isOpen + ? popupId + : null, + 'aria-haspopup': variant === 'popover' ? true : undefined, + onDoubleClick: open, + } +} + /** * Creates props for a `Popover` component. * diff --git a/src/hooks.d.ts b/src/hooks.d.ts index 80199f7..b2a0815 100644 --- a/src/hooks.d.ts +++ b/src/hooks.d.ts @@ -5,6 +5,7 @@ import { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, @@ -20,6 +21,7 @@ export { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, diff --git a/src/hooks.js b/src/hooks.js index f3d98a6..2e04796 100644 --- a/src/hooks.js +++ b/src/hooks.js @@ -18,6 +18,7 @@ import { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, @@ -33,6 +34,7 @@ export { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, diff --git a/src/index.js b/src/index.js index 1356ca9..d2b571a 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,7 @@ import { bindMenu, bindPopover, bindPopper, + bindDoubleClick, bindDialog, type Variant, type CoreState, @@ -32,6 +33,7 @@ export { bindMenu, bindPopover, bindPopper, + bindDoubleClick, bindDialog, } export type { Variant, InjectedProps }