@rnga/orders/src/components/Modal/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

import React, { Component, Fragment } from 'react';
import PropTypes from "prop-types";
import { withStyles } from 'material-ui';


const styles = {
  root: {
    "& .overlay": {
      zIndex: 100,
    },
  },
  modal: {

    minWidth: 300,
    maxWidth: "100%",

    "& h5.title": {
      "position": "absolute",
      "top": "10px",
      "left": "0",
      width: "100%",
      textAlign: "center",
      textTransform: "uppercase !important",
      "color": "#d7dee4",
      "margin": "0",
      "fontSize": "12px"
    },
  },
}


export class Modal extends Component {

  static propTypes = {
    opened: PropTypes.bool.isRequired,
    handleClose: PropTypes.func,
  }

  static propTypes = {
    className: PropTypes.string.isRequired,
  }

  static defaultProps = {
    className: "popup2",
  }

  state = {
    joinFormOpened: false,
    joinFormVisible: false,
  }


  componentDidMount() {

    if (this.isOpened()) {
      this.openForm();
    }

    this.initListeners();
  }


  componentDidUpdate(prevProps, prevState) {

    const {
      opened,
    } = this.props;

    const {
      opened: prevOpened,
    } = prevProps


    if (
      (opened || prevOpened) && opened !== prevOpened
    ) {

      if (opened) {
        this.openForm();
      }
      else {
        this.closeForm();
      }

    }

  }



  initListeners() {

    // if (($('.popup2').height() + 60) > windowHeight) {
    //   $('.popup2').css('height', windowHeight - 100 + 'px');
    //   $('.popup2 .client-order').css('height', windowHeight - parseInt($('.popup2 .window').css('border-top-width')) - 100 + 'px');
    //   $('.popup2').css('top', '45%');
    // }

    const {
      popup,
    } = this;

    // console.log("initListeners popup", popup);

    if (!popup) {
      return;
    }

    try {

      const {
        window,
      } = global;

      const {
        innerHeight: windowHeight,
      } = window;

      const {
        offsetHeight: popupHeight,
      } = popup;


      const maxHeight = popupHeight + 60;


      // console.log("initListeners maxHeight > windowHeight", maxHeight > windowHeight, maxHeight, windowHeight);


      if (maxHeight > windowHeight) {
        // $('.popup2').css('height', windowHeight - 100 + 'px');
        // $('.popup2 .client-order').css('height', windowHeight - parseInt($('.popup2 .window').css('border-top-width')) - 100 + 'px');
        // $('.popup2').css('top', '45%');

        const innerWindow = popup.querySelector(".window");

        if (innerWindow) {


          Object.assign(popup.style, {
            height: windowHeight - 100 + 'px',
            top: "46%",
            display: "flex",
            flexDirection: "column",
          });

          Object.assign(innerWindow.style, {
            flex: 1,
            overflow: "auto",
          });

        }

        // const clientOrder

      }

    }
    catch (error) {
      console.error(error);
    }


  }


  isOpened() {

    const {
      opened,
    } = this.props;

    return opened;

  }

  openForm(event) {

    this.setState({
      joinFormVisible: true,
    })


    setTimeout(() => {
      this.setState({
        joinFormOpened: true,
      });
    }, 50);

  }

  closeForm(event) {

    this.setState({
      joinFormOpened: false,
    })

    setTimeout(() => {
      this.setState({
        joinFormVisible: false,
      });
    }, 500);

  }


  render() {

    const {
      joinFormOpened,
      joinFormVisible,
    } = this.state;


    const {
      children,
      handleClose,
      title,
      classes,
      className,
    } = this.props;


    let styles = {
      opacity: joinFormOpened ? 1 : 0,
      visibility: joinFormVisible ? "visible" : "hidden",
      zIndex: 1000,
    };

    return (
      <div
        className={classes.root}
      >

        <div
          className={["overlay", classes.overlay].join(" ")}
          style={styles}
          onClick={handleClose}
        />

        <div
          className={[classes.modal, className].join(" ")}
          style={styles}
          onClick={event => event.stopPropagation()}
          ref={el => {
            this.popup = el;
          }}
        >

          {title
            ?
            <h5 className={"h5 title"}>
              {title}
            </h5>
            :
            null
          }

          {children}

          {handleClose ? <div
            className="close_modal"
            onClick={handleClose}
          >x</div> : null}
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(Modal);