quirk-ui 0.0.490 → 0.0.491
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),R=require("../../ui/PortableTextRenderer/index.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),R=require("../../ui/PortableTextRenderer/index.cjs"),G=require("../../hooks/useStyleClasses.cjs"),U=require("../../contexts/LocaleBridge.cjs"),b=require("../../../index-BN6814Bi.cjs"),X=require("../../../core/components/Input/index.cjs"),J=require("../../../core/components/Select/index.cjs"),K=require("../../cards/BlogArticleCard/index.cjs"),t=require("../../../CategoryFilters-W4ngPBij.cjs"),Q=require("../../../x-Dft9NVe_.cjs"),V=[{label:"Newest",value:"date-desc"},{label:"Oldest",value:"date-asc"},{label:"Title A-Z",value:"title-asc"},{label:"Title Z-A",value:"title-desc"},{label:"Most Popular",value:"popular-desc"}];function Y({heading:o,layout:B="grid",includeFilters:y,excludeFilters:p,limit:C=3,categoryFilters:d,documentType:_,styleOptions:$}){const[w,c]=l.useState([]),[M,P]=l.useState(null),[N,z]=l.useState("date-desc"),[f,L]=l.useState([]),[T,i]=l.useState(0),[a,g]=l.useState(!1),[m,h]=l.useState(!1),[k,r]=l.useState(!0),[u,S]=l.useState(""),[v,D]=l.useState(""),{locale:I}=U.useLocaleBridge(),H=G.useStyleClasses($),O={list:t.styles.list}[B??"grid"],W=s=>{z(s.target.value),c([]),i(0),r(!0)},q=()=>{h(!m)},Z=()=>{c([]),i(0),r(!0),L([]),S(""),h(!1)},A=async()=>{if(a||!k)return;g(!0);const s=new URLSearchParams({start:String(T),limit:String(C),sort:N,documentType:_,locale:I});v&&s.append("search",v),f.forEach(n=>s.append("categories",n)),y==null||y.forEach(n=>s.append("include",n._id)),p==null||p.forEach(n=>s.append("exclude",n._id));try{const x=await(await fetch(`/api/articles?${s.toString()}`,{method:"GET"})).json();c(j=>[...j,...x.articles]),i(j=>j+C),P(x.totalCount),T+x.articles.length>=x.totalCount&&r(!1)}catch(n){console.error("Failed to load articles:",n),r(!1)}finally{g(!1)}},E=l.useCallback(()=>{typeof window<"u"&&window.innerWidth>768&&(h(!1),typeof document<"u"&&(document.body.style.overflow=""))},[]);return l.useEffect(()=>{const s=typeof window<"u";return s&&window.addEventListener("resize",E),()=>{s&&window.removeEventListener("resize",E)}},[]),l.useEffect(()=>{if(typeof document<"u")return document.body.style.overflow=m?"hidden":"",()=>{document.body.style.overflow=""}},[m]),l.useEffect(()=>{const s=setTimeout(()=>{D(u)},1e3);return()=>clearTimeout(s)},[u]),l.useEffect(()=>{A()},[v,N,f.join(",")]),e.jsx("section",{className:`${t.styles.documentList} ${H}`,children:e.jsxs("article",{className:t.styles.container,children:[e.jsxs("div",{className:t.styles.heading,children:[(o==null?void 0:o.title)&&e.jsx(R.RichText,{blocks:o==null?void 0:o.title}),(o==null?void 0:o.description)&&e.jsx(R.RichText,{blocks:o==null?void 0:o.description})]}),e.jsxs("div",{className:t.styles.listContainer,children:[(d==null?void 0:d.length)&&e.jsxs("div",{className:t.styles.filterToggle,children:[e.jsx(b.CallToAction,{as:"button",variant:"secondary",onClick:q,disabled:a,icon:"settings",iconAlignment:"left",children:"Filters"}),e.jsx(b.CallToAction,{as:"button",variant:"link",onClick:Z,disabled:a||f.length===0&&u.length===0,children:"Reset"})]}),d&&e.jsx(t.CategoryFilters,{categoryFilters:d,selectedCategories:f,setSelectedCategories:L,setArticles:c,setStart:i,setHasMore:r,showFilters:m,toggleFilters:q,isLoading:a}),e.jsxs("div",{className:t.styles.listWrapper,children:[e.jsxs("div",{className:t.styles.listHeader,children:[e.jsxs("div",{className:t.styles.listResults,children:["Results: ",e.jsx("span",{children:M})]}),e.jsxs("div",{className:t.styles.listHeaderFilters,children:[e.jsxs("div",{className:t.styles.listSearch,children:[e.jsx(X.Input,{type:"text",name:"list-search",placeholder:"Search articles",value:u,onChange:s=>{S(s.target.value),c([]),i(0),r(!0)}}),u&&e.jsx("button",{className:t.styles.clearSearch,onClick:()=>{S(""),c([]),i(0),r(!0)},children:e.jsx(Q.X,{size:21})})]}),e.jsx("div",{className:t.styles.listSort,children:e.jsx(J.Select,{id:"list-sort",name:"list-sort",options:V,onChange:W})})]})]}),e.jsx("div",{className:`${t.styles.list} ${O}`,children:w&&w.map(s=>_=="blog"&&e.jsx(K.BlogArticleCard,{article:s},s._id))}),k&&e.jsx("div",{className:t.styles.loadMore,children:e.jsx(b.CallToAction,{as:"button",variant:"primary",onClick:A,disabled:a,icon:"refresh",iconAlignment:"left",className:a?t.styles.buttonIsLoading:"",children:a?"Loading...":"Load more"})})]})]})]})})}exports.DocumentListBlock=Y;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { RichText as
|
|
1
|
+
import { jsx as t, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { useState as l, useCallback as X, useEffect as b } from "react";
|
|
3
|
+
import { RichText as H } from "../../ui/PortableTextRenderer/index.mjs";
|
|
4
4
|
import { useStyleClasses as J } from "../../hooks/useStyleClasses.mjs";
|
|
5
5
|
import { useLocaleBridge as K } from "../../contexts/LocaleBridge.mjs";
|
|
6
6
|
import { C as L } from "../../../index-C-E0ib2G.js";
|
|
@@ -18,87 +18,85 @@ const te = [
|
|
|
18
18
|
];
|
|
19
19
|
function ue({
|
|
20
20
|
heading: o,
|
|
21
|
-
layout:
|
|
22
|
-
includeFilters:
|
|
23
|
-
excludeFilters:
|
|
24
|
-
limit:
|
|
21
|
+
layout: I = "grid",
|
|
22
|
+
includeFilters: C,
|
|
23
|
+
excludeFilters: w,
|
|
24
|
+
limit: k = 3,
|
|
25
25
|
categoryFilters: m,
|
|
26
|
-
documentType:
|
|
26
|
+
documentType: g,
|
|
27
27
|
// filterMode,
|
|
28
|
-
styleOptions:
|
|
28
|
+
styleOptions: P
|
|
29
29
|
}) {
|
|
30
|
-
const [
|
|
31
|
-
new URLSearchParams(window.location.search).getAll("categories")
|
|
32
|
-
)), [R, d] = a(0), [n, $] = a(!1), [p, h] = a(!1), [j, i] = a(!0), [f, S] = a(""), [N, D] = a(""), { locale: O } = K(), U = J(I), Z = {
|
|
30
|
+
const [A, c] = l([]), [W, _] = l(null), [T, x] = l("date-desc"), [u, E] = l([]), [R, d] = l(0), [i, $] = l(!1), [p, h] = l(!1), [j, n] = l(!0), [f, S] = l(""), [N, D] = l(""), { locale: O } = K(), Z = J(P), q = {
|
|
33
31
|
//grid: styles.grid,
|
|
34
32
|
list: s.list
|
|
35
|
-
}[
|
|
36
|
-
x(e.target.value), c([]), d(0),
|
|
33
|
+
}[I ?? "grid"], G = (e) => {
|
|
34
|
+
x(e.target.value), c([]), d(0), n(!0);
|
|
37
35
|
}, z = () => {
|
|
38
36
|
h(!p);
|
|
39
|
-
},
|
|
40
|
-
c([]), d(0),
|
|
37
|
+
}, U = () => {
|
|
38
|
+
c([]), d(0), n(!0), E([]), S(""), h(!1);
|
|
41
39
|
}, M = async () => {
|
|
42
|
-
if (
|
|
40
|
+
if (i || !j) return;
|
|
43
41
|
$(!0);
|
|
44
42
|
const e = new URLSearchParams({
|
|
45
43
|
start: String(R),
|
|
46
|
-
limit: String(
|
|
44
|
+
limit: String(k),
|
|
47
45
|
sort: T,
|
|
48
|
-
documentType:
|
|
46
|
+
documentType: g,
|
|
49
47
|
locale: O
|
|
50
48
|
});
|
|
51
49
|
N && e.append("search", N), u.forEach(
|
|
52
|
-
(
|
|
53
|
-
), b == null || b.forEach(
|
|
54
|
-
(l) => e.append("include", l._id)
|
|
50
|
+
(r) => e.append("categories", r)
|
|
55
51
|
), C == null || C.forEach(
|
|
56
|
-
(
|
|
52
|
+
(r) => e.append("include", r._id)
|
|
53
|
+
), w == null || w.forEach(
|
|
54
|
+
(r) => e.append("exclude", r._id)
|
|
57
55
|
);
|
|
58
56
|
try {
|
|
59
57
|
const v = await (await fetch(`/api/articles?${e.toString()}`, {
|
|
60
58
|
method: "GET"
|
|
61
59
|
})).json();
|
|
62
|
-
c((y) => [...y, ...v.articles]), d((y) => y +
|
|
63
|
-
} catch (
|
|
64
|
-
console.error("Failed to load articles:",
|
|
60
|
+
c((y) => [...y, ...v.articles]), d((y) => y + k), _(v.totalCount), R + v.articles.length >= v.totalCount && n(!1);
|
|
61
|
+
} catch (r) {
|
|
62
|
+
console.error("Failed to load articles:", r), n(!1);
|
|
65
63
|
} finally {
|
|
66
64
|
$(!1);
|
|
67
65
|
}
|
|
68
|
-
},
|
|
66
|
+
}, B = X(() => {
|
|
69
67
|
typeof window < "u" && window.innerWidth > 768 && (h(!1), typeof document < "u" && (document.body.style.overflow = ""));
|
|
70
68
|
}, []);
|
|
71
|
-
return
|
|
69
|
+
return b(() => {
|
|
72
70
|
const e = typeof window < "u";
|
|
73
|
-
return e && window.addEventListener("resize",
|
|
74
|
-
e && window.removeEventListener("resize",
|
|
71
|
+
return e && window.addEventListener("resize", B), () => {
|
|
72
|
+
e && window.removeEventListener("resize", B);
|
|
75
73
|
};
|
|
76
|
-
}, []),
|
|
74
|
+
}, []), b(() => {
|
|
77
75
|
if (typeof document < "u")
|
|
78
76
|
return document.body.style.overflow = p ? "hidden" : "", () => {
|
|
79
77
|
document.body.style.overflow = "";
|
|
80
78
|
};
|
|
81
|
-
}, [p]),
|
|
79
|
+
}, [p]), b(() => {
|
|
82
80
|
const e = setTimeout(() => {
|
|
83
81
|
D(f);
|
|
84
82
|
}, 1e3);
|
|
85
83
|
return () => clearTimeout(e);
|
|
86
|
-
}, [f]),
|
|
84
|
+
}, [f]), b(() => {
|
|
87
85
|
M();
|
|
88
|
-
}, [N, T, u.join(",")]), /* @__PURE__ */ t("section", { className: `${s.documentList} ${
|
|
89
|
-
/* @__PURE__ */
|
|
90
|
-
(o == null ? void 0 : o.title) && /* @__PURE__ */ t(
|
|
91
|
-
(o == null ? void 0 : o.description) && /* @__PURE__ */ t(
|
|
86
|
+
}, [N, T, u.join(",")]), /* @__PURE__ */ t("section", { className: `${s.documentList} ${Z}`, children: /* @__PURE__ */ a("article", { className: s.container, children: [
|
|
87
|
+
/* @__PURE__ */ a("div", { className: s.heading, children: [
|
|
88
|
+
(o == null ? void 0 : o.title) && /* @__PURE__ */ t(H, { blocks: o == null ? void 0 : o.title }),
|
|
89
|
+
(o == null ? void 0 : o.description) && /* @__PURE__ */ t(H, { blocks: o == null ? void 0 : o.description })
|
|
92
90
|
] }),
|
|
93
|
-
/* @__PURE__ */
|
|
94
|
-
(m == null ? void 0 : m.length) && /* @__PURE__ */
|
|
91
|
+
/* @__PURE__ */ a("div", { className: s.listContainer, children: [
|
|
92
|
+
(m == null ? void 0 : m.length) && /* @__PURE__ */ a("div", { className: s.filterToggle, children: [
|
|
95
93
|
/* @__PURE__ */ t(
|
|
96
94
|
L,
|
|
97
95
|
{
|
|
98
96
|
as: "button",
|
|
99
97
|
variant: "secondary",
|
|
100
98
|
onClick: z,
|
|
101
|
-
disabled:
|
|
99
|
+
disabled: i,
|
|
102
100
|
icon: "settings",
|
|
103
101
|
iconAlignment: "left",
|
|
104
102
|
children: "Filters"
|
|
@@ -109,8 +107,8 @@ function ue({
|
|
|
109
107
|
{
|
|
110
108
|
as: "button",
|
|
111
109
|
variant: "link",
|
|
112
|
-
onClick:
|
|
113
|
-
disabled:
|
|
110
|
+
onClick: U,
|
|
111
|
+
disabled: i || u.length === 0 && f.length === 0,
|
|
114
112
|
children: "Reset"
|
|
115
113
|
}
|
|
116
114
|
)
|
|
@@ -123,20 +121,20 @@ function ue({
|
|
|
123
121
|
setSelectedCategories: E,
|
|
124
122
|
setArticles: c,
|
|
125
123
|
setStart: d,
|
|
126
|
-
setHasMore:
|
|
124
|
+
setHasMore: n,
|
|
127
125
|
showFilters: p,
|
|
128
126
|
toggleFilters: z,
|
|
129
|
-
isLoading:
|
|
127
|
+
isLoading: i
|
|
130
128
|
}
|
|
131
129
|
),
|
|
132
|
-
/* @__PURE__ */
|
|
133
|
-
/* @__PURE__ */
|
|
134
|
-
/* @__PURE__ */
|
|
130
|
+
/* @__PURE__ */ a("div", { className: s.listWrapper, children: [
|
|
131
|
+
/* @__PURE__ */ a("div", { className: s.listHeader, children: [
|
|
132
|
+
/* @__PURE__ */ a("div", { className: s.listResults, children: [
|
|
135
133
|
"Results: ",
|
|
136
134
|
/* @__PURE__ */ t("span", { children: W })
|
|
137
135
|
] }),
|
|
138
|
-
/* @__PURE__ */
|
|
139
|
-
/* @__PURE__ */
|
|
136
|
+
/* @__PURE__ */ a("div", { className: s.listHeaderFilters, children: [
|
|
137
|
+
/* @__PURE__ */ a("div", { className: s.listSearch, children: [
|
|
140
138
|
/* @__PURE__ */ t(
|
|
141
139
|
Q,
|
|
142
140
|
{
|
|
@@ -145,7 +143,7 @@ function ue({
|
|
|
145
143
|
placeholder: "Search articles",
|
|
146
144
|
value: f,
|
|
147
145
|
onChange: (e) => {
|
|
148
|
-
S(e.target.value), c([]), d(0),
|
|
146
|
+
S(e.target.value), c([]), d(0), n(!0);
|
|
149
147
|
}
|
|
150
148
|
}
|
|
151
149
|
),
|
|
@@ -154,7 +152,7 @@ function ue({
|
|
|
154
152
|
{
|
|
155
153
|
className: s.clearSearch,
|
|
156
154
|
onClick: () => {
|
|
157
|
-
S(""), c([]), d(0),
|
|
155
|
+
S(""), c([]), d(0), n(!0);
|
|
158
156
|
},
|
|
159
157
|
children: /* @__PURE__ */ t(ee, { size: 21 })
|
|
160
158
|
}
|
|
@@ -166,13 +164,13 @@ function ue({
|
|
|
166
164
|
id: "list-sort",
|
|
167
165
|
name: "list-sort",
|
|
168
166
|
options: te,
|
|
169
|
-
onChange:
|
|
167
|
+
onChange: G
|
|
170
168
|
}
|
|
171
169
|
) })
|
|
172
170
|
] })
|
|
173
171
|
] }),
|
|
174
|
-
/* @__PURE__ */ t("div", { className: `${s.list} ${
|
|
175
|
-
(e) =>
|
|
172
|
+
/* @__PURE__ */ t("div", { className: `${s.list} ${q}`, children: A && A.map(
|
|
173
|
+
(e) => g == "blog" && /* @__PURE__ */ t(Y, { article: e }, e._id)
|
|
176
174
|
) }),
|
|
177
175
|
j && /* @__PURE__ */ t("div", { className: s.loadMore, children: /* @__PURE__ */ t(
|
|
178
176
|
L,
|
|
@@ -180,11 +178,11 @@ function ue({
|
|
|
180
178
|
as: "button",
|
|
181
179
|
variant: "primary",
|
|
182
180
|
onClick: M,
|
|
183
|
-
disabled:
|
|
181
|
+
disabled: i,
|
|
184
182
|
icon: "refresh",
|
|
185
183
|
iconAlignment: "left",
|
|
186
|
-
className:
|
|
187
|
-
children:
|
|
184
|
+
className: i ? s.buttonIsLoading : "",
|
|
185
|
+
children: i ? "Loading..." : "Load more"
|
|
188
186
|
}
|
|
189
187
|
) })
|
|
190
188
|
] })
|