@nosto/search-js 2.8.3 → 2.9.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/dist/preact/hooks.cjs.js +1 -1
- package/dist/preact/hooks.d.ts +1 -0
- package/dist/preact/hooks.es.js +231 -185
- package/dist/preact/src/hooks/types.d.ts +29 -0
- package/dist/preact/src/hooks/useSwatches/aggregateSwatches.d.ts +3 -0
- package/dist/preact/src/hooks/useSwatches/applySwatchSelectionStates.d.ts +2 -0
- package/dist/preact/src/hooks/useSwatches/useSwatches.d.ts +44 -0
- package/package.json +1 -1
package/dist/preact/hooks.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../useLoadMore-KhLxsBdQ.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../useLoadMore-KhLxsBdQ.cjs"),R=require("../logger-BcHMZObS.cjs"),S=require("preact/hooks"),w=require("../index.es-DlUp67LT.cjs"),b=require("../parseNumber-FsZ8w61u.cjs");function P(e){const r=m.useNostoAppState(t=>t.response);return e&&Array.isArray(e)||e&&R.isPlainObject(e)?e:r}function q(e){var u;const r=((u=e.data)==null?void 0:u.filter(c=>c.selected).length)??0,[t,s]=S.useState(r>0),{toggleProductFilter:o}=m.useActions();return{active:t,selectedFiltersCount:r,toggleActive:()=>{s(!t)},toggleProductFilter:o}}function z(){const{loading:e,facets:r}=m.useNostoAppState(t=>{var s,o;return{loading:t.loading,facets:((o=(s=t.response)==null?void 0:s.products)==null?void 0:o.facets)??[]}});return{loading:e,facets:r}}function k(e,r){const t=r-e;return!isNaN(t)&&t>0?new Array(r-e).fill(void 0).map((s,o)=>o+e):[]}function x(e){const{query:r,products:t}=m.useNostoAppState(s=>({query:s.query,products:s.response.products}));return S.useMemo(()=>{var F;if(!t)return{totalPages:0,resultsFrom:0,resultsTo:0,pages:[]};const s=((F=r.products)==null?void 0:F.from)??0,o=(e==null?void 0:e.width)??1/0,i=Math.max(Math.floor(o-1)/2,1),u=t.size>0?Math.floor(s/t.size)+1:1,c=t.size>0?Math.ceil(t.total/t.size):0,g=y=>y>=u-i&&y<=u+i,n=s+1,l=Math.min(s+t.total,t.total),a={from:s,page:u,current:!0},f=y=>({from:(y-1)*t.size,page:y,current:y===u}),h=u>1?f(u-1):void 0,d=u<c?f(u+1):void 0,A=i===1/0||u-i-1>1?f(1):void 0,p=i===1/0||u+i+1<c?f(c):void 0,v=k(1,c+1).filter(g).map(f);return{totalPages:c,resultsFrom:n,resultsTo:l,current:a,prev:h,next:d,first:A,last:p,pages:v}},[r,t,e==null?void 0:e.width])}function O(){const[e,r]=S.useState([]),[t,s]=S.useState([]);return S.useEffect(()=>{w.s(async o=>{const{products:i,segments:u}=await o.getSearchSessionParams();r(u??[]),s((i==null?void 0:i.personalizationBoost)??[])})},[]),{segments:e,boost:t}}function j(){const{facets:e}=m.useNostoAppState(n=>{var l;return{facets:((l=n.response.products)==null?void 0:l.facets)??[]}}),{replaceFilter:r,toggleProductFilter:t}=m.useActions(),s=S.useCallback(n=>{const l=e==null?void 0:e.find(a=>a.type==="stats"&&a.field===n);if(l&&"min"in l&&"max"in l)return l},[e]),o=S.useCallback(n=>{var l;return((l=e==null?void 0:e.find(a=>a.field===n))==null?void 0:l.name)??n},[e]),i=S.useCallback(n=>"field"in n&&(n.value instanceof Array||n.range instanceof Array),[]),u=S.useCallback(n=>{var l;return{...n,range:(l=n.range)==null?void 0:l.map(a=>({gt:a.gt?Number(a.gt):a.gt,gte:a.gte?Number(a.gte):a.gte,lt:a.lt?Number(a.lt):a.lt,lte:a.lte?Number(a.lte):a.lte}))}},[]),c=S.useCallback(n=>(n.value??[]).map(a=>({value:a,field:n.field,name:o(n.field),filter:u(n),remove:()=>{t(n.field,a,!1)}})),[u,o,t]),g=S.useCallback(n=>(n.range??[]).map(a=>{var d,A;const f=a.gte??a.gt??((d=s(n.field))==null?void 0:d.min),h=a.lte??a.lt??((A=s(n.field))==null?void 0:A.max);if(f!==void 0&&h!==void 0)return{value:`${f} - ${h}`,field:n.field,name:o(n.field),filter:u(n),remove:()=>{r(n.field,void 0)}}}).filter(Boolean),[u,s,o,r]);return{selectFilters:i,toValueFilter:c,toRangeFilter:g}}function M(){const{filter:e}=m.useNostoAppState(c=>{var g;return{filter:((g=c.query.products)==null?void 0:g.filter)??[]}}),{updateSearch:r}=m.useActions(),{selectFilters:t,toValueFilter:s,toRangeFilter:o}=j(),i=S.useMemo(()=>e?e.filter(t).flatMap(c=>"value"in c?s(c):"range"in c?o(c):[]).filter(Boolean):[],[e,t,o,s]),u=S.useCallback(()=>{r({products:{filter:[]}})},[r]);return{filters:i,removeAll:u}}function C(e){var a,f,h;const{replaceFilter:r}=m.useActions(),{query:t,products:s}=m.useNostoAppState(d=>({query:d.query,products:d.response.products})),o=(a=s==null?void 0:s.facets)==null?void 0:a.find(d=>d.id===e);if(!o)return{min:0,max:0,range:[0,0],updateRange:()=>{}};const i=(h=(f=t.products)==null?void 0:f.filter)==null?void 0:h.find(d=>d.field===o.field),u=i!=null&&i.range?i.range[0]:void 0,c=typeof u=="object"&&("gte"in u||"lte"in u)?[b.parseNumber(u.gte),b.parseNumber(u.lte)]:[void 0,void 0],g="min"in o?Math.floor(o.min):0,n="max"in o?Math.ceil(o.max):0,l=([d,A])=>{const p=d!==void 0?Math.floor(d):void 0,v=A!==void 0?Math.ceil(A):void 0,F=p!==void 0,y=v!==void 0;(g===p||!F)&&(n===v||!y)?r(o.field,void 0):(g===p||!F)&&y?r(o.field,{lte:v.toString()}):(n===v||!y)&&F?r(o.field,{gte:p.toString()}):F&&y&&r(o.field,{gte:p.toString(),lte:v.toString()})};return{min:g,max:n,range:[c[0]??g,c[1]??n],updateRange:l}}function L(e,r){const{min:t,max:s,range:o,updateRange:i}=C(e),{filters:u}=M(),c=S.useMemo(()=>{var A;const a=u.find(p=>{var v;return(v=p==null?void 0:p.filter)==null?void 0:v.range});let f=null;if(a){const p=(A=a.filter.range)==null?void 0:A[0];f=[b.parseNumber(p==null?void 0:p.gte),b.parseNumber(p==null?void 0:p.lte)]}const h=[];let d=Math.floor(t/r)*r;for(;d<s;){const p=d+r,v=f&&f[0]===d&&f[1]===p;h.push({min:d,max:p,selected:v}),d=p}return h},[u,t,s,r]),g=a=>{i([a,o[1]])},n=a=>{i([o[0],a])},l=t!==o[0]||s!==o[1];return{min:t,max:s,range:o,updateRange:i,ranges:c,handleMinChange:g,handleMaxChange:n,isSelected:l}}function T(){const{products:e,keywords:r}=m.useNostoAppState(t=>t.response);return{products:e??{hits:[],total:0},keywords:r??{hits:[],total:0}}}function V(){const e=m.useNostoAppState(t=>{var s;return(s=t.query.products)==null?void 0:s.filter});return S.useMemo(()=>e?e.reduce((t,s)=>t+(Array.isArray(s.value)?s.value.length:1),0):0,[e])}function N(e){return e&&!Number.isNaN(e)?e:0}function B(e,r){const{from:t,size:s,total:o}=m.useNostoAppState(n=>{var l,a,f,h,d;return{from:N(((l=n.query.products)==null?void 0:l.from)??0),size:N(((f=(a=n.response)==null?void 0:a.products)==null?void 0:f.size)??0),total:N(((d=(h=n.response)==null?void 0:h.products)==null?void 0:d.total)??0)}}),{updateSearch:i}=m.useActions(),u=t+s,c=[...e].reverse().filter(n=>n+r<o);return{from:t,to:u,total:o,size:s,sizeOptions:c,handleSizeChange:n=>{i({products:{size:b.parseNumber(n)}})}}}function D(e,r){return e.length!==r.length?!1:e.every(t=>r.find(s=>t.field===s.field&&t.order===s.order))}function E(e){var i,u;const r=m.useNostoAppState(c=>c.query),{updateSearch:t}=m.useActions();return{activeSort:((i=e.find(c=>{var g;return D(c.value.sort,((g=r.products)==null?void 0:g.sort)||[])}))==null?void 0:i.id)??((u=e[0])==null?void 0:u.id),setSort:c=>{const g=e.find(n=>n.id===c);g&&t({products:{sort:g.value.sort}})}}}function I(e,r){if(!e.length||!r.length)return[];const t=r.reduce((s,o)=>(s[o]={},s),{});return e.forEach(s=>{var o;(o=s.customFields)==null||o.forEach(({key:i,value:u})=>{const c=i.toLowerCase();r.includes(c)&&(t[c][u]=t[c][u]||[],t[c][u].push(s))})}),Object.entries(t).map(([s,o])=>({field:s,options:Object.entries(o).map(([i,u])=>({value:i,skus:u,unavailable:!1,selected:!1}))}))}function _(e,r){return e.length?e.map(({field:t,options:s})=>({field:t,options:s.map(o=>{var c;const i=!((c=o.skus)!=null&&c.some(g=>Object.entries(r).every(([n,l])=>{var f,h;return n===t?!0:((h=(f=g.customFields)==null?void 0:f.find(d=>d.key.toLowerCase()===n))==null?void 0:h.value)===l}))),u=r[t]===o.value;return{...o,unavailable:i,selected:u}})})):[]}function $(e=[],r=[]){const[t,s]=S.useState({}),o=S.useMemo(()=>_(I(e,r),t),[e,r,t]),i=S.useCallback((u,c)=>{s(g=>{const n={...g};return n[u]===c?delete n[u]:n[u]=c,n})},[]);return{swatches:o,toggleOption:i}}exports.useActions=m.useActions;exports.useLoadMore=m.useLoadMore;exports.useNostoAppState=m.useNostoAppState;exports.useDecoratedSearchResults=P;exports.useFacet=q;exports.useFacets=z;exports.usePagination=x;exports.usePersonalization=O;exports.useProductFilters=M;exports.useRange=C;exports.useRangeSelector=L;exports.useResponse=T;exports.useSelectedFiltersCount=V;exports.useSizeOptions=B;exports.useSort=E;exports.useSwatches=$;
|
package/dist/preact/hooks.d.ts
CHANGED
|
@@ -14,3 +14,4 @@ export { useResponse } from './src/hooks/useResponse';
|
|
|
14
14
|
export { useSelectedFiltersCount } from './src/hooks/useSelectedFiltersCount';
|
|
15
15
|
export { useSizeOptions } from './src/hooks/useSizeOptions';
|
|
16
16
|
export { useSort } from './src/hooks/useSort/useSort';
|
|
17
|
+
export { useSwatches } from './src/hooks/useSwatches/useSwatches';
|
package/dist/preact/hooks.es.js
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import { a as
|
|
2
|
-
import { b as
|
|
3
|
-
import { a as
|
|
4
|
-
import { useState as
|
|
5
|
-
import { s as
|
|
6
|
-
import { p as
|
|
7
|
-
function
|
|
8
|
-
const
|
|
9
|
-
return e && Array.isArray(e) || e &&
|
|
1
|
+
import { a as S, c as w } from "../useLoadMore-CdPqdFnK.js";
|
|
2
|
+
import { b as te } from "../useLoadMore-CdPqdFnK.js";
|
|
3
|
+
import { a as A } from "../logger-DVwg4Wor.js";
|
|
4
|
+
import { useState as x, useMemo as R, useEffect as P, useCallback as F } from "preact/hooks";
|
|
5
|
+
import { s as N } from "../index.es-B8mbAxS4.js";
|
|
6
|
+
import { p as M } from "../parseNumber-QA48nJLp.js";
|
|
7
|
+
function $(e) {
|
|
8
|
+
const s = S((t) => t.response);
|
|
9
|
+
return e && Array.isArray(e) || e && A(e) ? e : s;
|
|
10
10
|
}
|
|
11
|
-
function
|
|
11
|
+
function U(e) {
|
|
12
12
|
var c;
|
|
13
|
-
const
|
|
13
|
+
const s = ((c = e.data) == null ? void 0 : c.filter((a) => a.selected).length) ?? 0, [t, n] = x(s > 0), { toggleProductFilter: o } = w();
|
|
14
14
|
return {
|
|
15
15
|
/** Active value */
|
|
16
16
|
active: t,
|
|
17
17
|
/** Selected filters count */
|
|
18
|
-
selectedFiltersCount:
|
|
18
|
+
selectedFiltersCount: s,
|
|
19
19
|
/** Toggle active function */
|
|
20
20
|
toggleActive: () => {
|
|
21
|
-
|
|
21
|
+
n(!t);
|
|
22
22
|
},
|
|
23
23
|
/** Toggle product filter function */
|
|
24
|
-
toggleProductFilter:
|
|
24
|
+
toggleProductFilter: o
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
|
-
function
|
|
28
|
-
const { loading: e, facets:
|
|
29
|
-
var
|
|
27
|
+
function _() {
|
|
28
|
+
const { loading: e, facets: s } = S((t) => {
|
|
29
|
+
var n, o;
|
|
30
30
|
return {
|
|
31
31
|
loading: t.loading,
|
|
32
|
-
facets: ((
|
|
32
|
+
facets: ((o = (n = t.response) == null ? void 0 : n.products) == null ? void 0 : o.facets) ?? []
|
|
33
33
|
};
|
|
34
34
|
});
|
|
35
35
|
return {
|
|
36
36
|
/** Loading state */
|
|
37
37
|
loading: e,
|
|
38
38
|
/** Array of facets*/
|
|
39
|
-
facets:
|
|
39
|
+
facets: s
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
|
-
function
|
|
43
|
-
const t =
|
|
44
|
-
return !isNaN(t) && t > 0 ? new Array(
|
|
42
|
+
function C(e, s) {
|
|
43
|
+
const t = s - e;
|
|
44
|
+
return !isNaN(t) && t > 0 ? new Array(s - e).fill(void 0).map((n, o) => o + e) : [];
|
|
45
45
|
}
|
|
46
|
-
function
|
|
47
|
-
const { query:
|
|
48
|
-
query:
|
|
49
|
-
products:
|
|
46
|
+
function G(e) {
|
|
47
|
+
const { query: s, products: t } = S((n) => ({
|
|
48
|
+
query: n.query,
|
|
49
|
+
products: n.response.products
|
|
50
50
|
}));
|
|
51
|
-
return
|
|
52
|
-
var
|
|
51
|
+
return R(() => {
|
|
52
|
+
var b;
|
|
53
53
|
if (!t)
|
|
54
54
|
return {
|
|
55
55
|
totalPages: 0,
|
|
@@ -57,131 +57,131 @@ function U(e) {
|
|
|
57
57
|
resultsTo: 0,
|
|
58
58
|
pages: []
|
|
59
59
|
};
|
|
60
|
-
const
|
|
61
|
-
from:
|
|
60
|
+
const n = ((b = s.products) == null ? void 0 : b.from) ?? 0, o = (e == null ? void 0 : e.width) ?? 1 / 0, u = Math.max(Math.floor(o - 1) / 2, 1), c = t.size > 0 ? Math.floor(n / t.size) + 1 : 1, a = t.size > 0 ? Math.ceil(t.total / t.size) : 0, f = (v) => v >= c - u && v <= c + u, r = n + 1, l = Math.min(n + t.total, t.total), i = {
|
|
61
|
+
from: n,
|
|
62
62
|
page: c,
|
|
63
63
|
current: !0
|
|
64
|
-
},
|
|
65
|
-
from: (
|
|
66
|
-
page:
|
|
67
|
-
current:
|
|
68
|
-
}), p = c > 1 ?
|
|
64
|
+
}, g = (v) => ({
|
|
65
|
+
from: (v - 1) * t.size,
|
|
66
|
+
page: v,
|
|
67
|
+
current: v === c
|
|
68
|
+
}), p = c > 1 ? g(c - 1) : void 0, d = c < a ? g(c + 1) : void 0, y = u === 1 / 0 || c - u - 1 > 1 ? g(1) : void 0, m = u === 1 / 0 || c + u + 1 < a ? g(a) : void 0, h = C(1, a + 1).filter(f).map(g);
|
|
69
69
|
return {
|
|
70
|
-
totalPages:
|
|
71
|
-
resultsFrom:
|
|
70
|
+
totalPages: a,
|
|
71
|
+
resultsFrom: r,
|
|
72
72
|
resultsTo: l,
|
|
73
|
-
current:
|
|
73
|
+
current: i,
|
|
74
74
|
prev: p,
|
|
75
75
|
next: d,
|
|
76
76
|
first: y,
|
|
77
|
-
last:
|
|
78
|
-
pages:
|
|
77
|
+
last: m,
|
|
78
|
+
pages: h
|
|
79
79
|
};
|
|
80
|
-
}, [
|
|
80
|
+
}, [s, t, e == null ? void 0 : e.width]);
|
|
81
81
|
}
|
|
82
|
-
function
|
|
83
|
-
const [e,
|
|
84
|
-
return
|
|
85
|
-
|
|
86
|
-
const { products:
|
|
87
|
-
|
|
82
|
+
function H() {
|
|
83
|
+
const [e, s] = x([]), [t, n] = x([]);
|
|
84
|
+
return P(() => {
|
|
85
|
+
N(async (o) => {
|
|
86
|
+
const { products: u, segments: c } = await o.getSearchSessionParams();
|
|
87
|
+
s(c ?? []), n((u == null ? void 0 : u.personalizationBoost) ?? []);
|
|
88
88
|
});
|
|
89
89
|
}, []), {
|
|
90
90
|
segments: e,
|
|
91
91
|
boost: t
|
|
92
92
|
};
|
|
93
93
|
}
|
|
94
|
-
function
|
|
95
|
-
const { facets: e } =
|
|
94
|
+
function q() {
|
|
95
|
+
const { facets: e } = S((r) => {
|
|
96
96
|
var l;
|
|
97
97
|
return {
|
|
98
|
-
facets: ((l =
|
|
98
|
+
facets: ((l = r.response.products) == null ? void 0 : l.facets) ?? []
|
|
99
99
|
};
|
|
100
|
-
}), { replaceFilter:
|
|
101
|
-
(
|
|
102
|
-
const l = e == null ? void 0 : e.find((
|
|
100
|
+
}), { replaceFilter: s, toggleProductFilter: t } = w(), n = F(
|
|
101
|
+
(r) => {
|
|
102
|
+
const l = e == null ? void 0 : e.find((i) => i.type === "stats" && i.field === r);
|
|
103
103
|
if (l && "min" in l && "max" in l)
|
|
104
104
|
return l;
|
|
105
105
|
},
|
|
106
106
|
[e]
|
|
107
|
-
),
|
|
108
|
-
(
|
|
107
|
+
), o = F(
|
|
108
|
+
(r) => {
|
|
109
109
|
var l;
|
|
110
|
-
return ((l = e == null ? void 0 : e.find((
|
|
110
|
+
return ((l = e == null ? void 0 : e.find((i) => i.field === r)) == null ? void 0 : l.name) ?? r;
|
|
111
111
|
},
|
|
112
112
|
[e]
|
|
113
|
-
),
|
|
113
|
+
), u = F((r) => "field" in r && (r.value instanceof Array || r.range instanceof Array), []), c = F((r) => {
|
|
114
114
|
var l;
|
|
115
115
|
return {
|
|
116
|
-
...
|
|
117
|
-
range: (l =
|
|
118
|
-
gt:
|
|
119
|
-
gte:
|
|
120
|
-
lt:
|
|
121
|
-
lte:
|
|
116
|
+
...r,
|
|
117
|
+
range: (l = r.range) == null ? void 0 : l.map((i) => ({
|
|
118
|
+
gt: i.gt ? Number(i.gt) : i.gt,
|
|
119
|
+
gte: i.gte ? Number(i.gte) : i.gte,
|
|
120
|
+
lt: i.lt ? Number(i.lt) : i.lt,
|
|
121
|
+
lte: i.lte ? Number(i.lte) : i.lte
|
|
122
122
|
}))
|
|
123
123
|
};
|
|
124
|
-
}, []),
|
|
125
|
-
(
|
|
126
|
-
value:
|
|
127
|
-
field:
|
|
128
|
-
name:
|
|
129
|
-
filter: c(
|
|
124
|
+
}, []), a = F(
|
|
125
|
+
(r) => (r.value ?? []).map((i) => ({
|
|
126
|
+
value: i,
|
|
127
|
+
field: r.field,
|
|
128
|
+
name: o(r.field),
|
|
129
|
+
filter: c(r),
|
|
130
130
|
remove: () => {
|
|
131
|
-
t(
|
|
131
|
+
t(r.field, i, !1);
|
|
132
132
|
}
|
|
133
133
|
})),
|
|
134
|
-
[c,
|
|
135
|
-
),
|
|
136
|
-
(
|
|
134
|
+
[c, o, t]
|
|
135
|
+
), f = F(
|
|
136
|
+
(r) => (r.range ?? []).map((i) => {
|
|
137
137
|
var d, y;
|
|
138
|
-
const
|
|
139
|
-
if (
|
|
138
|
+
const g = i.gte ?? i.gt ?? ((d = n(r.field)) == null ? void 0 : d.min), p = i.lte ?? i.lt ?? ((y = n(r.field)) == null ? void 0 : y.max);
|
|
139
|
+
if (g !== void 0 && p !== void 0)
|
|
140
140
|
return {
|
|
141
|
-
value: `${
|
|
142
|
-
field:
|
|
143
|
-
name:
|
|
144
|
-
filter: c(
|
|
141
|
+
value: `${g} - ${p}`,
|
|
142
|
+
field: r.field,
|
|
143
|
+
name: o(r.field),
|
|
144
|
+
filter: c(r),
|
|
145
145
|
remove: () => {
|
|
146
|
-
|
|
146
|
+
s(r.field, void 0);
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
149
|
}).filter(Boolean),
|
|
150
|
-
[c,
|
|
150
|
+
[c, n, o, s]
|
|
151
151
|
);
|
|
152
152
|
return {
|
|
153
|
-
selectFilters:
|
|
154
|
-
toValueFilter:
|
|
155
|
-
toRangeFilter:
|
|
153
|
+
selectFilters: u,
|
|
154
|
+
toValueFilter: a,
|
|
155
|
+
toRangeFilter: f
|
|
156
156
|
};
|
|
157
157
|
}
|
|
158
|
-
function
|
|
159
|
-
const { filter: e } =
|
|
160
|
-
var
|
|
158
|
+
function O() {
|
|
159
|
+
const { filter: e } = S((a) => {
|
|
160
|
+
var f;
|
|
161
161
|
return {
|
|
162
|
-
filter: ((
|
|
162
|
+
filter: ((f = a.query.products) == null ? void 0 : f.filter) ?? []
|
|
163
163
|
};
|
|
164
|
-
}), { updateSearch:
|
|
165
|
-
|
|
164
|
+
}), { updateSearch: s } = w(), { selectFilters: t, toValueFilter: n, toRangeFilter: o } = q(), u = R(() => e ? e.filter(t).flatMap((a) => "value" in a ? n(a) : "range" in a ? o(a) : []).filter(Boolean) : [], [e, t, o, n]), c = F(() => {
|
|
165
|
+
s({
|
|
166
166
|
products: {
|
|
167
167
|
filter: []
|
|
168
168
|
}
|
|
169
169
|
});
|
|
170
|
-
}, [
|
|
170
|
+
}, [s]);
|
|
171
171
|
return {
|
|
172
172
|
/** Selected filters array. */
|
|
173
|
-
filters:
|
|
173
|
+
filters: u,
|
|
174
174
|
/** Should remove all selected filters. */
|
|
175
175
|
removeAll: c
|
|
176
176
|
};
|
|
177
177
|
}
|
|
178
|
-
function
|
|
179
|
-
var
|
|
180
|
-
const { replaceFilter:
|
|
178
|
+
function j(e) {
|
|
179
|
+
var i, g, p;
|
|
180
|
+
const { replaceFilter: s } = w(), { query: t, products: n } = S((d) => ({
|
|
181
181
|
query: d.query,
|
|
182
182
|
products: d.response.products
|
|
183
|
-
})),
|
|
184
|
-
if (!
|
|
183
|
+
})), o = (i = n == null ? void 0 : n.facets) == null ? void 0 : i.find((d) => d.id === e);
|
|
184
|
+
if (!o)
|
|
185
185
|
return {
|
|
186
186
|
min: 0,
|
|
187
187
|
max: 0,
|
|
@@ -189,161 +189,207 @@ function T(e) {
|
|
|
189
189
|
updateRange: () => {
|
|
190
190
|
}
|
|
191
191
|
};
|
|
192
|
-
const
|
|
193
|
-
const
|
|
194
|
-
(
|
|
195
|
-
lte:
|
|
196
|
-
}) : (
|
|
197
|
-
gte:
|
|
198
|
-
}) :
|
|
199
|
-
gte:
|
|
200
|
-
lte:
|
|
192
|
+
const u = (p = (g = t.products) == null ? void 0 : g.filter) == null ? void 0 : p.find((d) => d.field === o.field), c = u != null && u.range ? u.range[0] : void 0, a = typeof c == "object" && ("gte" in c || "lte" in c) ? [M(c.gte), M(c.lte)] : [void 0, void 0], f = "min" in o ? Math.floor(o.min) : 0, r = "max" in o ? Math.ceil(o.max) : 0, l = ([d, y]) => {
|
|
193
|
+
const m = d !== void 0 ? Math.floor(d) : void 0, h = y !== void 0 ? Math.ceil(y) : void 0, b = m !== void 0, v = h !== void 0;
|
|
194
|
+
(f === m || !b) && (r === h || !v) ? s(o.field, void 0) : (f === m || !b) && v ? s(o.field, {
|
|
195
|
+
lte: h.toString()
|
|
196
|
+
}) : (r === h || !v) && b ? s(o.field, {
|
|
197
|
+
gte: m.toString()
|
|
198
|
+
}) : b && v && s(o.field, {
|
|
199
|
+
gte: m.toString(),
|
|
200
|
+
lte: h.toString()
|
|
201
201
|
});
|
|
202
202
|
};
|
|
203
203
|
return {
|
|
204
204
|
/** Min value */
|
|
205
|
-
min:
|
|
205
|
+
min: f,
|
|
206
206
|
/** Max value */
|
|
207
|
-
max:
|
|
207
|
+
max: r,
|
|
208
208
|
/** Range value */
|
|
209
|
-
range: [
|
|
209
|
+
range: [a[0] ?? f, a[1] ?? r],
|
|
210
210
|
/** Update range function */
|
|
211
211
|
updateRange: l
|
|
212
212
|
};
|
|
213
213
|
}
|
|
214
|
-
function
|
|
215
|
-
const { min: t, max:
|
|
214
|
+
function J(e, s) {
|
|
215
|
+
const { min: t, max: n, range: o, updateRange: u } = j(e), { filters: c } = O(), a = R(() => {
|
|
216
216
|
var y;
|
|
217
|
-
const
|
|
218
|
-
var
|
|
219
|
-
return (
|
|
217
|
+
const i = c.find((m) => {
|
|
218
|
+
var h;
|
|
219
|
+
return (h = m == null ? void 0 : m.filter) == null ? void 0 : h.range;
|
|
220
220
|
});
|
|
221
|
-
let
|
|
222
|
-
if (
|
|
223
|
-
const
|
|
224
|
-
|
|
221
|
+
let g = null;
|
|
222
|
+
if (i) {
|
|
223
|
+
const m = (y = i.filter.range) == null ? void 0 : y[0];
|
|
224
|
+
g = [M(m == null ? void 0 : m.gte), M(m == null ? void 0 : m.lte)];
|
|
225
225
|
}
|
|
226
226
|
const p = [];
|
|
227
|
-
let d = Math.floor(t /
|
|
228
|
-
for (; d <
|
|
229
|
-
const
|
|
227
|
+
let d = Math.floor(t / s) * s;
|
|
228
|
+
for (; d < n; ) {
|
|
229
|
+
const m = d + s, h = g && g[0] === d && g[1] === m;
|
|
230
230
|
p.push({
|
|
231
231
|
min: d,
|
|
232
|
-
max:
|
|
233
|
-
selected:
|
|
234
|
-
}), d =
|
|
232
|
+
max: m,
|
|
233
|
+
selected: h
|
|
234
|
+
}), d = m;
|
|
235
235
|
}
|
|
236
236
|
return p;
|
|
237
|
-
}, [c, t,
|
|
238
|
-
|
|
239
|
-
},
|
|
240
|
-
|
|
241
|
-
}, l = t !==
|
|
237
|
+
}, [c, t, n, s]), f = (i) => {
|
|
238
|
+
u([i, o[1]]);
|
|
239
|
+
}, r = (i) => {
|
|
240
|
+
u([o[0], i]);
|
|
241
|
+
}, l = t !== o[0] || n !== o[1];
|
|
242
242
|
return {
|
|
243
243
|
/** Minimum value */
|
|
244
244
|
min: t,
|
|
245
245
|
/** Maximum value */
|
|
246
|
-
max:
|
|
246
|
+
max: n,
|
|
247
247
|
/** Range value */
|
|
248
|
-
range:
|
|
248
|
+
range: o,
|
|
249
249
|
/** Update range function */
|
|
250
|
-
updateRange:
|
|
250
|
+
updateRange: u,
|
|
251
251
|
/** Ranges */
|
|
252
|
-
ranges:
|
|
252
|
+
ranges: a,
|
|
253
253
|
/** Handle min change */
|
|
254
|
-
handleMinChange:
|
|
254
|
+
handleMinChange: f,
|
|
255
255
|
/** Handle max change */
|
|
256
|
-
handleMaxChange:
|
|
256
|
+
handleMaxChange: r,
|
|
257
257
|
/** Is selected */
|
|
258
258
|
isSelected: l
|
|
259
259
|
};
|
|
260
260
|
}
|
|
261
|
-
function
|
|
262
|
-
const { products: e, keywords:
|
|
261
|
+
function K() {
|
|
262
|
+
const { products: e, keywords: s } = S((t) => t.response);
|
|
263
263
|
return {
|
|
264
264
|
/** Array of products */
|
|
265
265
|
products: e ?? { hits: [], total: 0 },
|
|
266
266
|
/** Array of keywords */
|
|
267
|
-
keywords:
|
|
267
|
+
keywords: s ?? { hits: [], total: 0 }
|
|
268
268
|
};
|
|
269
269
|
}
|
|
270
|
-
function
|
|
271
|
-
const e =
|
|
272
|
-
var
|
|
273
|
-
return (
|
|
270
|
+
function Q() {
|
|
271
|
+
const e = S((t) => {
|
|
272
|
+
var n;
|
|
273
|
+
return (n = t.query.products) == null ? void 0 : n.filter;
|
|
274
274
|
});
|
|
275
|
-
return
|
|
275
|
+
return R(() => e ? e.reduce((t, n) => t + (Array.isArray(n.value) ? n.value.length : 1), 0) : 0, [e]);
|
|
276
276
|
}
|
|
277
|
-
function
|
|
277
|
+
function z(e) {
|
|
278
278
|
return e && !Number.isNaN(e) ? e : 0;
|
|
279
279
|
}
|
|
280
|
-
function
|
|
281
|
-
const { from: t, size:
|
|
282
|
-
var l,
|
|
280
|
+
function W(e, s) {
|
|
281
|
+
const { from: t, size: n, total: o } = S((r) => {
|
|
282
|
+
var l, i, g, p, d;
|
|
283
283
|
return {
|
|
284
|
-
from:
|
|
285
|
-
size:
|
|
286
|
-
total:
|
|
284
|
+
from: z(((l = r.query.products) == null ? void 0 : l.from) ?? 0),
|
|
285
|
+
size: z(((g = (i = r.response) == null ? void 0 : i.products) == null ? void 0 : g.size) ?? 0),
|
|
286
|
+
total: z(((d = (p = r.response) == null ? void 0 : p.products) == null ? void 0 : d.total) ?? 0)
|
|
287
287
|
};
|
|
288
|
-
}), { updateSearch:
|
|
288
|
+
}), { updateSearch: u } = w(), c = t + n, a = [...e].reverse().filter((r) => r + s < o);
|
|
289
289
|
return {
|
|
290
290
|
/** from value */
|
|
291
291
|
from: t,
|
|
292
292
|
/** to value */
|
|
293
293
|
to: c,
|
|
294
294
|
/** total value */
|
|
295
|
-
total:
|
|
295
|
+
total: o,
|
|
296
296
|
/** size value */
|
|
297
|
-
size:
|
|
297
|
+
size: n,
|
|
298
298
|
/** Array of size options */
|
|
299
|
-
sizeOptions:
|
|
299
|
+
sizeOptions: a,
|
|
300
300
|
/** Should be called when size is changed */
|
|
301
|
-
handleSizeChange: (
|
|
302
|
-
|
|
301
|
+
handleSizeChange: (r) => {
|
|
302
|
+
u({
|
|
303
303
|
products: {
|
|
304
|
-
size:
|
|
304
|
+
size: M(r)
|
|
305
305
|
}
|
|
306
306
|
});
|
|
307
307
|
}
|
|
308
308
|
};
|
|
309
309
|
}
|
|
310
|
-
function k(e,
|
|
311
|
-
return e.length !==
|
|
310
|
+
function k(e, s) {
|
|
311
|
+
return e.length !== s.length ? !1 : e.every((t) => s.find((n) => t.field === n.field && t.order === n.order));
|
|
312
312
|
}
|
|
313
|
-
function
|
|
314
|
-
var
|
|
315
|
-
const
|
|
313
|
+
function X(e) {
|
|
314
|
+
var u, c;
|
|
315
|
+
const s = S((a) => a.query), { updateSearch: t } = w();
|
|
316
316
|
return {
|
|
317
317
|
/** Active sort */
|
|
318
|
-
activeSort: ((
|
|
319
|
-
var
|
|
320
|
-
return k(
|
|
321
|
-
})) == null ? void 0 :
|
|
318
|
+
activeSort: ((u = e.find((a) => {
|
|
319
|
+
var f;
|
|
320
|
+
return k(a.value.sort, ((f = s.products) == null ? void 0 : f.sort) || []);
|
|
321
|
+
})) == null ? void 0 : u.id) ?? ((c = e[0]) == null ? void 0 : c.id),
|
|
322
322
|
/** Set sort function */
|
|
323
|
-
setSort: (
|
|
324
|
-
const
|
|
325
|
-
|
|
323
|
+
setSort: (a) => {
|
|
324
|
+
const f = e.find((r) => r.id === a);
|
|
325
|
+
f && t({
|
|
326
326
|
products: {
|
|
327
|
-
sort:
|
|
327
|
+
sort: f.value.sort
|
|
328
328
|
}
|
|
329
329
|
});
|
|
330
330
|
}
|
|
331
331
|
};
|
|
332
332
|
}
|
|
333
|
+
function V(e, s) {
|
|
334
|
+
if (!e.length || !s.length) return [];
|
|
335
|
+
const t = s.reduce((n, o) => (n[o] = {}, n), {});
|
|
336
|
+
return e.forEach((n) => {
|
|
337
|
+
var o;
|
|
338
|
+
(o = n.customFields) == null || o.forEach(({ key: u, value: c }) => {
|
|
339
|
+
const a = u.toLowerCase();
|
|
340
|
+
s.includes(a) && (t[a][c] = t[a][c] || [], t[a][c].push(n));
|
|
341
|
+
});
|
|
342
|
+
}), Object.entries(t).map(([n, o]) => ({
|
|
343
|
+
field: n,
|
|
344
|
+
options: Object.entries(o).map(([u, c]) => ({
|
|
345
|
+
value: u,
|
|
346
|
+
skus: c,
|
|
347
|
+
unavailable: !1,
|
|
348
|
+
selected: !1
|
|
349
|
+
}))
|
|
350
|
+
}));
|
|
351
|
+
}
|
|
352
|
+
function B(e, s) {
|
|
353
|
+
return e.length ? e.map(({ field: t, options: n }) => ({
|
|
354
|
+
field: t,
|
|
355
|
+
options: n.map((o) => {
|
|
356
|
+
var a;
|
|
357
|
+
const u = !((a = o.skus) != null && a.some((f) => Object.entries(s).every(([r, l]) => {
|
|
358
|
+
var g, p;
|
|
359
|
+
return r === t ? !0 : ((p = (g = f.customFields) == null ? void 0 : g.find((d) => d.key.toLowerCase() === r)) == null ? void 0 : p.value) === l;
|
|
360
|
+
}))), c = s[t] === o.value;
|
|
361
|
+
return {
|
|
362
|
+
...o,
|
|
363
|
+
unavailable: u,
|
|
364
|
+
selected: c
|
|
365
|
+
};
|
|
366
|
+
})
|
|
367
|
+
})) : [];
|
|
368
|
+
}
|
|
369
|
+
function Y(e = [], s = []) {
|
|
370
|
+
const [t, n] = x({}), o = R(() => B(V(e, s), t), [e, s, t]), u = F((c, a) => {
|
|
371
|
+
n((f) => {
|
|
372
|
+
const r = { ...f };
|
|
373
|
+
return r[c] === a ? delete r[c] : r[c] = a, r;
|
|
374
|
+
});
|
|
375
|
+
}, []);
|
|
376
|
+
return { swatches: o, toggleOption: u };
|
|
377
|
+
}
|
|
333
378
|
export {
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
379
|
+
w as useActions,
|
|
380
|
+
$ as useDecoratedSearchResults,
|
|
381
|
+
U as useFacet,
|
|
382
|
+
_ as useFacets,
|
|
383
|
+
te as useLoadMore,
|
|
384
|
+
S as useNostoAppState,
|
|
385
|
+
G as usePagination,
|
|
386
|
+
H as usePersonalization,
|
|
387
|
+
O as useProductFilters,
|
|
388
|
+
j as useRange,
|
|
389
|
+
J as useRangeSelector,
|
|
390
|
+
K as useResponse,
|
|
391
|
+
Q as useSelectedFiltersCount,
|
|
392
|
+
W as useSizeOptions,
|
|
393
|
+
X as useSort,
|
|
394
|
+
Y as useSwatches
|
|
349
395
|
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { SearchProductSku } from '@nosto/nosto-js/client';
|
|
2
|
+
export interface SwatchOption {
|
|
3
|
+
/**
|
|
4
|
+
* The value of the swatch option (e.g., "Red", "L").
|
|
5
|
+
*/
|
|
6
|
+
value: string;
|
|
7
|
+
/**
|
|
8
|
+
* An array of full SKU objects associated with this option.
|
|
9
|
+
*/
|
|
10
|
+
skus: SearchProductSku[];
|
|
11
|
+
/**
|
|
12
|
+
* Indicates whether the option is unavailable.
|
|
13
|
+
*/
|
|
14
|
+
unavailable?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Indicates whether the option is selected.
|
|
17
|
+
*/
|
|
18
|
+
selected?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export interface SwatchField {
|
|
21
|
+
/**
|
|
22
|
+
* The name of the field (e.g., "color", "size").
|
|
23
|
+
*/
|
|
24
|
+
field: string;
|
|
25
|
+
/**
|
|
26
|
+
* An array of swatch options for this field.
|
|
27
|
+
*/
|
|
28
|
+
options: SwatchOption[];
|
|
29
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { SearchProductSku } from '@nosto/nosto-js/client';
|
|
2
|
+
/**
|
|
3
|
+
* Preact hook for managing swatch options and selection.
|
|
4
|
+
*
|
|
5
|
+
* This hook aggregates SKU data by specified fields (e.g., "color", "size"),
|
|
6
|
+
* generates swatch options, and manages the selection state for those options.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```jsx
|
|
10
|
+
* import { useSwatches } from '@nosto/search-js/preact/hooks'
|
|
11
|
+
*
|
|
12
|
+
* export default () => {
|
|
13
|
+
* const { swatches, toggleOption } = useSwatches(skus, ["color", "size"])
|
|
14
|
+
*
|
|
15
|
+
* return (
|
|
16
|
+
* <div>
|
|
17
|
+
* {swatches.map(({ field, options }) => (
|
|
18
|
+
* <div key={field}>
|
|
19
|
+
* {options.map(({ value, unavailable, selected }) => (
|
|
20
|
+
* <button
|
|
21
|
+
* key={value}
|
|
22
|
+
* disabled={unavailable}
|
|
23
|
+
* onClick={() => toggleOption(field, value)}
|
|
24
|
+
* style={{
|
|
25
|
+
* background: selected ? "#0070f3" : "transparent",
|
|
26
|
+
* color: selected ? "#fff" : "#000",
|
|
27
|
+
* }}
|
|
28
|
+
* >
|
|
29
|
+
* {value}
|
|
30
|
+
* </button>
|
|
31
|
+
* ))}
|
|
32
|
+
* </div>
|
|
33
|
+
* ))}
|
|
34
|
+
* </div>
|
|
35
|
+
* )
|
|
36
|
+
* }
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @group Hooks
|
|
40
|
+
*/
|
|
41
|
+
export declare function useSwatches(skus?: SearchProductSku[], fields?: string[]): {
|
|
42
|
+
swatches: import('../types').SwatchField[];
|
|
43
|
+
toggleOption: (field: string, value: string) => void;
|
|
44
|
+
};
|