dtable-ui-component 0.1.74 → 0.1.75-beta3

package/lib/LinkFormatter/index.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var CellTypes = _interopRequireWildcard(require("../constants/cell-types"));
+
+var _valueFormatUtils = require("../utils/value-format-utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var propTypes = {
+  containerClassName: _propTypes.default.string,
+  row: _propTypes.default.object.isRequired,
+  column: _propTypes.default.object.isRequired,
+  enableOpenLinkedRow: _propTypes.default.bool,
+  currentTableId: _propTypes.default.string.isRequired,
+  linkMetaData: _propTypes.default.shape({
+    getLinkedTable: _propTypes.default.func.isRequired,
+    getLinkedRows: _propTypes.default.func.isRequired,
+    getLinkedCellValue: _propTypes.default.func.isRequired,
+    expandLinkedTableRow: _propTypes.default.func.isRequired
+  })
+}; // link value is  get form parant's interface
+
+var LinkFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(LinkFormatter, _React$Component);
+
+  function LinkFormatter(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLinkedCellValue", function (row) {
+      if (!row) return [];
+      var _this$props = _this.props,
+          column = _this$props.column,
+          currentTableId = _this$props.currentTableId,
+          linkMetaData = _this$props.linkMetaData;
+
+      var _ref = column.data || {},
+          link_id = _ref.link_id,
+          table_id = _ref.table_id,
+          other_table_id = _ref.other_table_id;
+
+      _this.linkID = link_id;
+      _this.tableID = currentTableId === table_id ? table_id : other_table_id;
+      _this.otherTableID = _this.tableID === table_id ? other_table_id : table_id;
+      return linkMetaData.getLinkedCellValue(_this.linkID, _this.tableID, _this.otherTableID, row._id);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "expandLinkedTableRow", function (row) {
+      var _this$props2 = _this.props,
+          enableOpenLinkedRow = _this$props2.enableOpenLinkedRow,
+          linkMetaData = _this$props2.linkMetaData;
+
+      if (enableOpenLinkedRow) {
+        linkMetaData.expandLinkedTableRow(row, _this.otherTableID);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDisplayValues", function () {
+      var _this$props3 = _this.props,
+          column = _this$props3.column,
+          linkMetaData = _this$props3.linkMetaData;
+      var rowIds = _this.state.value;
+
+      if (rowIds && Array.isArray(rowIds) && rowIds.length > 0) {
+        var linkedTable = linkMetaData.getLinkedTable(_this.otherTableID);
+        var linkedRows = linkMetaData.getLinkedRows(_this.otherTableID, rowIds);
+        var result = linkedRows.map(function (row, index) {
+          var displayColumnKey = column.data.display_column_key;
+
+          var displayValue = _this.getDisplayValue(linkedTable, row, displayColumnKey);
+
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: index,
+            className: "link-item",
+            onClick: _this.expandLinkedTableRow.bind((0, _assertThisInitialized2.default)(_this), row)
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "link-name"
+          }, displayValue));
+        });
+        return result;
+      }
+
+      return null;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDisplayValue", function (linkedTable, row, displayColumnKey) {
+      var value = row[displayColumnKey];
+      var linkedColumn = linkedTable.columns.find(function (column) {
+        return column.key === displayColumnKey;
+      });
+      var type = linkedColumn.type,
+          data = linkedColumn.data; // todo: improve
+
+      switch (type) {
+        case CellTypes.NUMBER:
+          {
+            return (0, _valueFormatUtils.getNumberDisplayString)(value, data);
+          }
+
+        case CellTypes.DATE:
+          {
+            var format = data.format;
+            return (0, _valueFormatUtils.getDateDisplayString)(value, format);
+          }
+
+        default:
+          return value;
+      }
+    });
+    _this.linkID = '';
+    _this.tableID = '';
+    _this.otherTableID = '';
+    _this.state = {
+      value: _this.getLinkedCellValue(props.row)
+    };
+    return _this;
+  }
+
+  var _proto = LinkFormatter.prototype;
+
+  _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var nextRow = nextProps.row;
+
+    if (nextRow._id !== this.props.row._id) {
+      this.setState({
+        value: this.getLinkedCellValue(nextRow)
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var containerClassName = this.props.containerClassName;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container link-formatter', containerClassName);
+    var displayValues = this.getDisplayValues();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, displayValues);
+  };
+
+  return LinkFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(LinkFormatter, "defaultProps", {
+  enableOpenLinkedRow: false,
+  value: []
+});
+LinkFormatter.propTypes = propTypes;
+var _default = LinkFormatter;
+exports.default = _default;

package/lib/Loading/index.css

@@ -0,0 +1,54 @@
+/** loading **/
+@-moz-keyframes loading {
+  0% {
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loading {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.loading-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #eee;
+  border-left-color: #aaa;
+  border-radius: 50%;
+  -moz-animation: loading 0.9s infinite linear;
+  -webkit-animation: loading 0.9s infinite linear;
+  animation: loading 0.9s infinite linear;
+}
+
+.loading-tip {
+  display: block;
+  margin: 0 auto;
+}

package/lib/Loading/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = Loading;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.css");
+
+function Loading() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "loading-icon loading-tip"
+  });
+}

