@upendradevsingh/webcore/src/Modal/Modal.js

UI Core Components for web

/**
 * ====================================================================================
 * Open a Modal and fetch the content from defined url
 * @author yogendra.singh@jabong.com
 * @date May, 2017
 *
 * <Modal
 *           header={true}
 *           footer={true}
 *           customBodyClass="" title="Modal Title"
 *           dataContent={{"data": {"name": "yogendra"}, "headers": {}, "method": "GET"}}
 *           optionType="link"
 *           dataUrl="https://jsonplaceholder.typicode.com/users"
 *           dialogLinkContent="Open Me"
 *           dataTarget=""
 *           onModalOpen={ res => { this.setState({ ModalBodyContent: res.statusText}); } }
 *  >
 *  Content
 * </Modal>
 * <Modal
 *           header={true}
 *           footer={true}
 *           customBodyClass="" title="Modal Title"
 *           dataContent={{"data": {"name": "yogendra"}, "headers": {}, "method": "GET"}}
 *           optionType="button"
 *           dataUrl="https://jsonplaceholder.typicode.com/users"
 *           dialogLinkContent="Open Me"
 *           dataTarget=""
 *           onModalOpen={ res => { this.setState({ ModalBodyContent: res.statusText}); } }
 * >
 * Content
 * </Modal>
 *  need to define a handleModalOpen(event, resData) in your component where you are going to handle state changes
 * ====================================================================================
 */

"use strict";
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {
  Modal as ModalCore,
  ModalHeader,
  ModalTitle,
  ModalClose,
  ModalBody,
  ModalFooter
} from 'react-modal-bootstrap';
import Styles from './style';
import request from '../utils/request';

const customStyles = {};

class Modal extends Component {
  constructor(props) {
    super(props);

    this.state = { //defaut state for the component
      isOpen: false,
      defaultLinkData: "Open Dialog",
      responseData: {
        "status": 200
      }
    };

    this.openModal = this
      .openModal
      .bind(this);
    this.afterOpenModal = this
      .afterOpenModal
      .bind(this);
    this.hideModal = this
      .hideModal
      .bind(this);
    this.initializeModal = this
      .initializeModal
      .bind(this);
  }

  openModal = () => {
    this.setState({isOpen: true});
    this.initializeModal((res, _this) => {
      _this
        .props
        .onModalOpen(res);
    });
  };

  afterOpenModal = () => {}

  handleRequestResponse = () => {
    let requestMethod = this.props.dataContent.method;
    if (requestMethod === 'GET' || requestMethod === 'get') {
      return request.get(this.props.dataUrl, this.props.dataContent.params
        ? this.props.dataContent.params
        : {});
    }
    return request.post(this.props.dataUrl, this.props.dataContent
      ? this.props.dataContent
      : {});
  }

  hideModal = () => {
    this.setState({isOpen: false});
  }

  initializeModal = (cb) => {
    let resData = this.props.responseData,
      _self = this;

    if (this.props.dataUrl) {
      //send the ajax request for fetching the data from request url
      _self
        .handleRequestResponse()
        .then(res => {
          cb(res, _self);
        })
        .catch(err => {
          cb(err.response, _self);
        });
      return;
    }
    cb(resData, _self);
  };

  render() {
    const {
      title,
      header,
      footer,
      optionType,
      dataUrl,
      dataTarget,
      dialogLinkContent,
      customBodyClass,
    } = this.props;
    const LinkData = this.state.defaultLinkData;
    let linkContent = '';
    if (optionType === 'link') {
      linkContent = <a
        href="javascript:void(0);"
        onClick={event => {
        this.openModal(event)
      }}>
        {dialogLinkContent
          ? dialogLinkContent
          : {
            LinkData
          }}
      </a>;
    } else {
      linkContent = <button onClick={event => {
        this.openModal(event)
      }}>
        {dialogLinkContent
          ? dialogLinkContent
          : {
            LinkData
          }}
      </button>;
    }
    return (
      <div>
        {linkContent}
        <ModalCore isOpen={this.state.isOpen} onRequestHide={this.hideModal}>
          {header && <ModalHeader>
            <ModalClose onClick={this.hideModal}/>
            <ModalTitle>{title}</ModalTitle>
          </ModalHeader>}
          <ModalBody>
            <div
              className={`Modal-body-inner ${customBodyClass
              ? customBodyClass
              : ''}`}>
              {this.props.children}
            </div>
          </ModalBody>
          {footer && <ModalFooter>
            <div className="Modal-footer-inner">
              <button className='btn btn-default' onClick={this.hideModal}>
                Close
              </button>
            </div>
          </ModalFooter>}
        </ModalCore>
      </div>
    );
  }
}

export {Modal};