ldx-widgets/dist/components/alert_modal.js

widgets

(function() {
  var AlertModal, Icons, Modal, NoAccess, PropTypes, React, StyleSheet, button, createClass, css, div, modalStyles, ref, ref1, styles;

  React = require('react');

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

  PropTypes = require('prop-types');

  NoAccess = React.createFactory(require('./no_access'));

  Modal = React.createFactory(require('./modal'));

  Icons = require('./alert_icons');

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

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


  /*&
    @props.close - REQUIRED - [Function]
    Function that closes the modal
  
    @props.cancelText - OPTIONAL - [String]
    Default to 'Cancel'. The title of the 'Cancel' or 'Dismiss' button. 
    Note: If the props.cb method is NOT passed this button is not rendered.
  
    @props.okText - OPTIONAL - [String]
    Default to 'OK'. The title of the 'okay' or 'confirm' button. 
    Note: This functions as the cancel or close button if th props.cb method is not passed
  
    @props.okColor - OPTIONAL - [String]
    Default to the primary blue. The color of the 'okay' or 'confirm' button. 
  
    @props.cb - REQUIRED - [Function]
    Function that gets called when the 'OK' button is clicked. Presumably this executes some sort of action like navigating the user or deleting an item. 
  
    @props.alertTitle - OPTIONAL - [String]
    The main point of the alert modal, eg 'Delete Item' or 'Unsaved Changes'
    If alertTitle is not provided, only the message will be rendered
  
    @props.alertIcon - OPTIONAL - [Enum] - 'WARNING', 'DELETE'
    Defaults to 'WARNING'. The icon to show next to the alert title.
    Note: will not show if no alertTitle is passed. 
  
    @props.message - OPTIONAL - [String]
    Can be a string that is the detail text of the alert modal, rendering on the the title.
    Can be a react element that is the entire body of the modal. This will cause the title, icon, and message above to not be rendered.
    If message is not provied the generic NoAccess widget will be rendered.
  &
   */

  modalStyles = StyleSheet.create({
    modal: {
      position: 'absolute',
      top: '30%',
      left: '50%',
      width: '460px',
      height: 'auto',
      marginLeft: '-230px',
      marginTop: '-90px',
      boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.5)'
    }
  });

  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'
    }
  });

  AlertModal = createClass({
    displayName: 'AlertModal',
    propTypes: {
      close: PropTypes.func.isRequired,
      okText: PropTypes.string,
      okColor: PropTypes.string,
      cancelText: PropTypes.string,
      cb: PropTypes.func,
      alertTitle: PropTypes.string,
      alertIcon: PropTypes.string,
      message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired
    },
    getDefaultProps: function() {
      return {
        okText: 'OK',
        cancelText: 'Cancel',
        alertTitle: null,
        alertIcon: 'WARNING',
        message: null
      };
    },
    handleClick: function(e) {
      return e.stopPropagation();
    },
    close: function() {
      return this.props.close();
    },
    confirm: function() {
      var base;
      if (typeof (base = this.props).cb === "function") {
        base.cb();
      }
      return this.props.close();
    },
    render: function() {
      var alertIcon, alertTitle, cancelText, cb, content, message, okColor, okStyles, okText, ref2;
      ref2 = this.props, message = ref2.message, okText = ref2.okText, okColor = ref2.okColor, cancelText = ref2.cancelText, cb = ref2.cb, alertIcon = ref2.alertIcon, alertTitle = ref2.alertTitle;
      okStyles = {};
      if (okColor != null) {
        okStyles.color = okColor;
      } else if (alertIcon === 'DELETE') {
        okStyles.color = 'rgb(236,26,35)';
      }
      content = [];
      if (alertTitle != null) {
        if (alertTitle != null) {
          content.push(div({
            key: 'titleWrap',
            className: css(styles.titleWrap)
          }, [
            alertTitle != 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)
            }, alertTitle)
          ]));
        }
        content.push(div({
          key: 'message',
          className: css(styles.message, alertTitle != null ? styles.indent : void 0)
        }, message));
      } else if (message != null) {
        content.push(message);
      } else {
        content.push(NoAccess({
          styleOverrides: {
            fontSize: '14px',
            background: 'none',
            paddingTop: 10
          }
        }));
      }
      content.push(div({
        key: 'ok',
        className: 'okay-buttons'
      }, [
        cb != null ? button({
          className: 'okay-cancel cancel',
          key: 'cancel',
          onClick: this.close
        }, cancelText) : void 0, button({
          className: cb != null ? 'okay-cancel okay' : 'okay-cancel just-ok',
          key: 'ok',
          onClick: this.confirm,
          style: okStyles
        }, okText)
      ]));
      return Modal({
        title: null,
        close: this.close,
        showClose: false,
        styleOverride: modalStyles,
        draggable: false
      }, content);
    }
  });

  module.exports = AlertModal;

}).call(this);