package/lib/LongTextFormatter/html-long-text-formatter.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _markdown2html = require("../utils/markdown2html");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var HtmlLongTextFormatter = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2.default)(HtmlLongTextFormatter, _Component);
+
+  function HtmlLongTextFormatter(_props) {
+    var _this;
+
+    _this = _Component.call(this, _props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "translateValue", function (props) {
+      var value = props.value;
+
+      if (!value) {
+        _this.setState({
+          innerHtml: null
+        });
+
+        return;
+      }
+
+      var valueType = Object.prototype.toString.call(value);
+
+      if (valueType === '[object String]') {
+        _this.convertMarkdown(value);
+
+        return;
+      }
+
+      if (valueType === '[object Object]') {
+        _this.convertMarkdown(value.text);
+
+        return;
+      }
+
+      return;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "convertMarkdown", function (mdFile) {
+      _markdown2html.processor.process(mdFile).then(function (result) {
+        var innerHtml = String(result).replace(/<a /ig, '<a target="_blank" ');
+
+        _this.setState({
+          innerHtml: innerHtml
+        });
+      });
+    });
+    _this.state = {
+      innerHtml: null
+    };
+    return _this;
+  }
+
+  var _proto = HtmlLongTextFormatter.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.translateValue(this.props);
+  };
+
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    var value = this.props.value;
+
+    if (nextProps.value !== value) {
+      this.translateValue(nextProps);
+    }
+  };
+
+  _proto.render = function render() {
+    var innerHtml = this.state.innerHtml;
+    var className = this.props.className;
+    if (!innerHtml) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className + " article",
+      dangerouslySetInnerHTML: {
+        __html: innerHtml
+      }
+    });
+  };
+
+  return HtmlLongTextFormatter;
+}(_react.Component);
+
+HtmlLongTextFormatter.propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  className: _propTypes.default.string
+};
+var _default = HtmlLongTextFormatter;
+exports.default = _default;

package/lib/LongTextFormatter/index.css

