ldx-widgets/dist/components/dialogue.js

widgets

(function() {
  var Dialogue, DialogueBox, React, ReactDOM, assign, clone, createClass, div;

  React = require('react');

  ReactDOM = require('react-dom');

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

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

  assign = require('lodash/assign');

  clone = require('lodash/clone');

  div = require('react-dom-factories').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,
        height: 150
      };
    },
    getInitialState: function() {
      this.top = -1 * this.props.height;
      return {
        top: this.top
      };
    },
    render: function() {
      var className, dialogue, height, lightBackdrop, props, ref, top;
      top = this.state.top;
      ref = this.props, lightBackdrop = ref.lightBackdrop, height = ref.height;
      props = assign({}, this.props, {
        transitionOut: this.transitionOut,
        top: top,
        height: height,
        ref: (function(_this) {
          return function(dialogue1) {
            _this.dialogue = dialogue1;
          };
        })(this)
      });
      dialogue = DialogueBox(props);
      className = 'dialogue-container';
      if (lightBackdrop) {
        className += ' light-backdrop';
      }
      return div({
        className: className
      }, dialogue);
    },
    componentDidMount: function() {
      return setTimeout((function(_this) {
        return function() {
          return _this.setState({
            top: 0
          });
        };
      })(this), 0);
    },
    transitionOut: function(btnValue) {
      var dialogueEl;
      dialogueEl = ReactDOM.findDOMNode(this.dialogue);
      dialogueEl.addEventListener('transitionend', (function(_this) {
        return function() {
          dialogueEl.removeEventListener('transitionend', arguments.callee);
          return _this.handleTransitionEnd(btnValue);
        };
      })(this), false);
      return this.setState({
        top: this.top
      });
    },
    handleTransitionEnd: function(btnValue) {
      this.props.cancelCallback();
      if (btnValue === 'okay') {
        return this.props.confirmCallback();
      }
    }
  });

  module.exports = Dialogue;

}).call(this);