react-material-promise-dialog v1.0.13

#react-material-promise-dialog This library uses react, redux and material-ui with es6 promises to allow using promise based dialogs.

##Pre-requisites:

• 1. React - 15.4.1
• 2. Redux - 3.6.0
• 3. React-redux - 5.0.1

##Installation:

npm install react-material-promise-dialog --save

##Usage Instructions: Import and add dialogReducer to your combined reducer--

import { combineReducers } from 'redux';

import app from './app/app-reducers.js';
import {dialogReducer} from 'react-material-promise-dialog';

const reducers = combineReducers({
  app,
  dialog: dialogReducer
});
export default reducers;

Import and add dialog components to the root component--

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { Route, browserHistory } from 'react-router';
import ChildComponent from './child.jsx';
import store from './app-store.js';

import {PromiseAlertDialog, PromiseConfirmDialog} from 'react-material-promise-dialog';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
      <section id="app">
        {this.props.children}
        <PromiseAlertDialog/>
        <PromiseConfirmDialog/>
      </section>
    )
  }
}

export default App;

function routes(store) {
  return (
    <Route path="/" component={App}>
      <Route path="child" component={ChildComponent}>
      ...
    </Route>
  )
}

ReactDOM.render((
  <Provider store={store}>
    <Router history={browserHistory} routes={routes(store)}></Router>
  </Provider>
  ), document.getElementById('app')
);

Import, bind with dispatch and use promiseAlert/promiseConfirm as required--

import React from 'react';
import { connect } from 'react-redux';
import {promiseAlert, promiseConfirm} from "react-material-promise-dialog";

class ChildComponent extends React.Component {
  
  constructor(props) {
    super(props);
  }

  
  checkConfirm() {
    const {promiseConfirm} = this.props;
    promiseConfirm({
      title: "Promise Confirm",
      message: "Each action gets a button which can trigger another event downstream!",
      actions: ["Ok", "Meh", "Cancel"]
    }).then((action) => {
      //you can also check for enter and/or escape key events as named actions
      if (action == "Ok" || action == "enter") {
        console.log("Yayy!")
      } else if (action == "Meh") {
        console.log("Meh..")
      } else if (action == "Cancel") {
        console.log("Alright, alright, alright..")
      }
    });
  }

  checkAlert() {
    const {promiseAlert} = this.props;
    const styles = {
      buttonStyles: {
        margin: '12px',
      },
      labelStyles: {
        color:  '#ededed',
      }
    }
    
    promiseAlert({
      message: "Just checking out alert here. This has only one action which can be used to trigger something downstream",
      //you can also add styles to button. in case of promiseConfirm which can have multiple buttons
      //just pass an array of objects similar to buttonStyle object below in the order of
      //actions. so, actions[i] should correspond to buttonStyles[i].
      buttonStyle: {
        style: styles.buttonStyles,
        labelStyle: styles.labelStyles,
        backgroundColor: "#872175",
        hoverColor: "#651957"
      }
    }).then(() => console.log('I'm so alerted right now..'));
  }

  render() {
    return (
      <div>
        <button onClick={() => this.checkConfirm()}>
          Check Confirm
        </button>&nbsp;&nbsp;&nbsp;
        <button onClick={() => this.checkAlert()}>
          Check Alert
        </button>
        ...
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
  ...
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    promiseAlert: (options) => {
      return dispatch(promiseAlert(options));
    },
    promiseConfirm: (options) => {
      return dispatch(promiseConfirm(options));
    },
    ...
  }
};

export default
(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(ChildComponent)
);