joywok-material-components/lib/utils/Dialog.js

<h1 align="center"> Joywok Material Components </h1>

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactRedux = require('react-redux');

var _pubfun = require('./pubfun');

var _events = require('events');

var _events2 = _interopRequireDefault(_events);

var _styles = require('@material-ui/core/styles');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// import dva from 'dva';
// import {connect} from 'dva';
// import { Router,hashHistory,browserHistory,Route} from 'dva/router';


var Container = function (_Component) {
  _inherits(Container, _Component);

  function Container(props) {
    _classCallCheck(this, Container);

    var _this = _possibleConstructorReturn(this, (Container.__proto__ || Object.getPrototypeOf(Container)).call(this, props));

    _this.state = props;
    return _this;
  }

  _createClass(Container, [{
    key: 'render',
    value: function render() {
      var Template = this.state.Template;
      return _react2.default.createElement(
        'div',
        { className: "dialog-w" },
        _react2.default.createElement(Template, _extends({}, this.state.data, { events: this.state.events }))
      );
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      var self = this;
      this.state.events.on('changeState', function (data) {
        var newData = Object.assign({}, self.state.data, data);
        self.setState({
          data: newData
        });
      });
    }
  }]);

  return Container;
}(_react.Component);

require('./style/dialog.css');
function removeCustomDialog(data) {
  if ($('.modal-' + data.data.containerId).length != 0) {
    $('.modal-' + data.data.containerId).remove();
  }
  if (typeof data.nohidebody == 'undefined') {
    if ($('.dialog').length == 0) {
      $('body').removeClass('overflowhidden').css({ overflow: 'inherit' });
    }
  }
  if (typeof data.stopPropagation != 'undefined') {
    $('body').undelegate('.' + data.rootClass, 'click');
  }
}
var Dialog = function Dialog(props) {
  var div = document.createElement('div');
  var id = (0, _pubfun.generateMixed)(16);
  var rootClass = 'dialog ' + (props.rootClass || '');
  div.setAttribute("class", rootClass);
  div.setAttribute("id", 'root-' + id);
  document.body.appendChild(div);
  if (typeof props.nohidebody == 'undefined') {
    $('body') && $('body').addClass('overflowhidden');
  }
  if (typeof props.style != 'undefined') {
    div.setAttribute("style", props.style);
  }
  var myEmitter = new _events2.default();
  var close = function close() {
    $('#root-' + id) && $('#root-' + id).remove();
    $('.dialog-child-' + id) && $('.dialog-child-' + id).remove();
    div = null;
    myEmitter = null;
    removeCustomDialog(props);
  };
  var object = {
    close: close
  };
  object.events = myEmitter;
  myEmitter.on('cancel', function () {
    if (typeof props.manualCloase != 'undefined') {} else {
      setTimeout(function () {
        $('#root-' + id) && $('#root-' + id).remove();
        $('.dialog-child-' + id) && $('.dialog-child-' + id).remove();
        div = null;
        myEmitter = null;
        removeCustomDialog(props);
      }, 300);
    }
  });
  myEmitter.on('close', function () {
    $('#root-' + id).remove();
    removeCustomDialog(props);
    div = null;
    myEmitter = null;
  });
  myEmitter.on('save', function () {
    if (typeof props.manualCloase != 'undefined') {} else {
      setTimeout(function () {
        $('#root-' + id) && $('#root-' + id).remove();
        $('.dialog-child-' + id) && $('.dialog-child-' + id).remove();
        removeCustomDialog(props);
        div = null;
        myEmitter = null;
      }, 300);
    }
  });

  if (typeof props.duration != 'undefined') {
    setTimeout(function () {
      object.close();
    }, props.duration);
  }

  var bbb = props.app || window.app;
  // console.log( props.app , window.app, 'xxxxx' )
  var container = "#root-" + id;
  if (typeof props.data == 'undefined') {
    props.data = {};
  }
  props.data.containerId = id;
  props.data.close = close;

  if (typeof props.autoremove != 'undefined') {
    setTimeout(function () {
      $('#root-' + id).remove();
      $('.dialog-child-' + id).remove();
      removeCustomDialog(props);
    }, 300);
  }

  if (typeof props.stopPropagation != 'undefined') {
    $('body').delegate('.' + props.rootClass, 'click', function (event) {
      event.stopPropagation();
    });
  }

  _reactDom2.default.render(_react2.default.createElement(
    _reactRedux.Provider,
    { store: bbb._store },
    _react2.default.createElement(
      _styles.MuiThemeProvider,
      { theme: (0, _styles.createMuiTheme)(window.theme) },
      _react2.default.createElement(Container, { data: props.data, Template: props.component, events: myEmitter })
    )
  ), document.getElementById('root-' + id));

  return object;
};

exports.default = Dialog;