Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ClickAwayListener] Hide react-event-listener #15420

Merged
merged 1 commit into from
Apr 21, 2019
Merged

[ClickAwayListener] Hide react-event-listener #15420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions docs/scripts/buildApi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,6 @@ function getInheritance(src) {
pathname = 'https://reactcommunity.org/react-transition-group/#Transition';
break;

case 'EventListener':
pathname = 'https://github.com/oliviertassinari/react-event-listener';
break;

default:
pathname = `/api/${kebabCase(component)}`;
break;
Expand Down
13 changes: 9 additions & 4 deletions packages/material-ui/src/ClickAwayListener/ClickAwayListener.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
// @inheritedComponent EventListener

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import EventListener from 'react-event-listener';
import ownerDocument from '../utils/ownerDocument';
import { useForkRef } from '../utils/reactHelpers';
import { exactProp } from '@material-ui/utils';

function useMountedRef() {
const mountedRef = React.useRef(false);
Expand All @@ -24,13 +23,14 @@ function useMountedRef() {
* For instance, if you need to hide a menu when people click anywhere else on your page.
*/
function ClickAwayListener(props) {
const { children, mouseEvent, touchEvent, onClickAway, ...other } = props;
const { children, mouseEvent, touchEvent, onClickAway } = props;
const mountedRef = useMountedRef();
const movedRef = React.useRef(false);

const nodeRef = React.useRef();
// can be removed once we drop support for non ref forwarding class components
const handleOwnRef = React.useCallback(ref => {
// #StrictMode ready
nodeRef.current = ReactDOM.findDOMNode(ref);
}, []);
const handleRef = useForkRef(children.ref, handleOwnRef);
Expand Down Expand Up @@ -88,7 +88,7 @@ function ClickAwayListener(props) {
return (
<React.Fragment>
{React.cloneElement(children, { ref: handleRef })}
<EventListener target="document" {...listenerProps} {...other} />
<EventListener target="document" {...listenerProps} />
</React.Fragment>
);
}
Expand All @@ -114,6 +114,11 @@ ClickAwayListener.propTypes = {
touchEvent: PropTypes.oneOf(['onTouchStart', 'onTouchEnd', false]),
};

if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Guess this tricks babel-plugin-remove-prop-types?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, you are correct. While I didn't try without it in this specific case.

}

ClickAwayListener.defaultProps = {
mouseEvent: 'onMouseUp',
touchEvent: 'onTouchEnd',
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/ClickAwayListener/ClickAwayListener.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ describe('<ClickAwayListener />', () => {
const Child = React.forwardRef(() => null);
const handleClickAway = spy();
wrapper = mount(
<ClickAwayListener getTargetEl={() => null} onClickAway={handleClickAway}>
<ClickAwayListener onClickAway={handleClickAway}>
<Child />
</ClickAwayListener>,
);
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/MenuList/MenuList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const MenuList = React.forwardRef(function MenuList(props, ref) {
};

const handleOwnRef = React.useCallback(refArg => {
// StrictMode ready
// #StrictMode ready
listRef.current = ReactDOM.findDOMNode(refArg);
}, []);
const handleRef = useForkRef(handleOwnRef, ref);
Expand Down
6 changes: 0 additions & 6 deletions pages/api/click-away-listener.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,6 @@ For instance, if you need to hide a menu when people click anywhere else on your

The component cannot hold a ref.

Any other properties supplied will be provided to the root element ([EventListener](https://github.com/oliviertassinari/react-event-listener/)).

## Inheritance

The properties of the [EventListener](https://github.com/oliviertassinari/react-event-listener/) component, from react-event-listener, are also available.
You can take advantage of this behavior to [target nested components](/guides/api/#spread).

## Demos

Expand Down