@searchstax-inc/searchstudio-ux-react 0.1.0 → 0.2.0

package/README.md

@@ -325,7 +325,49 @@ example of pagination widget initialization with minimum options
 
 example of pagination widget initialization with various options
 ```
+function paginationTemplate(
+    paginationData: IPaginationData | null,
+    nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void,
+    previousPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+  ) {
+    return (
+      <>
+        {paginationData && paginationData?.totalResults !== 0 && (
+          <div className="searchstax-pagination-container">
+            <div className="searchstax-pagination-content">
+              <a
+                className="searchstax-pagination-previous"
+                style={paginationData?.isFirstPage ? { pointerEvents: "none" } : {}}
+                onClick={(e) => {
+                  previousPage(e);
+                }}
+                id="searchstax-pagination-previous"
+              >
+                {" "}
+                &lt; Previous{" "}
+              </a>
+              <div className="searchstax-pagination-details">
+                {" "}
+                {paginationData?.startResultIndex} - {paginationData?.endResultIndex} of {paginationData?.totalResults}
+              </div>
+              <a
+                className="searchstax-pagination-next"
+                style={paginationData?.isLastPage ? { pointerEvents: "none" } : {}}
+                onClick={(e) => {
+                  nextPage(e);
+                }}
+                id="searchstax-pagination-next"
+              >
+                Next &gt;
+              </a>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
 
+  <SearchstaxPaginationWidget paginationTemplate={paginationTemplate}></SearchstaxPaginationWidget>
 ```
 
 ### Facets Widget ###
@@ -345,13 +387,54 @@ example of facets widget initialization with template overrides
 
 example of search feedback widget initialization with minimum options
 ```
-
+<SearchstaxOverviewWidget></SearchstaxOverviewWidget>
 ```
 
 
 example of search feedback widget initialization  with template overrides
 ```
-
+function searchOverviewTemplate(
+    searchFeedbackData: null | ISearchstaxSearchFeedbackData,
+    onOriginalQueryClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
+  ) {
+    return (
+      <>
+        {searchFeedbackData && searchFeedbackData?.searchExecuted && searchFeedbackData?.totalResults && (
+          <>
+            Showing{" "}
+            <b>
+              {searchFeedbackData.startResultIndex} - {searchFeedbackData.endResultIndex}
+            </b>{" "}
+            of
+            <b> {searchFeedbackData.totalResults}</b> results
+            {searchFeedbackData.searchTerm && (
+              <span>
+                &nbsp;for "<b>{searchFeedbackData.searchTerm}</b>"{" "}
+              </span>
+            )}
+            <div className="searchstax-feedback-container-suggested">
+              {searchFeedbackData.autoCorrectedQuery && (
+                <div>
+                  {" "}
+                  Search instead for{" "}
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      onOriginalQueryClick(e);
+                    }}
+                    className="searchstax-feedback-original-query"
+                  >
+                    {searchFeedbackData.originalQuery}
+                  </a>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </>
+    );
+  }
+  <SearchstaxOverviewWidget searchOverviewTemplate={searchOverviewTemplate}></SearchstaxOverviewWidget>
 ```
 
 ## RelatedSearches widget
@@ -387,13 +470,42 @@ example of search feedback widget initialization  with template overrides
 
 example of sorting widget initialization with minimum options
 ```
-
+<SearchstaxSortingWidget></SearchstaxSortingWidget>
 ```
 
 
 example of sorting widget initialization with template override
 ```
-
+ function searchSortingTemplate(
+    sortingData: null | ISearchstaxSearchSortingData,
+    orderChange: (value: string) => void,
+    selectedSorting: string
+  ) {
+    return (
+      <>
+        {sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && (
+          <div className="searchstax-sorting-container">
+            <label className="searchstax-sorting-label" htmlFor="sort-by">
+              Sort By
+            </label>
+            <select
+              id="searchstax-search-order-select"
+              className="searchstax-search-order-select"
+              value={selectedSorting}
+              onChange={(e) => {
+                orderChange(e.target.value);
+              }}
+            >
+              <option value=""> Relevance </option>
+              <option value="date desc"> Newest Content </option>
+              <option value="date asc"> Oldest Content </option>
+            </select>
+          </div>
+        )}
+      </>
+    );
+  }
+  <SearchstaxSortingWidget searchSortingTemplate={searchSortingTemplate}></SearchstaxSortingWidget>
 ```
 
 

package/dist/@searchstax-inc/components/SearchstaxOverviewWidget.d.ts

@@ -0,0 +1,5 @@
+import type { ISearchstaxSearchFeedbackData } from "@searchstax-inc/searchstudio-ux-js";
+declare function SearchstaxOverviewWidget(props: {
+    searchOverviewTemplate?: (searchFeedbackData: null | ISearchstaxSearchFeedbackData, onOriginalQueryClick: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export default SearchstaxOverviewWidget;

package/dist/@searchstax-inc/components/SearchstaxPaginationWidget.d.ts

@@ -0,0 +1,5 @@
+import type { IPaginationData } from "@searchstax-inc/searchstudio-ux-js";
+declare function SearchstaxPaginationWidget(props: {
+    paginationTemplate?: (paginationData: IPaginationData | null, nextPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void, previousPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export default SearchstaxPaginationWidget;

package/dist/@searchstax-inc/components/SearchstaxSortingWidget.d.ts

@@ -0,0 +1,5 @@
+import type { ISearchstaxSearchSortingData } from "@searchstax-inc/searchstudio-ux-js";
+declare function SearchstaxSortingWidget(props: {
+    searchSortingTemplate?: (sortingData: null | ISearchstaxSearchSortingData, orderChange: (value: string) => void, selectedSorting: string) => React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export default SearchstaxSortingWidget;

package/dist/@searchstax-inc/main.d.ts

@@ -1 +1,7 @@
-export * from '../main'
+import SearchstaxInputWidget from "./components/SearchstaxInputWidget";
+import SearchstaxWrapper from "./components/SearchstaxWrapper";
+import SearchstaxResultWidget from "./components/SearchstaxResultWidget";
+import SearchstaxPaginationWidget from "./components/SearchstaxPaginationWidget";
+import SearchstaxSortingWidget from "./components/SearchstaxSortingWidget";
+import SearchstaxOverviewWidget from "./components/SearchstaxOverviewWidget";
+export { SearchstaxWrapper, SearchstaxResultWidget, SearchstaxInputWidget, SearchstaxPaginationWidget, SearchstaxSortingWidget, SearchstaxOverviewWidget };