ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/Paginator/Paginator.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = exports.PAGE_SIZES = void 0;
+var _react = require("react");
+require("./Paginator.scss");
+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 PAGE_SIZES = exports.PAGE_SIZES = [10, 50, 100];
+var DEFAULT_PAGE = 1;
+var DOT_SCROLL_STEP = 5;
+var VISIBLE_ELEMENTS = 7;
+var Paginator = function Paginator(_ref) {
+  var _Array$from;
+  var pageSize = _ref.pageSize,
+    pageNumber = _ref.pageNumber,
+    setPageSize = _ref.setPageSize,
+    setPageNumber = _ref.setPageNumber,
+    total = _ref.total,
+    lang = _ref.lang;
+  var totalPages = total ? Math.ceil(total / pageSize) : 0;
+  var firstItemOnThePage = pageSize * (pageNumber - 1) + 1;
+  var lastItemOnThePage = firstItemOnThePage === 1 ? pageSize : firstItemOnThePage - 1 + pageSize;
+  if (total < lastItemOnThePage) {
+    lastItemOnThePage = total;
+  }
+  var selectRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewRange = _useState2[0],
+    setViewRange = _useState2[1];
+
+  //перевод
+  var translateOf = function translateOf() {
+    if (lang == 'tur') return 'üzerinden';
+    if (lang == 'eng') return 'out of';
+    return 'из';
+  };
+  var onPageNumberClick = function onPageNumberClick(e) {
+    var newNumber = parseInt(e.target.title, 10);
+    setPageNumber(newNumber);
+    if (newNumber === DEFAULT_PAGE || newNumber === totalPages) updateViewRange(newNumber);
+  };
+  var onSelectChange = function onSelectChange(e) {
+    setPageNumber(DEFAULT_PAGE);
+    setPageSize(parseInt(e.target.value));
+  };
+  var updatePageNumber = function updatePageNumber(number) {
+    setPageNumber(number);
+    updateViewRange(number);
+  };
+  (0, _react.useEffect)(function () {
+    selectRef.current.value = pageSize;
+  }, []);
+  (0, _react.useEffect)(function () {
+    updateViewRange(pageNumber);
+  }, [totalPages]);
+  var LeftDots = function LeftDots(currentNumber) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "dots",
+      onClick: function onClick() {
+        return updatePageNumber(currentNumber - DOT_SCROLL_STEP);
+      }
+    }, "...");
+  };
+  var RightDots = function RightDots(currentNumber) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "dots",
+      onClick: function onClick() {
+        return updatePageNumber(currentNumber + DOT_SCROLL_STEP);
+      }
+    }, "...");
+  };
+  var LeftArrow = function LeftArrow() {
+    return /*#__PURE__*/React.createElement(Arrow, {
+      wrapperClassName: "arrow_wrapper",
+      className: "arrow_prev",
+      scrollCallback: function scrollCallback() {
+        return updatePageNumber(pageNumber - 1);
+      },
+      disabled: pageNumber === DEFAULT_PAGE
+    });
+  };
+  var RightArrow = function RightArrow() {
+    return /*#__PURE__*/React.createElement(Arrow, {
+      wrapperClassName: "arrow_wrapper",
+      className: "arrow_next",
+      scrollCallback: function scrollCallback() {
+        return updatePageNumber(pageNumber + 1);
+      },
+      disabled: pageNumber === totalPages
+    });
+  };
+  var updateViewRange = function updateViewRange(currentNumber) {
+    var allPageNumbers = Array.from(_toConsumableArray(Array(totalPages).keys())).map(function (p) {
+      return p + 1;
+    });
+    if (!totalPages || totalPages < VISIBLE_ELEMENTS) {
+      setViewRange(allPageNumbers);
+      return;
+    }
+    if (currentNumber === DEFAULT_PAGE || currentNumber - DEFAULT_PAGE < DOT_SCROLL_STEP) {
+      setViewRange([].concat(_toConsumableArray(allPageNumbers.slice(0, DOT_SCROLL_STEP)), [RightDots, totalPages]));
+      return;
+    }
+    if (currentNumber === totalPages || totalPages - currentNumber < DOT_SCROLL_STEP) {
+      setViewRange([DEFAULT_PAGE, LeftDots].concat(_toConsumableArray(allPageNumbers.slice(-DOT_SCROLL_STEP))));
+      return;
+    }
+    setViewRange([DEFAULT_PAGE, LeftDots, currentNumber - 1, currentNumber, currentNumber + 1, RightDots, totalPages]);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "paginator"
+  }, /*#__PURE__*/React.createElement("select", {
+    ref: selectRef,
+    onChange: onSelectChange,
+    className: "select-page"
+  }, PAGE_SIZES === null || PAGE_SIZES === void 0 ? void 0 : PAGE_SIZES.map(function (size) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: size
+    }, size);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'pagination_wrapper' + (totalPages ? '' : '_disabled')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pagination_container"
+  }, /*#__PURE__*/React.createElement(LeftArrow, null), !totalPages && ((_Array$from = Array.from(_toConsumableArray(Array(3).keys()))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (_, index) {
+    return /*#__PURE__*/React.createElement(PageNumber, {
+      itemId: index,
+      className: "page-num",
+      title: index + 1,
+      key: index
+    });
+  })), viewRange === null || viewRange === void 0 ? void 0 : viewRange.map(function (el) {
+    return typeof el === 'number' ? /*#__PURE__*/React.createElement(PageNumber, {
+      className: "page-num",
+      onClick: onPageNumberClick,
+      selected: pageNumber === el,
+      title: el,
+      key: el,
+      itemId: el
+    }) : el(pageNumber);
+  }), /*#__PURE__*/React.createElement(RightArrow, null))), total ? /*#__PURE__*/React.createElement("p", {
+    className: "total-info"
+  }, firstItemOnThePage, " \u2014 ", lastItemOnThePage, " ", translateOf(), " ", total) : /*#__PURE__*/React.createElement("p", {
+    className: "total-info",
+    style: {
+      minWidth: '60px'
+    }
+  }));
+};
+var Arrow = function Arrow(_ref2) {
+  var className = _ref2.className,
+    wrapperClassName = _ref2.wrapperClassName,
+    scrollCallback = _ref2.scrollCallback,
+    disabled = _ref2.disabled;
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("i", {
+    className: className,
+    disabled: disabled,
+    onClick: scrollCallback
+  }));
+};
+var PageNumber = function PageNumber(_ref3) {
+  var className = _ref3.className,
+    onClick = _ref3.onClick,
+    selected = _ref3.selected,
+    title = _ref3.title;
+  return /*#__PURE__*/React.createElement("span", {
+    className: className + (selected ? '_selected' : ''),
+    onClick: onClick,
+    title: title,
+    tabIndex: 0
+  }, title);
+};
+var usePagination = exports.usePagination = function usePagination(fetchCallback, dependencies, filters) {
+  var lang = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'rus';
+  var setParams = arguments.length > 4 ? arguments[4] : undefined;
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    total = _useState4[0],
+    setTotal = _useState4[1];
+  var _useState5 = (0, _react.useState)(DEFAULT_PAGE),
+    _useState6 = _slicedToArray(_useState5, 2),
+    page = _useState6[0],
+    setPage = _useState6[1];
+  var _useState7 = (0, _react.useState)(PAGE_SIZES[0]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    limit = _useState8[0],
+    setLimit = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    noFetch = _useState10[0],
+    setNoFetch = _useState10[1];
+  var reset = function reset() {
+    setPage(DEFAULT_PAGE);
+    if (page !== DEFAULT_PAGE) setNoFetch(true);
+    if (typeof setParams === 'function') {
+      setParams([]);
+    }
+  };
+
+  // todo - remove
+  (0, _react.useEffect)(function () {
+    if (dependencies && page !== DEFAULT_PAGE) {
+      setPage(DEFAULT_PAGE);
+      setNoFetch(true);
+    }
+  }, dependencies);
+  (0, _react.useEffect)(function () {
+    if (total === 0) {
+      return;
+    }
+    if (noFetch) {
+      setNoFetch(false);
+      return;
+    }
+    if (fetchCallback) {
+      var abortController = fetchCallback(filters) || new AbortController();
+      return function () {
+        if (abortController !== null && abortController !== void 0 && abortController.abort) {
+          console.log(abortController);
+          abortController.abort();
+        }
+      };
+    }
+  }, [page, limit, filters]);
+  var _useState11 = (0, _react.useState)(localStorage.getItem("lang") || 'rus'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    settings = _useState12[0],
+    setSettings = _useState12[1];
+  (0, _react.useEffect)(function () {
+    setSettings(localStorage.getItem("lang"));
+  }, [localStorage.getItem("lang")]);
+  var PaginatorComponent = /*#__PURE__*/React.createElement(Paginator, {
+    lang: settings,
+    pageSize: limit,
+    pageNumber: page,
+    setPageSize: setLimit,
+    setPageNumber: setPage,
+    total: total
+  });
+  return [page, limit, total, setTotal, PaginatorComponent, reset];
+};

package/dist/stories/Paginator/Paginator.scss

@@ -0,0 +1,168 @@
+.pagination_wrapper {
+    &_disabled {
+        width: 123px;
+        opacity: 0.3;
+        pointer-events: none;
+    }
+}
+
+.pagination_container {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.page-num {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    text-align: center;
+    font-family: NunitoSans;
+    color: #11195D;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px; 
+    border-radius: 4px;
+    cursor: pointer;
+    padding-left: 2px;
+    padding-right: 2px;
+
+    &_selected {
+        transition: 0.3s;
+        @extend .page-num;
+        background-color: #51CA64;
+        color: white;
+    }
+
+    &:hover {
+        transition: 0.3s;
+        background-color:#51CA64;
+        color: white
+    }
+}
+
+.dots {
+    @extend .page-num;
+}
+
+.arrow_next {
+    @extend .page-num;
+    position: relative;
+    width: 12px;
+    height: 24px;
+    background-image: url('./img/arrow_next.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &:hover {
+        background-color: inherit;
+    }
+
+    // @include optimizeSafariSvg(url('./img/arrow_next.svg'));
+    &::before {
+        transform: scale(0.13);
+        transform-origin: 46px 7px;
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+
+        &:hover {
+            background-color: unset;
+        }
+
+        pointer-events: none;
+    }
+}
+
+.arrow_prev {
+    @extend .page-num;
+    position: relative;
+    width: 12px;
+    height: 24px;
+    background-image: url('./img/arrow_prev.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    // @include optimizeSafariSvg(url('./img/arrow_next.svg'));
+    &::before {
+        background-image: none;
+        transform: scale(0.13) scaleX(-1);
+        transform-origin: 42px 7px;
+    }
+
+    &[disabled] {
+        @extend .arrow_prev;
+        opacity: 0.1;
+
+        &:hover {
+            background-color: unset;
+        }
+
+        pointer-events: none;
+    }
+}
+
+.arrow_wrapper:has(.arrow_prev[disabled]) {
+    cursor: not-allowed;
+}
+
+.paginator {
+    padding: 8px 12px;
+    background-color: #FAFBFA;
+    border-radius: 0px 0px 8px 8px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 0px;
+
+    .total-info {
+        font-size: 14px;
+        align-self: center;
+        text-align: center;
+        font-family: NunitoSans;
+        color: #11195D;
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px; 
+    }
+}
+
+.select-page {
+    box-sizing: border-box;
+    outline: .5px solid #F0F0F0;
+    padding: .25em .5em;
+    border: 1px solid #F0F0F0;
+    border-radius: 4px;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    width: 60px;
+    background-image: url('./img/arrow_blue.svg');
+    background-size: 12px 12px;
+    background-position: right 8px center;
+    background-repeat: no-repeat;
+    font-size: 12px;
+    margin: 0 4px;
+    background-color: #F9FAFF;
+    outline: none;
+    border: none;
+    font-family: NunitoSans;
+    color: #11195D;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px; 
+}

package/dist/stories/Paginator/Paginator.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.OneHundredItems = exports.Default = void 0;
+var _react = require("react");
+var _addonActions = require("@storybook/addon-actions");
+var _Paginator = require("./Paginator");
+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 _default = exports["default"] = {
+  title: 'Components/Paginator',
+  parameters: {
+    laoyout: 'centered'
+  },
+  args: {
+    fetchCallback: (0, _addonActions.action)('fetchCallback'),
+    filters: {
+      test: '123'
+    }
+  }
+};
+var Default = exports.Default = {
+  render: function render(_ref) {
+    var fetchCallback = _ref.fetchCallback;
+    var _usePagination = (0, _Paginator.usePagination)(fetchCallback, [], {}),
+      _usePagination2 = _slicedToArray(_usePagination, 5),
+      page = _usePagination2[0],
+      limit = _usePagination2[1],
+      total = _usePagination2[2],
+      setTotal = _usePagination2[3],
+      Paginator = _usePagination2[4];
+    return Paginator;
+  }
+};
+var OneHundredItems = exports.OneHundredItems = {
+  render: function render(_ref2) {
+    var fetchCallback = _ref2.fetchCallback;
+    var _usePagination3 = (0, _Paginator.usePagination)(fetchCallback, [], {}),
+      _usePagination4 = _slicedToArray(_usePagination3, 5),
+      page = _usePagination4[0],
+      limit = _usePagination4[1],
+      total = _usePagination4[2],
+      setTotal = _usePagination4[3],
+      Paginator = _usePagination4[4];
+    (0, _react.useEffect)(function () {
+      setTotal(100);
+    }, []);
+    return Paginator;
+  }
+};

package/dist/stories/Paginator/img/arrow_blue.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 1.75L6 6.25L10.5 1.75" stroke="#1890FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/stories/Paginator/img/arrow_next.svg

@@ -0,0 +1,3 @@
+<svg width="19" transform="rotate(-180)" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.75 13.5L7.25 9L11.75 4.5" stroke="#0B110B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/stories/Paginator/img/arrow_prev.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.75 13.5L7.25 9L11.75 4.5" stroke="#0B110B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>