ldx-widgets/dist/components/dialogue_box.js

widgets

(function() {
  var DialogueBox, React, animationMixin, button, createClass, div, ref;

  React = require('react');

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

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

  ref = require('react-dom-factories'), div = ref.div, button = ref.button;


  /*
   This component should not be used directly, 
   see dialogue_wrapper for documentation on this widget
   */

  DialogueBox = createClass({
    displayName: 'DialogueBox',
    mixins: [animationMixin],
    enterDuration: 200,
    enterStateStart: function() {
      return {
        top: -1 * this.props.height
      };
    },
    enterStateEnd: {
      top: 0
    },
    enterEasing: 'easeOutCirc',
    leaveDuration: 200,
    leaveStateStart: {
      top: 0
    },
    leaveStateEnd: function() {
      return {
        top: -1 * this.props.height - 50
      };
    },
    leaveEasing: 'easeInCirc',
    getDefaultProps: function() {
      return {
        height: 150,
        width: 200
      };
    },
    render: function() {
      var cancel, cancelText, confirmText, height, message, ref1, ref2, showDialogue, top, width;
      ref1 = this.state, top = ref1.top, showDialogue = ref1.showDialogue;
      ref2 = this.props, width = ref2.width, height = ref2.height, showDialogue = ref2.showDialogue, message = ref2.message, cancel = ref2.cancel, confirmText = ref2.confirmText, cancelText = ref2.cancelText;
      return div({
        className: 'dialogue-box',
        style: {
          top: top,
          width: width,
          marginLeft: -(width / 2),
          height: height
        }
      }, [
        div({
          key: 'message',
          className: 'message'
        }, message), button({
          key: 'okay-btn',
          className: 'okay-btn',
          onClick: this.handleButtonClick,
          value: 'okay'
        }, confirmText), button({
          key: 'cancel-btn',
          className: 'cancel-btn',
          onClick: this.handleButtonClick,
          value: 'cancel'
        }, cancelText)
      ]);
    },
    handleButtonClick: function(e) {
      if (e.target.value === 'okay') {
        this.callConfirm = true;
      } else {
        this.callConfirm = false;
      }
      return this.props.transitionOut();
    },
    componentWillUnmount: function() {
      if (this.callConfirm) {
        this.props.confirmCallback();
      }
      return this.props.cancelCallback();
    }
  });

  module.exports = DialogueBox;

}).call(this);