@@ -0,0 +1,63 @@
+@import url('../css/cell-formatter.css');
+
+.dtable-ui.long-text-formatter {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-ui.long-text-formatter.article {
+  display: block;
+  height: auto;
+  overflow: auto;
+}
+
+.dtable-ui.long-text-formatter .long-text-links,
+.dtable-ui.long-text-formatter .long-text-check-list {
+  display: inline-block;
+  height: 20px;
+  padding: 2px;
+  margin: 4px;
+  color: #9c9c9c;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  line-height: 16px;
+}
+
+.dtable-ui.long-text-formatter .long-text-check-list .dtable-font,
+.dtable-ui.long-text-formatter .long-text-links .dtable-font {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+.dtable-ui.long-text-formatter .long-text-check-list .long-text-check-list-completed {
+  color: #61BD4F;
+}
+
+.dtable-ui.long-text-formatter .long-text-images {
+  margin-right: -10px;
+}
+
+.dtable-ui.long-text-formatter .long-text-images img {
+  max-width: 28px;
+  max-height: 28px;
+  border: 1px solid #f0f0f0;
+  box-sizing: border-box;
+  border-radius: 3px;
+}
+
+.dtable-ui.long-text-formatter .long-text-images .image-number {
+  display: inline-block;
+  min-width: 14px;
+  padding: 0 3px;
+  line-height: 14px;
+  font-style: normal;
+  font-size: 12px;
+  border-radius: 6px;
+  background-color: #999;
+  color: #fff;
+  transform: translate(-50%, 9px) scale(0.8);
+}

package/lib/LongTextFormatter/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _htmlLongTextFormatter = _interopRequireDefault(require("./html-long-text-formatter"));
+
+var _simpleLongTextFormatter = _interopRequireDefault(require("./simple-long-text-formatter"));
+
+require("./index.css");
+
+function LongTextFormatter(props) {
+  var isSample = props.isSample,
+      value = props.value,
+      containerClassName = props.containerClassName;
+  var className = (0, _astroClassname.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
+
+  if (isSample) {
+    return /*#__PURE__*/_react.default.createElement(_simpleLongTextFormatter.default, {
+      value: value,
+      className: className
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_htmlLongTextFormatter.default, {
+    value: value,
+    className: className
+  });
+}
+
+LongTextFormatter.propTypes = {
+  isSample: _propTypes.default.bool,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  containerClassName: _propTypes.default.string
+};
+LongTextFormatter.defaultProps = {
+  isSample: true
+};
+var _default = LongTextFormatter;
+exports.default = _default;

package/lib/LongTextFormatter/simple-long-text-formatter.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _normalizeLongTextValue = _interopRequireDefault(require("../utils/normalize-long-text-value"));
+
+var SimpleLongTextFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(SimpleLongTextFormatter, _React$Component);
+
+  function SimpleLongTextFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderLinks", function (value) {
+      var links = value.links;
+      if (!Array.isArray(links) || links.length === 0) return null;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-links"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-url"
+      }), links.length);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCheckList", function (value) {
+      var checkList = value.checklist;
+      if (!checkList || checkList.total === 0) return null;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-check-list"
+      }, /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-check-square-solid " + (checkList.completed === checkList.total ? 'long-text-check-list-completed' : '')
+      }), checkList.completed + "/" + checkList.total);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderImages", function (value) {
+      var images = value.images;
+      if (!Array.isArray(images) || images.length === 0) return null;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-images"
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        src: images[0],
+        alt: ""
+      }), /*#__PURE__*/_react.default.createElement("i", {
+        className: "image-number"
+      }, images.length > 1 ? '+' + images.length : null));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderContent", function (value) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "long-text-content"
+      }, value.preview);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "translateValue", function () {
+      var value = _this.props.value;
+      if (!value) return {};
+      var valueType = Object.prototype.toString.call(value);
+
+      if (valueType === '[object String]') {
+        return (0, _normalizeLongTextValue.default)(value);
+      }
+
+      if (valueType === '[object Object]') {
+        return value;
+      }
+
+      return {};
+    });
+    return _this;
+  }
+
+  var _proto = SimpleLongTextFormatter.prototype;
+
+  _proto.render = function render() {
+    var className = this.props.className;
+    var value = this.translateValue();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, this.renderLinks(value), this.renderCheckList(value), this.renderImages(value), this.renderContent(value));
+  };
+
+  return SimpleLongTextFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(SimpleLongTextFormatter, "defaultProps", {
+  value: {
+    text: '',
+    images: [],
+    links: [],
+    preview: ''
+  }
+});
+SimpleLongTextFormatter.propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  className: _propTypes.default.string
+};
+var _default = SimpleLongTextFormatter;
+exports.default = _default;

package/lib/MTimeFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/lib/MTimeFormatter/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _astroClassname = _interopRequireDefault(require("astro-classname"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+require("./index.css");
+
+var propTypes = {
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  containerClassName: _propTypes.default.string
+};
+
+var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(MTimeFormatter, _React$Component);
+
+  function MTimeFormatter() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "formatDate", function (date) {
+      return (0, _moment.default)(date).format('YYYY-MM-DD HH:mm:ss');
+    });
+    return _this;
+  }
+
+  var _proto = MTimeFormatter.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        date = _this$props.value,
+        containerClassName = _this$props.containerClassName;
+    var classname = (0, _astroClassname.default)('dtable-ui cell-formatter-container ctime-formatter', containerClassName);
+
+    if (date !== '') {
+      date = this.formatDate(date);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, date);
+  };
+
+  return MTimeFormatter;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(MTimeFormatter, "defaultProps", {
+  value: '',
+  containerClassName: ''
+});
+MTimeFormatter.propTypes = propTypes;
+var _default = MTimeFormatter;
+exports.default = _default;

package/lib/ModalPortal/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  children: _propTypes.default.object.isRequired
+};
+var modalRoot = document.getElementById('modal-wrapper');
+
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ModalPortal, _React$Component);
+
+  function ModalPortal(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.el = document.createElement('div');
+    return _this;
+  }
+
+  var _proto = ModalPortal.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    modalRoot.appendChild(this.el);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    modalRoot.removeChild(this.el);
+  };
+
+  _proto.render = function render() {
+    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.el);
+  };
+
+  return ModalPortal;
+}(_react.default.Component);
+
+ModalPortal.propTypes = propTypes;
+var _default = ModalPortal;
+exports.default = _default;