@usereactify/search 4.3.1 → 5.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +54 -0
- package/dist/package.json +8 -10
- package/dist/src/components/context/ReactifySearchBase.d.ts +42 -0
- package/dist/src/components/context/ReactifySearchBase.js +140 -0
- package/dist/src/components/context/index.d.ts +1 -0
- package/dist/src/components/context/index.js +13 -0
- package/dist/src/components/example/ExampleFilterList.d.ts +4 -0
- package/dist/src/components/example/ExampleFilterList.js +19 -0
- package/dist/src/components/example/ExampleFilterRange.d.ts +4 -0
- package/dist/src/components/example/ExampleFilterRange.js +21 -0
- package/dist/src/components/example/ExampleFilterSlider.d.ts +4 -0
- package/dist/src/components/example/ExampleFilterSlider.js +20 -0
- package/dist/src/components/example/ExampleFilterStack.d.ts +4 -0
- package/dist/src/components/example/ExampleFilterStack.js +12 -0
- package/dist/src/components/example/ExampleResultCardCallout.d.ts +4 -0
- package/dist/src/components/example/ExampleResultCardCallout.js +21 -0
- package/dist/src/components/example/ExampleResultCardProduct.d.ts +4 -0
- package/dist/src/components/example/ExampleResultCardProduct.js +18 -0
- package/dist/src/components/example/ExampleResultPaginationLoadMore.d.ts +4 -0
- package/dist/src/components/example/ExampleResultPaginationLoadMore.js +11 -0
- package/dist/src/components/example/ExampleResultPaginationNextPrev.d.ts +4 -0
- package/dist/src/components/example/ExampleResultPaginationNextPrev.js +13 -0
- package/dist/src/components/example/ExampleResultPaginationNumbered.d.ts +4 -0
- package/dist/src/components/example/ExampleResultPaginationNumbered.js +26 -0
- package/dist/src/components/example/ExampleSortby.d.ts +4 -0
- package/dist/src/components/example/ExampleSortby.js +12 -0
- package/dist/src/components/example/index.d.ts +10 -0
- package/dist/src/components/example/index.js +22 -0
- package/dist/src/components/filter/Filter.d.ts +20 -0
- package/dist/src/components/filter/Filter.js +89 -0
- package/dist/src/components/filter/FilterStack.d.ts +7 -0
- package/dist/src/components/filter/FilterStack.js +16 -0
- package/dist/src/{filter → components/filter}/index.d.ts +0 -1
- package/dist/src/{filter → components/filter}/index.js +0 -1
- package/dist/src/components/index.d.ts +8 -0
- package/dist/src/components/index.js +20 -0
- package/dist/src/components/result/ResultCardCallout.d.ts +12 -0
- package/dist/src/{result → components/result}/ResultCardCallout.js +15 -22
- package/dist/src/components/result/ResultCardProduct.d.ts +13 -0
- package/dist/src/{result/ResultCard.js → components/result/ResultCardProduct.js} +19 -22
- package/dist/src/components/result/ResultPaginationLoadMore.d.ts +7 -0
- package/dist/src/components/result/ResultPaginationLoadMore.js +16 -0
- package/dist/src/components/result/ResultPaginationNextPrev.d.ts +7 -0
- package/dist/src/components/result/ResultPaginationNextPrev.js +16 -0
- package/dist/src/components/result/ResultPaginationNumbered.d.ts +7 -0
- package/dist/src/components/result/ResultPaginationNumbered.js +19 -0
- package/dist/src/components/result/ResultStack.d.ts +40 -0
- package/dist/src/components/result/ResultStack.js +107 -0
- package/dist/src/components/result/ResultStateProvider.d.ts +6 -0
- package/dist/src/{result → components/result}/ResultStateProvider.js +0 -0
- package/dist/src/components/result/index.d.ts +7 -0
- package/dist/src/{result → components/result}/index.js +5 -4
- package/dist/src/components/search/SearchInput.d.ts +8 -0
- package/dist/src/{search → components/search}/SearchInput.js +2 -2
- package/dist/src/{search → components/search}/index.d.ts +0 -0
- package/dist/src/{search → components/search}/index.js +0 -0
- package/dist/src/{sensor → components/sensor}/SensorCollection.d.ts +0 -0
- package/dist/src/{sensor → components/sensor}/SensorCollection.js +8 -5
- package/dist/src/{sensor → components/sensor}/SensorInventoryAvailable.d.ts +0 -0
- package/dist/src/{sensor → components/sensor}/SensorInventoryAvailable.js +1 -1
- package/dist/src/{sensor → components/sensor}/SensorPublished.d.ts +0 -0
- package/dist/src/{sensor → components/sensor}/SensorPublished.js +0 -0
- package/dist/src/{sensor → components/sensor}/SensorSearch.d.ts +0 -0
- package/dist/src/{sensor → components/sensor}/SensorSearch.js +3 -3
- package/dist/src/{sensor → components/sensor}/SensorSort.d.ts +0 -0
- package/dist/src/{sensor → components/sensor}/SensorSort.js +4 -5
- package/dist/src/{sensor → components/sensor}/SensorSortScore.d.ts +0 -0
- package/dist/src/{sensor → components/sensor}/SensorSortScore.js +0 -0
- package/dist/src/components/sensor/SensorStack.d.ts +3 -0
- package/dist/src/{sensor → components/sensor}/SensorStack.js +3 -3
- package/dist/src/{sensor → components/sensor}/index.d.ts +0 -0
- package/dist/src/{sensor → components/sensor}/index.js +0 -0
- package/dist/src/components/sortby/Sortby.d.ts +7 -0
- package/dist/src/components/sortby/Sortby.js +16 -0
- package/dist/src/components/sortby/index.d.ts +1 -0
- package/dist/src/components/sortby/index.js +13 -0
- package/dist/src/{utility → components/utility}/UtilityAuthenticatedReactiveBase.d.ts +0 -0
- package/dist/src/{utility → components/utility}/UtilityAuthenticatedReactiveBase.js +2 -2
- package/dist/src/components/utility/index.d.ts +1 -0
- package/dist/src/components/utility/index.js +13 -0
- package/dist/src/hooks/index.d.ts +5 -5
- package/dist/src/hooks/index.js +5 -5
- package/dist/src/hooks/reactivesearch/index.d.ts +4 -1
- package/dist/src/hooks/reactivesearch/index.js +4 -1
- package/dist/src/hooks/reactivesearch/useReactiveBaseProps.d.ts +1 -1
- package/dist/src/hooks/reactivesearch/useReactiveBaseProps.js +7 -7
- package/dist/src/hooks/reactivesearch/useReactiveDataSearchProps.d.ts +5 -7
- package/dist/src/hooks/reactivesearch/useReactiveDataSearchProps.js +29 -30
- package/dist/src/hooks/reactivesearch/useReactiveFilterListProps.d.ts +9 -4
- package/dist/src/hooks/reactivesearch/useReactiveFilterListProps.js +9 -94
- package/dist/src/hooks/reactivesearch/useReactiveFilterRangeProps.d.ts +70 -0
- package/dist/src/hooks/reactivesearch/useReactiveFilterRangeProps.js +21 -0
- package/dist/src/hooks/reactivesearch/useReactiveFilterSharedProps.d.ts +67 -0
- package/dist/src/hooks/reactivesearch/useReactiveFilterSharedProps.js +105 -0
- package/dist/src/hooks/reactivesearch/useReactiveFilterSliderProps.d.ts +68 -0
- package/dist/src/hooks/reactivesearch/useReactiveFilterSliderProps.js +21 -0
- package/dist/src/hooks/reactivesearch/useReactiveReactProp.js +8 -8
- package/dist/src/hooks/reactivesearch/{useReactiveResultListProps.d.ts → useReactiveResultStackProps.d.ts} +2 -4
- package/dist/src/hooks/reactivesearch/{useReactiveResultListProps.js → useReactiveResultStackProps.js} +7 -8
- package/dist/src/hooks/useAnalytics.js +4 -4
- package/dist/src/hooks/useConfig.d.ts +4 -1
- package/dist/src/hooks/useConfig.js +77 -2
- package/dist/src/hooks/useCuration.d.ts +2 -1
- package/dist/src/hooks/useCuration.js +48 -2
- package/dist/src/hooks/useFilterListProps.d.ts +4 -14
- package/dist/src/hooks/useFilterStack.d.ts +2 -1
- package/dist/src/hooks/useFilterStack.js +42 -2
- package/dist/src/hooks/useFilters.d.ts +4 -1
- package/dist/src/hooks/useFilters.js +10 -5
- package/dist/src/hooks/usePagination.d.ts +14 -0
- package/dist/src/hooks/{usePages.js → usePagination.js} +30 -30
- package/dist/src/hooks/usePaginationLoadMore.d.ts +14 -0
- package/dist/src/hooks/usePaginationLoadMore.js +35 -0
- package/dist/src/hooks/useProductPrice.d.ts +3 -5
- package/dist/src/hooks/useProductPrice.js +42 -40
- package/dist/src/hooks/useReactifySearchContext.d.ts +78 -0
- package/dist/src/hooks/useReactifySearchContext.js +10 -0
- package/dist/src/hooks/useSearch.d.ts +4 -4
- package/dist/src/hooks/useSearch.js +28 -8
- package/dist/src/hooks/useSortby.d.ts +6 -0
- package/dist/src/hooks/useSortby.js +41 -0
- package/dist/src/index.d.ts +2 -8
- package/dist/src/index.js +2 -8
- package/dist/src/types/config.d.ts +1 -0
- package/dist/src/types/index.d.ts +3 -0
- package/dist/src/types/index.js +15 -0
- package/package.json +8 -10
- package/dist/src/filter/Filter.d.ts +0 -12
- package/dist/src/filter/Filter.js +0 -71
- package/dist/src/filter/FilterList.d.ts +0 -4
- package/dist/src/filter/FilterList.js +0 -15
- package/dist/src/filter/FilterStack.d.ts +0 -11
- package/dist/src/filter/FilterStack.js +0 -25
- package/dist/src/hooks/useCollection.d.ts +0 -1
- package/dist/src/hooks/useCollection.js +0 -6
- package/dist/src/hooks/useLiveConfig.d.ts +0 -4
- package/dist/src/hooks/useLiveConfig.js +0 -74
- package/dist/src/hooks/usePages.d.ts +0 -10
- package/dist/src/hooks/useSort.d.ts +0 -5
- package/dist/src/hooks/useSort.js +0 -24
- package/dist/src/provider.d.ts +0 -78
- package/dist/src/provider.js +0 -287
- package/dist/src/result/ResultCard.d.ts +0 -14
- package/dist/src/result/ResultCardCallout.d.ts +0 -13
- package/dist/src/result/ResultList.d.ts +0 -34
- package/dist/src/result/ResultList.js +0 -93
- package/dist/src/result/ResultLoadMoreButton.d.ts +0 -10
- package/dist/src/result/ResultLoadMoreButton.js +0 -61
- package/dist/src/result/ResultPagination.d.ts +0 -10
- package/dist/src/result/ResultPagination.js +0 -60
- package/dist/src/result/ResultPaginationNextPrev.d.ts +0 -8
- package/dist/src/result/ResultPaginationNextPrev.js +0 -30
- package/dist/src/result/ResultStateProvider.d.ts +0 -7
- package/dist/src/result/index.d.ts +0 -6
- package/dist/src/search/SearchInput.d.ts +0 -9
- package/dist/src/sensor/SensorStack.d.ts +0 -2
|
@@ -1,6 +1,46 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.useFilterStack = void 0;
|
|
4
|
-
const
|
|
5
|
-
const
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const hooks_1 = require("../hooks");
|
|
9
|
+
const useFilterStack = () => {
|
|
10
|
+
const { options, config } = (0, hooks_1.useReactifySearchContext)();
|
|
11
|
+
return react_1.default.useMemo(() => {
|
|
12
|
+
if (options.mode === "instant-search") {
|
|
13
|
+
return undefined;
|
|
14
|
+
}
|
|
15
|
+
// select filters by type
|
|
16
|
+
const matchingFilterStacks = config.filters.filter((filter) => filter.type === options.mode);
|
|
17
|
+
// select filter stack by handle if provided
|
|
18
|
+
if (options.filterStackHandle) {
|
|
19
|
+
const matchingFilterStack = matchingFilterStacks.find((filterStack) => options.filterStackHandle === filterStack.handle);
|
|
20
|
+
if (matchingFilterStack) {
|
|
21
|
+
return matchingFilterStack;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
// select filter stack by collection if provided
|
|
25
|
+
if (options.mode === "collection" && options.collection.handle) {
|
|
26
|
+
const matchingFilterStack = matchingFilterStacks.find((filterStack) => { var _a; return (_a = filterStack.collections) === null || _a === void 0 ? void 0 : _a.includes(options.collection.handle); });
|
|
27
|
+
if (matchingFilterStack) {
|
|
28
|
+
return matchingFilterStack;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
// select filter with "default" handle
|
|
32
|
+
let matchingFilterStack = matchingFilterStacks.find((filterStack) => filterStack.handle === "default");
|
|
33
|
+
if (matchingFilterStack) {
|
|
34
|
+
return matchingFilterStack;
|
|
35
|
+
}
|
|
36
|
+
// select any filter with "default" handle
|
|
37
|
+
matchingFilterStack = config.filters.find((filterStack) => filterStack.handle === "default");
|
|
38
|
+
if (matchingFilterStack) {
|
|
39
|
+
return matchingFilterStack;
|
|
40
|
+
}
|
|
41
|
+
// select any available filter as a last resort
|
|
42
|
+
matchingFilterStack = config.filters[0];
|
|
43
|
+
return matchingFilterStack;
|
|
44
|
+
}, [config, options.mode === "collection" ? options.collection : undefined]);
|
|
45
|
+
};
|
|
6
46
|
exports.useFilterStack = useFilterStack;
|
|
@@ -5,13 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.useFilters = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const
|
|
8
|
+
const hooks_1 = require("../hooks");
|
|
9
9
|
const useFilters = () => {
|
|
10
|
-
const filterStack = (0,
|
|
10
|
+
const filterStack = (0, hooks_1.useFilterStack)();
|
|
11
11
|
return react_1.default.useMemo(() => {
|
|
12
|
-
if (!filterStack)
|
|
13
|
-
return
|
|
14
|
-
|
|
12
|
+
if (!filterStack) {
|
|
13
|
+
return {
|
|
14
|
+
filters: [],
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
filters: filterStack.options.sort((a, b) => a.position > b.position ? 1 : -1),
|
|
19
|
+
};
|
|
15
20
|
}, [filterStack]);
|
|
16
21
|
};
|
|
17
22
|
exports.useFilters = useFilters;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ReactivesearchPaginationProps } from "../types/reactivesearch";
|
|
3
|
+
export declare const usePagination: (options: ReactivesearchPaginationProps) => {
|
|
4
|
+
currentPage: number;
|
|
5
|
+
totalPages: number;
|
|
6
|
+
pagesToShow: Array<number>;
|
|
7
|
+
hasNextPage: boolean;
|
|
8
|
+
hasPreviousPage: boolean;
|
|
9
|
+
actualCurrentPage: number;
|
|
10
|
+
buildPagePath: (page: number) => string;
|
|
11
|
+
handleNextPage: (event?: React.SyntheticEvent<Element, Event> | undefined) => void;
|
|
12
|
+
handlePreviousPage: (event?: React.SyntheticEvent<Element, Event> | undefined) => void;
|
|
13
|
+
handlePageChange: (pageNumber: number, event?: React.SyntheticEvent<Element, Event> | undefined) => void;
|
|
14
|
+
};
|
|
@@ -3,11 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.
|
|
6
|
+
exports.usePagination = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const hooks_1 = require("../hooks");
|
|
9
|
-
const
|
|
10
|
-
const { pages, setPage, totalPages, currentPage } = props;
|
|
9
|
+
const usePagination = (options) => {
|
|
11
10
|
const { track } = (0, hooks_1.useAnalytics)();
|
|
12
11
|
const buildPagePath = react_1.default.useCallback((page) => {
|
|
13
12
|
const currentPath = window.location.pathname;
|
|
@@ -15,60 +14,61 @@ const usePages = (props) => {
|
|
|
15
14
|
? currentPath.replace(/page=\d+/g, `page=${page}`)
|
|
16
15
|
: `${currentPath}${currentPath.includes("?") ? "&" : "?"}page=${page}`;
|
|
17
16
|
}, []);
|
|
18
|
-
const pagesToShow = react_1.default.useMemo(() => getPages(pages, totalPages, currentPage), [pages, totalPages, currentPage]);
|
|
19
|
-
// default currentPage is zero-indexed, actualCurrentPage is one-indexed
|
|
20
|
-
const actualCurrentPage = react_1.default.useMemo(() => currentPage + 1, [currentPage]);
|
|
21
|
-
const hasNextPage = react_1.default.useMemo(() => actualCurrentPage < totalPages, [actualCurrentPage, totalPages]);
|
|
22
|
-
const handleNextPage = react_1.default.useCallback((event) => {
|
|
23
|
-
event === null || event === void 0 ? void 0 : event.preventDefault();
|
|
24
|
-
if (!hasNextPage)
|
|
25
|
-
return;
|
|
26
|
-
setPage(currentPage + 1);
|
|
27
|
-
track({
|
|
28
|
-
eventName: "paginationChange",
|
|
29
|
-
payload: {
|
|
30
|
-
page: currentPage + 1,
|
|
31
|
-
source: window.location.pathname.includes("/search")
|
|
32
|
-
? "search"
|
|
33
|
-
: "collection",
|
|
34
|
-
},
|
|
35
|
-
});
|
|
36
|
-
}, [hasNextPage, currentPage, setPage]);
|
|
17
|
+
const pagesToShow = react_1.default.useMemo(() => getPages(options.pages, options.totalPages, options.currentPage), [options.pages, options.totalPages, options.currentPage]);
|
|
18
|
+
// default options.currentPage is zero-indexed, actualCurrentPage is one-indexed
|
|
19
|
+
const actualCurrentPage = react_1.default.useMemo(() => options.currentPage + 1, [options.currentPage]);
|
|
20
|
+
const hasNextPage = react_1.default.useMemo(() => actualCurrentPage < options.totalPages, [actualCurrentPage, options.totalPages]);
|
|
37
21
|
const hasPreviousPage = react_1.default.useMemo(() => actualCurrentPage > 1, [actualCurrentPage]);
|
|
38
|
-
const
|
|
22
|
+
const hasPage = react_1.default.useCallback((pageNumber) => {
|
|
23
|
+
return pageNumber >= 0 && pageNumber < options.totalPages;
|
|
24
|
+
}, [options.totalPages]);
|
|
25
|
+
const handlePageChange = react_1.default.useCallback((pageNumber, event) => {
|
|
39
26
|
event === null || event === void 0 ? void 0 : event.preventDefault();
|
|
40
|
-
if (!
|
|
27
|
+
if (!hasPage(pageNumber)) {
|
|
41
28
|
return;
|
|
42
|
-
|
|
29
|
+
}
|
|
30
|
+
options.setPage(pageNumber);
|
|
43
31
|
track({
|
|
44
32
|
eventName: "paginationChange",
|
|
45
33
|
payload: {
|
|
46
|
-
page:
|
|
34
|
+
page: pageNumber,
|
|
47
35
|
source: window.location.pathname.includes("/search")
|
|
48
36
|
? "search"
|
|
49
37
|
: "collection",
|
|
50
38
|
},
|
|
51
39
|
});
|
|
52
|
-
}, [
|
|
40
|
+
}, [options.setPage, track]);
|
|
41
|
+
const handleNextPage = react_1.default.useCallback((event) => {
|
|
42
|
+
handlePageChange(options.currentPage + 1, event);
|
|
43
|
+
}, [hasNextPage, options.currentPage, handlePageChange]);
|
|
44
|
+
const handlePreviousPage = react_1.default.useCallback((event) => {
|
|
45
|
+
handlePageChange(options.currentPage - 1, event);
|
|
46
|
+
}, [hasPreviousPage, options.currentPage, handlePageChange]);
|
|
53
47
|
return react_1.default.useMemo(() => ({
|
|
48
|
+
currentPage: options.currentPage,
|
|
49
|
+
totalPages: options.totalPages,
|
|
54
50
|
pagesToShow,
|
|
55
51
|
hasNextPage,
|
|
56
52
|
buildPagePath,
|
|
57
|
-
handleNextPage,
|
|
58
53
|
hasPreviousPage,
|
|
59
54
|
actualCurrentPage,
|
|
55
|
+
handleNextPage,
|
|
60
56
|
handlePreviousPage,
|
|
57
|
+
handlePageChange,
|
|
61
58
|
}), [
|
|
59
|
+
options.currentPage,
|
|
60
|
+
options.totalPages,
|
|
62
61
|
pagesToShow,
|
|
63
62
|
hasNextPage,
|
|
64
63
|
buildPagePath,
|
|
65
|
-
handleNextPage,
|
|
66
64
|
hasPreviousPage,
|
|
67
65
|
actualCurrentPage,
|
|
66
|
+
handleNextPage,
|
|
68
67
|
handlePreviousPage,
|
|
68
|
+
handlePageChange,
|
|
69
69
|
]);
|
|
70
70
|
};
|
|
71
|
-
exports.
|
|
71
|
+
exports.usePagination = usePagination;
|
|
72
72
|
// get a list of pages to display buttons for
|
|
73
73
|
// @todo this is super hacky and needs to be cleaned up
|
|
74
74
|
const getPages = (pages, totalPages, currentPage) => {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactivesearchResultProps } from "../types/reactivesearch";
|
|
2
|
+
export declare const usePaginationLoadMore: (options: ReactivesearchResultProps) => {
|
|
3
|
+
hasMore: boolean;
|
|
4
|
+
handleLoadMore: () => void;
|
|
5
|
+
resultStats: {
|
|
6
|
+
time: number;
|
|
7
|
+
hidden: number;
|
|
8
|
+
promoted: number;
|
|
9
|
+
currentPage: number;
|
|
10
|
+
numberOfPages: number;
|
|
11
|
+
numberOfResults?: number;
|
|
12
|
+
displayedResults: number;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.usePaginationLoadMore = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const hooks_1 = require("../hooks");
|
|
9
|
+
const usePaginationLoadMore = (options) => {
|
|
10
|
+
const analyticsHook = (0, hooks_1.useAnalytics)();
|
|
11
|
+
const filterStack = (0, hooks_1.useFilterStack)();
|
|
12
|
+
const hasMore = options.resultStats.displayedResults !== options.resultStats.numberOfResults;
|
|
13
|
+
const handleLoadMore = react_1.default.useCallback(() => {
|
|
14
|
+
options.loadMore();
|
|
15
|
+
analyticsHook.track({
|
|
16
|
+
eventName: "paginationChange",
|
|
17
|
+
payload: {
|
|
18
|
+
page: Math.ceil(options.resultStats.displayedResults / ((filterStack === null || filterStack === void 0 ? void 0 : filterStack.pageSize) || 20)) + 1,
|
|
19
|
+
source: window.location.pathname.includes("/search")
|
|
20
|
+
? "search"
|
|
21
|
+
: "collection",
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
}, [options.loadMore, analyticsHook.track, options.resultStats, filterStack]);
|
|
25
|
+
return react_1.default.useMemo(() => ({
|
|
26
|
+
hasMore,
|
|
27
|
+
handleLoadMore,
|
|
28
|
+
resultStats: options.resultStats,
|
|
29
|
+
}), [
|
|
30
|
+
hasMore,
|
|
31
|
+
handleLoadMore,
|
|
32
|
+
options.resultStats,
|
|
33
|
+
]);
|
|
34
|
+
};
|
|
35
|
+
exports.usePaginationLoadMore = usePaginationLoadMore;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import currency from "currency.js";
|
|
2
2
|
import { ElasticProduct } from "../types/elastic";
|
|
3
|
-
declare
|
|
4
|
-
onSale: boolean;
|
|
3
|
+
export declare const useProductPrice: (product: ElasticProduct) => {
|
|
5
4
|
price?: currency;
|
|
5
|
+
onSale: boolean;
|
|
6
6
|
currencyCode: string;
|
|
7
|
-
formattedPrice?: string;
|
|
8
7
|
compareAtPrice?: currency;
|
|
8
|
+
formattedPrice?: string;
|
|
9
9
|
formattedCompareAtPrice?: string;
|
|
10
10
|
};
|
|
11
|
-
export declare const useProductPrice: (product: ElasticProduct) => PriceResponse;
|
|
12
|
-
export {};
|
|
@@ -6,48 +6,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.useProductPrice = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const currency_js_1 = __importDefault(require("currency.js"));
|
|
9
|
-
const useProductPrice = (product) =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
const useProductPrice = (product) => {
|
|
10
|
+
return react_1.default.useMemo(() => {
|
|
11
|
+
var _a, _b, _c, _d;
|
|
12
|
+
const variant = (_a = product.variants) === null || _a === void 0 ? void 0 : _a[0];
|
|
13
|
+
if (!variant) {
|
|
14
|
+
return {
|
|
15
|
+
onSale: false,
|
|
16
|
+
price: undefined,
|
|
17
|
+
currencyCode: "AUD",
|
|
18
|
+
compareAtPrice: undefined,
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
// @todo select the appropriate currency
|
|
22
|
+
const priceSet = (_b = variant.presentment_prices) === null || _b === void 0 ? void 0 : _b[0];
|
|
23
|
+
if (!priceSet || !priceSet.price) {
|
|
24
|
+
return {
|
|
25
|
+
onSale: false,
|
|
26
|
+
price: undefined,
|
|
27
|
+
currencyCode: "AUD",
|
|
28
|
+
compareAtPrice: undefined,
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
const currencyCode = (_c = priceSet.price.currency_code) !== null && _c !== void 0 ? _c : "AUD";
|
|
32
|
+
const price = priceSet.price.amount
|
|
33
|
+
? (0, currency_js_1.default)(priceSet.price.amount)
|
|
34
|
+
: undefined;
|
|
35
|
+
const formattedPrice = price ? formatPrice(price, currencyCode) : undefined;
|
|
36
|
+
const compareAtPrice = ((_d = priceSet.compare_at_price) === null || _d === void 0 ? void 0 : _d.amount)
|
|
37
|
+
? (0, currency_js_1.default)(priceSet.compare_at_price.amount)
|
|
38
|
+
: undefined;
|
|
39
|
+
const formattedCompareAtPrice = compareAtPrice
|
|
40
|
+
? formatPrice(compareAtPrice, currencyCode)
|
|
41
|
+
: undefined;
|
|
42
|
+
const onSale = !!compareAtPrice && !!price && compareAtPrice.intValue > price.intValue;
|
|
13
43
|
return {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
currencyCode
|
|
17
|
-
compareAtPrice
|
|
44
|
+
price,
|
|
45
|
+
onSale,
|
|
46
|
+
currencyCode,
|
|
47
|
+
compareAtPrice,
|
|
48
|
+
formattedPrice,
|
|
49
|
+
formattedCompareAtPrice,
|
|
18
50
|
};
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const priceSet = (_b = variant.presentment_prices) === null || _b === void 0 ? void 0 : _b[0];
|
|
22
|
-
if (!priceSet || !priceSet.price) {
|
|
23
|
-
return {
|
|
24
|
-
onSale: false,
|
|
25
|
-
price: undefined,
|
|
26
|
-
currencyCode: "AUD",
|
|
27
|
-
compareAtPrice: undefined,
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
const currencyCode = (_c = priceSet.price.currency_code) !== null && _c !== void 0 ? _c : "AUD";
|
|
31
|
-
const price = priceSet.price.amount
|
|
32
|
-
? (0, currency_js_1.default)(priceSet.price.amount)
|
|
33
|
-
: undefined;
|
|
34
|
-
const formattedPrice = price ? formatPrice(price, currencyCode) : undefined;
|
|
35
|
-
const compareAtPrice = ((_d = priceSet.compare_at_price) === null || _d === void 0 ? void 0 : _d.amount)
|
|
36
|
-
? (0, currency_js_1.default)(priceSet.compare_at_price.amount)
|
|
37
|
-
: undefined;
|
|
38
|
-
const formattedCompareAtPrice = compareAtPrice
|
|
39
|
-
? formatPrice(compareAtPrice, currencyCode)
|
|
40
|
-
: undefined;
|
|
41
|
-
const onSale = !!compareAtPrice && !!price && compareAtPrice.intValue > price.intValue;
|
|
42
|
-
return {
|
|
43
|
-
price,
|
|
44
|
-
onSale,
|
|
45
|
-
currencyCode,
|
|
46
|
-
compareAtPrice,
|
|
47
|
-
formattedPrice,
|
|
48
|
-
formattedCompareAtPrice,
|
|
49
|
-
};
|
|
50
|
-
}, [product]);
|
|
51
|
+
}, [product]);
|
|
52
|
+
};
|
|
51
53
|
exports.useProductPrice = useProductPrice;
|
|
52
54
|
const formatPrice = (price, currencyCode) => {
|
|
53
55
|
let priceString = new Intl.NumberFormat("en-AU", {
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Config } from "../types";
|
|
3
|
+
export declare const ReactifySearchContext: React.Context<{
|
|
4
|
+
config: Config;
|
|
5
|
+
options: {
|
|
6
|
+
mode: "search" | "collection" | "instant-search";
|
|
7
|
+
index: string;
|
|
8
|
+
shopifyPermanentDomain: string;
|
|
9
|
+
filterStackHandle?: string | undefined;
|
|
10
|
+
credentials: {
|
|
11
|
+
username: string;
|
|
12
|
+
password: string;
|
|
13
|
+
endpoint: string;
|
|
14
|
+
};
|
|
15
|
+
onRedirect?: ((type: "redirect" | "search", url: string) => void) | undefined;
|
|
16
|
+
theme: Record<string, unknown>;
|
|
17
|
+
additionalComponentHandles?: string[] | undefined;
|
|
18
|
+
} & ({
|
|
19
|
+
mode: "search";
|
|
20
|
+
} | {
|
|
21
|
+
mode: "collection";
|
|
22
|
+
collection: {
|
|
23
|
+
id: number;
|
|
24
|
+
handle: string;
|
|
25
|
+
title: string;
|
|
26
|
+
};
|
|
27
|
+
} | {
|
|
28
|
+
mode: "instant-search";
|
|
29
|
+
});
|
|
30
|
+
search: {
|
|
31
|
+
searchQuery: string;
|
|
32
|
+
setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
|
|
33
|
+
instantSearchVisible: boolean;
|
|
34
|
+
setInstantSearchVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
|
35
|
+
};
|
|
36
|
+
sortby: {
|
|
37
|
+
sortOption: string;
|
|
38
|
+
setSortOption: React.Dispatch<React.SetStateAction<string>>;
|
|
39
|
+
};
|
|
40
|
+
} | undefined>;
|
|
41
|
+
export declare const useReactifySearchContext: () => {
|
|
42
|
+
config: Config;
|
|
43
|
+
options: {
|
|
44
|
+
mode: "search" | "collection" | "instant-search";
|
|
45
|
+
index: string;
|
|
46
|
+
shopifyPermanentDomain: string;
|
|
47
|
+
filterStackHandle?: string | undefined;
|
|
48
|
+
credentials: {
|
|
49
|
+
username: string;
|
|
50
|
+
password: string;
|
|
51
|
+
endpoint: string;
|
|
52
|
+
};
|
|
53
|
+
onRedirect?: ((type: "redirect" | "search", url: string) => void) | undefined;
|
|
54
|
+
theme: Record<string, unknown>;
|
|
55
|
+
additionalComponentHandles?: string[] | undefined;
|
|
56
|
+
} & ({
|
|
57
|
+
mode: "search";
|
|
58
|
+
} | {
|
|
59
|
+
mode: "collection";
|
|
60
|
+
collection: {
|
|
61
|
+
id: number;
|
|
62
|
+
handle: string;
|
|
63
|
+
title: string;
|
|
64
|
+
};
|
|
65
|
+
} | {
|
|
66
|
+
mode: "instant-search";
|
|
67
|
+
});
|
|
68
|
+
search: {
|
|
69
|
+
searchQuery: string;
|
|
70
|
+
setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
|
|
71
|
+
instantSearchVisible: boolean;
|
|
72
|
+
setInstantSearchVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
|
73
|
+
};
|
|
74
|
+
sortby: {
|
|
75
|
+
sortOption: string;
|
|
76
|
+
setSortOption: React.Dispatch<React.SetStateAction<string>>;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useReactifySearchContext = exports.ReactifySearchContext = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
exports.ReactifySearchContext = react_1.default.createContext(undefined);
|
|
9
|
+
const useReactifySearchContext = () => react_1.default.useContext(exports.ReactifySearchContext);
|
|
10
|
+
exports.useReactifySearchContext = useReactifySearchContext;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
export declare const useSearch: () => {
|
|
2
|
-
searchQuery: string
|
|
3
|
+
searchQuery: string;
|
|
4
|
+
setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
|
|
3
5
|
submitSearch: (localSearchQuery?: string | undefined) => void;
|
|
4
|
-
instantSearch: boolean;
|
|
5
|
-
setSearchQuery: (searchQuery: string) => void;
|
|
6
6
|
showInstantSearchResults: boolean;
|
|
7
|
-
setShowInstantSearchResults:
|
|
7
|
+
setShowInstantSearchResults: React.Dispatch<React.SetStateAction<boolean>>;
|
|
8
8
|
};
|
|
@@ -1,16 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.useSearch = void 0;
|
|
4
|
-
const
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const hooks_1 = require("../hooks");
|
|
5
9
|
const useSearch = () => {
|
|
6
|
-
const {
|
|
10
|
+
const { options, config, search } = (0, hooks_1.useReactifySearchContext)();
|
|
11
|
+
const handleSubmitSearch = react_1.default.useCallback((localSearchQuery) => {
|
|
12
|
+
const actualSearchQuery = localSearchQuery !== null && localSearchQuery !== void 0 ? localSearchQuery : search.searchQuery;
|
|
13
|
+
if (!actualSearchQuery)
|
|
14
|
+
return;
|
|
15
|
+
const redirect = config.redirects.find((redirect) => redirect.query.trim().toLowerCase() ===
|
|
16
|
+
actualSearchQuery.trim().toLowerCase());
|
|
17
|
+
search.setInstantSearchVisible(false);
|
|
18
|
+
if (options.onRedirect) {
|
|
19
|
+
options.onRedirect(redirect ? "redirect" : "search", redirect ? redirect.url : `/search?q=${actualSearchQuery}`);
|
|
20
|
+
}
|
|
21
|
+
else if (redirect) {
|
|
22
|
+
window.location.href = redirect.url;
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
window.location.href = `/search?q=${actualSearchQuery}`;
|
|
26
|
+
}
|
|
27
|
+
}, [search.searchQuery]);
|
|
7
28
|
return {
|
|
8
|
-
searchQuery,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
setShowInstantSearchResults,
|
|
29
|
+
searchQuery: search.searchQuery,
|
|
30
|
+
setSearchQuery: search.setSearchQuery,
|
|
31
|
+
submitSearch: handleSubmitSearch,
|
|
32
|
+
showInstantSearchResults: !!search.instantSearchVisible && !!search.searchQuery,
|
|
33
|
+
setShowInstantSearchResults: search.setInstantSearchVisible,
|
|
14
34
|
};
|
|
15
35
|
};
|
|
16
36
|
exports.useSearch = useSearch;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.useSortby = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const hooks_1 = require("../hooks");
|
|
9
|
+
const useSortby = () => {
|
|
10
|
+
const { options, config, sortby } = (0, hooks_1.useReactifySearchContext)();
|
|
11
|
+
const { track } = (0, hooks_1.useAnalytics)();
|
|
12
|
+
const sortOptions = react_1.default.useMemo(() => {
|
|
13
|
+
return config.sort
|
|
14
|
+
.sort((a, b) => `${a.position}`.localeCompare(`${b.position}`))
|
|
15
|
+
.filter(({ visibility }) => ["all", options.mode].includes(visibility));
|
|
16
|
+
}, [options.mode, config]);
|
|
17
|
+
const sortOption = react_1.default.useMemo(() => sortOptions.find(({ handle }) => handle === sortby.sortOption) ||
|
|
18
|
+
sortOptions[0], [sortOptions, sortby.sortOption]);
|
|
19
|
+
const setSortOption = react_1.default.useCallback((sortOptionHandle, ignoreHistoryState = false) => {
|
|
20
|
+
sortby.setSortOption(sortOptionHandle);
|
|
21
|
+
if (!ignoreHistoryState) {
|
|
22
|
+
const url = new URL(window.location.href);
|
|
23
|
+
url.searchParams.has("sort")
|
|
24
|
+
? url.searchParams.set("sort", sortOptionHandle)
|
|
25
|
+
: url.searchParams.append("sort", sortOptionHandle);
|
|
26
|
+
window.history.pushState({}, "", url.toString());
|
|
27
|
+
}
|
|
28
|
+
track({
|
|
29
|
+
eventName: "sortChange",
|
|
30
|
+
payload: {
|
|
31
|
+
type: sortOptionHandle,
|
|
32
|
+
},
|
|
33
|
+
});
|
|
34
|
+
}, [window.location.href]);
|
|
35
|
+
return {
|
|
36
|
+
sortOptions,
|
|
37
|
+
sortOption,
|
|
38
|
+
setSortOption,
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
exports.useSortby = useSortby;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
|
+
export * from "./components";
|
|
1
2
|
export * from "./hooks";
|
|
2
|
-
export * from "./
|
|
3
|
-
export * from "./sensor";
|
|
4
|
-
export * from "./result";
|
|
5
|
-
export * from "./search";
|
|
6
|
-
export * from "./provider";
|
|
7
|
-
export * from "./types/config";
|
|
8
|
-
export * from "./types/elastic";
|
|
9
|
-
export * from "./types/reactivesearch";
|
|
3
|
+
export * from "./types";
|
package/dist/src/index.js
CHANGED
|
@@ -10,15 +10,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
10
10
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
__exportStar(require("./components"), exports);
|
|
13
14
|
__exportStar(require("./hooks"), exports);
|
|
14
|
-
__exportStar(require("./
|
|
15
|
-
__exportStar(require("./sensor"), exports);
|
|
16
|
-
__exportStar(require("./result"), exports);
|
|
17
|
-
__exportStar(require("./search"), exports);
|
|
18
|
-
__exportStar(require("./provider"), exports);
|
|
19
|
-
__exportStar(require("./types/config"), exports);
|
|
20
|
-
__exportStar(require("./types/elastic"), exports);
|
|
21
|
-
__exportStar(require("./types/reactivesearch"), exports);
|
|
15
|
+
__exportStar(require("./types"), exports);
|
|
22
16
|
const package_json_1 = require("../package.json");
|
|
23
17
|
const debug = require("debug")("reactify-search:");
|
|
24
18
|
debug(`${package_json_1.name} v${package_json_1.version}`);
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
__exportStar(require("./config"), exports);
|
|
14
|
+
__exportStar(require("./elastic"), exports);
|
|
15
|
+
__exportStar(require("./reactivesearch"), exports);
|