bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/click-outside/component.jsx
Max Franke 1e8668420f feat(click-outside): close emoji picker on outbound clicks
add the click-outside component and modifies the message-form/text-input
components to apply the new feature

(cherry picked from commit 654357e6984160fe8ea074fcfa1103f7b51500bc)
2022-05-24 13:49:25 -03:00

40 lines
941 B
JavaScript

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
const propTypes = {
onClick: PropTypes.func.isRequired,
}
class ClickOutside extends PureComponent {
constructor(props) {
super(props);
this.childrenRefs = React.Children.map(this.props.children, () => React.createRef());
}
componentDidMount() {
document.addEventListener("click", this.handleClick);
}
componentWillUnmount() {
document.removeEventListener("click", this.handleClick);
}
handleClick = (e) => {
const { onClick } = this.props;
const isOutside = this.childrenRefs.every(ref => !ref.current.contains(e.target));
if (isOutside) {
onClick();
}
};
render() {
return React.Children.map(this.props.children, (element, idx) => {
return React.cloneElement(element, { ref: this.childrenRefs[idx] });
});
}
}
ClickOutside.propTypes = propTypes;
export default ClickOutside;