@sledge-app/react-instant-search 0.0.125 → 0.0.127

package/dist/sledge-react-instant-search.js

@@ -3320,6 +3320,7 @@ const SearchResultWidget = (props) => {
   const [keyword, setKeyword] = React__default.useState(searchParams == null ? void 0 : searchParams.get(queryKeyword));
   const [clickedTabIndexId, setClickedTabIndexId] = React__default.useState(null);
   const [clickedTabIndexName, setClickedTabIndexName] = React__default.useState();
+  const [clickedTabIndexType, setClickedTabIndexType] = React__default.useState();
   const [resultComponent, setResultComponent] = React__default.useState(/* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}));
   const [isLoadingSetting, setIsLoadingSetting] = React__default.useState(!propsData);
   const [allowedSorts, setAllowedSorts] = React__default.useState(((_c = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c.allowed_sorts) || []);
@@ -3336,9 +3337,11 @@ const SearchResultWidget = (props) => {
   const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
   const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
-  const handleChangeTabIndex = (id, name, e) => {
+  const handleChangeTabIndex = (params2) => {
+    const { id, name, type } = params2;
     setClickedTabIndexId(id);
     setClickedTabIndexName(name);
+    setClickedTabIndexType(type);
     setResultComponent(id.includes(indexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
   };
   const handleInitStates = async (data, type) => {
@@ -3459,6 +3462,7 @@ const SearchResultWidget = (props) => {
     if (Object.keys(getFirstIndex).length) {
       setClickedTabIndexId(getFirstIndex.index);
       setClickedTabIndexName(getFirstIndex.name);
+      setClickedTabIndexType(getFirstIndex.type);
     }
     await handleInitStates(response, "default");
     if (layoutType === "default")
@@ -3741,12 +3745,24 @@ const SearchResultWidget = (props) => {
   ] });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", ref: searchResultContainerRef, children: [
     isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? "sledge-instant-search__result-tab" : "sledge-instant-search__result-tab-no-index"}`, children: layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__result-tab-list", children: allowedTabs.map((item) => {
-      const { name, index, total } = item;
+      const { name, index, type, total } = item;
       let isActive = clickedTabIndexId === index;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { onClick: (e) => handleChangeTabIndex(index, name), className: `${isActive ? "sledge-instant-search__result-tab-list-item-active" : ""}`, children: [
-        name,
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-tab-total", children: total || 0 })
-      ] }, index);
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "li",
+        {
+          onClick: (e) => handleChangeTabIndex({
+            id: index,
+            name,
+            type
+          }),
+          className: `${isActive ? "sledge-instant-search__result-tab-list-item-active" : ""}`,
+          children: [
+            name,
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-tab-total", children: total || 0 })
+          ]
+        },
+        index
+      );
     }) }) : null }),
     isFirstLoading && (layoutType == null ? void 0 : layoutType.length) && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       tabSkeleton,
@@ -3763,6 +3779,7 @@ const SearchResultWidget = (props) => {
       keyword,
       clickedTabIndexId,
       clickedTabIndexName,
+      clickedTabIndexType,
       isLoadingSetting,
       allowedSorts,
       allowedFilters,
@@ -4479,11 +4496,11 @@ const ResultProduct = (props) => {
   ] });
 };
 const ResultCategory = (props) => {
-  var _a, _b, _c, _d;
   const {
     keyword,
     clickedTabIndexId,
     clickedTabIndexName,
+    clickedTabIndexType,
     isJsVersion,
     collectionCardsComponent,
     pageCardsComponent,
@@ -4579,7 +4596,7 @@ const ResultCategory = (props) => {
     }
   ) });
   const summaryTextSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "lighten", rounded: "md" }) });
-  const skeletonLoadingComponent = ((_a = String(clickedTabIndexId)) == null ? void 0 : _a.includes("collection")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.CollectionGrid, { count: 6 }) : ((_b = String(clickedTabIndexId)) == null ? void 0 : _b.includes("page")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.PageGrid, { count: 6 }) : ((_c = String(clickedTabIndexId)) == null ? void 0 : _c.includes("blog")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.BlogGrid, { count: 12 }) : ((_d = String(clickedTabIndexId)) == null ? void 0 : _d.includes("article")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ArticleGrid, { count: 12 }) : null;
+  const skeletonLoadingComponent = clickedTabIndexType === "collection" ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.CollectionGrid, { count: 6 }) : clickedTabIndexType === "page" ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.PageGrid, { count: 6 }) : clickedTabIndexType === "blog" ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.BlogGrid, { count: 12 }) : clickedTabIndexType === "article" ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ArticleGrid, { count: 12 }) : null;
   const ProvideElementFirstLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-category-wrapper", children: [
     searchKeywordComponent,
     summaryTextSkeleton,
@@ -4590,10 +4607,7 @@ const ResultCategory = (props) => {
     summaryTextSkeleton,
     skeletonLoadingComponent
   ] });
-  const ProvideElement = (elementProps) => {
-    var _a2, _b2, _c2, _d2;
-    return ((_a2 = String(clickedTabIndexId)) == null ? void 0 : _a2.includes("collection")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionGrid, { cards: collectionCardsComponent, onAfterRenderCollection, ...elementProps }) : ((_b2 = String(clickedTabIndexId)) == null ? void 0 : _b2.includes("page")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageGrid, { cards: pageCardsComponent, onAfterRenderPage, ...elementProps }) : ((_c2 = String(clickedTabIndexId)) == null ? void 0 : _c2.includes("blog")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlogGrid, { cards: blogCardsComponent, onAfterRenderBlog, ...elementProps }) : ((_d2 = String(clickedTabIndexId)) == null ? void 0 : _d2.includes("article")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArticleGrid, { cards: articleCardsComponent, onAfterRenderArticle, ...elementProps }) : null;
-  };
+  const ProvideElement = (elementProps) => clickedTabIndexType === "collection" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionGrid, { cards: collectionCardsComponent, onAfterRenderCollection, ...elementProps }) : clickedTabIndexType === "page" ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageGrid, { cards: pageCardsComponent, onAfterRenderPage, ...elementProps }) : clickedTabIndexType === "blog" ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlogGrid, { cards: blogCardsComponent, onAfterRenderBlog, ...elementProps }) : clickedTabIndexType === "article" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArticleGrid, { cards: articleCardsComponent, onAfterRenderArticle, ...elementProps }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementFirstLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-category-wrapper", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     searchKeywordComponent,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: summaryText }),