@nomios/web-uikit/dist/components/modal-base/ModalTrigger.js

Nomios' living web UIKit

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component, Fragment, cloneElement } from 'react';
import PropTypes from 'prop-types';

class ModalTrigger extends Component {
  constructor() {
    super();

    _defineProperty(this, "defaultEventProps", null);

    _defineProperty(this, "state", {
      open: false
    });

    _defineProperty(this, "handleOpen", delay => {
      clearTimeout(this.openCloseTimeoutId);
      this.openCloseTimeoutId = setTimeout(() => {
        this.setState({
          open: true
        });
      }, delay);
    });

    _defineProperty(this, "handleCancelOpen", () => {
      clearTimeout(this.openCloseTimeoutId);
    });

    _defineProperty(this, "handleClose", delay => {
      clearTimeout(this.openCloseTimeoutId);
      this.openCloseTimeoutId = setTimeout(() => {
        this.setState({
          open: false
        });
      }, delay);
    });

    _defineProperty(this, "handleToggle", delay => {
      if (this.state.open) {
        this.handleClose(delay);
      } else {
        this.handleOpen(delay);
      }
    });

    _defineProperty(this, "handleRequestClose", () => this.handleClose());

    this.defaultEventProps = {
      onClick: this.handleOpen
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.open !== prevState.open) {
      this.props.onChange && this.props.onChange(this.state.open);
    }
  }

  componentWillUnmount() {
    clearTimeout(this.openCloseTimeoutId);

    if (this.state.open) {
      this.props.onChange && this.props.onChange(false);
    }
  }

  render() {
    return React.createElement(Fragment, null, this.renderTrigger(), this.renderModal());
  }

  renderTrigger() {
    const {
      children: trigger
    } = this.props;
    const {
      open
    } = this.state;
    return typeof trigger === 'function' ? trigger({
      state: open,
      open: this.handleOpen,
      cancelOpen: this.handleCancelOpen,
      close: this.handleClose,
      toggle: this.handleToggle,
      defaultEventProps: this.defaultEventProps
    }) : cloneElement(trigger, this.defaultEventProps);
  }

  renderModal() {
    const {
      modal
    } = this.props;
    const {
      open
    } = this.state;
    return cloneElement(modal, {
      open,
      onRequestClose: this.handleRequestClose
    });
  }

}

ModalTrigger.propTypes = {
  modal: PropTypes.element.isRequired,
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
  onChange: PropTypes.func
};
export default ModalTrigger;