@usereactify/search 3.9.1 → 3.10.0

package/dist/filter/Filter.js

@@ -18,11 +18,12 @@ exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const MultiList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/MultiList"));
 const SingleList_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/list/SingleList"));
-const FilterList_1 = require("./FilterList");
 const hooks_1 = require("../hooks");
+const FilterList_1 = require("./FilterList");
+const hooks_2 = require("../hooks");
 const Filter = (props) => {
     const { filter } = props;
-    const reactiveFilterListProps = (0, hooks_1.useReactiveFilterListProps)(filter);
+    const reactiveFilterListProps = (0, hooks_2.useReactiveFilterListProps)(filter);
     if ("single" === filter.displayType) {
         return (react_1.default.createElement(SingleList_1.default, Object.assign({}, reactiveFilterListProps, { render: (reactivesearchFilterProps) => (react_1.default.createElement(FilterListInner, Object.assign({}, props, { reactivesearchFilterProps: reactivesearchFilterProps }))) })));
     }
@@ -36,18 +37,30 @@ exports.Filter = Filter;
 // inner component exists only so we can use memos in reactivesearch render functions
 const FilterListInner = (props) => {
     const { filter, noWrapper, renderFilterList, reactivesearchFilterProps } = props, otherProps = __rest(props, ["filter", "noWrapper", "renderFilterList", "reactivesearchFilterProps"]);
-    const filterListProps = (0, hooks_1.useFilterListProps)(filter, reactivesearchFilterProps);
+    const { track } = (0, hooks_1.useAnalytics)();
+    const _a = (0, hooks_2.useFilterListProps)(filter, reactivesearchFilterProps), { handleChange } = _a, filterListProps = __rest(_a, ["handleChange"]);
+    const handleFilterChange = react_1.default.useCallback((value) => {
+        handleChange(value);
+        track({
+            eventName: "filterChange",
+            payload: {
+                name: filter.name,
+                value: value,
+            },
+        });
+    }, [filterListProps]);
+    const updatedFilterListProps = Object.assign(Object.assign({}, filterListProps), { handleChange: handleFilterChange });
     // hide entire filter when no options available
     if (0 === filterListProps.options.length)
         return null;
     if (renderFilterList) {
-        return renderFilterList(Object.assign({ filterListProps, filter }, otherProps));
+        return renderFilterList(Object.assign({ filterListProps: updatedFilterListProps, filter }, otherProps));
     }
     if (noWrapper) {
-        return react_1.default.createElement(FilterList_1.FilterList, Object.assign({}, filterListProps));
+        return react_1.default.createElement(FilterList_1.FilterList, Object.assign({}, updatedFilterListProps));
     }
     return (react_1.default.createElement(FilterWrapper, Object.assign({}, props),
-        react_1.default.createElement(FilterList_1.FilterList, Object.assign({}, filterListProps))));
+        react_1.default.createElement(FilterList_1.FilterList, Object.assign({}, updatedFilterListProps))));
 };
 // wrap the filter with a clickable title
 const FilterWrapper = ({ filter, children, collapsed, shouldRender, collapsedToggle }) => {

package/dist/filter/FilterList.js

@@ -7,7 +7,7 @@ exports.FilterList = void 0;
 const react_1 = __importDefault(require("react"));
 const FilterList = ({ options, handleChange }) => (react_1.default.createElement("ul", null, options.map(({ key, doc_count, checked }) => (react_1.default.createElement("li", { key: key },
     react_1.default.createElement("label", null,
-        react_1.default.createElement("input", { value: key, type: "checkbox", checked: checked, onChange: handleChange }),
+        react_1.default.createElement("input", { value: key, type: "checkbox", checked: checked, onChange: ({ target: { value } }) => handleChange(value) }),
         key,
         " (",
         doc_count,

package/dist/hooks/reactivesearch/useReactiveDataSearchProps.js

@@ -35,7 +35,7 @@ const useReactiveDataSearchProps = (props = {}) => {
     }, [submitSearch]);
     const { track } = (0, __1.useAnalytics)();
     const trackQuery = react_1.default.useCallback(() => {
-        if (!searchQuery)
+        if (!searchQuery || (searchQuery && searchQuery.length < 3))
             return;
         track({ eventName: "search", payload: { searchTerm: searchQuery } });
     }, [searchQuery, track]);

package/dist/hooks/useAnalytics.d.ts

@@ -1,7 +1,7 @@
 export declare const useAnalytics: () => {
     track: (event: TrackEvent) => Promise<import("axios").AxiosResponse<any, any> | undefined>;
 };
-export declare type TrackEvent = TrackEvent.SearchEvent | TrackEvent.ZeroResultsEvent | TrackEvent.ViewProductEvent | TrackEvent.ClickProductEvent;
+export declare type TrackEvent = TrackEvent.SearchEvent | TrackEvent.ZeroResultsEvent | TrackEvent.ViewProductEvent | TrackEvent.ClickProductEvent | TrackEvent.ViewPromotionEvent | TrackEvent.ClickPromotionEvent | TrackEvent.PaginationChangeEvent | TrackEvent.SortChangeEvent | TrackEvent.FilterChangeEvent;
 export declare namespace TrackEvent {
     interface SearchEvent {
         eventName: "search";
@@ -39,6 +39,55 @@ export declare namespace TrackEvent {
             elasticProduct: ElasticProduct;
         }
     }
+    interface ViewPromotionEvent {
+        eventName: "viewPromotion";
+        payload: ViewPromotionEvent.Payload;
+    }
+    namespace ViewPromotionEvent {
+        interface Payload {
+            link: string;
+            title: string;
+        }
+    }
+    interface ClickPromotionEvent {
+        eventName: "clickPromotion";
+        payload: ClickPromotionEvent.Payload;
+    }
+    namespace ClickPromotionEvent {
+        interface Payload {
+            link: string;
+            title: string;
+        }
+    }
+    interface PaginationChangeEvent {
+        eventName: "paginationChange";
+        payload: PaginationChangeEvent.Payload;
+    }
+    namespace PaginationChangeEvent {
+        interface Payload {
+            page: number;
+            source: "search" | "collection";
+        }
+    }
+    interface SortChangeEvent {
+        eventName: "sortChange";
+        payload: SortChangeEvent.Payload;
+    }
+    namespace SortChangeEvent {
+        interface Payload {
+            type: string;
+        }
+    }
+    interface FilterChangeEvent {
+        eventName: "filterChange";
+        payload: FilterChangeEvent.Payload;
+    }
+    namespace FilterChangeEvent {
+        interface Payload {
+            name: string;
+            value: string;
+        }
+    }
     interface ElasticProduct {
         id: number;
         title: string;

package/dist/hooks/useAnalytics.js

@@ -57,6 +57,22 @@ function getTrackEvents(event) {
                 },
             ];
             break;
+        case "viewPromotion":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "clickPromotion":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
         case "zeroResults":
             events = [
                 {
@@ -65,6 +81,30 @@ function getTrackEvents(event) {
                 },
             ];
             break;
+        case "paginationChange":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "sortChange":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "filterChange":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
     }
     return events;
 }

package/dist/hooks/useFilterListProps.d.ts

@@ -11,7 +11,7 @@ export declare const useFilterListProps: (filter: ConfigFilterOption, reactivese
     totalSelected: number;
     loading: boolean;
     error: Error | null;
-    handleChange: () => void;
+    handleChange: (value: string) => void;
     data: {
         doc_count: number;
         key: string;

package/dist/hooks/usePages.js

@@ -5,8 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePages = void 0;
 const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
 const usePages = (props) => {
     const { pages, setPage, totalPages, currentPage } = props;
+    const { track } = (0, hooks_1.useAnalytics)();
     const buildPagePath = react_1.default.useCallback((page) => {
         const currentPath = window.location.pathname;
         return currentPath.includes("page=")
@@ -22,6 +24,15 @@ const usePages = (props) => {
         if (!hasNextPage)
             return;
         setPage(currentPage + 1);
+        track({
+            eventName: "paginationChange",
+            payload: {
+                page: currentPage + 1,
+                source: window.location.pathname.includes("/search")
+                    ? "search"
+                    : "collection",
+            },
+        });
     }, [hasNextPage, currentPage, setPage]);
     const hasPreviousPage = react_1.default.useMemo(() => actualCurrentPage > 1, [actualCurrentPage]);
     const handlePreviousPage = react_1.default.useCallback((event) => {
@@ -29,6 +40,15 @@ const usePages = (props) => {
         if (!hasPreviousPage)
             return;
         setPage(currentPage - 1);
+        track({
+            eventName: "paginationChange",
+            payload: {
+                page: currentPage - 1,
+                source: window.location.pathname.includes("/search")
+                    ? "search"
+                    : "collection",
+            },
+        });
     }, [hasPreviousPage, currentPage, setPage]);
     return react_1.default.useMemo(() => ({
         pagesToShow,

package/dist/hooks/useSort.js

@@ -1,9 +1,24 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSort = void 0;
+const react_1 = __importDefault(require("react"));
 const provider_1 = require("../provider");
+const hooks_1 = require("../hooks");
 const useSort = () => {
+    const { track } = (0, hooks_1.useAnalytics)();
     const { sortOption, sortOptions, setSortOption } = (0, provider_1.useContext)();
-    return { sortOption, sortOptions, setSortOption };
+    const handleSortChange = react_1.default.useCallback((sortOptionId) => {
+        setSortOption(sortOptionId);
+        track({
+            eventName: "sortChange",
+            payload: {
+                type: sortOptionId,
+            },
+        });
+    }, [track, setSortOption]);
+    return { sortOption, sortOptions, setSortOption: handleSortChange };
 };
 exports.useSort = useSort;

package/dist/provider.js

@@ -16,8 +16,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContext = exports.ConfiguredProvider = exports.Provider = void 0;
 const react_1 = __importDefault(require("react"));
-const UtilityAuthenticatedReactiveBase_1 = require("./utility/UtilityAuthenticatedReactiveBase");
 const hooks_1 = require("./hooks");
+const UtilityAuthenticatedReactiveBase_1 = require("./utility/UtilityAuthenticatedReactiveBase");
 const debug = require("debug")("reactify-search:Provider");
 const Context = react_1.default.createContext(undefined);
 const defaultCredentials = {
@@ -142,7 +142,9 @@ const useSortState = (config, collection) => {
     }, [config, collection]);
     const [sortOptionState, setSortOptionState] = react_1.default.useState((_a = sortOptions[0]) === null || _a === void 0 ? void 0 : _a.id);
     const sortOption = react_1.default.useMemo(() => sortOptions.find(({ id }) => id === sortOptionState) || sortOptions[0], [sortOptions, sortOptionState]);
-    const setSortOption = react_1.default.useCallback((sortOptionId) => setSortOptionState(sortOptionId), []);
+    const setSortOption = react_1.default.useCallback((sortOptionId) => {
+        setSortOptionState(sortOptionId);
+    }, []);
     return react_1.default.useMemo(() => ({ sortOptions, sortOption, setSortOption }), [sortOption, sortOptions, setSortOption]);
 };
 // resolve the "filter" in use for this view

package/dist/result/ResultCardCallout.d.ts

@@ -4,7 +4,10 @@ declare type Props = {
     pagePosition: number;
     document: ElasticCallout;
     callout: ElasticCallout["callout"];
-    render?: (props: Omit<Props, "render">) => JSX.Element;
+    render?: (props: Omit<Props, "render"> & {
+        itemRef: (node?: Element | null) => void;
+        handleClick: () => void;
+    }) => JSX.Element;
 };
 export declare const ResultCardCallout: React.FC<Props>;
 export {};

package/dist/result/ResultCardCallout.js

@@ -1,23 +1,41 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultCardCallout = void 0;
 const react_1 = __importDefault(require("react"));
+const react_intersection_observer_1 = require("react-intersection-observer");
+const hooks_1 = require("../hooks");
 const ResultCardCallout = (props) => {
-    const { callout } = props;
+    const { callout, render } = props;
+    const { track } = (0, hooks_1.useAnalytics)();
+    const { ref, inView } = (0, react_intersection_observer_1.useInView)({
+        threshold: 0.5,
+        triggerOnce: true,
+    });
+    const handleClick = react_1.default.useCallback(() => {
+        track({
+            eventName: "clickPromotion",
+            payload: {
+                link: callout.link,
+                title: callout.title,
+            },
+        });
+    }, [track, callout]);
+    const handleView = react_1.default.useCallback(() => {
+        track({
+            eventName: "viewPromotion",
+            payload: {
+                link: callout.link,
+                title: callout.title,
+            },
+        });
+    }, [track, callout]);
+    react_1.default.useEffect(() => {
+        if (inView)
+            handleView();
+    }, [inView]);
     const styleProp = react_1.default.useMemo(() => {
         var _a, _b;
         return ({
@@ -25,14 +43,11 @@ const ResultCardCallout = (props) => {
             gridColumn: `span ${(_b = callout.displayColumns) !== null && _b !== void 0 ? _b : 1}`,
         });
     }, [callout]);
-    return (react_1.default.createElement("article", { style: styleProp },
-        react_1.default.createElement(ResultCardCalloutInner, Object.assign({}, props))));
-};
-exports.ResultCardCallout = ResultCardCallout;
-const ResultCardCalloutInner = (_a) => {
-    var { render } = _a, props = __rest(_a, ["render"]);
-    const { callout } = props;
     if (render)
-        return render(props);
-    return react_1.default.createElement("p", null, callout.title);
+        return render(Object.assign(Object.assign({}, props), { itemRef: ref, handleClick }));
+    return (react_1.default.createElement("article", { ref: ref, style: styleProp },
+        react_1.default.createElement("a", { href: callout.link, onClick: handleClick },
+            callout.desktopImage && (react_1.default.createElement("img", { src: callout.desktopImage, width: "100%" })),
+            callout.title)));
 };
+exports.ResultCardCallout = ResultCardCallout;

package/dist/result/ResultLoadMoreButton.d.ts

@@ -3,6 +3,7 @@ import { ReactivesearchResultProps } from "../types/reactivesearch";
 declare type Props = ReactivesearchResultProps & {
     render?: (props: Omit<Props, "render"> & {
         hasMore: boolean;
+        handleLoadMore: () => void;
     }) => JSX.Element;
 };
 export declare const ResultLoadMoreButton: React.FC<Props>;

package/dist/result/ResultLoadMoreButton.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,18 +29,33 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultLoadMoreButton = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+const hooks_2 = require("../hooks");
 const ResultLoadMoreButton = (_a) => {
-    var { render } = _a, props = __rest(_a, ["render"]);
-    const { resultStats, loadMore } = props;
+    var { render, loadMore } = _a, props = __rest(_a, ["render", "loadMore"]);
+    const { track } = (0, hooks_1.useAnalytics)();
+    const filterStack = (0, hooks_2.useFilterStack)();
+    const { resultStats } = props;
     const hasMore = react_1.default.useMemo(() => resultStats.displayedResults !== resultStats.numberOfResults, [resultStats]);
+    const handleLoadMore = (0, react_1.useCallback)(() => {
+        loadMore();
+        track({
+            eventName: "paginationChange",
+            payload: {
+                page: Math.ceil(resultStats.displayedResults / ((filterStack === null || filterStack === void 0 ? void 0 : filterStack.pageSize) || 20)) + 1,
+                source: window.location.pathname.includes("/search")
+                    ? "search"
+                    : "collection",
+            },
+        });
+    }, [loadMore, track, resultStats, filterStack]);
     if (render)
-        return render(Object.assign(Object.assign({}, props), { hasMore }));
+        return render(Object.assign(Object.assign({}, props), { hasMore, 
+            // @todo: remove legacy loadMore prop in future versions
+            loadMore: handleLoadMore, handleLoadMore }));
     return react_1.default.createElement("button", { onClick: () => loadMore() }, "Load more");
 };
 exports.ResultLoadMoreButton = ResultLoadMoreButton;

package/dist/result/ResultPagination.d.ts

@@ -2,7 +2,9 @@ import React from "react";
 import { usePages } from "../hooks";
 import { ReactivesearchPaginationProps } from "../types/reactivesearch";
 declare type Props = ReactivesearchPaginationProps & {
-    render?: (props: Omit<Props, "render"> & ReturnType<typeof usePages>) => JSX.Element;
+    render?: (props: Omit<Props, "render"> & ReturnType<typeof usePages> & {
+        handlePageChange: (event: any, page: number) => void;
+    }) => JSX.Element;
 };
 export declare const ResultPagination: React.FC<Props>;
 export {};

package/dist/result/ResultPagination.js

@@ -19,15 +19,25 @@ const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../hooks");
 const ResultPagination = (_a) => {
     var { render } = _a, props = __rest(_a, ["render"]);
+    const { track } = (0, hooks_1.useAnalytics)();
     const pageProps = (0, hooks_1.usePages)(props);
-    if (render)
-        return render(Object.assign(Object.assign({}, props), pageProps));
     const { pagesToShow, buildPagePath } = pageProps;
     const { currentPage, totalPages, setPage } = props;
     const handlePageChange = react_1.default.useCallback((event, newPage) => {
         event.preventDefault();
         setPage(newPage);
-    }, [setPage]);
+        track({
+            eventName: "paginationChange",
+            payload: {
+                page: newPage + 1,
+                source: window.location.pathname.includes("/search")
+                    ? "search"
+                    : "collection",
+            },
+        });
+    }, [setPage, track]);
+    if (render)
+        return render(Object.assign(Object.assign(Object.assign({}, props), pageProps), { handlePageChange }));
     if (!totalPages)
         return null;
     return (react_1.default.createElement("nav", null,

package/dist/result/index.d.ts

@@ -3,3 +3,4 @@ export * from "./ResultCard";
 export * from "./ResultPagination";
 export * from "./ResultStateProvider";
 export * from "./ResultLoadMoreButton";
+export * from "./ResultPaginationNextPrev";

package/dist/result/index.js

@@ -15,3 +15,4 @@ __exportStar(require("./ResultCard"), exports);
 __exportStar(require("./ResultPagination"), exports);
 __exportStar(require("./ResultStateProvider"), exports);
 __exportStar(require("./ResultLoadMoreButton"), exports);
+__exportStar(require("./ResultPaginationNextPrev"), exports);

package/dist/types/reactivesearch.d.ts

@@ -2,7 +2,7 @@ import { ElasticDocument, ElasticHit } from "./elastic";
 export interface ReactivesearchFilterProps {
     loading: boolean;
     error: Error | null;
-    handleChange: () => void;
+    handleChange: (value: string) => void;
     data: {
         doc_count: number;
         key: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.9.1",
+  "version": "3.10.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",