@upendradevsingh/webcore/docs/src/components/Modal/index.js

UI Core Components for web

import React, {Component} from 'react';

import Modal from '../utils/modal';

export default class ModalContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalBodyContent: "Initial Content"
    };
  }

  render() {
    const styles = {
      h2: {
        margin: 0,
        padding: 0
      }
    }
    return (
      <article>
        <header>
          <h2 style={styles.h2}>
            Modal
          </h2>
          <sub>Open a Modal pass your title, header, footer etc. See below piece of code.
          </sub>
        </header>
        <figure class="highlight">
          <pre>
            <code class="language-js" data-lang="js">
            <strong>
              <Modal 
                header={true} 
                footer={true} 
                modalBodyContent={this.state.modalBodyContent} 
                customBodyClass="" title="Modal Title" 
                dataContent={{"data": {"name": "yogendra"}, "headers": {}, "method": "GET"}}
                optionType="link" 
                dataUrl="https://jsonplaceholder.typicode.com/users" 
                dialogLinkContent="Link" 
                dataTarget="" 
                onModalOpen={ res => { 
                            this.setState({ 
                              modalBodyContent: res.data.map(user => 
                              { return <li key={user.id}> {user.name} </li>;
                            })}); 
              }}
            >
            { this.state.modalBodyContent }
            </Modal>
            </strong>
            {`
              <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.data.map(user => 
                            { return <li key={user.id}> {user.name} </li>;
                          })}); 
                }}>
                  {this.state.modalBodyContent} 
                <Modal/>
            `}
            </code>
            </pre>
            <pre>
            <code class="language-js" data-lang="js">
            <strong>
              <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="Button" 
                dataTarget="" 
                onModalOpen={ res => { 
                            this.setState({ 
                              modalBodyContent: res.data.map(user => 
                              { return <li key={user.id}> {user.name} </li>;
                            })}); 
              }}
              >
                { this.state.modalBodyContent }
              </Modal>
            </strong>
            {`
              <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.data.map(user => 
                            { return <li key={user.id}> {user.name} </li>;
                          })}); 
                 }}>
                  {this.state.modalBodyContent}
                 <Modal/>
            `}
            </code>
            </pre>
          </figure>         
        </article>
    );
  }
}