feat: add onOpen and onClose props to modal and popover

src/components/modal/ModalTrigger.js

@@ -5,6 +5,8 @@ export default class ModalTrigger extends Component {
  static propTypes = {
  modal: PropTypes.element.isRequired,
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+ onOpen: PropTypes.func,
+ onClose: PropTypes.func,
  };
 
  constructor() {
@@ -17,8 +19,20 @@ export default class ModalTrigger extends Component {
 
  state = { isOpen: false };
 
+ componentDidUpdate(prevProps, prevState) {
+ if (this.state.isOpen && !prevState.isOpen) {
+ this.props.onOpen && this.props.onOpen();
+ } else if (!this.state.isOpen && prevState.isOpen) {
+ this.props.onClose && this.props.onClose();
+ }
+ }
+
  componentWillUnmount() {
  clearTimeout(this.openCloseTimeoutId);
+
+ if (this.state.isOpen) {
+ this.props.onClose && this.props.onClose();
+ }
  }
 
  render() {

src/components/modal/README.md

@@ -53,6 +53,8 @@ Modal.setAppElement('#root');
 | ---- | ---- | ------- | ----------- |
 | modal | element | *required* | The modal to show |
 | children | element, function | *required* | The trigger element or render prop function that should return the trigger element |
+| onOpen | function | | Function called when the popover opens |
+| onClose | function | | Function called when the popover closes |
 
 If `children` is a react element, event properties such as `onClick` will be added to it.
 For advanced cases, `children` may be a render function which is called with:

src/components/popover/PopoverTrigger.js

@@ -9,6 +9,8 @@ export default class PopoverTrigger extends Component {
  static propTypes = {
  popover: PropTypes.element,
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+ onOpen: PropTypes.func,
+ onClose: PropTypes.func,
  };
 
  constructor() {
@@ -23,9 +25,21 @@ export default class PopoverTrigger extends Component {
 
  state = { isOpen: false };
 
+ componentDidUpdate(prevProps, prevState) {
+ if (this.state.isOpen && !prevState.isOpen) {
+ this.props.onOpen && this.props.onOpen();
+ } else if (!this.state.isOpen && prevState.isOpen) {
+ this.props.onClose && this.props.onClose();
+ }
+ }
+
  componentWillUnmount() {
  clearTimeout(this.openCloseTimeoutId);
  cancelAnimationFrame(this.scheduleUpdateRequestId);
+
+ if (this.state.isOpen) {
+ this.props.onClose && this.props.onClose();
+ }
  }
 
  render() {

src/components/popover/README.md

@@ -37,6 +37,8 @@ Please note that both the popover and the trigger must support attaching refs. I
 | ---- | ---- | ------- | ----------- |
 | popover | element | *required* | The popover to show |
 | children | element, function | *required* | The trigger element or render prop function that should return the trigger element |
+| onOpen | function | | Function called when the popover opens |
+| onClose | function | | Function called when the popover closes |
 
 If `children` is a react element, event properties such as `onClick` will be added to it.
 For advanced cases, `children` may be a render function which is called with: