From 51c152eb61e23f14952bd0fe4c9d9e9a2ac00584 Mon Sep 17 00:00:00 2001 From: Heyi <1255968521@qq.com> Date: Tue, 2 Nov 2021 12:11:24 +0800 Subject: [PATCH 1/2] feat(core): creates props for a component that opens the popup while double click --- src/core.d.ts | 13 +++++++++++++ src/core.js | 27 +++++++++++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/src/core.d.ts b/src/core.d.ts index c464b45..e8e3463 100644 --- a/src/core.d.ts +++ b/src/core.d.ts @@ -120,6 +120,19 @@ export function bindFocus(popupState: PopupState): { onBlur: (event: SyntheticEvent) => any } +/** + * 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 d687c0b..71248bf 100644 --- a/src/core.js +++ b/src/core.js @@ -360,6 +360,33 @@ export function bindFocus({ } } +/** + * 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. * From 4a7d7ba260eb211e3cbd743260f25e4e606c9876 Mon Sep 17 00:00:00 2001 From: Heyi <1255968521@qq.com> Date: Tue, 2 Nov 2021 23:47:30 +0800 Subject: [PATCH 2/2] feat(core): exporting bindDoubleClick from index.js and hooks.js, documenting it in the readme --- README.md | 4 ++- demo/Root.js | 12 +++++++ demo/examples/DoubleClickPopover.hooks.js | 41 +++++++++++++++++++++++ demo/examples/DoubleClickPopover.js | 38 +++++++++++++++++++++ src/hooks.d.ts | 2 ++ src/hooks.js | 2 ++ src/index.js | 2 ++ 7 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 demo/examples/DoubleClickPopover.hooks.js create mode 100644 demo/examples/DoubleClickPopover.js diff --git a/README.md b/README.md index 3b4b11c..e48cd6b 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,7 @@ For MUI v4 you'll need `material-ui-popup-state@^1.9.3`. Use `^2.0.0` and up for - [material-ui-popup-state](#material-ui-popup-state) +- [Using MUI v4?](#using-mui-v4) - [Table of Contents](#table-of-contents) - [Installation](#installation) - [Examples with React Hooks](#examples-with-react-hooks) @@ -220,7 +221,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 4e6ca10..f11a089 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' @@ -98,6 +102,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/hooks.d.ts b/src/hooks.d.ts index d741b4e..cf5ea8a 100644 --- a/src/hooks.d.ts +++ b/src/hooks.d.ts @@ -5,6 +5,7 @@ import { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, @@ -19,6 +20,7 @@ export { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, diff --git a/src/hooks.js b/src/hooks.js index f98bebe..8530abb 100644 --- a/src/hooks.js +++ b/src/hooks.js @@ -18,6 +18,7 @@ import { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, @@ -32,6 +33,7 @@ export { bindToggle, bindHover, bindFocus, + bindDoubleClick, bindMenu, bindPopover, bindPopper, diff --git a/src/index.js b/src/index.js index 8d6f6c3..ac9a9de 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,7 @@ import { bindMenu, bindPopover, bindPopper, + bindDoubleClick, type Variant, type CoreState, type PopupState as InjectedProps, @@ -31,6 +32,7 @@ export { bindMenu, bindPopover, bindPopper, + bindDoubleClick, } export type { Variant, InjectedProps }