ldx-widgets/dist/components/dialogue_box.js

widgets

(function() {
  var DialogueBox, Icons, React, StyleSheet, button, createClass, css, div, ref, ref1, styles;

  React = require('react');

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

  Icons = require('./alert_icons');

  ref = require('aphrodite'), StyleSheet = ref.StyleSheet, css = ref.css;

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

  styles = StyleSheet.create({
    titleWrap: {
      position: 'static',
      margin: '0',
      fontSize: '18px',
      height: '30px',
      lineHeight: '30px',
      padding: '20px'
    },
    icon: {
      display: 'inline-block',
      position: 'relative',
      height: '30px',
      width: '30px',
      top: '4px'
    },
    title: {
      display: 'inline-block',
      height: '30px',
      marginLeft: '20px'
    },
    message: {
      fontSize: '13px',
      margin: '20px 20px 25px 20px',
      color: 'rgb(115,115,115)'
    },
    indent: {
      margin: '0 60px 25px 72px'
    }
  });


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

  DialogueBox = createClass({
    displayName: 'DialogueBox',
    getDefaultProps: function() {
      return {
        width: 200,
        alertIcon: 'WARNING'
      };
    },
    render: function() {
      var alertIcon, cancel, cancelText, confirmText, dialogueTitle, height, message, ref2, showDialogue, top, width;
      ref2 = this.props, top = ref2.top, width = ref2.width, height = ref2.height, showDialogue = ref2.showDialogue, message = ref2.message, cancel = ref2.cancel, confirmText = ref2.confirmText, cancelText = ref2.cancelText, dialogueTitle = ref2.dialogueTitle, alertIcon = ref2.alertIcon;
      return div({
        className: 'dialogue-box',
        style: {
          width: width,
          marginLeft: -(width / 2),
          height: height,
          transform: "translateY(" + top + "px) translateZ(0px)",
          msTransform: "translateY(" + top + "px)",
          WebkitTransform: "translateY(" + top + "px) translateZ(0px)"
        }
      }, [
        dialogueTitle != null ? div({
          key: 'titleWrap',
          className: css(styles.titleWrap)
        }, [
          dialogueTitle != null ? div({
            key: 'icon',
            className: css(styles.icon)
          }, typeof Icons[alertIcon] === "function" ? Icons[alertIcon]() : void 0) : void 0, div({
            key: 'title',
            className: css(styles.title)
          }, dialogueTitle)
        ]) : void 0, div({
          key: 'message',
          className: css(styles.message, dialogueTitle != null ? styles.indent : void 0)
        }, 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) {
      return this.props.transitionOut(e.target.value);
    }
  });

  module.exports = DialogueBox;

}).call(this);