ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/MultilevelSidebar/MultilevelSidebar.js

@@ -0,0 +1,472 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _link = _interopRequireDefault(require("next/link"));
+var _ButtonBasic = _interopRequireDefault(require("../ButtonBasic/ButtonBasic"));
+var _settings = _interopRequireDefault(require("./img/settings.svg"));
+var _utils = require("../../common/utils");
+var _react = require("react");
+var _router = require("next/router");
+require("./MultilevelSidebar.scss");
+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 _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; }
+/**
+ * Компонент рекурсивного сайдбара с навигацией по уровням. При выборе уровня происходит редирект на url, состоящий из основного роута и всех родительских уровней
+ * @param {{
+ *      data: "массив данных с названиями и уровнями "
+ *      maxDepth: "максимальная глубина вложенности. При значении 2 и выше меняются пути, по которым ведут уровни + все первые уровни становятся чёрными",
+ *      onPortalClick: "коллбек при клике на самый верхний увроень. Обязателен, если maxDepth >= 2",
+ *      onLevelClick: "коллбек при клике на конечный уровень. В качестве аргумента в коллбек передаётся id уровня",
+ *      dependencies: "массив зависимостей, при изменении которых сбрасывается выбранный уровень"
+ * }}
+ * @example 
+ * Пример формата данных в массиве data.
+ * Рекурсия осуществляется при наличии subItems массива у объекта
+ * [
+        {
+            "label": "gtcom.io",
+            "subItems": [
+                {
+                    "label": " services",
+                    "subItems": [
+                        {
+                            "label": " parsing",
+                            "value": 3
+                        }
+                    ],
+                    "value": 2
+                }
+            ],
+            "value": 1
+        },
+        {
+            "label": "ecomru.ru",
+            "value": 2
+        },
+        ...
+    ]
+ */
+
+var MultilevelSidebar = function MultilevelSidebar(_ref) {
+  var data = _ref.data,
+    maxDepth = _ref.maxDepth,
+    onPortalClick = _ref.onPortalClick,
+    onLevelClick = _ref.onLevelClick,
+    endLevelValue = _ref.endLevelValue,
+    topLevelValue = _ref.topLevelValue,
+    _ref$BASE_ROUTE = _ref.BASE_ROUTE,
+    BASE_ROUTE = _ref$BASE_ROUTE === void 0 ? 'articles' : _ref$BASE_ROUTE,
+    setPaths = _ref.setPaths,
+    _setTitle = _ref.setTitle,
+    _setDescription = _ref.setDescription,
+    setPathsWebName = _ref.setPathsWebName,
+    activeLang = _ref.activeLang,
+    _ref$isBtnAdd = _ref.isBtnAdd,
+    isBtnAdd = _ref$isBtnAdd === void 0 ? false : _ref$isBtnAdd,
+    _ref$isBtnSwttings = _ref.isBtnSwttings,
+    isBtnSwttings = _ref$isBtnSwttings === void 0 ? false : _ref$isBtnSwttings,
+    _ref$setIsModalAdd = _ref.setIsModalAdd,
+    setIsModalAdd = _ref$setIsModalAdd === void 0 ? false : _ref$setIsModalAdd,
+    _ref$setIsModalSettin = _ref.setIsModalSettings,
+    setIsModalSettings = _ref$setIsModalSettin === void 0 ? false : _ref$setIsModalSettin;
+  var _useState = (0, _react.useState)(BASE_ROUTE),
+    _useState2 = _slicedToArray(_useState, 2),
+    activePath = _useState2[0],
+    setActivePath = _useState2[1];
+  var router = (0, _router.useRouter)();
+  var path = router.asPath;
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentItem = _useState4[0],
+    _setCurrentItem = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isShowSidebar = _useState6[0],
+    setIsShowSidebar = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    localLabelPath = _useState8[0],
+    setLocalLabelPath = _useState8[1];
+  var translateSections = function translateSections() {
+    if (activeLang == 'eng') return 'Sections';
+    if (activeLang == 'tur') return 'Bölümler';
+    return 'Разделы';
+  };
+  (0, _react.useEffect)(function () {
+    if (typeof setPaths === 'function') {
+      setPaths(localLabelPath === null || localLabelPath === void 0 ? void 0 : localLabelPath.split('/'));
+    }
+  }, [localLabelPath]);
+  var setActive = function setActive(active) {
+    router.push(active);
+    setActivePath(active);
+  };
+  (0, _react.useEffect)(function () {
+    var currPath = path['*'];
+    if (currPath !== null && currPath !== void 0 && currPath.length) {
+      var _currPath$replace;
+      setActivePath(currPath);
+      setPathsWebName(currPath === null || currPath === void 0 || (_currPath$replace = currPath.replace('/articles')) === null || _currPath$replace === void 0 ? void 0 : _currPath$replace.split('/'));
+    }
+  }, [path]);
+
+  // Обработчик на клик вне элемента
+  (0, _react.useEffect)(function () {
+    var isDrop = function isDrop(e) {
+      var el = e.target;
+      if (!el.closest(".multilevel-sidebar")) {
+        setIsShowSidebar(false);
+      }
+    };
+    document.addEventListener('click', isDrop);
+    return function () {
+      document.addEventListener('click', isDrop);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "multilevel-sidebar"
+  }, (isBtnAdd || isBtnSwttings) && /*#__PURE__*/React.createElement("div", {
+    className: "multilevel-sidebar__panelBtn"
+  }, isBtnAdd && /*#__PURE__*/React.createElement(_ButtonBasic["default"], {
+    green: true,
+    text: "+",
+    minWidth: "40px",
+    width: "40px",
+    size: "40px",
+    onClick: function onClick(e) {
+      if (setIsModalAdd) {
+        setIsModalAdd(true);
+      }
+    }
+  }), isBtnSwttings && /*#__PURE__*/React.createElement(_ButtonBasic["default"], {
+    grey: true,
+    text: /*#__PURE__*/React.createElement("img", _settings["default"]),
+    minWidth: "40px",
+    width: "40px",
+    size: "40px",
+    onClick: function onClick(e) {
+      if (setIsModalSettings) {
+        setIsModalSettings(true);
+      }
+    },
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      jystifyContent: 'center'
+    }
+  })), /*#__PURE__*/React.createElement("button", {
+    className: "btn-section",
+    onClick: function onClick(e) {
+      return setIsShowSidebar(!isShowSidebar);
+    }
+  }, translateSections()), /*#__PURE__*/React.createElement("div", {
+    className: isShowSidebar ? 'multilevel-sidebar__box' : 'multilevel-sidebar__box_hide'
+  }, /*#__PURE__*/React.createElement("nav", {
+    className: "multilevel-sidebar__nav"
+  }, data.map(function (props, idx) {
+    var label = props.label,
+      value = props.value,
+      web_name = props.web_name,
+      title = props.title,
+      description = props.description,
+      subItems = props.subItems;
+    return /*#__PURE__*/React.createElement(_SidebarMenuItem, _extends({
+      level: 0,
+      idx: idx
+    }, props, {
+      key: value,
+      value: value,
+      subItems: subItems,
+      maxDepth: maxDepth,
+      active: activePath,
+      label: label === null || label === void 0 ? void 0 : label.trim(),
+      web_name: web_name,
+      title: title,
+      setTitle: function setTitle(e) {
+        return _setTitle(e);
+      },
+      setDescription: function setDescription(e) {
+        return _setDescription(e);
+      },
+      description: description,
+      parentPath: BASE_ROUTE,
+      parentLabel: '',
+      setActive: setActive,
+      setLocalPath: function setLocalPath(e) {
+        return setLocalLabelPath(e);
+      },
+      currentItem: currentItem,
+      onLevelClick: onLevelClick,
+      onPortalClick: onPortalClick,
+      setCurrentItem: function setCurrentItem(e) {
+        return _setCurrentItem(e);
+      },
+      setIsShowSidebar: function (_setIsShowSidebar) {
+        function setIsShowSidebar(_x) {
+          return _setIsShowSidebar.apply(this, arguments);
+        }
+        setIsShowSidebar.toString = function () {
+          return _setIsShowSidebar.toString();
+        };
+        return setIsShowSidebar;
+      }(function (e) {
+        return setIsShowSidebar(e);
+      })
+    }));
+  }))));
+};
+var _SidebarMenuItem = function SidebarMenuItem(_ref2) {
+  var _active$split, _active$split2, _decodeURI;
+  var idx = _ref2.idx,
+    label = _ref2.label,
+    value = _ref2.value,
+    _ref2$redirect = _ref2.redirect,
+    redirect = _ref2$redirect === void 0 ? false : _ref2$redirect,
+    parentPath = _ref2.parentPath,
+    parentLabel = _ref2.parentLabel,
+    subItems = _ref2.subItems,
+    active = _ref2.active,
+    _setActive = _ref2.setActive,
+    _setLocalPath = _ref2.setLocalPath,
+    level = _ref2.level,
+    web_name = _ref2.web_name,
+    title = _ref2.title,
+    _setTitle2 = _ref2.setTitle,
+    description = _ref2.description,
+    _setDescription2 = _ref2.setDescription,
+    onPortalClick = _ref2.onPortalClick,
+    _onLevelClick = _ref2.onLevelClick,
+    maxDepth = _ref2.maxDepth,
+    currentItem = _ref2.currentItem,
+    _setCurrentItem2 = _ref2.setCurrentItem,
+    setIsShowSidebar = _ref2.setIsShowSidebar;
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    opened = _useState10[0],
+    setOpened = _useState10[1];
+  var _useState11 = (0, _react.useState)(web_name ? web_name : label),
+    _useState12 = _slicedToArray(_useState11, 2),
+    urlLabel = _useState12[0],
+    setUrlLabel = _useState12[1];
+  var router = (0, _router.useRouter)();
+  var thisPath = parentPath ? "".concat(parentPath, "/").concat(urlLabel) : urlLabel;
+  var thisLabel = parentLabel ? "".concat(parentLabel, "/").concat(label) : label;
+  (0, _react.useEffect)(function () {
+    if (label) {
+      setUrlLabel(web_name ? web_name : (0, _utils.transliter)(label === null || label === void 0 ? void 0 : label.replaceAll(' ', '_')));
+    }
+  }, [label]);
+  (0, _react.useEffect)(function () {
+    var activeArr = active.split('/');
+    var index = activeArr === null || activeArr === void 0 ? void 0 : activeArr.indexOf(urlLabel);
+    setOpened(index >= 0);
+    if (index >= 0) {
+      if (maxDepth >= 2 && level === 0 && typeof onPortalClick === 'function' & (activeArr === null || activeArr === void 0 ? void 0 : activeArr.at(-1)) === urlLabel) {
+        _setCurrentItem2(value);
+        onPortalClick(value);
+      } else {
+        if ((activeArr === null || activeArr === void 0 ? void 0 : activeArr.at(-1)) === urlLabel) {
+          _setCurrentItem2(value);
+          _onLevelClick(value);
+          _setLocalPath(thisLabel);
+          _setTitle2(title ? title : label);
+          _setDescription2(description ? description : title);
+        }
+      }
+    }
+  }, [active]);
+  var SubItems = function SubItems(parentPath, parentLabel) {
+    return subItems === null || subItems === void 0 ? void 0 : subItems.map(function (_ref3, idx) {
+      var label = _ref3.label,
+        value = _ref3.value,
+        web_name = _ref3.web_name,
+        title = _ref3.title,
+        description = _ref3.description,
+        subItems = _ref3.subItems;
+      var subLevel = level + 1;
+      var thisParentPath = parentPath ? "".concat(parentPath, "/").concat(parentLabel) : parentLabel;
+      return subItems !== null && subItems !== void 0 && subItems.length ? /*#__PURE__*/React.createElement(_SidebarMenuItem, {
+        key: value,
+        idx: idx,
+        label: label.trim(),
+        value: value,
+        subItems: subItems,
+        active: active,
+        setActive: function setActive(e) {
+          return _setActive(e);
+        },
+        setLocalPath: function setLocalPath(e) {
+          return _setLocalPath(e);
+        },
+        level: subLevel,
+        web_name: web_name,
+        setTitle: function setTitle(e) {
+          return _setTitle2(e);
+        },
+        setDescription: function setDescription(e) {
+          return _setDescription2(e);
+        },
+        title: title,
+        description: description,
+        onLevelClick: function onLevelClick(e) {
+          return _onLevelClick(e);
+        },
+        parentPath: thisParentPath,
+        parentLabel: parentLabel,
+        maxDepth: maxDepth,
+        currentItem: currentItem,
+        setCurrentItem: function setCurrentItem(e) {
+          return _setCurrentItem2(e);
+        }
+      }) : /*#__PURE__*/React.createElement(EndLevelItem, {
+        key: value,
+        onLevelClick: function onLevelClick(e) {
+          return _onLevelClick(e);
+        },
+        label: label.trim(),
+        value: value,
+        web_name: web_name,
+        title: title,
+        setTitle: function setTitle(e) {
+          return _setTitle2(e);
+        },
+        setDescription: function setDescription(e) {
+          return _setDescription2(e);
+        },
+        description: description,
+        parentPath: thisParentPath,
+        parentLabel: thisLabel,
+        setLocalPath: function setLocalPath(e) {
+          return _setLocalPath(e);
+        },
+        active: active,
+        setActive: function setActive(e) {
+          return _setActive(e);
+        },
+        level: subLevel,
+        maxDepth: maxDepth,
+        currentItem: currentItem,
+        setCurrentItem: function setCurrentItem(e) {
+          return _setCurrentItem2(e);
+        }
+      });
+    });
+  };
+  var handleClick = function handleClick(e, value) {
+    if (e.ctrlKey) {
+      return;
+    }
+    if (redirect) {
+      return router.push(value);
+    }
+    setOpened(function (prev) {
+      if (currentItem === value) {
+        return !prev;
+      } else {
+        return true;
+      }
+    });
+    _setActive(thisPath);
+    _setLocalPath(thisLabel);
+    _setTitle2(title ? title : label);
+    _setDescription2(description ? description : title);
+  };
+  (0, _react.useEffect)(function () {
+    // открываем первый элемент сайдбара при первом открытии страницы
+    if (router.pathname === "/" && level === 0 && idx === 0) setOpened(true);
+  }, []);
+  var listClass = opened ? 'sidebar-menu__list' : 'sidebar-menu__list_hide';
+  var boxClass = (active === null || active === void 0 || (_active$split = active.split('/')) === null || _active$split === void 0 ? void 0 : _active$split.indexOf(urlLabel)) >= 0 ? 'sidebar-menu__link-box_active' : 'sidebar-menu__link-box';
+  var itemMenuClass = (active === null || active === void 0 || (_active$split2 = active.split('/')) === null || _active$split2 === void 0 ? void 0 : _active$split2.at(-1)) === urlLabel ? 'sidebar-menu__item_active' : 'sidebar-menu__item';
+  return /*#__PURE__*/React.createElement("div", {
+    key: value,
+    className: itemMenuClass
+  }, /*#__PURE__*/React.createElement(_link["default"], {
+    className: boxClass,
+    href: thisPath,
+    onClick: function onClick(e) {
+      handleClick(e, value);
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "sidebar-menu__link",
+    style: {
+      backgroundColor: value == currentItem ? ((_decodeURI = decodeURI(active)) === null || _decodeURI === void 0 || (_decodeURI = _decodeURI.split('/')) === null || _decodeURI === void 0 ? void 0 : _decodeURI.length) === 1 ? '#F0F2F4' : '' : ''
+    }
+  }, label)), /*#__PURE__*/React.createElement("ul", {
+    className: listClass
+  }, opened && SubItems(parentPath, urlLabel)));
+};
+var EndLevelItem = function EndLevelItem(_ref4) {
+  var parentPath = _ref4.parentPath,
+    label = _ref4.label,
+    value = _ref4.value,
+    onLevelClick = _ref4.onLevelClick,
+    setActive = _ref4.setActive,
+    active = _ref4.active,
+    level = _ref4.level,
+    web_name = _ref4.web_name,
+    title = _ref4.title,
+    setTitle = _ref4.setTitle,
+    description = _ref4.description,
+    setDescription = _ref4.setDescription,
+    maxDepth = _ref4.maxDepth,
+    currentItem = _ref4.currentItem,
+    setCurrentItem = _ref4.setCurrentItem,
+    setLocalPath = _ref4.setLocalPath,
+    parentLabel = _ref4.parentLabel;
+  var black = maxDepth >= 2 && level === 1;
+  var _useState13 = (0, _react.useState)(web_name ? web_name : label),
+    _useState14 = _slicedToArray(_useState13, 2),
+    urlLabel = _useState14[0],
+    setUrlLabel = _useState14[1];
+  var thisPath = "".concat(parentPath, "/").concat(urlLabel);
+  var thisLabel = "".concat(parentLabel, "/").concat(label);
+  (0, _react.useEffect)(function () {
+    if (label) {
+      setUrlLabel(web_name ? web_name : (0, _utils.transliter)(label === null || label === void 0 ? void 0 : label.replaceAll(' ', '_')));
+    }
+  }, [label]);
+  (0, _react.useEffect)(function () {
+    var activeArr = active.split('/');
+    var index = activeArr === null || activeArr === void 0 ? void 0 : activeArr.indexOf(urlLabel);
+    if (index >= 0) {
+      if ((activeArr === null || activeArr === void 0 ? void 0 : activeArr.at(-1)) === urlLabel) {
+        setCurrentItem(value);
+        onLevelClick(value);
+        setTitle(title ? title : label);
+        setDescription(description ? description : title);
+        setLocalPath(thisLabel);
+        if (typeof setCurrentItem === 'function') setCurrentItem(value);
+      }
+    }
+  }, [active]);
+  return /*#__PURE__*/React.createElement("div", {
+    key: value,
+    className: black ? 'sidebar-menu__link' : 'sidebar-menu__link_grey'
+  }, /*#__PURE__*/React.createElement(_link["default"], {
+    href: thisPath,
+    onClick: function onClick(e) {
+      if (e.ctrlKey) {
+        return;
+      }
+      setTitle(title ? title : label);
+      setDescription(description ? description : title);
+      setActive(thisPath);
+      setLocalPath(thisLabel);
+      if (typeof setCurrentItem === 'function') setCurrentItem(value);
+      if (typeof onLevelClick === 'function') onLevelClick(value);
+      if (typeof setIsShowSidebar === 'function') setIsShowSidebar(false);
+    },
+    className: active === thisPath ? 'sidebar-menu__list-item_active' : 'sidebar-menu__list-item'
+  }, label));
+};
+var _default = exports["default"] = MultilevelSidebar;