ych-pumpkin/dist/index.js

pumpkin的npm包

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var ReactDOM = _interopDefault(require('react-dom'));
var React = require('react');
var React__default = _interopDefault(React);

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a 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);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css = ".modal-template-one {\n  width: 250px;\n  background: #fff;\n  border-radius: 10px;\n}\n.modal-template-one > .body {\n  width: 100%;\n  height: 100px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.modal-template-one > .body:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: -50%;\n  bottom: 0;\n  width: 200%;\n  height: 1px;\n  background: #E5E5E5;\n  -webkit-transform: scale(0.5);\n}\n.modal-template-one > .foot {\n  display: flex;\n  justify-content: space-between;\n  height: 50px;\n}\n.modal-template-one > .foot > .cancel {\n  position: relative;\n}\n.modal-template-one > .foot > .cancel:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: -50%;\n  height: 200%;\n  width: 1px;\n  background: #E5E5E5;\n  -webkit-transform: scale(0.5);\n}\n.modal-template-one > .foot > div {\n  width: 50%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n";
styleInject(css);

var ModalTemplateOne =
/*#__PURE__*/
function (_Component) {
  _inherits(ModalTemplateOne, _Component);

  function ModalTemplateOne(props) {
    var _this;

    _classCallCheck(this, ModalTemplateOne);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ModalTemplateOne).call(this, props));
    _this.state = {};
    return _this;
  }

  _createClass(ModalTemplateOne, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          title = _this$props.title,
          cancelFun = _this$props.cancelFun,
          confirmFun = _this$props.confirmFun,
          cancelName = _this$props.cancelName,
          confirmName = _this$props.confirmName;
      return React__default.createElement("div", {
        className: "modal-template-one"
      }, React__default.createElement("div", {
        className: "body"
      }, title), React__default.createElement("div", {
        className: "foot"
      }, React__default.createElement("div", {
        className: "cancel",
        onClick: cancelFun
      }, cancelName), React__default.createElement("div", {
        className: "ok",
        onClick: confirmFun
      }, confirmName)));
    }
  }]);

  return ModalTemplateOne;
}(React.Component);

var css$1 = ".modal-template-two {\n  width: 250px;\n  background: #fff;\n  border-radius: 10px;\n}\n.modal-template-two > .body {\n  width: 100%;\n  height: 100px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.modal-template-two > .body:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: -50%;\n  bottom: 0;\n  width: 200%;\n  height: 1px;\n  background: #E5E5E5;\n  -webkit-transform: scale(0.5);\n}\n.modal-template-two > .foot {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 50px;\n}\n";
styleInject(css$1);

var ModalTemplateTwo =
/*#__PURE__*/
function (_Component) {
  _inherits(ModalTemplateTwo, _Component);

  function ModalTemplateTwo(props) {
    var _this;

    _classCallCheck(this, ModalTemplateTwo);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ModalTemplateTwo).call(this, props));
    _this.state = {};
    return _this;
  }

  _createClass(ModalTemplateTwo, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          title = _this$props.title,
          confirmFun = _this$props.confirmFun,
          confirmName = _this$props.confirmName;
      return React__default.createElement("div", {
        className: "modal-template-two"
      }, React__default.createElement("div", {
        className: "body"
      }, title), React__default.createElement("div", {
        className: "foot",
        onClick: confirmFun
      }, confirmName));
    }
  }]);

  return ModalTemplateTwo;
}(React.Component);

var css$2 = ".pandora-modal {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 13;\n}\n.pandora-modal > .zzc {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  background: rgba(0, 0, 0, 0.5);\n  z-index: 12;\n  -webkit-animation-name: modalfadeIn;\n  -webkit-animation-duration: 0.3s;\n}\n.pandora-modal > .content {\n  z-index: 13;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.fade-in {\n  animation: modalfadeIn ease 0.3s forwards;\n}\n.fade-out {\n  animation: modalfadeOut ease 0.3s forwards;\n}\n@-webkit-keyframes modalfadeIn {\n  from {\n    opacity: 0;\n    /*初始状态 透明度为0*/\n  }\n  to {\n    opacity: 1;\n    /*结尾状态 透明度为1*/\n  }\n}\n@-webkit-keyframes modalfadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n";
styleInject(css$2);

var Modal =
/*#__PURE__*/
function (_Component) {
  _inherits(Modal, _Component);

  function Modal(props) {
    var _this;

    _classCallCheck(this, Modal);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Modal).call(this, props));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "close", function () {
      if (_this.props.zzcClick) {
        Modal.modalFun().close();
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "templateFun", function () {
      var _this$props = _this.props,
          customDom = _this$props.customDom,
          templateType = _this$props.templateType,
          title = _this$props.title,
          cancelFun = _this$props.cancelFun,
          confirmFun = _this$props.confirmFun,
          cancelName = _this$props.cancelName,
          confirmName = _this$props.confirmName;

      if (customDom) {
        return customDom;
      }

      if (templateType === 1) {
        return React__default.createElement(ModalTemplateOne, {
          title: title,
          cancelFun: cancelFun,
          confirmFun: confirmFun,
          cancelName: cancelName,
          confirmName: confirmName
        });
      }

      return React__default.createElement(ModalTemplateTwo, {
        title: title,
        confirmFun: confirmFun,
        confirmName: confirmName
      });
    });

    _this.state = {};
    return _this;
  } // 操作modal方法集合


  _createClass(Modal, [{
    key: "render",
    value: function render() {
      return React__default.createElement("div", {
        className: "pandora-modal"
      }, React__default.createElement("div", {
        className: "zzc",
        onClick: this.close
      }), React__default.createElement("div", {
        className: "content"
      }, this.templateFun()));
    }
  }]);

  return Modal;
}(React.Component);

_defineProperty(Modal, "modalFun", function () {
  var div = document.createElement('div');
  div.className = 'pandora-modal-page'; // 打开modal

  function open(parameter) {
    var customDom = parameter.customDom,
        zzcClick = parameter.zzcClick,
        cancelFun = parameter.cancelFun,
        title = parameter.title,
        confirmFun = parameter.confirmFun,
        templateType = parameter.templateType,
        cancelName = parameter.cancelName,
        confirmName = parameter.confirmName;
    document.body.appendChild(div);
    ReactDOM.render(React__default.createElement(Modal, {
      customDom: customDom,
      zzcClick: zzcClick,
      title: title || '默认标题',
      templateType: templateType || 1,
      cancelFun: cancelFun || Modal.modalFun().close,
      confirmFun: confirmFun || Modal.modalFun().close,
      cancelName: cancelName || '取消',
      confirmName: confirmName || '确定'
    }), div);
  } // 删除modal


  function close() {
    var pandoraModalPage = document.getElementsByClassName('pandora-modal-page');
    var pandoraModal = document.getElementsByClassName('pandora-modal');
    pandoraModal[0].className = 'pandora-modal fade-out';
    setTimeout(function () {
      pandoraModalPage[0].remove();
    }, 300);
  }

  return {
    open: open,
    close: close
  };
});

exports.Modal = Modal;