Skip to content

Commit

Permalink
[ClickAwayListener] Hide react-event-listener
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Apr 19, 2019
1 parent f132c3c commit d3313d7
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 15 deletions.
4 changes: 0 additions & 4 deletions docs/scripts/buildApi.js
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
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);
}

ClickAwayListener.defaultProps = {
mouseEvent: 'onMouseUp',
touchEvent: 'onTouchEnd',
Expand Down
2 changes: 1 addition & 1 deletion packages/material-ui/src/MenuList/MenuList.js
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
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

0 comments on commit d3313d7

Please sign in to comment.