ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/Article/ArticleView.js

@@ -0,0 +1,440 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _Feedback = _interopRequireDefault(require("./Feedback/Feedback"));
+var _time_icon = _interopRequireDefault(require("./img/time_icon.svg"));
+var _view_icon = _interopRequireDefault(require("./img/view_icon.svg"));
+var _calendar_icon = _interopRequireDefault(require("./img/calendar_icon.svg"));
+var _ListOfContent = _interopRequireDefault(require("./ListOfContent/ListOfContent"));
+var _ShortTileArticleBox = _interopRequireDefault(require("../ShortTileArticleBox/ShortTileArticleBox"));
+var _TitleContentEditable = _interopRequireDefault(require("../TitleContentEditable/TitleContentEditable"));
+var _InputDinamycPlaceholder = _interopRequireDefault(require("../InputDinamycPlaceholder/InputDinamycPlaceholder"));
+var _reactSpinners = require("react-spinners");
+var _utils = require("../../common/utils");
+var _reactDom = require("react-dom");
+var _ShareComponent = require("../../components/ShareComponent/ShareComponent");
+var _material = require("@mui/material");
+var _ModalArticleAddElement = require("../ModalArticleAddElement/ModalArticleAddElement");
+var _react = require("react");
+var _ArticleElement = _interopRequireWildcard(require("./ArticleElement"));
+require("./Article.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var ArticleView = function ArticleView(_ref) {
+  var _apiData$author, _apiData$author2, _apiData$author$, _Date, _apiData$preview;
+  var loading = _ref.loading,
+    readonly = _ref.readonly,
+    apiData = _ref.apiData,
+    contentData = _ref.contentData,
+    setContentData = _ref.setContentData,
+    setListOfContent = _ref.setListOfContent,
+    publishEventSource = _ref.publishEventSource,
+    portalId = _ref.portalId,
+    setChanged = _ref.setChanged,
+    isNew = _ref.isNew,
+    articleTitle = _ref.articleTitle,
+    _ref$showTitle = _ref.showTitle,
+    showTitle = _ref$showTitle === void 0 ? true : _ref$showTitle,
+    setArticleTitle = _ref.setArticleTitle,
+    articleTitleRef = _ref.articleTitleRef,
+    setContentChanged = _ref.setContentChanged,
+    _ref$hideInfoPanel = _ref.hideInfoPanel,
+    hideInfoPanel = _ref$hideInfoPanel === void 0 ? false : _ref$hideInfoPanel,
+    _ref$hideRecommendati = _ref.hideRecommendation,
+    hideRecommendation = _ref$hideRecommendati === void 0 ? false : _ref$hideRecommendati,
+    contentLinks = _ref.contentLinks,
+    articlePath = _ref.articlePath,
+    articleId = _ref.articleId,
+    title = _ref.title,
+    _setTitle = _ref.setTitle,
+    description = _ref.description,
+    setDescription = _ref.setDescription;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showAddBlockPopup = _useState2[0],
+    setShowAddBlockPopup = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    newElementPosition = _useState4[0],
+    setNewElementPosition = _useState4[1];
+  var id = (0, _react.useId)();
+  var _useState5 = (0, _react.useState)(id),
+    _useState6 = _slicedToArray(_useState5, 2),
+    changeId = _useState6[0],
+    setChangeId = _useState6[1];
+  var _useState7 = (0, _react.useState)(function () {
+      var _localStorage$getItem;
+      return (_localStorage$getItem = localStorage.getItem('lang')) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : 'rus';
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeLang = _useState8[0],
+    setActiveLang = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isDropShare = _useState10[0],
+    setIsDropShare = _useState10[1];
+  var componentRefs = [];
+  var getSavedArray = function getSavedArray() {
+    var result = [];
+    componentRefs.forEach(function (element) {
+      result.push({
+        type: element.type,
+        data: element.getData(),
+        id: element.id
+      });
+    });
+    return result;
+  };
+  var translateAuthor = function translateAuthor() {
+    if (apiData !== null && apiData !== void 0 && apiData.author) {
+      if (activeLang == 'eng') return (0, _utils.transliter)(apiData === null || apiData === void 0 ? void 0 : apiData.author[0]);
+      if (activeLang == 'tur') return (0, _utils.transliter)(apiData === null || apiData === void 0 ? void 0 : apiData.author[0]);
+    } else {
+      if (activeLang == 'rus') return 'Неизвестный автор';
+      if (activeLang == 'tur') return 'Bilinmeyen Yazar';
+      if (activeLang == 'eng') return 'Unknown_author';
+    }
+    return (0, _utils.transliter)(apiData === null || apiData === void 0 ? void 0 : apiData.author[0]);
+  };
+  var translateMin = function translateMin() {
+    if (activeLang == 'eng') return 'min';
+    if (activeLang == 'tur') return 'dak';
+    return 'мин';
+  };
+  var translateNoViews = function translateNoViews() {
+    if (activeLang == 'eng') return 'Нет просмотров';
+    if (activeLang == 'tur') return 'Görüntüleme yok';
+    return 'Нет просмотров';
+  };
+  var translateRecommendations = function translateRecommendations() {
+    if (activeLang == 'eng') return 'This is going to be interesting';
+    if (activeLang == 'tur') return ' Ilginiz çeker';
+    return 'Будет интересно';
+  };
+  var applyRef = function applyRef(element) {
+    if (element) componentRefs.push(element);
+  };
+  var onChildElementChange = function onChildElementChange() {
+    computeContentList();
+    setChangeId(function (prev) {
+      return prev + 1;
+    });
+    if (typeof setChanged === 'function') {
+      setChanged(true);
+    }
+  };
+  var noContent = Array.isArray(contentData) ? (contentData === null || contentData === void 0 ? void 0 : contentData.length) === 0 : 0;
+  var addNewBlock = function addNewBlock(type) {
+    // we have to collect changes from HTML here, otherwise all new blocks will be empty
+    // console.log(type);
+    var stateWithChanges = getSavedArray();
+    var stateCopy = [].concat(_toConsumableArray(stateWithChanges.slice(0, newElementPosition + 1)), [{
+      type: type,
+      data: ''
+    }], _toConsumableArray(stateWithChanges.slice(newElementPosition + 1)));
+    setContentData(stateCopy);
+    if (typeof setChanged === 'function') {
+      setChanged(true);
+    }
+  };
+  var computeContentList = function computeContentList() {
+    return setListOfContent(componentRefs.filter(function (ref) {
+      return ref.type === _ArticleElement.ARTICLE_TYPES.header;
+    }).map(function (ref) {
+      return {
+        linkText: ref.getData(),
+        path: "".concat(ref.getId())
+      };
+    }));
+  };
+  var deleteBlock = function deleteBlock(position) {
+    // we have to collect changes from HTML here, otherwise all new blocks will be empty
+    var stateWithChanges = getSavedArray();
+    var stateCopy = _toConsumableArray(stateWithChanges);
+    stateCopy.splice(position, 1);
+    setContentData(stateCopy);
+    if (typeof setChanged === 'function') {
+      setChanged(true);
+    }
+  };
+
+  // подписываемся на click event кнопки, по которой вызывается паблишинг, чтобы на момент срабатывания в родительском компоненте были свежие данные
+  (0, _react.useEffect)(function () {
+    function updateContent() {
+      setContentData(getSavedArray());
+    }
+    if (publishEventSource) {
+      publishEventSource.addEventListener('click', updateContent);
+    }
+    return function () {
+      if (publishEventSource) {
+        publishEventSource.removeEventListener('click', updateContent);
+      }
+    };
+  }, [changeId, contentData]);
+  (0, _react.useEffect)(function () {
+    if (!(apiData !== null && apiData !== void 0 && apiData.content)) {
+      return;
+    }
+    var content = [];
+    var _iterator = _createForOfIteratorHelper(apiData.content.sort(function (a, b) {
+        return a.place - b.place;
+      })),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var element = _step.value;
+        var articleElement = {
+          id: element.id
+        };
+        content.push(articleElement);
+        var keys = Object.keys(element);
+        if (keys.find(function (name) {
+          return name.startsWith('header');
+        })) {
+          articleElement.type = _ArticleElement.ARTICLE_TYPES.header;
+          articleElement.data = element.header_text;
+          continue;
+        }
+        if (keys.find(function (name) {
+          return name.startsWith('text');
+        })) {
+          articleElement.type = _ArticleElement.ARTICLE_TYPES.description;
+          articleElement.data = element.text;
+          continue;
+        }
+        if (keys.find(function (name) {
+          return name.startsWith('photo');
+        })) {
+          articleElement.type = _ArticleElement.ARTICLE_TYPES.image;
+          articleElement.data = {
+            value: element.value,
+            alt: element === null || element === void 0 ? void 0 : element.alt
+          };
+          articleElement.data = {
+            value: element.value,
+            alt: element === null || element === void 0 ? void 0 : element.alt
+          };
+          continue;
+        }
+        if (keys.find(function (name) {
+          return name.startsWith('notification');
+        })) {
+          articleElement.type = _ArticleElement.ARTICLE_TYPES.warningBlock;
+          articleElement.data = element.notification_text;
+          continue;
+        }
+        if (keys.find(function (name) {
+          return name.startsWith('formBtn');
+        })) {
+          articleElement.type = _ArticleElement.ARTICLE_TYPES.formBtn;
+          articleElement.data = element.formBtn;
+          continue;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    setContentData(content);
+  }, [apiData]);
+
+  // эффект для обновления содержания
+  (0, _react.useEffect)(function () {
+    computeContentList();
+  }, [contentData]);
+
+  // Обработчик на клик вне элемента
+  (0, _react.useEffect)(function () {
+    var isDrop = function isDrop(e) {
+      var el = e.target;
+      if (!el.closest("#share")) {
+        setIsDropShare(false);
+      }
+    };
+    document.addEventListener('click', isDrop);
+    return function () {
+      document.addEventListener('click', isDrop);
+    };
+  }, []);
+  var contentComponents = contentData === null || contentData === void 0 ? void 0 : contentData.map(function (articleElement, index) {
+    return /*#__PURE__*/React.createElement(_ArticleElement["default"], _extends({
+      isNew: isNew,
+      key: articleElement.id ? articleElement.id : articleElement.type + articleElement.data + index,
+      isFirstElement: index === 0
+    }, articleElement, {
+      setShowAddBlockPopup: setShowAddBlockPopup,
+      setNewElementPosition: setNewElementPosition,
+      position: index,
+      editMode: !readonly,
+      ref: applyRef,
+      onChange: onChildElementChange,
+      onDelete: deleteBlock
+    }));
+  });
+  (0, _react.useEffect)(function () {
+    window.scrollTo(0, 0);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "article-view"
+  }, showAddBlockPopup && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/React.createElement(_ModalArticleAddElement.ModalArticleAddElement, {
+    onAddClick: function onAddClick(type) {
+      return addNewBlock(type);
+    },
+    setShowModal: setShowAddBlockPopup
+  }), document.getElementById(portalId)), /*#__PURE__*/React.createElement("section", {
+    className: "article-view__content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "article"
+  }, loading ? /*#__PURE__*/React.createElement("div", {
+    className: "article-loader"
+  }, /*#__PURE__*/React.createElement(_reactSpinners.MoonLoader, {
+    color: "#7b7b7b",
+    speedMultiplier: 0.5
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, readonly ? showTitle ? /*#__PURE__*/React.createElement("div", {
+    className: "title-box"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "title__big"
+  }, articleTitle)) : null : /*#__PURE__*/React.createElement("div", {
+    className: "title-box"
+  }, /*#__PURE__*/React.createElement(_material.TextareaAutosize, {
+    type: "text",
+    ref: articleTitleRef,
+    placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A",
+    className: "title__big title-input",
+    value: articleTitle,
+    onChange: function onChange(e) {
+      setContentChanged(true);
+      setArticleTitle(e.target.value);
+    },
+    autoFocus: true
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "btn-group"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return articleTitleRef.current.focus();
+    },
+    className: "btn__edit-light"
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      return setArticleTitle("");
+    },
+    className: "btn__delete-light"
+  }))), !readonly && /*#__PURE__*/React.createElement("div", {
+    className: "article__input-group"
+  }, /*#__PURE__*/React.createElement(_TitleContentEditable["default"], {
+    titleStatic: "Title",
+    placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 title \u0434\u043B\u044F \u0441\u0442\u0430\u0442\u044C\u0438 (70 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)",
+    title: title,
+    setTitle: function setTitle(e) {
+      return function (value) {
+        if (typeof _setTitle === 'function') {
+          _setTitle(value);
+        }
+      };
+    },
+    maxlength: 70
+  }), /*#__PURE__*/React.createElement(_TitleContentEditable["default"], {
+    titleStatic: "Description",
+    placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 description \u0434\u043B\u044F \u0441\u0442\u0430\u0442\u044C\u0438 (140 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432)",
+    title: description,
+    setTitle: function setTitle(value) {
+      if (typeof setDescription === 'function') {
+        setDescription(value);
+      }
+    },
+    maxlength: 140
+  })), apiData && !hideInfoPanel && readonly && /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-bottom"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "author-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "author-avatar",
+    style: {
+      backgroundColor: Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.author) && (apiData === null || apiData === void 0 || (_apiData$author = apiData.author) === null || _apiData$author === void 0 ? void 0 : _apiData$author.length) > 1 ? apiData === null || apiData === void 0 ? void 0 : apiData.author[1] : ''
+    }
+  }, (Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.author) && (apiData === null || apiData === void 0 || (_apiData$author2 = apiData.author) === null || _apiData$author2 === void 0 ? void 0 : _apiData$author2.length) > 0) > 0 ? apiData === null || apiData === void 0 || (_apiData$author$ = apiData.author[0]) === null || _apiData$author$ === void 0 || (_apiData$author$ = _apiData$author$.split(' ').map(function (str) {
+    return str[0];
+  }).reduce(function (acc, current) {
+    return acc += current;
+  }, '')) === null || _apiData$author$ === void 0 ? void 0 : _apiData$author$.toUpperCase() : '-'), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, translateAuthor())), /*#__PURE__*/React.createElement("div", {
+    className: "right-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "date-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _calendar_icon["default"]
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, apiData !== null && apiData !== void 0 && apiData.date ? (_Date = new Date(apiData === null || apiData === void 0 ? void 0 : apiData.date)) === null || _Date === void 0 ? void 0 : _Date.toLocaleDateString('ru-ru') : 'Неизвестная дата')), /*#__PURE__*/React.createElement("div", {
+    className: "view-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _view_icon["default"]
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, apiData !== null && apiData !== void 0 && apiData.views ? apiData === null || apiData === void 0 ? void 0 : apiData.views : translateNoViews())), /*#__PURE__*/React.createElement("div", {
+    className: "time-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _time_icon["default"]
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, "".concat(apiData !== null && apiData !== void 0 && apiData.reading_time_min ? apiData === null || apiData === void 0 ? void 0 : apiData.reading_time_min : '-', " ").concat(translateMin()))), /*#__PURE__*/React.createElement(_ShareComponent.ShareComponent, {
+    activeLang: activeLang,
+    id: articleId,
+    articlePath: articlePath
+  }))), /*#__PURE__*/React.createElement(_ListOfContent["default"], {
+    readonly: true,
+    links: contentLinks,
+    lang: activeLang
+  }), contentComponents), !readonly && /*#__PURE__*/React.createElement("div", {
+    className: "btn-box"
+  }, noContent && /*#__PURE__*/React.createElement("button", {
+    className: "btn__round-blue",
+    onClick: function onClick(e) {
+      return setShowAddBlockPopup(true);
+    }
+  })), /*#__PURE__*/React.createElement(_Feedback["default"], null))), readonly && !hideRecommendation && /*#__PURE__*/React.createElement("div", {
+    className: "article-view__this-will-be-interesting"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "title"
+  }, translateRecommendations()), /*#__PURE__*/React.createElement("div", {
+    className: "article-view__this-will-be-interesting__content"
+  }, apiData === null || apiData === void 0 || (_apiData$preview = apiData.preview) === null || _apiData$preview === void 0 ? void 0 : _apiData$preview.map(function (el) {
+    return /*#__PURE__*/React.createElement(_ShortTileArticleBox["default"], _extends({
+      key: el
+    }, el, {
+      id: el.id,
+      name: el === null || el === void 0 ? void 0 : el.cpu,
+      views: el === null || el === void 0 ? void 0 : el.clicks,
+      timeToRead: el === null || el === void 0 ? void 0 : el.reading_time_min,
+      photoPreview: el === null || el === void 0 ? void 0 : el.photo,
+      date: new Date(el === null || el === void 0 ? void 0 : el.date),
+      activeLang: activeLang,
+      fromArticle: true
+    }));
+  }))));
+};
+var _default = exports["default"] = ArticleView;