ldx-widgets/dist/components/dialogue.js

widgets

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

  React = require('react');

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

  animationMixin = require('../mixins/animation_mixin');

  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
   */

  Dialogue = React.createClass({
    displayName: 'Dialogue',
    getDefaultProps: function() {
      return {
        message: '',
        confirmText: 'OK',
        cancelText: 'Cancel',
        confirmCallback: function() {},
        cancelCallback: function() {},
        width: 400
      };
    },
    render: function() {
      var dialogue, props, showDialogue;
      showDialogue = this.state.showDialogue;
      props = _.clone(this.props);
      if (showDialogue) {
        dialogue = DialogueBox(_.assign(props, {
          transitionOut: this.transitionOut
        }));
      }
      return TransitionGroup({
        transitionName: 'dialogue',
        component: 'div',
        className: 'dialogue-container'
      }, 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);