@searchspring/snap-preact-components 0.40.0 → 0.41.1
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/dist/cjs/components/Molecules/Carousel/Carousel.d.ts +2 -1
- package/dist/cjs/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/Carousel/Carousel.js +13 -2
- package/dist/cjs/components/Molecules/Carousel/Carousel.stories.js +3 -3
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts +2 -2
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +19 -9
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +10 -48
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +10 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +51 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts +94 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.js +106 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.d.ts +2 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/Recommendation/ProfileTracker/index.js +17 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +12 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +54 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts +109 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.js +116 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts +2 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +1 -0
- package/dist/cjs/components/Trackers/Recommendation/ResultTracker/index.js +17 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +2 -0
- package/dist/esm/components/Molecules/Carousel/Carousel.d.ts +2 -1
- package/dist/esm/components/Molecules/Carousel/Carousel.d.ts.map +1 -1
- package/dist/esm/components/Molecules/Carousel/Carousel.js +16 -2
- package/dist/esm/components/Molecules/Carousel/Carousel.stories.js +3 -3
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts +2 -2
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +19 -9
- package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Recommendation/Recommendation.js +9 -47
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts +10 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts.map +1 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js +40 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts +94 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.d.ts.map +1 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.stories.js +48 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts +2 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.d.ts.map +1 -0
- package/dist/esm/components/Trackers/Recommendation/ProfileTracker/index.js +1 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts +12 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.d.ts.map +1 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js +43 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts +109 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.d.ts.map +1 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.js +58 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts +2 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.d.ts.map +1 -0
- package/dist/esm/components/Trackers/Recommendation/ResultTracker/index.js +1 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +2 -0
- package/package.json +11 -11
package/dist/cjs/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.RecommendationResultTracker = void 0;
|
|
18
|
+
var react_1 = require("@emotion/react");
|
|
19
|
+
var hooks_1 = require("preact/hooks");
|
|
20
|
+
var mobx_react_lite_1 = require("mobx-react-lite");
|
|
21
|
+
var providers_1 = require("../../../../providers");
|
|
22
|
+
var hooks_2 = require("../../../../hooks");
|
|
23
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
24
|
+
var CSS = {
|
|
25
|
+
RecommendationResultTracker: function () { return (0, react_1.css)({}); },
|
|
26
|
+
};
|
|
27
|
+
exports.RecommendationResultTracker = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
28
|
+
var _a, _b, _c;
|
|
29
|
+
var globalTheme = (0, providers_1.useTheme)();
|
|
30
|
+
var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.RecommendationResultTracker), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.RecommendationResultTracker);
|
|
31
|
+
var children = props.children, result = props.result, controller = props.controller, className = props.className, disableStyles = props.disableStyles, style = props.style;
|
|
32
|
+
var resultRef = (0, hooks_1.useRef)(null);
|
|
33
|
+
var resultInViewport = (0, hooks_2.useIntersection)(resultRef, '0px');
|
|
34
|
+
if (!controller.events.render) {
|
|
35
|
+
controller.log.warn('<RecommendationResultTracker> used without <RecommendationProfileTracker>');
|
|
36
|
+
}
|
|
37
|
+
controller.track.product.render(result);
|
|
38
|
+
if (resultInViewport) {
|
|
39
|
+
// intersection observer can trigger in any random order,
|
|
40
|
+
// so we need to check if profile impression has been sent and send if not.
|
|
41
|
+
if (!controller.events.impression) {
|
|
42
|
+
controller.track.impression();
|
|
43
|
+
}
|
|
44
|
+
controller.track.product.impression(result);
|
|
45
|
+
}
|
|
46
|
+
var styling = {};
|
|
47
|
+
if (!disableStyles) {
|
|
48
|
+
styling.css = [CSS.RecommendationResultTracker(), style];
|
|
49
|
+
}
|
|
50
|
+
else if (style) {
|
|
51
|
+
styling.css = [style];
|
|
52
|
+
}
|
|
53
|
+
return ((0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-result-tracker', className), onClick: function (e) { return controller.track.product.click(e, result); }, ref: resultRef }, styling), children));
|
|
54
|
+
});
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { h } from 'preact';
|
|
3
|
+
import { RecommendationResultTrackerProps } from './RecommendationResultTracker';
|
|
4
|
+
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
5
|
+
declare const _default: {
|
|
6
|
+
title: string;
|
|
7
|
+
component: ((properties: RecommendationResultTrackerProps) => JSX.Element) & {
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
10
|
+
parameters: {
|
|
11
|
+
docs: {
|
|
12
|
+
page: () => h.JSX.Element;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
decorators: ((Story: any) => h.JSX.Element)[];
|
|
16
|
+
argTypes: {
|
|
17
|
+
className: {
|
|
18
|
+
description: string;
|
|
19
|
+
table: {
|
|
20
|
+
type: {
|
|
21
|
+
summary: string;
|
|
22
|
+
};
|
|
23
|
+
defaultValue: {
|
|
24
|
+
summary: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
control: {
|
|
28
|
+
type: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
disableStyles: {
|
|
32
|
+
defaultValue: boolean;
|
|
33
|
+
description: string;
|
|
34
|
+
table: {
|
|
35
|
+
type: {
|
|
36
|
+
summary: string;
|
|
37
|
+
};
|
|
38
|
+
defaultValue: {
|
|
39
|
+
summary: boolean;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
control: {
|
|
43
|
+
type: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
style: {
|
|
47
|
+
description: string;
|
|
48
|
+
table: {
|
|
49
|
+
type: {
|
|
50
|
+
summary: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
control: {
|
|
54
|
+
type: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
theme: {
|
|
58
|
+
description: string;
|
|
59
|
+
table: {
|
|
60
|
+
type: {
|
|
61
|
+
summary: string;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
control: {
|
|
65
|
+
type: string;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
controller: {
|
|
69
|
+
description: string;
|
|
70
|
+
type: {
|
|
71
|
+
required: boolean;
|
|
72
|
+
};
|
|
73
|
+
table: {
|
|
74
|
+
type: {
|
|
75
|
+
summary: string;
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
control: {
|
|
79
|
+
type: string;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
result: {
|
|
83
|
+
description: string;
|
|
84
|
+
type: {
|
|
85
|
+
required: boolean;
|
|
86
|
+
};
|
|
87
|
+
table: {
|
|
88
|
+
type: {
|
|
89
|
+
summary: string;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
control: {
|
|
93
|
+
type: string;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
export default _default;
|
|
99
|
+
export declare const Default: {
|
|
100
|
+
(props: RecommendationResultTrackerProps, { loaded: { controller } }: {
|
|
101
|
+
loaded: {
|
|
102
|
+
controller: RecommendationController;
|
|
103
|
+
};
|
|
104
|
+
}): h.JSX.Element;
|
|
105
|
+
loaders: (() => Promise<{
|
|
106
|
+
controller: RecommendationController;
|
|
107
|
+
}>)[];
|
|
108
|
+
};
|
|
109
|
+
//# sourceMappingURL=RecommendationResultTracker.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RecommendationResultTracker.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/RecommendationResultTracker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAA+B,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AAI9G,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;;;;;;;;;;yBAiBpE,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA4CE;AAIF,eAAO,MAAM,OAAO;YACZ,gCAAgC;;wBACa,wBAAwB;;;;;;CAO5E,CAAC"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (_) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
50
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
51
|
+
};
|
|
52
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
+
exports.Default = void 0;
|
|
54
|
+
var preact_1 = require("preact");
|
|
55
|
+
var blocks_1 = require("@storybook/addon-docs/blocks");
|
|
56
|
+
var RecommendationResultTracker_1 = require("./RecommendationResultTracker");
|
|
57
|
+
var utilities_1 = require("../../../../utilities");
|
|
58
|
+
var readme_md_1 = __importDefault(require("../ResultTracker/readme.md"));
|
|
59
|
+
var snapify_1 = require("../../../../utilities/snapify");
|
|
60
|
+
var Result_1 = require("../../../Molecules/Result");
|
|
61
|
+
exports.default = {
|
|
62
|
+
title: "Trackers/Recommendation/Result",
|
|
63
|
+
component: RecommendationResultTracker_1.RecommendationResultTracker,
|
|
64
|
+
parameters: {
|
|
65
|
+
docs: {
|
|
66
|
+
page: function () { return ((0, preact_1.h)("div", null,
|
|
67
|
+
(0, preact_1.h)(readme_md_1.default, null),
|
|
68
|
+
(0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
decorators: [
|
|
72
|
+
function (Story) { return ((0, preact_1.h)("div", { style: { maxWidth: '250px' } },
|
|
73
|
+
(0, preact_1.h)(Story, null))); },
|
|
74
|
+
],
|
|
75
|
+
argTypes: __assign({ controller: {
|
|
76
|
+
description: 'Recommendation Controller reference',
|
|
77
|
+
type: { required: true },
|
|
78
|
+
table: {
|
|
79
|
+
type: {
|
|
80
|
+
summary: 'Controller',
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
control: { type: 'none' },
|
|
84
|
+
}, result: {
|
|
85
|
+
description: 'Result store Product reference',
|
|
86
|
+
type: { required: true },
|
|
87
|
+
table: {
|
|
88
|
+
type: {
|
|
89
|
+
summary: 'result store Product object',
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
control: { type: 'none' },
|
|
93
|
+
} }, utilities_1.componentArgs),
|
|
94
|
+
};
|
|
95
|
+
var snapInstance = snapify_1.Snapify.recommendation({ id: 'Recommendation', tag: 'trending', globals: { siteId: '8uyt2m' } });
|
|
96
|
+
var Default = function (props, _a) {
|
|
97
|
+
var _b, _c;
|
|
98
|
+
var controller = _a.loaded.controller;
|
|
99
|
+
return ((0, preact_1.h)(RecommendationResultTracker_1.RecommendationResultTracker, __assign({}, props, { controller: controller, result: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results[0] }),
|
|
100
|
+
(0, preact_1.h)(Result_1.Result, { result: (_c = controller === null || controller === void 0 ? void 0 : controller.store) === null || _c === void 0 ? void 0 : _c.results[0] })));
|
|
101
|
+
};
|
|
102
|
+
exports.Default = Default;
|
|
103
|
+
exports.Default.loaders = [
|
|
104
|
+
function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
105
|
+
return __generator(this, function (_a) {
|
|
106
|
+
switch (_a.label) {
|
|
107
|
+
case 0: return [4 /*yield*/, snapInstance.search()];
|
|
108
|
+
case 1:
|
|
109
|
+
_a.sent();
|
|
110
|
+
return [2 /*return*/, {
|
|
111
|
+
controller: snapInstance,
|
|
112
|
+
}];
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
}); },
|
|
116
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ResultTracker/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./RecommendationResultTracker"), exports);
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ export * from './components/Atoms/Merchandising';
|
|
|
10
10
|
export * from './components/Atoms/Overlay';
|
|
11
11
|
export * from './components/Atoms/Price';
|
|
12
12
|
export * from './components/Atoms/Skeleton';
|
|
13
|
+
export * from './components/Trackers/Recommendation/ResultTracker';
|
|
14
|
+
export * from './components/Trackers/Recommendation/ProfileTracker';
|
|
13
15
|
export * from './components/Molecules/Carousel';
|
|
14
16
|
export * from './components/Molecules/Checkbox';
|
|
15
17
|
export * from './components/Molecules/ErrorHandler';
|
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oDAAoD,CAAC;AACnE,cAAc,qDAAqD,CAAC;AAGpE,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,yCAAyC,CAAC;AACxD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAG/C,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -27,6 +27,8 @@ __exportStar(require("./components/Atoms/Merchandising"), exports);
|
|
|
27
27
|
__exportStar(require("./components/Atoms/Overlay"), exports);
|
|
28
28
|
__exportStar(require("./components/Atoms/Price"), exports);
|
|
29
29
|
__exportStar(require("./components/Atoms/Skeleton"), exports);
|
|
30
|
+
__exportStar(require("./components/Trackers/Recommendation/ResultTracker"), exports);
|
|
31
|
+
__exportStar(require("./components/Trackers/Recommendation/ProfileTracker"), exports);
|
|
30
32
|
// MOLECULES
|
|
31
33
|
__exportStar(require("./components/Molecules/Carousel"), exports);
|
|
32
34
|
__exportStar(require("./components/Molecules/Checkbox"), exports);
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import SwiperCore from 'swiper/core';
|
|
3
|
+
import { SwiperOptions } from 'swiper';
|
|
3
4
|
import { ComponentProps, BreakpointsProps } from '../../../types';
|
|
4
5
|
export declare const defaultCarouselBreakpoints: {
|
|
5
6
|
0: {
|
|
@@ -45,7 +46,7 @@ export interface CarouselProps extends ComponentProps {
|
|
|
45
46
|
hideButtons?: boolean;
|
|
46
47
|
loop?: boolean;
|
|
47
48
|
vertical?: boolean;
|
|
48
|
-
pagination?: boolean;
|
|
49
|
+
pagination?: boolean | SwiperOptions['pagination'];
|
|
49
50
|
autoAdjustSlides?: boolean;
|
|
50
51
|
onClick?: (swiper: SwiperCore, e: MouseEvent | TouchEvent | PointerEvent) => void;
|
|
51
52
|
onNextButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAAsC,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";AAQA,OAAO,UAAsC,MAAM,aAAa,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AA8H9E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BtC,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,gBAAyB,aAAa,KAAG,WAAW;;CA+JvE,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IAClF,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;CACxB"}
|
|
@@ -192,7 +192,8 @@ export const Carousel = observer((properties) => {
|
|
|
192
192
|
theme,
|
|
193
193
|
};
|
|
194
194
|
}
|
|
195
|
-
const { children, breakpoints, loop,
|
|
195
|
+
const { children, breakpoints, loop, nextButton, prevButton, hideButtons, vertical, autoAdjustSlides, onInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style, modules, className, ...additionalProps } = props;
|
|
196
|
+
let pagination = props.pagination;
|
|
196
197
|
const subProps = {
|
|
197
198
|
icon: {
|
|
198
199
|
// default props
|
|
@@ -221,6 +222,19 @@ export const Carousel = observer((properties) => {
|
|
|
221
222
|
else if (style) {
|
|
222
223
|
styling.css = [style];
|
|
223
224
|
}
|
|
225
|
+
if (pagination) {
|
|
226
|
+
if (typeof pagination == 'object') {
|
|
227
|
+
pagination = {
|
|
228
|
+
clickable: true,
|
|
229
|
+
...pagination,
|
|
230
|
+
};
|
|
231
|
+
}
|
|
232
|
+
else {
|
|
233
|
+
pagination = {
|
|
234
|
+
clickable: true,
|
|
235
|
+
};
|
|
236
|
+
}
|
|
237
|
+
}
|
|
224
238
|
return children?.length ? (jsx(CacheProvider, null,
|
|
225
239
|
jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className) },
|
|
226
240
|
jsx("div", { className: classnames('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }) },
|
|
@@ -235,7 +249,7 @@ export const Carousel = observer((properties) => {
|
|
|
235
249
|
}
|
|
236
250
|
}, onClick: (swiper, e) => {
|
|
237
251
|
onClick && onClick(swiper, e);
|
|
238
|
-
}, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, ...additionalProps, ...displaySettings, pagination: pagination
|
|
252
|
+
}, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, ...additionalProps, ...displaySettings, pagination: pagination }, children.map((child) => {
|
|
239
253
|
return jsx(SwiperSlide, null, child);
|
|
240
254
|
})),
|
|
241
255
|
jsx("div", { className: classnames('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }) },
|
|
@@ -35,14 +35,14 @@ export default {
|
|
|
35
35
|
},
|
|
36
36
|
pagination: {
|
|
37
37
|
defaultValue: false,
|
|
38
|
-
description: '
|
|
38
|
+
description: 'Configuration for pagination dots',
|
|
39
39
|
table: {
|
|
40
40
|
type: {
|
|
41
|
-
summary: 'boolean',
|
|
41
|
+
summary: 'boolean | SwiperOptions.pagination',
|
|
42
42
|
},
|
|
43
43
|
defaultValue: { summary: false },
|
|
44
44
|
},
|
|
45
|
-
control: { type: 'boolean' },
|
|
45
|
+
control: { type: 'boolean | SwiperOptions.pagination' },
|
|
46
46
|
},
|
|
47
47
|
vertical: {
|
|
48
48
|
defaultValue: false,
|
|
@@ -32,7 +32,7 @@ export interface AutocompleteProps extends ComponentProps {
|
|
|
32
32
|
linkSlot?: JSX.Element;
|
|
33
33
|
breakpoints?: BreakpointsProps;
|
|
34
34
|
width?: string;
|
|
35
|
-
onFacetOptionClick?: (e: React.MouseEvent<
|
|
36
|
-
onTermClick?: (e: React.MouseEvent<
|
|
35
|
+
onFacetOptionClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
|
|
36
|
+
onTermClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
|
|
37
37
|
}
|
|
38
38
|
//# sourceMappingURL=Autocomplete.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;
|
|
1
|
+
{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":";AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAS5E,OAAO,EAAE,cAAc,EAAgB,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAqJ5F,eAAO,MAAM,YAAY,gBAAyB,iBAAiB,KAAG,WAAW;;CAqd/E,CAAC;AAoCH,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACxD,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE"}
|
|
@@ -183,6 +183,16 @@ export const Autocomplete = observer((properties) => {
|
|
|
183
183
|
clearTimeout(delayTimeout);
|
|
184
184
|
},
|
|
185
185
|
};
|
|
186
|
+
const facetClickEvent = (e) => {
|
|
187
|
+
properties.onFacetOptionClick && properties.onFacetOptionClick(e);
|
|
188
|
+
// remove focus from input (close the autocomplete)
|
|
189
|
+
controller?.setFocused && controller?.setFocused();
|
|
190
|
+
};
|
|
191
|
+
const termClickEvent = (e) => {
|
|
192
|
+
properties.onTermClick && properties.onTermClick(e);
|
|
193
|
+
// remove focus from input (close the autocomplete)
|
|
194
|
+
controller?.setFocused && controller?.setFocused();
|
|
195
|
+
};
|
|
186
196
|
const themeOverride = {
|
|
187
197
|
components: {
|
|
188
198
|
facet: {
|
|
@@ -194,21 +204,21 @@ export const Autocomplete = observer((properties) => {
|
|
|
194
204
|
},
|
|
195
205
|
facetGridOptions: {
|
|
196
206
|
columns: 3,
|
|
197
|
-
onClick:
|
|
207
|
+
onClick: facetClickEvent,
|
|
198
208
|
},
|
|
199
209
|
facetHierarchyOptions: {
|
|
200
210
|
hideCount: true,
|
|
201
|
-
onClick:
|
|
211
|
+
onClick: facetClickEvent,
|
|
202
212
|
},
|
|
203
213
|
facetListOptions: {
|
|
204
214
|
hideCheckbox: true,
|
|
205
215
|
hideCount: true,
|
|
206
|
-
onClick:
|
|
216
|
+
onClick: facetClickEvent,
|
|
207
217
|
},
|
|
208
218
|
facetPaletteOptions: {
|
|
209
219
|
hideLabel: true,
|
|
210
220
|
columns: 3,
|
|
211
|
-
onClick:
|
|
221
|
+
onClick: facetClickEvent,
|
|
212
222
|
},
|
|
213
223
|
result: {
|
|
214
224
|
hideBadge: true,
|
|
@@ -314,7 +324,7 @@ export const Autocomplete = observer((properties) => {
|
|
|
314
324
|
showHistory = true;
|
|
315
325
|
}
|
|
316
326
|
const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== FacetDisplay.SLIDER) : [];
|
|
317
|
-
const onlyTerms = trending?.length && !loaded;
|
|
327
|
+
const onlyTerms = (trending?.length || history.length) && !loaded;
|
|
318
328
|
// results logic
|
|
319
329
|
let showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string);
|
|
320
330
|
const trendingActive = trending?.filter((term) => term.active).pop();
|
|
@@ -363,21 +373,21 @@ export const Autocomplete = observer((properties) => {
|
|
|
363
373
|
jsx("div", { className: "ss__autocomplete__terms__options" }, terms.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
|
|
364
374
|
'ss__autocomplete__terms__option--active': term.active,
|
|
365
375
|
}) },
|
|
366
|
-
jsx("a", { onClick: (e) =>
|
|
376
|
+
jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
|
|
367
377
|
showTrending && !hideTrending ? (jsx("div", { className: "ss__autocomplete__terms__trending" },
|
|
368
378
|
trendingTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending" },
|
|
369
379
|
jsx("h5", null, trendingTitle))) : null,
|
|
370
380
|
jsx("div", { className: "ss__autocomplete__terms__options" }, trending.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
|
|
371
381
|
'ss__autocomplete__terms__option--active': term.active,
|
|
372
382
|
}) },
|
|
373
|
-
jsx("a", { onClick: (e) =>
|
|
383
|
+
jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null,
|
|
374
384
|
showHistory && !hideHistory ? (jsx("div", { className: "ss__autocomplete__terms__history" },
|
|
375
385
|
historyTitle ? (jsx("div", { className: "ss__autocomplete__title ss__autocomplete__title--history" },
|
|
376
386
|
jsx("h5", null, historyTitle))) : null,
|
|
377
387
|
jsx("div", { className: "ss__autocomplete__terms__options" }, history.map((term) => (jsx("div", { className: classnames('ss__autocomplete__terms__option', {
|
|
378
388
|
'ss__autocomplete__terms__option--active': term.active,
|
|
379
389
|
}) },
|
|
380
|
-
jsx("a", { onClick: (e) =>
|
|
390
|
+
jsx("a", { onClick: (e) => termClickEvent(e), href: term.url.href, ...valueProps, onFocus: () => term.preview() }, emIfy(term.value, state.input || '')))))))) : null)))),
|
|
381
391
|
!hideFacets &&
|
|
382
392
|
(facetsSlot ? (jsx("div", { className: "ss__autocomplete__facets" }, cloneWithProps(facetsSlot, { facets: facetsToShow, merchandising, facetsTitle, hideBanners, controller, valueProps }))) : (facetsToShow.length > 0 && (jsx(Fragment, null,
|
|
383
393
|
facetsTitle && vertical ? (jsx("div", { className: classnames('ss__autocomplete__title', 'ss__autocomplete__title--facets') },
|
|
@@ -402,7 +412,7 @@ export const Autocomplete = observer((properties) => {
|
|
|
402
412
|
jsx("p", null, "Please try another search."))))),
|
|
403
413
|
!hideBanners ? jsx(Banner, { ...subProps.banner, content: merchandising.content, type: ContentType.FOOTER }) : null,
|
|
404
414
|
!hideLink ? (linkSlot ? (cloneWithProps(linkSlot, { search, results, pagination, filters, controller })) : search?.query?.string && results.length > 0 ? (jsx("div", { className: "ss__autocomplete__content__info" },
|
|
405
|
-
jsx("a", { href: state.url.href },
|
|
415
|
+
jsx("a", { href: state.url.href, onClick: () => controller?.setFocused && controller.setFocused() },
|
|
406
416
|
"See ",
|
|
407
417
|
pagination.totalResults,
|
|
408
418
|
" ",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMxD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAW,MAAM,+BAA+B,CAAC;AAMhF,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAe9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CA+HnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { Fragment } from 'preact';
|
|
3
|
-
import { useState, useRef } from 'preact/hooks';
|
|
4
3
|
import { jsx, css } from '@emotion/react';
|
|
5
4
|
import classnames from 'classnames';
|
|
6
5
|
import { observer } from 'mobx-react-lite';
|
|
@@ -9,8 +8,9 @@ import { Carousel, defaultCarouselBreakpoints, defaultVerticalCarouselBreakpoint
|
|
|
9
8
|
import { Result } from '../../Molecules/Result';
|
|
10
9
|
import { defined } from '../../../utilities';
|
|
11
10
|
import { useTheme, CacheProvider } from '../../../providers';
|
|
12
|
-
import { useIntersection } from '../../../hooks';
|
|
13
11
|
import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
|
|
12
|
+
import { RecommendationProfileTracker } from '../../Trackers/Recommendation/ProfileTracker';
|
|
13
|
+
import { RecommendationResultTracker } from '../../Trackers/Recommendation/ResultTracker';
|
|
14
14
|
const CSS = {
|
|
15
15
|
recommendation: ({ vertical }) => css({
|
|
16
16
|
height: vertical ? '100%' : undefined,
|
|
@@ -79,31 +79,6 @@ export const Recommendation = observer((properties) => {
|
|
|
79
79
|
theme: props?.theme,
|
|
80
80
|
},
|
|
81
81
|
};
|
|
82
|
-
const rootComponentRef = useRef(null);
|
|
83
|
-
const [initialIndexes, setInitialIndexes] = useState([0, 0]);
|
|
84
|
-
const inViewport = useIntersection(rootComponentRef, '0px', true);
|
|
85
|
-
const sendProductImpression = (index, count) => {
|
|
86
|
-
if (!inViewport)
|
|
87
|
-
return;
|
|
88
|
-
let resultLoopCount = [index, index + count];
|
|
89
|
-
let resultLoopOverCount;
|
|
90
|
-
if (index + count > resultsToRender.length - 1) {
|
|
91
|
-
resultLoopCount = [index];
|
|
92
|
-
resultLoopOverCount = [0, index + count - resultsToRender.length];
|
|
93
|
-
}
|
|
94
|
-
let resultsImpressions = resultsToRender.slice(...resultLoopCount);
|
|
95
|
-
if (resultLoopOverCount) {
|
|
96
|
-
resultsImpressions = resultsImpressions.concat(resultsToRender.slice(...resultLoopOverCount));
|
|
97
|
-
}
|
|
98
|
-
resultsImpressions.map((result) => {
|
|
99
|
-
controller.track.product.impression(result);
|
|
100
|
-
});
|
|
101
|
-
};
|
|
102
|
-
if (inViewport) {
|
|
103
|
-
controller.track.impression();
|
|
104
|
-
sendProductImpression(initialIndexes[0], initialIndexes[1]);
|
|
105
|
-
}
|
|
106
|
-
(children || resultsToRender.length) && controller?.track?.render();
|
|
107
82
|
const styling = {};
|
|
108
83
|
if (!disableStyles) {
|
|
109
84
|
styling.css = [CSS.recommendation({ vertical }), style];
|
|
@@ -112,24 +87,11 @@ export const Recommendation = observer((properties) => {
|
|
|
112
87
|
styling.css = [style];
|
|
113
88
|
}
|
|
114
89
|
return children || resultsToRender?.length ? (jsx(CacheProvider, null,
|
|
115
|
-
jsx("div", {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
sendProductImpression(swiper.realIndex, swiper.passedParams.slidesPerView);
|
|
123
|
-
}, onSlideChange: (swiper) => {
|
|
124
|
-
//@ts-ignore
|
|
125
|
-
sendProductImpression(swiper.realIndex, swiper.passedParams.slidesPerView);
|
|
126
|
-
}, prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, onNextButtonClick: (e) => controller.track.click(e), onPrevButtonClick: (e) => controller.track.click(e), onClick: (swiper, e) => {
|
|
127
|
-
const clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
|
|
128
|
-
controller.track.click(e);
|
|
129
|
-
if (!Number.isNaN(clickedIndex)) {
|
|
130
|
-
controller.track.product.click(e, resultsToRender[clickedIndex]);
|
|
131
|
-
}
|
|
132
|
-
}, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
|
|
133
|
-
? children.map((child) => child)
|
|
134
|
-
: resultsToRender.map((result) => jsx(Result, { ...subProps.result, controller: controller, result: result })))))) : (jsx(Fragment, null));
|
|
90
|
+
jsx("div", { ...styling, className: classnames('ss__recommendation', className) },
|
|
91
|
+
jsx(RecommendationProfileTracker, { controller: controller },
|
|
92
|
+
title && jsx("h3", { className: "ss__recommendation__title" }, title),
|
|
93
|
+
jsx(Carousel, { prevButton: prevButton, nextButton: nextButton, hideButtons: hideButtons, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, Array.isArray(children) && children.length
|
|
94
|
+
? children.map((child, idx) => (jsx(RecommendationResultTracker, { controller: controller, result: resultsToRender[idx] }, child)))
|
|
95
|
+
: resultsToRender.map((result) => (jsx(RecommendationResultTracker, { controller: controller, result: result },
|
|
96
|
+
jsx(Result, { ...subProps.result, controller: controller, result: result }))))))))) : (jsx(Fragment, null));
|
|
135
97
|
});
|
package/dist/esm/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
2
|
+
import { ComponentProps } from '../../../../types';
|
|
3
|
+
export declare const RecommendationProfileTracker: ((properties: RecommendationProfileTrackerProps) => JSX.Element) & {
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
export interface RecommendationProfileTrackerProps extends ComponentProps {
|
|
7
|
+
children: any;
|
|
8
|
+
controller: RecommendationController;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=RecommendationProfileTracker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RecommendationProfileTracker.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAc,MAAM,mBAAmB,CAAC;AAO/D,eAAO,MAAM,4BAA4B,gBAAyB,iCAAiC,KAAG,WAAW;;CA+C/G,CAAC;AAEH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACxE,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,wBAAwB,CAAC;CACrC"}
|