@usereactify/search 5.4.0 → 5.5.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 +7 -0
- package/dist/package.json +1 -1
- package/dist/src/components/Example/ExampleResultCardProduct.js +1 -1
- package/dist/src/components/Example/ExampleResultCardProduct.js.map +1 -1
- package/dist/src/components/Example/ExampleResults.js +2 -1
- package/dist/src/components/Example/ExampleResults.js.map +1 -1
- package/dist/src/components/Result/ResultCardCallout.d.ts +1 -0
- package/dist/src/components/Result/ResultCardCallout.js +2 -0
- package/dist/src/components/Result/ResultCardCallout.js.map +1 -1
- package/dist/src/components/Result/ResultCardProduct.d.ts +1 -0
- package/dist/src/components/Result/ResultCardProduct.js +2 -0
- package/dist/src/components/Result/ResultCardProduct.js.map +1 -1
- package/dist/src/components/Result/Results.d.ts +4 -2
- package/dist/src/components/Result/Results.js +30 -9
- package/dist/src/components/Result/Results.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [5.5.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.4.0...release-v5.5.0) (2022-10-06)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add scrollPosition prop to Results to trigger load more ([c2dc2a4](https://bitbucket.org/usereactify/reactify-search-ui/commit/c2dc2a44c853f52691f11ffc8459e64e6ea439ed))
|
|
11
|
+
|
|
5
12
|
## [5.4.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.3.5...release-v5.4.0) (2022-10-06)
|
|
6
13
|
|
|
7
14
|
|
package/dist/package.json
CHANGED
|
@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
|
|
|
8
8
|
const ExampleResultCardProduct = (props) => {
|
|
9
9
|
return (react_1.default.createElement("div", { ref: props.itemRef, className: "rs__result-card-product" },
|
|
10
10
|
react_1.default.createElement("a", { className: "rs__result-card-product__link", onClick: props.handleClick, href: `/products/${props.product.handle}` },
|
|
11
|
-
props.product.image && (react_1.default.createElement("img", { className: "rs__result-card-product__image", src: props.product.image, width: "100%" })),
|
|
11
|
+
props.product.image && (react_1.default.createElement("img", { className: "rs__result-card-product__image", src: props.product.image, width: "100%", height: "190px" })),
|
|
12
12
|
react_1.default.createElement("span", { className: "rs__result-card-product__title" }, props.product.title)),
|
|
13
13
|
react_1.default.createElement("span", { className: "rs__result-card-product__price" }, props.formattedPrice),
|
|
14
14
|
props.onSale && (react_1.default.createElement("span", { className: "rs__result-card-product__price-sale", style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleResultCardProduct.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResultCardProduct.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,wBAAwB,GACnC,CAAC,KAAK,EAAE,EAAE;IACR,OAAO,CACL,uCAAK,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAC,yBAAyB;QAC1D,qCACE,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,KAAK,CAAC,WAAW,EAC1B,IAAI,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;YAExC,KAAK,CAAC,OAAO,CAAC,KAAK,IAAI,CACtB,uCACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EACxB,KAAK,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"ExampleResultCardProduct.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResultCardProduct.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,wBAAwB,GACnC,CAAC,KAAK,EAAE,EAAE;IACR,OAAO,CACL,uCAAK,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAC,yBAAyB;QAC1D,qCACE,SAAS,EAAC,+BAA+B,EACzC,OAAO,EAAE,KAAK,CAAC,WAAW,EAC1B,IAAI,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE;YAExC,KAAK,CAAC,OAAO,CAAC,KAAK,IAAI,CACtB,uCACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EACxB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,OAAO,GACd,CACH;YACD,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,OAAO,CAAC,KAAK,CACf,CACL;QACJ,wCAAM,SAAS,EAAC,gCAAgC,IAC7C,KAAK,CAAC,cAAc,CAChB;QACN,KAAK,CAAC,MAAM,IAAI,CACf,wCACE,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAE;gBACL,cAAc,EAAE,cAAc;aAC/B,IAEA,KAAK,CAAC,uBAAuB,CACzB,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AApCS,QAAA,wBAAwB,4BAoCjC","sourcesContent":["import React from \"react\";\n\nimport { ResultCardProductProps } from \"../../components\";\n\nexport type ExampleResultCardProductProps = React.ComponentProps<\n NonNullable<ResultCardProductProps[\"render\"]>\n>;\n\nexport const ExampleResultCardProduct: React.FC<ExampleResultCardProductProps> =\n (props) => {\n return (\n <div ref={props.itemRef} className=\"rs__result-card-product\">\n <a\n className=\"rs__result-card-product__link\"\n onClick={props.handleClick}\n href={`/products/${props.product.handle}`}\n >\n {props.product.image && (\n <img\n className=\"rs__result-card-product__image\"\n src={props.product.image}\n width=\"100%\"\n height=\"190px\"\n />\n )}\n <span className=\"rs__result-card-product__title\">\n {props.product.title}\n </span>\n </a>\n <span className=\"rs__result-card-product__price\">\n {props.formattedPrice}\n </span>\n {props.onSale && (\n <span\n className=\"rs__result-card-product__price-sale\"\n style={{\n textDecoration: \"line-through\",\n }}\n >\n {props.formattedCompareAtPrice}\n </span>\n )}\n </div>\n );\n };\n"]}
|
|
@@ -10,13 +10,14 @@ const ExampleResultCardProduct_1 = require("./ExampleResultCardProduct");
|
|
|
10
10
|
const ExampleResultCardCallout_1 = require("./ExampleResultCardCallout");
|
|
11
11
|
const ExampleResultPaginationNumbered_1 = require("./ExampleResultPaginationNumbered");
|
|
12
12
|
const ExampleResultPaginationLoadMore_1 = require("./ExampleResultPaginationLoadMore");
|
|
13
|
+
const ExampleResultPaginationInfiniteScroll_1 = require("./ExampleResultPaginationInfiniteScroll");
|
|
13
14
|
const ExampleResultPaginationNextPrev_1 = require("./ExampleResultPaginationNextPrev");
|
|
14
15
|
const Component = () => {
|
|
15
16
|
return (react_1.default.createElement(components_1.Results, { listStyle: {
|
|
16
17
|
display: "grid",
|
|
17
18
|
gap: "10px",
|
|
18
19
|
gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
|
|
19
|
-
}, renderResultCardProduct: ExampleResultCardProduct_1.ExampleResultCardProduct, renderResultCardCallout: ExampleResultCardCallout_1.ExampleResultCardCallout, renderPaginationNumbered: ExampleResultPaginationNumbered_1.ExampleResultPaginationNumbered, renderPaginationLoadMore: ExampleResultPaginationLoadMore_1.ExampleResultPaginationLoadMore, renderPaginationNextPrev: ExampleResultPaginationNextPrev_1.ExampleResultPaginationNextPrev }));
|
|
20
|
+
}, renderResultCardProduct: ExampleResultCardProduct_1.ExampleResultCardProduct, renderResultCardCallout: ExampleResultCardCallout_1.ExampleResultCardCallout, renderPaginationNumbered: ExampleResultPaginationNumbered_1.ExampleResultPaginationNumbered, renderPaginationLoadMore: ExampleResultPaginationLoadMore_1.ExampleResultPaginationLoadMore, renderPaginationNextPrev: ExampleResultPaginationNextPrev_1.ExampleResultPaginationNextPrev, renderPaginationInfiniteScroll: ExampleResultPaginationInfiniteScroll_1.ExampleResultPaginationInfiniteScroll }));
|
|
20
21
|
};
|
|
21
22
|
exports.Component = Component;
|
|
22
23
|
//# sourceMappingURL=ExampleResults.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleResults.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResults.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA2C;AAE3C,yEAAsE;AACtE,yEAAsE;AACtE,uFAAoF;AACpF,uFAAoF;AACpF,uFAAoF;AAE7E,MAAM,SAAS,GAAa,GAAG,EAAE;IACtC,OAAO,CACL,8BAAC,oBAAO,IACN,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,MAAM;YACX,mBAAmB,EAAE,2BAA2B;SACjD,EACD,uBAAuB,EAAE,mDAAwB,EACjD,uBAAuB,EAAE,mDAAwB,EACjD,wBAAwB,EAAE,iEAA+B,EACzD,wBAAwB,EAAE,iEAA+B,EACzD,wBAAwB,EAAE,iEAA+B,
|
|
1
|
+
{"version":3,"file":"ExampleResults.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleResults.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA2C;AAE3C,yEAAsE;AACtE,yEAAsE;AACtE,uFAAoF;AACpF,uFAAoF;AACpF,mGAAgG;AAChG,uFAAoF;AAE7E,MAAM,SAAS,GAAa,GAAG,EAAE;IACtC,OAAO,CACL,8BAAC,oBAAO,IACN,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,GAAG,EAAE,MAAM;YACX,mBAAmB,EAAE,2BAA2B;SACjD,EACD,uBAAuB,EAAE,mDAAwB,EACjD,uBAAuB,EAAE,mDAAwB,EACjD,wBAAwB,EAAE,iEAA+B,EACzD,wBAAwB,EAAE,iEAA+B,EACzD,wBAAwB,EAAE,iEAA+B,EACzD,8BAA8B,EAAE,6EAAqC,GACrE,CACH,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,SAAS,aAgBpB","sourcesContent":["import React from \"react\";\n\nimport { Results } from \"../../components\";\n\nimport { ExampleResultCardProduct } from \"./ExampleResultCardProduct\";\nimport { ExampleResultCardCallout } from \"./ExampleResultCardCallout\";\nimport { ExampleResultPaginationNumbered } from \"./ExampleResultPaginationNumbered\";\nimport { ExampleResultPaginationLoadMore } from \"./ExampleResultPaginationLoadMore\";\nimport { ExampleResultPaginationInfiniteScroll } from \"./ExampleResultPaginationInfiniteScroll\";\nimport { ExampleResultPaginationNextPrev } from \"./ExampleResultPaginationNextPrev\";\n\nexport const Component: React.FC = () => {\n return (\n <Results\n listStyle={{\n display: \"grid\",\n gap: \"10px\",\n gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\",\n }}\n renderResultCardProduct={ExampleResultCardProduct}\n renderResultCardCallout={ExampleResultCardCallout}\n renderPaginationNumbered={ExampleResultPaginationNumbered}\n renderPaginationLoadMore={ExampleResultPaginationLoadMore}\n renderPaginationNextPrev={ExampleResultPaginationNextPrev}\n renderPaginationInfiniteScroll={ExampleResultPaginationInfiniteScroll}\n />\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultCardCallout.js","sourceRoot":"","sources":["../../../../src/components/Result/ResultCardCallout.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6EAAwD;AAGxD,uCAA2C;AAC3C,0BAA4D;
|
|
1
|
+
{"version":3,"file":"ResultCardCallout.js","sourceRoot":"","sources":["../../../../src/components/Result/ResultCardCallout.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6EAAwD;AAGxD,uCAA2C;AAC3C,0BAA4D;AAUrD,MAAM,iBAAiB,GAAqC,CAAC,KAAK,EAAE,EAAE;;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IACjC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAA,uCAAS,EAAC;QAChC,SAAS,EAAE,GAAG;QACd,WAAW,EAAE,IAAI;KAClB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,KAAK,CAAC;YACJ,SAAS,EAAE,gBAAgB;YAC3B,OAAO,EAAE;gBACP,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;gBACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;aAC3B;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3B,MAAM,UAAU,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC;YACJ,SAAS,EAAE,eAAe;YAC1B,OAAO,EAAE;gBACP,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;gBACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;aAC3B;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3B,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,IAAI,MAAM,EAAE;YACV,MAAA,KAAK,CAAC,MAAM,+CAAZ,KAAK,CAAW,CAAC;YACjB,UAAU,EAAE,CAAC;SACd;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,4BAAwB,CAAC;IAEjE,OAAO,8BAAC,eAAe,oBAAK,KAAK,IAAE,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,IAAI,CAAC;AAChF,CAAC,CAAC;AArCW,QAAA,iBAAiB,qBAqC5B","sourcesContent":["import React from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { ElasticCallout } from \"../../types\";\nimport { useAnalytics } from \"../../hooks\";\nimport { ResultsProps, ExampleResultCardCallout } from \"..\";\n\nexport type ResultCardCalloutProps = {\n pagePosition: number;\n document: ElasticCallout;\n callout: ElasticCallout[\"callout\"];\n render?: ResultsProps[\"renderResultCardCallout\"];\n onView?: () => void;\n};\n\nexport const ResultCardCallout: React.FC<ResultCardCalloutProps> = (props) => {\n const { track } = useAnalytics();\n const { ref, inView } = useInView({\n threshold: 0.5,\n triggerOnce: true,\n });\n\n const handleClick = React.useCallback(() => {\n track({\n eventName: \"clickPromotion\",\n payload: {\n link: props.callout.link,\n title: props.callout.title,\n },\n });\n }, [track, props.callout]);\n\n const handleView = React.useCallback(() => {\n track({\n eventName: \"viewPromotion\",\n payload: {\n link: props.callout.link,\n title: props.callout.title,\n },\n });\n }, [track, props.callout]);\n\n React.useEffect(() => {\n if (inView) {\n props.onView?.();\n handleView();\n }\n }, [inView]);\n\n const RenderComponent = props.render ?? ExampleResultCardCallout;\n\n return <RenderComponent {...props} itemRef={ref} handleClick={handleClick} />;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultCardProduct.js","sourceRoot":"","sources":["../../../../src/components/Result/ResultCardProduct.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6EAAwD;AAGxD,uCAA4D;AAC5D,iDAA0E;
|
|
1
|
+
{"version":3,"file":"ResultCardProduct.js","sourceRoot":"","sources":["../../../../src/components/Result/ResultCardProduct.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6EAAwD;AAGxD,uCAA4D;AAC5D,iDAA0E;AAUnE,MAAM,iBAAiB,GAAqC,CAAC,KAAK,EAAE,EAAE;;IAC3E,MAAM,YAAY,GAAG,IAAA,uBAAe,EAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEpD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IACjC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAA,uCAAS,EAAC;QAChC,SAAS,EAAE,GAAG;QACd,WAAW,EAAE,IAAI;KAClB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,KAAK,CAAC;YACJ,SAAS,EAAE,cAAc;YACzB,OAAO,EAAE;gBACP,cAAc,EAAE;oBACd,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;oBACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;iBAC3B;aACF;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3B,MAAM,UAAU,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC;YACJ,SAAS,EAAE,aAAa;YACxB,OAAO,EAAE;gBACP,cAAc,EAAE;oBACd,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;oBACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;iBAC3B;aACF;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3B,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,IAAI,MAAM,EAAE;YACV,MAAA,KAAK,CAAC,MAAM,+CAAZ,KAAK,CAAW,CAAC;YACjB,UAAU,EAAE,CAAC;SACd;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,qCAAwB,CAAC;IAEjE,OAAO,CACL,8BAAC,eAAe,oBACV,YAAY,IAChB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,GAAG,EACZ,WAAW,EAAE,WAAW,IACxB,CACH,CAAC;AACJ,CAAC,CAAC;AApDW,QAAA,iBAAiB,qBAoD5B","sourcesContent":["import React from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport type { ElasticProduct } from \"../../types\";\nimport { useProductPrice, useAnalytics } from \"../../hooks\";\nimport { ResultsProps, ExampleResultCardProduct } from \"../../components\";\n\nexport type ResultCardProductProps = {\n pagePosition: number;\n product: ElasticProduct;\n document: ElasticProduct;\n render?: ResultsProps[\"renderResultCardProduct\"];\n onView?: () => void;\n};\n\nexport const ResultCardProduct: React.FC<ResultCardProductProps> = (props) => {\n const productPrice = useProductPrice(props.product);\n\n const { track } = useAnalytics();\n const { ref, inView } = useInView({\n threshold: 0.5,\n triggerOnce: true,\n });\n\n const handleClick = React.useCallback(() => {\n track({\n eventName: \"clickProduct\",\n payload: {\n elasticProduct: {\n id: props.product.id,\n title: props.product.title,\n },\n },\n });\n }, [track, props.product]);\n\n const handleView = React.useCallback(() => {\n track({\n eventName: \"viewProduct\",\n payload: {\n elasticProduct: {\n id: props.product.id,\n title: props.product.title,\n },\n },\n });\n }, [track, props.product]);\n\n React.useEffect(() => {\n if (inView) {\n props.onView?.();\n handleView();\n }\n }, [inView]);\n\n const RenderComponent = props.render ?? ExampleResultCardProduct;\n\n return (\n <RenderComponent\n {...productPrice}\n pagePosition={props.pagePosition}\n product={props.product}\n document={props.document}\n itemRef={ref}\n handleClick={handleClick}\n />\n );\n};\n"]}
|
|
@@ -45,7 +45,9 @@ export declare type ResultsProps = {
|
|
|
45
45
|
renderPaginationInfiniteScroll?: React.FC<ReturnType<typeof usePaginationLoadable>>;
|
|
46
46
|
/** Advanced Usage: Override the default amount of results per page */
|
|
47
47
|
pageSize?: number;
|
|
48
|
-
/** Advanced Usage: Override the default scrollTarget used to determine when infinite load should be triggered */
|
|
49
|
-
|
|
48
|
+
/** Advanced Usage: Override the default scrollTarget used to determine when infinite load should be triggered (infinite scroll) */
|
|
49
|
+
infiniteScrollContainer?: React.ComponentProps<typeof ReactiveList>["scrollTarget"];
|
|
50
|
+
/** Advanced Usage: Provide a specific result position to trigger loading more results (infinite scroll) */
|
|
51
|
+
infiniteScrollPosition?: number;
|
|
50
52
|
};
|
|
51
53
|
export declare const Results: React.FC<ResultsProps>;
|
|
@@ -18,7 +18,7 @@ const ResultPaginationInfiniteScroll_1 = require("./ResultPaginationInfiniteScro
|
|
|
18
18
|
const Results = (props) => {
|
|
19
19
|
const reactiveReactiveListProps = (0, hooks_1.useReactiveReactiveListProps)({
|
|
20
20
|
pageSize: props.pageSize,
|
|
21
|
-
scrollTarget: props.
|
|
21
|
+
scrollTarget: props.infiniteScrollContainer,
|
|
22
22
|
});
|
|
23
23
|
const { track } = (0, hooks_1.useAnalytics)();
|
|
24
24
|
const { searchTerm } = (0, hooks_1.useSearch)();
|
|
@@ -48,7 +48,8 @@ const ResultsRenderNoResultsComponent = () => {
|
|
|
48
48
|
return react_1.default.createElement("div", null, "No results");
|
|
49
49
|
};
|
|
50
50
|
const ResultsInner = (props) => {
|
|
51
|
-
var _a, _b, _c;
|
|
51
|
+
var _a, _b, _c, _d, _e;
|
|
52
|
+
const filtersHook = (0, hooks_1.useFilters)();
|
|
52
53
|
const initialSearchHasRun = react_1.default.useMemo(() => "undefined" !==
|
|
53
54
|
typeof props.reactivesearchResultProps.resultStats.numberOfResults, [props.reactivesearchResultProps]);
|
|
54
55
|
const listStyle = react_1.default.useMemo(() => {
|
|
@@ -59,6 +60,19 @@ const ResultsInner = (props) => {
|
|
|
59
60
|
gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
|
|
60
61
|
};
|
|
61
62
|
}, [props.listStyle]);
|
|
63
|
+
const infiniteScrollPosition = react_1.default.useMemo(() => {
|
|
64
|
+
var _a, _b, _c, _d;
|
|
65
|
+
if (!props.infiniteScrollPosition) {
|
|
66
|
+
return NaN;
|
|
67
|
+
}
|
|
68
|
+
const scrollPositionOffset = props.reactivesearchResultProps.resultStats.displayedResults -
|
|
69
|
+
((_c = (_a = props.pageSize) !== null && _a !== void 0 ? _a : (_b = filtersHook.filterStack) === null || _b === void 0 ? void 0 : _b.pageSize) !== null && _c !== void 0 ? _c : 0);
|
|
70
|
+
return scrollPositionOffset + ((_d = props.infiniteScrollPosition) !== null && _d !== void 0 ? _d : 0);
|
|
71
|
+
}, [
|
|
72
|
+
(_a = props.pageSize) !== null && _a !== void 0 ? _a : (_b = filtersHook.filterStack) === null || _b === void 0 ? void 0 : _b.pageSize,
|
|
73
|
+
props.reactivesearchResultProps.resultStats.displayedResults,
|
|
74
|
+
props.infiniteScrollPosition,
|
|
75
|
+
]);
|
|
62
76
|
if (props.reactivesearchResultProps.error) {
|
|
63
77
|
utility_1.debug.breadcrumb({
|
|
64
78
|
category: "result",
|
|
@@ -67,26 +81,33 @@ const ResultsInner = (props) => {
|
|
|
67
81
|
error: props.reactivesearchResultProps.error,
|
|
68
82
|
},
|
|
69
83
|
});
|
|
70
|
-
const RenderErrorComponent = (
|
|
84
|
+
const RenderErrorComponent = (_c = props.renderError) !== null && _c !== void 0 ? _c : ResultsRenderErrorComponent;
|
|
71
85
|
return (react_1.default.createElement(RenderErrorComponent, { error: props.reactivesearchResultProps.error }));
|
|
72
86
|
}
|
|
73
87
|
if (!initialSearchHasRun) {
|
|
74
|
-
const RenderLoadingComponent = (
|
|
88
|
+
const RenderLoadingComponent = (_d = props.renderLoading) !== null && _d !== void 0 ? _d : ResultsRenderLoadingComponent;
|
|
75
89
|
return react_1.default.createElement(RenderLoadingComponent, null);
|
|
76
90
|
}
|
|
77
91
|
if (!props.reactivesearchResultProps.loading &&
|
|
78
92
|
!props.reactivesearchResultProps.resultStats.numberOfResults) {
|
|
79
|
-
const RenderNoResultsComponent = (
|
|
93
|
+
const RenderNoResultsComponent = (_e = props.renderNoResults) !== null && _e !== void 0 ? _e : ResultsRenderNoResultsComponent;
|
|
80
94
|
return react_1.default.createElement(RenderNoResultsComponent, null);
|
|
81
95
|
}
|
|
82
96
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
83
97
|
react_1.default.createElement("section", { style: listStyle, className: props.listClassName }, props.reactivesearchResultProps.data.map((item, key) => {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
98
|
+
if (types_1.ElasticDocumentType.Product === item.type) {
|
|
99
|
+
return (react_1.default.createElement(ResultCardProduct_1.ResultCardProduct, Object.assign({ key: item._id, product: item, document: item, pagePosition: key + 1, render: props.renderResultCardProduct }, (infiniteScrollPosition === key + 1
|
|
100
|
+
? {
|
|
101
|
+
onView: () => props.reactivesearchResultProps.loadMore(),
|
|
102
|
+
}
|
|
103
|
+
: {}))));
|
|
87
104
|
}
|
|
88
105
|
if (types_1.ElasticDocumentType.Callout === item.type) {
|
|
89
|
-
return (react_1.default.createElement(ResultCardCallout_1.ResultCardCallout, { key: item._id, document: item, pagePosition: key + 1, callout: item.callout, render: props.renderResultCardCallout }
|
|
106
|
+
return (react_1.default.createElement(ResultCardCallout_1.ResultCardCallout, Object.assign({ key: item._id, document: item, pagePosition: key + 1, callout: item.callout, render: props.renderResultCardCallout }, (infiniteScrollPosition === key + 1
|
|
107
|
+
? {
|
|
108
|
+
onView: () => props.reactivesearchResultProps.loadMore(),
|
|
109
|
+
}
|
|
110
|
+
: {}))));
|
|
90
111
|
}
|
|
91
112
|
return null;
|
|
92
113
|
})),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Results.js","sourceRoot":"","sources":["../../../../src/components/Result/Results.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ReactiveList from \"@appbaseio/reactivesearch/lib/components/result/ReactiveList\";\n\nimport { ResultCardCallout } from \"./ResultCardCallout\";\nimport { ResultCardProduct } from \"./ResultCardProduct\";\nimport { ResultPaginationNumbered } from \"./ResultPaginationNumbered\";\nimport { ResultPaginationLoadMore } from \"./ResultPaginationLoadMore\";\nimport { ResultPaginationNextPrev } from \"./ResultPaginationNextPrev\";\n\nimport {\n ElasticCallout,\n ElasticProduct,\n ElasticDocumentType,\n ReactivesearchError,\n ReactivesearchResultProps,\n ReactivesearchPaginationProps,\n} from \"../../types\";\nimport {\n useReactifySearchContext,\n useAnalytics,\n useSearch,\n useFilters,\n useReactiveReactiveListProps,\n useProductPrice,\n usePagination,\n usePaginationLoadable,\n} from \"../../hooks\";\nimport { debug } from \"../../utility\";\nimport { ResultPaginationInfiniteScroll } from \"./ResultPaginationInfiniteScroll\";\n\nexport type ResultProps = ReactivesearchResultProps & {\n callouts: ElasticCallout[];\n products: ElasticProduct[];\n};\n\nexport type ResultsProps = {\n /** Style prop for the list wrapper */\n listStyle?: React.HTMLAttributes<HTMLElement>[\"style\"];\n /** Classname prop for the list wrapper */\n listClassName?: string;\n /** Render method called when an error occurs */\n renderError?: React.FC<{ error: ReactivesearchError }>;\n /** Render method called while loading for the first time */\n renderLoading?: React.FC;\n /** Render method called when no results are found */\n renderNoResults?: React.FC;\n /** Render method called once for each product result */\n renderResultCardProduct?: React.FC<\n ReturnType<typeof useProductPrice> & {\n pagePosition: number;\n product: ElasticProduct;\n document: ElasticProduct;\n itemRef: (node?: Element | null) => void;\n handleClick: () => void;\n }\n >;\n /** Render method called once for each callout result */\n renderResultCardCallout?: React.FC<{\n pagePosition: number;\n document: ElasticCallout;\n callout: ElasticCallout[\"callout\"];\n itemRef: (node?: Element | null) => void;\n handleClick: () => void;\n }>;\n /** Render method called for pagination type \"pagination\" */\n renderPaginationNumbered?: React.FC<ReturnType<typeof usePagination>>;\n /** Render method called for pagination type \"next_prev\" */\n renderPaginationNextPrev?: React.FC<ReturnType<typeof usePagination>>;\n /** Render method called for pagination type \"load_more\" */\n renderPaginationLoadMore?: React.FC<ReturnType<typeof usePaginationLoadable>>;\n /** Render method called for pagination type \"infinite_scroll\" */\n renderPaginationInfiniteScroll?: React.FC<\n ReturnType<typeof usePaginationLoadable>\n >;\n /** Advanced Usage: Override the default amount of results per page */\n pageSize?: number;\n /** Advanced Usage: Override the default scrollTarget used to determine when infinite load should be triggered */\n scrollTarget?: React.ComponentProps<typeof ReactiveList>[\"scrollTarget\"];\n};\n\nexport const Results: React.FC<ResultsProps> = (props) => {\n const reactiveReactiveListProps = useReactiveReactiveListProps({\n pageSize: props.pageSize,\n scrollTarget: props.scrollTarget,\n });\n const { track } = useAnalytics();\n const { searchTerm } = useSearch();\n\n return (\n <ReactiveList\n {...reactiveReactiveListProps}\n render={(reactivesearchResultProps: ReactivesearchResultProps) => (\n <ResultsInner\n {...props}\n reactivesearchResultProps={reactivesearchResultProps}\n />\n )}\n onData={(renderProps) => {\n if (!renderProps.loading && !renderProps.resultStats.numberOfResults) {\n if (searchTerm) {\n track({\n eventName: \"zeroResults\",\n payload: {\n searchTerm: searchTerm,\n },\n });\n }\n }\n }}\n renderPagination={(\n reactivesearchPaginationProps: ReactivesearchPaginationProps\n ) => (\n <ResultsPaginationStack {...props} {...reactivesearchPaginationProps} />\n )}\n />\n );\n};\n\nconst ResultsRenderErrorComponent: ResultsProps[\"renderError\"] = (props) => {\n return (\n <div>\n {\"Error: \"}\n {props.error.statusText}\n </div>\n );\n};\n\nconst ResultsRenderLoadingComponent: ResultsProps[\"renderLoading\"] = () => {\n return <div>{\"Loading\"}</div>;\n};\n\nconst ResultsRenderNoResultsComponent: ResultsProps[\"renderNoResults\"] = () => {\n return <div>{\"No results\"}</div>;\n};\n\nconst ResultsInner: React.FC<\n ResultsProps & { reactivesearchResultProps: ReactivesearchResultProps }\n> = (props) => {\n const initialSearchHasRun = React.useMemo(\n () =>\n \"undefined\" !==\n typeof props.reactivesearchResultProps.resultStats.numberOfResults,\n [props.reactivesearchResultProps]\n );\n\n const listStyle = React.useMemo<React.HTMLAttributes<HTMLElement>[\"style\"]>(\n () =>\n props.listStyle ?? {\n display: \"grid\",\n gap: \"8px\",\n gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\",\n },\n [props.listStyle]\n );\n\n if (props.reactivesearchResultProps.error) {\n debug.breadcrumb({\n category: \"result\",\n message: \"error\",\n data: {\n error: props.reactivesearchResultProps.error,\n },\n });\n\n const RenderErrorComponent =\n props.renderError ?? ResultsRenderErrorComponent;\n\n return (\n <RenderErrorComponent error={props.reactivesearchResultProps.error} />\n );\n }\n\n if (!initialSearchHasRun) {\n const RenderLoadingComponent =\n props.renderLoading ?? ResultsRenderLoadingComponent;\n return <RenderLoadingComponent />;\n }\n\n if (\n !props.reactivesearchResultProps.loading &&\n !props.reactivesearchResultProps.resultStats.numberOfResults\n ) {\n const RenderNoResultsComponent =\n props.renderNoResults ?? ResultsRenderNoResultsComponent;\n\n return <RenderNoResultsComponent />;\n }\n\n return (\n <>\n <section style={listStyle} className={props.listClassName}>\n {props.reactivesearchResultProps.data.map((item, key) => {\n // @todo result.type is missing in v1 indexes, this check ensures that they are assumed to be products\n if (ElasticDocumentType.Product === item.type || !item.type) {\n return (\n <ResultCardProduct\n key={item._id}\n product={item}\n document={item}\n pagePosition={key + 1}\n render={props.renderResultCardProduct}\n />\n );\n }\n\n if (ElasticDocumentType.Callout === item.type) {\n return (\n <ResultCardCallout\n key={item._id}\n document={item}\n pagePosition={key + 1}\n callout={item.callout}\n render={props.renderResultCardCallout}\n />\n );\n }\n\n return null;\n })}\n </section>\n <ResultsPaginationStackLoadable\n {...props}\n {...props.reactivesearchResultProps}\n />\n </>\n );\n};\n\n/** Handles rendering pagination for types that use \"pagination props\" */\nconst ResultsPaginationStack: React.FC<\n ResultsProps & ReactivesearchPaginationProps\n> = (props) => {\n const { options } = useReactifySearchContext();\n const { filterStack } = useFilters();\n\n if (options.mode === \"instant-search\") {\n return null;\n }\n\n if (\"pagination\" === filterStack?.paginationType) {\n return (\n <ResultPaginationNumbered\n {...props}\n render={props.renderPaginationNumbered}\n />\n );\n }\n\n if (\"next_prev\" === filterStack?.paginationType) {\n return (\n <ResultPaginationNextPrev\n {...props}\n render={props.renderPaginationNextPrev}\n />\n );\n }\n\n return null;\n};\n\n/** Handles rendering pagination for types that use \"result props\" */\nconst ResultsPaginationStackLoadable: React.FC<\n ResultsProps & { reactivesearchResultProps: ReactivesearchResultProps }\n> = (props) => {\n const { options } = useReactifySearchContext();\n const { filterStack } = useFilters();\n\n if (options.mode === \"instant-search\") {\n return null;\n }\n\n if (\"load_more\" === filterStack?.paginationType) {\n return (\n <ResultPaginationLoadMore\n {...props.reactivesearchResultProps}\n render={props.renderPaginationLoadMore}\n />\n );\n }\n\n if (\"infinite_scroll\" === filterStack?.paginationType) {\n return (\n <ResultPaginationInfiniteScroll\n {...props.reactivesearchResultProps}\n render={props.renderPaginationInfiniteScroll}\n />\n );\n }\n\n return null;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"Results.js","sourceRoot":"","sources":["../../../../src/components/Result/Results.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ReactiveList from \"@appbaseio/reactivesearch/lib/components/result/ReactiveList\";\n\nimport { ResultCardCallout } from \"./ResultCardCallout\";\nimport { ResultCardProduct } from \"./ResultCardProduct\";\nimport { ResultPaginationNumbered } from \"./ResultPaginationNumbered\";\nimport { ResultPaginationLoadMore } from \"./ResultPaginationLoadMore\";\nimport { ResultPaginationNextPrev } from \"./ResultPaginationNextPrev\";\n\nimport {\n ElasticCallout,\n ElasticProduct,\n ElasticDocumentType,\n ReactivesearchError,\n ReactivesearchResultProps,\n ReactivesearchPaginationProps,\n} from \"../../types\";\nimport {\n useReactifySearchContext,\n useAnalytics,\n useSearch,\n useFilters,\n useReactiveReactiveListProps,\n useProductPrice,\n usePagination,\n usePaginationLoadable,\n} from \"../../hooks\";\nimport { debug } from \"../../utility\";\nimport { ResultPaginationInfiniteScroll } from \"./ResultPaginationInfiniteScroll\";\n\nexport type ResultProps = ReactivesearchResultProps & {\n callouts: ElasticCallout[];\n products: ElasticProduct[];\n};\n\nexport type ResultsProps = {\n /** Style prop for the list wrapper */\n listStyle?: React.HTMLAttributes<HTMLElement>[\"style\"];\n /** Classname prop for the list wrapper */\n listClassName?: string;\n /** Render method called when an error occurs */\n renderError?: React.FC<{ error: ReactivesearchError }>;\n /** Render method called while loading for the first time */\n renderLoading?: React.FC;\n /** Render method called when no results are found */\n renderNoResults?: React.FC;\n /** Render method called once for each product result */\n renderResultCardProduct?: React.FC<\n ReturnType<typeof useProductPrice> & {\n pagePosition: number;\n product: ElasticProduct;\n document: ElasticProduct;\n itemRef: (node?: Element | null) => void;\n handleClick: () => void;\n }\n >;\n /** Render method called once for each callout result */\n renderResultCardCallout?: React.FC<{\n pagePosition: number;\n document: ElasticCallout;\n callout: ElasticCallout[\"callout\"];\n itemRef: (node?: Element | null) => void;\n handleClick: () => void;\n }>;\n /** Render method called for pagination type \"pagination\" */\n renderPaginationNumbered?: React.FC<ReturnType<typeof usePagination>>;\n /** Render method called for pagination type \"next_prev\" */\n renderPaginationNextPrev?: React.FC<ReturnType<typeof usePagination>>;\n /** Render method called for pagination type \"load_more\" */\n renderPaginationLoadMore?: React.FC<ReturnType<typeof usePaginationLoadable>>;\n /** Render method called for pagination type \"infinite_scroll\" */\n renderPaginationInfiniteScroll?: React.FC<\n ReturnType<typeof usePaginationLoadable>\n >;\n /** Advanced Usage: Override the default amount of results per page */\n pageSize?: number;\n /** Advanced Usage: Override the default scrollTarget used to determine when infinite load should be triggered (infinite scroll) */\n infiniteScrollContainer?: React.ComponentProps<\n typeof ReactiveList\n >[\"scrollTarget\"];\n /** Advanced Usage: Provide a specific result position to trigger loading more results (infinite scroll) */\n infiniteScrollPosition?: number;\n};\n\nexport const Results: React.FC<ResultsProps> = (props) => {\n const reactiveReactiveListProps = useReactiveReactiveListProps({\n pageSize: props.pageSize,\n scrollTarget: props.infiniteScrollContainer,\n });\n const { track } = useAnalytics();\n const { searchTerm } = useSearch();\n\n return (\n <ReactiveList\n {...reactiveReactiveListProps}\n render={(reactivesearchResultProps: ReactivesearchResultProps) => (\n <ResultsInner\n {...props}\n reactivesearchResultProps={reactivesearchResultProps}\n />\n )}\n onData={(renderProps) => {\n if (!renderProps.loading && !renderProps.resultStats.numberOfResults) {\n if (searchTerm) {\n track({\n eventName: \"zeroResults\",\n payload: {\n searchTerm: searchTerm,\n },\n });\n }\n }\n }}\n renderPagination={(\n reactivesearchPaginationProps: ReactivesearchPaginationProps\n ) => (\n <ResultsPaginationStack {...props} {...reactivesearchPaginationProps} />\n )}\n />\n );\n};\n\nconst ResultsRenderErrorComponent: ResultsProps[\"renderError\"] = (props) => {\n return (\n <div>\n {\"Error: \"}\n {props.error.statusText}\n </div>\n );\n};\n\nconst ResultsRenderLoadingComponent: ResultsProps[\"renderLoading\"] = () => {\n return <div>{\"Loading\"}</div>;\n};\n\nconst ResultsRenderNoResultsComponent: ResultsProps[\"renderNoResults\"] = () => {\n return <div>{\"No results\"}</div>;\n};\n\nconst ResultsInner: React.FC<\n ResultsProps & { reactivesearchResultProps: ReactivesearchResultProps }\n> = (props) => {\n const filtersHook = useFilters();\n const initialSearchHasRun = React.useMemo(\n () =>\n \"undefined\" !==\n typeof props.reactivesearchResultProps.resultStats.numberOfResults,\n [props.reactivesearchResultProps]\n );\n\n const listStyle = React.useMemo<React.HTMLAttributes<HTMLElement>[\"style\"]>(\n () =>\n props.listStyle ?? {\n display: \"grid\",\n gap: \"8px\",\n gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\",\n },\n [props.listStyle]\n );\n\n const infiniteScrollPosition = React.useMemo<number>(() => {\n if (!props.infiniteScrollPosition) {\n return NaN;\n }\n\n const scrollPositionOffset =\n props.reactivesearchResultProps.resultStats.displayedResults -\n (props.pageSize ?? filtersHook.filterStack?.pageSize ?? 0);\n\n return scrollPositionOffset + (props.infiniteScrollPosition ?? 0);\n }, [\n props.pageSize ?? filtersHook.filterStack?.pageSize,\n props.reactivesearchResultProps.resultStats.displayedResults,\n props.infiniteScrollPosition,\n ]);\n\n if (props.reactivesearchResultProps.error) {\n debug.breadcrumb({\n category: \"result\",\n message: \"error\",\n data: {\n error: props.reactivesearchResultProps.error,\n },\n });\n\n const RenderErrorComponent =\n props.renderError ?? ResultsRenderErrorComponent;\n\n return (\n <RenderErrorComponent error={props.reactivesearchResultProps.error} />\n );\n }\n\n if (!initialSearchHasRun) {\n const RenderLoadingComponent =\n props.renderLoading ?? ResultsRenderLoadingComponent;\n return <RenderLoadingComponent />;\n }\n\n if (\n !props.reactivesearchResultProps.loading &&\n !props.reactivesearchResultProps.resultStats.numberOfResults\n ) {\n const RenderNoResultsComponent =\n props.renderNoResults ?? ResultsRenderNoResultsComponent;\n\n return <RenderNoResultsComponent />;\n }\n\n return (\n <>\n <section style={listStyle} className={props.listClassName}>\n {props.reactivesearchResultProps.data.map((item, key) => {\n if (ElasticDocumentType.Product === item.type) {\n return (\n <ResultCardProduct\n key={item._id}\n product={item}\n document={item}\n pagePosition={key + 1}\n render={props.renderResultCardProduct}\n {...(infiniteScrollPosition === key + 1\n ? {\n onView: () => props.reactivesearchResultProps.loadMore(),\n }\n : {})}\n />\n );\n }\n\n if (ElasticDocumentType.Callout === item.type) {\n return (\n <ResultCardCallout\n key={item._id}\n document={item}\n pagePosition={key + 1}\n callout={item.callout}\n render={props.renderResultCardCallout}\n {...(infiniteScrollPosition === key + 1\n ? {\n onView: () => props.reactivesearchResultProps.loadMore(),\n }\n : {})}\n />\n );\n }\n\n return null;\n })}\n </section>\n <ResultsPaginationStackLoadable\n {...props}\n {...props.reactivesearchResultProps}\n />\n </>\n );\n};\n\n/** Handles rendering pagination for types that use \"pagination props\" */\nconst ResultsPaginationStack: React.FC<\n ResultsProps & ReactivesearchPaginationProps\n> = (props) => {\n const { options } = useReactifySearchContext();\n const { filterStack } = useFilters();\n\n if (options.mode === \"instant-search\") {\n return null;\n }\n\n if (\"pagination\" === filterStack?.paginationType) {\n return (\n <ResultPaginationNumbered\n {...props}\n render={props.renderPaginationNumbered}\n />\n );\n }\n\n if (\"next_prev\" === filterStack?.paginationType) {\n return (\n <ResultPaginationNextPrev\n {...props}\n render={props.renderPaginationNextPrev}\n />\n );\n }\n\n return null;\n};\n\n/** Handles rendering pagination for types that use \"result props\" */\nconst ResultsPaginationStackLoadable: React.FC<\n ResultsProps & { reactivesearchResultProps: ReactivesearchResultProps }\n> = (props) => {\n const { options } = useReactifySearchContext();\n const { filterStack } = useFilters();\n\n if (options.mode === \"instant-search\") {\n return null;\n }\n\n if (\"load_more\" === filterStack?.paginationType) {\n return (\n <ResultPaginationLoadMore\n {...props.reactivesearchResultProps}\n render={props.renderPaginationLoadMore}\n />\n );\n }\n\n if (\"infinite_scroll\" === filterStack?.paginationType) {\n return (\n <ResultPaginationInfiniteScroll\n {...props.reactivesearchResultProps}\n render={props.renderPaginationInfiniteScroll}\n />\n );\n }\n\n return null;\n};\n"]}
|