@shoplflow/base 0.26.4 → 0.26.6

package/dist/index.cjs

@@ -3436,6 +3436,122 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;
+var PaginationWrapper = styled6__default.default.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+`;
+var StyledPagination = styled6__default.default.nav`
+  display: flex;
+  align-items: center;
+`;
+var PageItem = styled6__default.default.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: ${exports.borderRadiusTokens.borderRadius08};
+  background-color: ${({ isActive }) => isActive ? exports.colorTokens.neutral300 : exports.colorTokens.neutral0};
+  font-size: 13px;
+  font-weight: ${({ isActive }) => isActive && "600"};
+  line-height: 2;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ isActive }) => isActive ? exports.colorTokens.neutral300 : exports.colorTokens.neutral100};
+  }
+`;
+var Ellipsis = styled6__default.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+`;
+var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
+  const { selectedItem, handleToggleSelect } = utils.useSelect("SINGLE", data, {
+    key: "value"
+  });
+  const handleClickMenu = (value) => {
+    handleToggleSelect(value);
+    setPageSize(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    exports.Dropdown,
+    {
+      option: "CLICK",
+      width: "66px",
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Dropdown.Button,
+        {
+          placeholder: String(pageSize),
+          sizeVar: "S",
+          value: selectedItem && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral400", children: selectedItem.label })
+        }
+      ),
+      popper: /* @__PURE__ */ jsxRuntime.jsx(exports.Dropdown.Content, { type: "FILL", children: data.map((item) => {
+        const isSelected = item.value === pageSize;
+        return /* @__PURE__ */ jsxRuntime.jsx(exports.Menu, { isSelected, onClick: () => handleClickMenu(item.value), children: item.label }, item.value);
+      }) })
+    }
+  );
+};
+var PaginationSizeSelector_default = PaginationSizeSelector;
+var Pagination = (_a) => {
+  var _b = _a, {
+    currentPage,
+    pageCount = 5,
+    itemsTotalCount,
+    pageSize,
+    previousPage,
+    nextPage,
+    gotoPage,
+    leftSource,
+    rightSource
+  } = _b, rest = __objRest(_b, [
+    "currentPage",
+    "pageCount",
+    "itemsTotalCount",
+    "pageSize",
+    "previousPage",
+    "nextPage",
+    "gotoPage",
+    "leftSource",
+    "rightSource"
+  ]);
+  const pageTotalCount = Math.ceil(itemsTotalCount / Number(pageSize));
+  const showLeftEllipsis = currentPage > pageCount - 1;
+  const showRightEllipsis = currentPage < pageTotalCount && Math.ceil((currentPage + 1) / pageCount) < Math.ceil(pageTotalCount / pageCount);
+  const canPreviousPage = currentPage > 0;
+  const canNextPage = currentPage < pageTotalCount - 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationWrapper, __spreadProps(__spreadValues({}, rest), { children: [
+    leftSource ? leftSource : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(StyledPagination, { "data-shoplflow": "Pagination", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      showLeftEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { children: "..." }) }),
+      [...Array(pageTotalCount)].splice(0, pageCount).map(
+        (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ jsxRuntime.jsx(
+          PageItem,
+          {
+            isActive: currentPage === idx + Math.floor(currentPage / pageCount) * pageCount,
+            onClick: () => gotoPage(idx + Math.floor(currentPage / pageCount) * pageCount),
+            children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount
+          },
+          idx
+        )
+      ),
+      showRightEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { children: "..." }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.EndPageIcon, color: "neutral400", sizeVar: "S" }) })
+    ] }),
+    rightSource ? rightSource : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+  ] }));
+};
+Pagination.SizeSelector = PaginationSizeSelector_default;
+exports.Pagination = Pagination;
 var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;