Sg-modal NPM | npm.io

sg-modal

A collection of modal windows.

Install

npm install --save sg-modal

Usage

import React, { Component } from 'react';
import { Modal, SaveableModal, Loading} from 'sg-modal';

const items = ["item 1","item 2","item 3"];

class Example extends Component {
  constructor(props){
	super(props);
	this.state={ showModal: false, showSaveable: false, loading:true};
	this.showModal = this.showModal.bind(this);
	this.showSaveable = this.showSaveable.bind(this);
	this.hideModal = this.hideModal.bind(this);
	this.hideSaveable = this.hideSaveable.bind(this);
	this.saveEvent = this.saveEvent.bind(this);
  }

  showModal(){
	this.setState({showModal:true});
  }

  showSaveable(){
	this.setState({showSaveable:true});
  }

  hideModal(){
	this.setState({showModal:false});
  }

  hideSaveable(){
	this.setState({showSaveable:false});
  }

  saveFromModal(){
	//save your state here!
  }

  renderRow(index, maximized, item, event) {
        return (
            <div>
				<Loading />
				<button type='button' onClick='this.showModal'>show modal</button>
				<button type='button' onClick='this.showSaveable'>show saveable modal</button>
				<Modal show={this.state.showModal} title='Example Modal' closeEvent={this.hideModal}>
					<div>This is just some text</div>
				</Modal>
				<SaveableModal show={this.state.showSaveable} title='Example SaveableModal' closeEvent={this.hideSaveable} saveEvent={this.saveEvent}>
					<div>Example 1</div>
					<input value='' type='text' />
				</SaveableModal>
			</div>
        );
    }

  render () {
    return (
      <ItemList list={items} itemRender={this.renderRow} />
    )
  }
}