ldx-widgets/dist/components/dialogue.js

widgets

(function() {
  var Dialogue, DialogueBox, React, TransitionGroup, _, createClass, div;

  React = require('react');

  createClass = require('create-react-class');

  TransitionGroup = React.createFactory(require('react-transition-group/TransitionGroup'));

  DialogueBox = React.createFactory(require('./dialogue_box'));

  _ = require('lodash');

  div = React.DOM.div;


  /*
  Dialogue Box Props
  
  @props.message - String
    message to display
  
  @props.confirmText - String - default: 'OK'
    text to display in okay/confirm button
  
  @props.cancelText - String - default: 'Cancel'
    text gto display in the cancel button
  
  @props.width - Number - default: 400
    width in pixels of the dialogue
  
  @props.confirmCallback - method
    method to call when the 'ok' button is clicked or enter is pressed
  
  @props.cancelCallBack - method
    method to call when the cancel button is clicked
  
  @props.lightBackdrop - boolean
    show a lighter backdrop. e.g. when displayed over a modal
   */

  Dialogue = createClass({
    displayName: 'Dialogue',
    getDefaultProps: function() {
      return {
        message: '',
        confirmText: 'OK',
        cancelText: 'Cancel',
        confirmCallback: function() {},
        cancelCallback: function() {},
        width: 400,
        lightBackdrop: false
      };
    },
    render: function() {
      var className, dialogue, lightBackdrop, props, showDialogue;
      showDialogue = this.state.showDialogue;
      lightBackdrop = this.props.lightBackdrop;
      props = _.clone(this.props);
      if (showDialogue) {
        dialogue = DialogueBox(_.assign(props, {
          transitionOut: this.transitionOut
        }));
      }
      if (lightBackdrop) {
        className = 'dialogue-container light-backdrop';
      } else {
        className = 'dialogue-container';
      }
      return TransitionGroup({
        transitionName: 'dialogue',
        component: 'div',
        className: className
      }, dialogue);
    },
    getInitialState: function() {
      return {
        showDialogue: false
      };
    },
    componentDidMount: function() {
      return this.setState({
        showDialogue: true
      });
    },
    transitionOut: function() {
      return this.setState({
        showDialogue: false
      });
    }
  });

  module.exports = Dialogue;

}).call(this);