@lanaco/lnc-react-ui 4.0.164 → 4.0.166
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,4 +1,4 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const t=require("react/jsx-runtime"),d=require("react"),k=require("./emotion-styled.browser.esm-BtEseadx.cjs"),S=require("./consts-goSZX3xP.cjs"),A=require("./useDetectMobile-zkbzoOGV.cjs"),i=require("./utils-Dl9xPH4c.cjs"),R=require("./style-Db3VFbfP.cjs"),$=require("./Button.cjs"),B=require("./index-BueKsXT8.cjs"),D=k.styled.div`
|
|
2
2
|
display: grid;
|
|
3
3
|
grid-template-columns: ${s=>`repeat(${s.limit}, minmax(0, 1fr))`};
|
|
4
4
|
gap: 1.25rem;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
@media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
|
|
7
7
|
grid-template-columns: repeat(1, 1fr);
|
|
8
8
|
}
|
|
9
|
-
`,C=
|
|
9
|
+
`,C=k.styled.div`
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
width: 100%;
|
|
@@ -16,45 +16,49 @@
|
|
|
16
16
|
border-radius: 0.75rem;
|
|
17
17
|
border: 1px solid var(--gray-95008, #14161a14);
|
|
18
18
|
overflow: hidden;
|
|
19
|
-
min-height:
|
|
19
|
+
min-height: 23rem;
|
|
20
20
|
cursor: pointer;
|
|
21
|
-
|
|
21
|
+
height: 100%;
|
|
22
|
+
|
|
23
|
+
& .blog-card-content {
|
|
24
|
+
display: flex;
|
|
25
|
+
padding: 1rem;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
justify-content: space-between;
|
|
28
|
+
height: 100%;
|
|
29
|
+
border-top: 1px solid var(--gray-95008, #14161a14);
|
|
30
|
+
gap: 1.25rem;
|
|
22
31
|
}
|
|
23
32
|
|
|
24
33
|
& img {
|
|
25
|
-
max-height:
|
|
26
|
-
min-height:
|
|
34
|
+
max-height: 12.5rem;
|
|
35
|
+
min-height: 12.5rem;
|
|
27
36
|
object-fit: cover;
|
|
28
37
|
width: 100%;
|
|
29
38
|
}
|
|
30
39
|
|
|
31
40
|
& .skeleton-img {
|
|
32
41
|
width: 100%;
|
|
33
|
-
max-height:
|
|
34
|
-
min-height:
|
|
42
|
+
max-height: 12.5rem;
|
|
43
|
+
min-height: 12.5rem;
|
|
35
44
|
background-color: ${i.linearGradientAnimation("-90deg")};
|
|
36
45
|
}
|
|
37
46
|
|
|
38
47
|
& .tags-wr {
|
|
39
|
-
margin-top: auto;
|
|
40
48
|
display: flex;
|
|
41
49
|
flex-wrap: wrap;
|
|
42
|
-
|
|
43
50
|
gap: 0.5rem;
|
|
44
|
-
padding: 0 1rem 1rem 1rem;
|
|
45
51
|
}
|
|
46
52
|
|
|
47
53
|
@media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
|
|
48
54
|
max-height: 100%;
|
|
49
55
|
min-height: 100%;
|
|
50
56
|
}
|
|
51
|
-
`,T=
|
|
52
|
-
padding: 1rem 1rem 0 1rem;
|
|
57
|
+
`,T=k.styled.div`
|
|
53
58
|
display: flex;
|
|
54
59
|
flex-direction: column;
|
|
55
60
|
gap: 0;
|
|
56
61
|
color: var(--gray-950, #14161a);
|
|
57
|
-
border-top: 1px solid var(--gray-95008, #14161a14);
|
|
58
62
|
|
|
59
63
|
& .text-wr-title {
|
|
60
64
|
font-weight: 600;
|
|
@@ -107,4 +111,4 @@
|
|
|
107
111
|
align-items: center;
|
|
108
112
|
gap: 1rem;
|
|
109
113
|
}
|
|
110
|
-
`,q=
|
|
114
|
+
`,q=d.forwardRef((s,m)=>{const{title:n,imageUrl:g,text:c,numberOfLikes:a,numberOfComments:j,timeToRead:f,publishedAt:u,tags:o,onCardClick:w,timeToReadText:h="{0} min read",metadata:l}=s,b=d.useRef();return t.jsxs(C,{ref:b,className:"blog-card","data-accessor":l==null?void 0:l.accessor,name:l==null?void 0:l.name,onClick:r=>w(r,b),children:[t.jsx(B.ProductImageWrapper,{src:g}),t.jsxs("div",{className:"blog-card-content",children:[t.jsxs(T,{children:[t.jsxs("div",{className:"info-wr",children:[t.jsxs("div",{className:"info-wr-1",children:[t.jsxs("span",{children:[i.formatLocaleDateString(u)," "]}),t.jsx("span",{className:"small-dot",children:"●"}),f&&h?`${i.formatString(h,f)}`:"N/A"]}),t.jsxs("div",{className:"info-wr-2",children:[t.jsxs("span",{className:"info-wr-1",children:[t.jsx("i",{className:"mng mng-lnc-thumbs-up--filled"}),t.jsx("span",{children:i.getRoundedNumber(a)})]}),t.jsxs("span",{className:"info-wr-1",children:[t.jsx("i",{className:"mng mng-lnc-messages-filled"}),t.jsx("span",{children:i.getRoundedNumber(j)})]})]})]}),t.jsx("div",{className:"text-wr-title",children:n}),t.jsx("div",{className:"text-wr",children:c})]}),o&&t.jsx("div",{className:"tags-wr",children:o==null?void 0:o.map((r,N)=>t.jsx(R.BlogTag,{color:r==null?void 0:r.color,children:r==null?void 0:r.name},N))})]})]})}),L=d.forwardRef(({},s)=>t.jsxs(C,{className:"blog-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsxs(T,{children:[t.jsx("div",{className:"info-wr"}),t.jsx("div",{className:"skeleton-title"}),t.jsx("div",{className:"info-wr-skeleton"})]})]})),E=({limit:s=3,isLoading:m=!1,keyPrefix:n})=>t.jsx(t.Fragment,{children:Array.from({length:s},(g,c)=>t.jsx(L,{isLoading:m},`${n}-skeleton-product-card-${c}`))}),I=({children:s,fallbackComponent:m=t.jsx(t.Fragment,{}),isLoading:n=!1,limit:g,keyPrefix:c})=>t.jsx(d.Suspense,{fallbackComponent:m,children:n===!0?t.jsx(E,{isLoading:n,limit:g,keyPrefix:c}):s}),v=d.memo(q),M=d.forwardRef((s,m)=>{const{icon:n,title:g,onButtonAction:c,items:a,buttonText:j,timeToReadText:f,limit:u=3,onSelectCard:o=()=>{},isLoading:w=!1,buttonLink:h,getImage:l=()=>{},componentName:b}=s,r=A.useDetectMobile(),N=d.useMemo(()=>t.jsx(t.Fragment,{children:r===!0?a==null?void 0:a.map((e,p)=>t.jsx(v,{title:e==null?void 0:e.title,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,publishedAt:e==null?void 0:e.publishedAt,timeToRead:e==null?void 0:e.timeToRead,timeToReadText:f,tags:e==null?void 0:e.tags,onCardClick:(O,y)=>o(e==null?void 0:e.titleSlug,y),imageUrl:l(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,metadata:{name:b,accessor:e==null?void 0:e.accessor}},p)):a==null?void 0:a.slice(0,u).map((e,p)=>t.jsx(v,{title:e==null?void 0:e.title,imageUrl:l(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,tags:e==null?void 0:e.tags,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,publishedAt:e==null?void 0:e.publishedAt,timeToRead:e==null?void 0:e.timeToRead,timeToReadText:f,onCardClick:(O,y)=>o(e==null?void 0:e.titleSlug,y),metadata:{name:b,accessor:e==null?void 0:e.accessor}},p))}),[a,r,u,o]);return t.jsxs(R.RegulatTitleSectionWrapper,{ref:m,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[i.isDefinedNotEmptyString(n)&&t.jsx("i",{className:n}),t.jsx("span",{children:g})]}),i.isDefinedNotEmptyString(j)&&i.isDefinedNotEmptyString(h)&&t.jsx($,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var p;(p=e==null?void 0:e.target)==null||p.blur(),c(h)},borderRadius:"curved",className:"button-link",children:j})]}),t.jsx(D,{limit:u,children:t.jsx(I,{isLoading:w,limit:u,keyPrefix:"explore-landing",children:N})})]})});module.exports=M;
|
|
@@ -2,8 +2,8 @@ import { jsxs as t, jsx as r, Fragment as C } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef as S, useRef as D, Suspense as z, memo as M, useMemo as P } from "react";
|
|
3
3
|
import { s as R } from "./emotion-styled.browser.esm-BNN1dTl3.js";
|
|
4
4
|
import { M as $ } from "./consts-BuFChS64.js";
|
|
5
|
-
import { u as
|
|
6
|
-
import { o as y, p as
|
|
5
|
+
import { u as j } from "./useDetectMobile-Bkvj0VMa.js";
|
|
6
|
+
import { o as y, p as I, v as U, s as W, w as T, k as N } from "./utils-BdsZgOUE.js";
|
|
7
7
|
import { B as E, R as _ } from "./style-DKAOBWn3.js";
|
|
8
8
|
import G from "./Button.js";
|
|
9
9
|
import { P as F } from "./index-CF3HhgvN.js";
|
|
@@ -25,32 +25,38 @@ const X = R.div`
|
|
|
25
25
|
border-radius: 0.75rem;
|
|
26
26
|
border: 1px solid var(--gray-95008, #14161a14);
|
|
27
27
|
overflow: hidden;
|
|
28
|
-
min-height:
|
|
28
|
+
min-height: 23rem;
|
|
29
29
|
cursor: pointer;
|
|
30
|
-
|
|
30
|
+
height: 100%;
|
|
31
|
+
|
|
32
|
+
& .blog-card-content {
|
|
33
|
+
display: flex;
|
|
34
|
+
padding: 1rem;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
justify-content: space-between;
|
|
37
|
+
height: 100%;
|
|
38
|
+
border-top: 1px solid var(--gray-95008, #14161a14);
|
|
39
|
+
gap: 1.25rem;
|
|
31
40
|
}
|
|
32
41
|
|
|
33
42
|
& img {
|
|
34
|
-
max-height:
|
|
35
|
-
min-height:
|
|
43
|
+
max-height: 12.5rem;
|
|
44
|
+
min-height: 12.5rem;
|
|
36
45
|
object-fit: cover;
|
|
37
46
|
width: 100%;
|
|
38
47
|
}
|
|
39
48
|
|
|
40
49
|
& .skeleton-img {
|
|
41
50
|
width: 100%;
|
|
42
|
-
max-height:
|
|
43
|
-
min-height:
|
|
51
|
+
max-height: 12.5rem;
|
|
52
|
+
min-height: 12.5rem;
|
|
44
53
|
background-color: ${y("-90deg")};
|
|
45
54
|
}
|
|
46
55
|
|
|
47
56
|
& .tags-wr {
|
|
48
|
-
margin-top: auto;
|
|
49
57
|
display: flex;
|
|
50
58
|
flex-wrap: wrap;
|
|
51
|
-
|
|
52
59
|
gap: 0.5rem;
|
|
53
|
-
padding: 0 1rem 1rem 1rem;
|
|
54
60
|
}
|
|
55
61
|
|
|
56
62
|
@media (max-width: ${$ + "px"}) {
|
|
@@ -58,12 +64,10 @@ const X = R.div`
|
|
|
58
64
|
min-height: 100%;
|
|
59
65
|
}
|
|
60
66
|
`, A = R.div`
|
|
61
|
-
padding: 1rem 1rem 0 1rem;
|
|
62
67
|
display: flex;
|
|
63
68
|
flex-direction: column;
|
|
64
69
|
gap: 0;
|
|
65
70
|
color: var(--gray-950, #14161a);
|
|
66
|
-
border-top: 1px solid var(--gray-95008, #14161a14);
|
|
67
71
|
|
|
68
72
|
& .text-wr-title {
|
|
69
73
|
font-weight: 600;
|
|
@@ -87,7 +91,7 @@ const X = R.div`
|
|
|
87
91
|
font-size: 0.875rem;
|
|
88
92
|
flex: 1;
|
|
89
93
|
color: var(--gray-700, #4e555f);
|
|
90
|
-
${
|
|
94
|
+
${I(2)}
|
|
91
95
|
}
|
|
92
96
|
|
|
93
97
|
& .info-wr {
|
|
@@ -116,18 +120,18 @@ const X = R.div`
|
|
|
116
120
|
align-items: center;
|
|
117
121
|
gap: 1rem;
|
|
118
122
|
}
|
|
119
|
-
`, Z = S((a,
|
|
123
|
+
`, Z = S((a, c) => {
|
|
120
124
|
const {
|
|
121
125
|
title: n,
|
|
122
|
-
imageUrl:
|
|
126
|
+
imageUrl: d,
|
|
123
127
|
text: m,
|
|
124
128
|
numberOfLikes: l,
|
|
125
129
|
numberOfComments: b,
|
|
126
|
-
timeToRead:
|
|
130
|
+
timeToRead: f,
|
|
127
131
|
publishedAt: g,
|
|
128
132
|
tags: s,
|
|
129
133
|
onCardClick: w,
|
|
130
|
-
timeToReadText:
|
|
134
|
+
timeToReadText: u = "{0} min read",
|
|
131
135
|
metadata: o
|
|
132
136
|
} = a, h = D();
|
|
133
137
|
return (
|
|
@@ -141,32 +145,34 @@ const X = R.div`
|
|
|
141
145
|
name: o == null ? void 0 : o.name,
|
|
142
146
|
onClick: (i) => w(i, h),
|
|
143
147
|
children: [
|
|
144
|
-
/* @__PURE__ */ r(F, { src:
|
|
145
|
-
/* @__PURE__ */ t(
|
|
146
|
-
/* @__PURE__ */ t(
|
|
147
|
-
/* @__PURE__ */ t("div", { className: "info-wr
|
|
148
|
-
/* @__PURE__ */ t("
|
|
149
|
-
|
|
150
|
-
|
|
148
|
+
/* @__PURE__ */ r(F, { src: d }),
|
|
149
|
+
/* @__PURE__ */ t("div", { className: "blog-card-content", children: [
|
|
150
|
+
/* @__PURE__ */ t(A, { children: [
|
|
151
|
+
/* @__PURE__ */ t("div", { className: "info-wr", children: [
|
|
152
|
+
/* @__PURE__ */ t("div", { className: "info-wr-1", children: [
|
|
153
|
+
/* @__PURE__ */ t("span", { children: [
|
|
154
|
+
W(g),
|
|
155
|
+
" "
|
|
156
|
+
] }),
|
|
157
|
+
/* @__PURE__ */ r("span", { className: "small-dot", children: "●" }),
|
|
158
|
+
f && u ? `${U(u, f)}` : "N/A"
|
|
151
159
|
] }),
|
|
152
|
-
/* @__PURE__ */
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
/* @__PURE__ */
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
/* @__PURE__ */ r("i", { className: "mng mng-lnc-messages-filled" }),
|
|
162
|
-
/* @__PURE__ */ r("span", { children: T(b) })
|
|
160
|
+
/* @__PURE__ */ t("div", { className: "info-wr-2", children: [
|
|
161
|
+
/* @__PURE__ */ t("span", { className: "info-wr-1", children: [
|
|
162
|
+
/* @__PURE__ */ r("i", { className: "mng mng-lnc-thumbs-up--filled" }),
|
|
163
|
+
/* @__PURE__ */ r("span", { children: T(l) })
|
|
164
|
+
] }),
|
|
165
|
+
/* @__PURE__ */ t("span", { className: "info-wr-1", children: [
|
|
166
|
+
/* @__PURE__ */ r("i", { className: "mng mng-lnc-messages-filled" }),
|
|
167
|
+
/* @__PURE__ */ r("span", { children: T(b) })
|
|
168
|
+
] })
|
|
163
169
|
] })
|
|
164
|
-
] })
|
|
170
|
+
] }),
|
|
171
|
+
/* @__PURE__ */ r("div", { className: "text-wr-title", children: n }),
|
|
172
|
+
/* @__PURE__ */ r("div", { className: "text-wr", children: m })
|
|
165
173
|
] }),
|
|
166
|
-
/* @__PURE__ */ r("div", { className: "
|
|
167
|
-
|
|
168
|
-
] }),
|
|
169
|
-
s && /* @__PURE__ */ r("div", { className: "tags-wr", children: s == null ? void 0 : s.map((i, k) => /* @__PURE__ */ r(E, { color: i == null ? void 0 : i.color, children: i == null ? void 0 : i.name }, k)) })
|
|
174
|
+
s && /* @__PURE__ */ r("div", { className: "tags-wr", children: s == null ? void 0 : s.map((i, k) => /* @__PURE__ */ r(E, { color: i == null ? void 0 : i.color, children: i == null ? void 0 : i.name }, k)) })
|
|
175
|
+
] })
|
|
170
176
|
]
|
|
171
177
|
}
|
|
172
178
|
)
|
|
@@ -178,42 +184,42 @@ const X = R.div`
|
|
|
178
184
|
/* @__PURE__ */ r("div", { className: "skeleton-title" }),
|
|
179
185
|
/* @__PURE__ */ r("div", { className: "info-wr-skeleton" })
|
|
180
186
|
] })
|
|
181
|
-
] })), H = ({ limit: a = 3, isLoading:
|
|
187
|
+
] })), H = ({ limit: a = 3, isLoading: c = !1, keyPrefix: n }) => /* @__PURE__ */ r(C, { children: Array.from({ length: a }, (d, m) => /* @__PURE__ */ r(
|
|
182
188
|
q,
|
|
183
189
|
{
|
|
184
|
-
isLoading:
|
|
190
|
+
isLoading: c
|
|
185
191
|
},
|
|
186
192
|
`${n}-skeleton-product-card-${m}`
|
|
187
193
|
)) }), J = ({
|
|
188
194
|
children: a,
|
|
189
|
-
fallbackComponent:
|
|
195
|
+
fallbackComponent: c = /* @__PURE__ */ r(C, {}),
|
|
190
196
|
isLoading: n = !1,
|
|
191
|
-
limit:
|
|
197
|
+
limit: d,
|
|
192
198
|
keyPrefix: m
|
|
193
|
-
}) => /* @__PURE__ */ r(z, { fallbackComponent:
|
|
199
|
+
}) => /* @__PURE__ */ r(z, { fallbackComponent: c, children: n === !0 ? /* @__PURE__ */ r(
|
|
194
200
|
H,
|
|
195
201
|
{
|
|
196
202
|
isLoading: n,
|
|
197
|
-
limit:
|
|
203
|
+
limit: d,
|
|
198
204
|
keyPrefix: m
|
|
199
205
|
}
|
|
200
|
-
) : a }), O = M(Z), ae = S((a,
|
|
206
|
+
) : a }), O = M(Z), ae = S((a, c) => {
|
|
201
207
|
const {
|
|
202
208
|
icon: n,
|
|
203
|
-
title:
|
|
209
|
+
title: d,
|
|
204
210
|
onButtonAction: m,
|
|
205
211
|
items: l,
|
|
206
212
|
buttonText: b,
|
|
207
|
-
timeToReadText:
|
|
213
|
+
timeToReadText: f,
|
|
208
214
|
limit: g = 3,
|
|
209
215
|
onSelectCard: s = () => {
|
|
210
216
|
},
|
|
211
217
|
isLoading: w = !1,
|
|
212
|
-
buttonLink:
|
|
218
|
+
buttonLink: u,
|
|
213
219
|
getImage: o = () => {
|
|
214
220
|
},
|
|
215
221
|
componentName: h
|
|
216
|
-
} = a, i =
|
|
222
|
+
} = a, i = j(), k = P(() => /* @__PURE__ */ r(C, { children: i === !0 ? l == null ? void 0 : l.map((e, p) => /* @__PURE__ */ r(
|
|
217
223
|
O,
|
|
218
224
|
{
|
|
219
225
|
title: e == null ? void 0 : e.title,
|
|
@@ -223,7 +229,7 @@ const X = R.div`
|
|
|
223
229
|
numberOfComments: e == null ? void 0 : e.numberOfComments,
|
|
224
230
|
publishedAt: e == null ? void 0 : e.publishedAt,
|
|
225
231
|
timeToRead: e == null ? void 0 : e.timeToRead,
|
|
226
|
-
timeToReadText:
|
|
232
|
+
timeToReadText: f,
|
|
227
233
|
tags: e == null ? void 0 : e.tags,
|
|
228
234
|
onCardClick: (L, v) => s(e == null ? void 0 : e.titleSlug, v),
|
|
229
235
|
imageUrl: o(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
|
|
@@ -242,19 +248,19 @@ const X = R.div`
|
|
|
242
248
|
numberOfComments: e == null ? void 0 : e.numberOfComments,
|
|
243
249
|
publishedAt: e == null ? void 0 : e.publishedAt,
|
|
244
250
|
timeToRead: e == null ? void 0 : e.timeToRead,
|
|
245
|
-
timeToReadText:
|
|
251
|
+
timeToReadText: f,
|
|
246
252
|
onCardClick: (L, v) => s(e == null ? void 0 : e.titleSlug, v),
|
|
247
253
|
metadata: { name: h, accessor: e == null ? void 0 : e.accessor }
|
|
248
254
|
},
|
|
249
255
|
p
|
|
250
256
|
)) }), [l, i, g, s]);
|
|
251
|
-
return /* @__PURE__ */ t(_, { ref:
|
|
257
|
+
return /* @__PURE__ */ t(_, { ref: c, children: [
|
|
252
258
|
/* @__PURE__ */ t("div", { className: "regular-title", children: [
|
|
253
259
|
/* @__PURE__ */ t("div", { className: "regular-title-text", children: [
|
|
254
260
|
N(n) && /* @__PURE__ */ r("i", { className: n }),
|
|
255
|
-
/* @__PURE__ */ r("span", { children:
|
|
261
|
+
/* @__PURE__ */ r("span", { children: d })
|
|
256
262
|
] }),
|
|
257
|
-
N(b) && N(
|
|
263
|
+
N(b) && N(u) && /* @__PURE__ */ r(
|
|
258
264
|
G,
|
|
259
265
|
{
|
|
260
266
|
type: "button",
|
|
@@ -262,7 +268,7 @@ const X = R.div`
|
|
|
262
268
|
color: "neutral",
|
|
263
269
|
onClick: (e) => {
|
|
264
270
|
var p;
|
|
265
|
-
(p = e == null ? void 0 : e.target) == null || p.blur(), m(
|
|
271
|
+
(p = e == null ? void 0 : e.target) == null || p.blur(), m(u);
|
|
266
272
|
},
|
|
267
273
|
borderRadius: "curved",
|
|
268
274
|
className: "button-link",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const o=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";const o=require("react/jsx-runtime"),s=require("react"),_=require("./emotion-styled.browser.esm-BtEseadx.cjs"),C=require("./consts-goSZX3xP.cjs"),$=require("./useDetectMobile-zkbzoOGV.cjs"),T=require("./Button.cjs"),S=require("./suspense-product-card-detailed-D-pjVe22.cjs"),D=_.styled.div`
|
|
2
2
|
padding: 1.75rem 3rem;
|
|
3
3
|
display: grid;
|
|
4
4
|
grid-template-columns: ${a=>`repeat(${a.limit||5}, minmax(0, 1fr))`};
|
|
@@ -54,15 +54,10 @@
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
@media (max-width: ${
|
|
57
|
+
@media (max-width: ${C.MOBILE_SIZE_PX+"px"}) {
|
|
58
58
|
grid-template-columns: repeat(2, 1fr);
|
|
59
59
|
padding: 2rem 1.25rem;
|
|
60
60
|
gap: 1.19rem;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
@media (max-width: ${S.SMALL_MOBILE_SIZE_PX+"px"}) {
|
|
64
|
-
display: flex;
|
|
65
|
-
flex-direction: column;
|
|
66
61
|
|
|
67
62
|
& .product-card {
|
|
68
63
|
& img {
|
|
@@ -71,4 +66,9 @@
|
|
|
71
66
|
}
|
|
72
67
|
}
|
|
73
68
|
}
|
|
74
|
-
|
|
69
|
+
|
|
70
|
+
@media (max-width: ${C.SMALL_MOBILE_SIZE_PX+"px"}) {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
}
|
|
74
|
+
`,w=s.memo(S.DetailedProductCard),F=s.forwardRef((a,P)=>{const{items:r,limit:i=5,limitMobile:l=4,onSelectCard:u=()=>{},title:j="Urgent sale",showLessText:q="Show less",showMoreText:L="Show more",isLoading:M=!1,getImage:g=()=>{},negotiableText:p,freeText:b,onBookmark:f=()=>{},bookmarkComponent:k,componentName:h,sponsoredText:y}=a,d=$.useDetectMobile(),[n,U]=s.useState(!1),v=s.useMemo(()=>{var t;return o.jsx(o.Fragment,{children:d===!0?(t=r==null?void 0:r.slice(0,n===!0?r==null?void 0:r.length:l))==null?void 0:t.map((e,m)=>o.jsx(w,{name:e==null?void 0:e.name,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,categoryCode:e==null?void 0:e.categoryCode,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,sponsored:e==null?void 0:e.sponsored,onSelectCard:(N,c)=>u({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:c}),image:e==null?void 0:e.image,imageUrl:g(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,imageComponent:e==null?void 0:e.imageComponent,negotiableText:p,freeText:b,onBookmark:f,bookmarkComponent:k,bookmarked:e==null?void 0:e.bookmarked,bookmarkLists:e==null?void 0:e.bookmarkLists,metadata:{name:h,accessor:e==null?void 0:e.accessor},tags:e==null?void 0:e.tags,condition:e==null?void 0:e.condition,quantity:e==null?void 0:e.quantity,trade:e==null?void 0:e.trade,sponsoredText:y},m)):r==null?void 0:r.slice(0,i).map((e,m)=>o.jsx(w,{name:e==null?void 0:e.name,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,categoryCode:e==null?void 0:e.categoryCode,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,location:e==null?void 0:e.location,sponsored:e==null?void 0:e.sponsored,onSelectCard:(N,c)=>u({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:c}),image:e==null?void 0:e.image,imageUrl:g(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,imageComponent:e==null?void 0:e.imageComponent,negotiableText:p,freeText:b,onBookmark:f,bookmarkComponent:k,bookmarked:e==null?void 0:e.bookmarked,bookmarkLists:e==null?void 0:e.bookmarkLists,metadata:{name:h,accessor:e==null?void 0:e.accessor},tags:e==null?void 0:e.tags,condition:e==null?void 0:e.condition,quantity:e==null?void 0:e.quantity,trade:e==null?void 0:e.trade,sponsoredText:y},m))})},[r,d,i,l,n]);return o.jsxs(D,{ref:P,limit:i,children:[o.jsxs("div",{className:"urgent-tag",children:[o.jsx("i",{className:"mng mng-lnc-bolt-filled"}),o.jsx("span",{children:j})]}),o.jsx(S.SuspenseDetailedProductCard,{isLoading:M,limit:i,keyPrefix:"explore-landing",children:v}),d===!0&&l<(r==null?void 0:r.length)&&o.jsx(T,{className:"show-more",btnType:"basic",type:"button",color:"neutral",onClick:t=>{var e;(e=t==null?void 0:t.target)==null||e.blur(),U(!n)},children:n===!0?q:L})]})});module.exports=F;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as a, Fragment as
|
|
2
|
-
import { memo as
|
|
3
|
-
import { s as
|
|
1
|
+
import { jsx as a, Fragment as $, jsxs as y } from "react/jsx-runtime";
|
|
2
|
+
import { memo as T, forwardRef as F, useState as I, useMemo as _ } from "react";
|
|
3
|
+
import { s as q } from "./emotion-styled.browser.esm-BNN1dTl3.js";
|
|
4
4
|
import { M as B, S as D } from "./consts-BuFChS64.js";
|
|
5
5
|
import { u as E } from "./useDetectMobile-Bkvj0VMa.js";
|
|
6
6
|
import j from "./Button.js";
|
|
7
7
|
import { D as z, S as A } from "./suspense-product-card-detailed-BZtObEfA.js";
|
|
8
|
-
const G =
|
|
8
|
+
const G = q.div`
|
|
9
9
|
padding: 1.75rem 3rem;
|
|
10
10
|
display: grid;
|
|
11
11
|
grid-template-columns: ${(o) => `repeat(${o.limit || 5}, minmax(0, 1fr))`};
|
|
@@ -65,11 +65,6 @@ const G = _.div`
|
|
|
65
65
|
grid-template-columns: repeat(2, 1fr);
|
|
66
66
|
padding: 2rem 1.25rem;
|
|
67
67
|
gap: 1.19rem;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
@media (max-width: ${D + "px"}) {
|
|
71
|
-
display: flex;
|
|
72
|
-
flex-direction: column;
|
|
73
68
|
|
|
74
69
|
& .product-card {
|
|
75
70
|
& img {
|
|
@@ -78,15 +73,20 @@ const G = _.div`
|
|
|
78
73
|
}
|
|
79
74
|
}
|
|
80
75
|
}
|
|
81
|
-
|
|
76
|
+
|
|
77
|
+
@media (max-width: ${D + "px"}) {
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
}
|
|
81
|
+
`, C = T(z), K = F((o, S) => {
|
|
82
82
|
const {
|
|
83
83
|
items: r,
|
|
84
84
|
limit: t = 5,
|
|
85
|
-
limitMobile:
|
|
85
|
+
limitMobile: s = 4,
|
|
86
86
|
onSelectCard: c = () => {
|
|
87
87
|
},
|
|
88
|
-
title:
|
|
89
|
-
showLessText:
|
|
88
|
+
title: w = "Urgent sale",
|
|
89
|
+
showLessText: P = "Show less",
|
|
90
90
|
showMoreText: L = "Show more",
|
|
91
91
|
isLoading: M = !1,
|
|
92
92
|
getImage: u = () => {
|
|
@@ -96,68 +96,87 @@ const G = _.div`
|
|
|
96
96
|
onBookmark: f = () => {
|
|
97
97
|
},
|
|
98
98
|
bookmarkComponent: b,
|
|
99
|
-
componentName: k
|
|
100
|
-
|
|
99
|
+
componentName: k,
|
|
100
|
+
sponsoredText: h
|
|
101
|
+
} = o, l = E(), [n, U] = I(!1), v = _(() => {
|
|
101
102
|
var i;
|
|
102
|
-
return /* @__PURE__ */ a(
|
|
103
|
-
|
|
103
|
+
return /* @__PURE__ */ a($, { children: l === !0 ? (i = r == null ? void 0 : r.slice(0, n === !0 ? r == null ? void 0 : r.length : s)) == null ? void 0 : i.map((e, m) => /* @__PURE__ */ a(
|
|
104
|
+
C,
|
|
104
105
|
{
|
|
105
|
-
|
|
106
|
+
name: e == null ? void 0 : e.name,
|
|
106
107
|
price: e == null ? void 0 : e.price,
|
|
108
|
+
sellingPrice: e == null ? void 0 : e.sellingPrice,
|
|
107
109
|
isFree: e == null ? void 0 : e.isFree,
|
|
108
110
|
isNegotiable: e == null ? void 0 : e.isNegotiable,
|
|
109
111
|
currency: e == null ? void 0 : e.currency,
|
|
112
|
+
categoryCode: e == null ? void 0 : e.categoryCode,
|
|
110
113
|
sellerUuid: e == null ? void 0 : e.sellerUuid,
|
|
111
114
|
uuid: e == null ? void 0 : e.uuid,
|
|
112
|
-
|
|
115
|
+
sponsored: e == null ? void 0 : e.sponsored,
|
|
113
116
|
onSelectCard: (N, d) => c({
|
|
114
117
|
uuid: e == null ? void 0 : e.uuid,
|
|
115
118
|
nameSlug: e == null ? void 0 : e.nameSlug,
|
|
116
119
|
cardRef: d
|
|
117
120
|
}),
|
|
121
|
+
image: e == null ? void 0 : e.image,
|
|
118
122
|
imageUrl: u(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
|
|
123
|
+
imageComponent: e == null ? void 0 : e.imageComponent,
|
|
119
124
|
negotiableText: g,
|
|
120
125
|
freeText: p,
|
|
121
126
|
onBookmark: f,
|
|
122
127
|
bookmarkComponent: b,
|
|
123
128
|
bookmarked: e == null ? void 0 : e.bookmarked,
|
|
124
129
|
bookmarkLists: e == null ? void 0 : e.bookmarkLists,
|
|
125
|
-
metadata: { name: k, accessor: e == null ? void 0 : e.accessor }
|
|
130
|
+
metadata: { name: k, accessor: e == null ? void 0 : e.accessor },
|
|
131
|
+
tags: e == null ? void 0 : e.tags,
|
|
132
|
+
condition: e == null ? void 0 : e.condition,
|
|
133
|
+
quantity: e == null ? void 0 : e.quantity,
|
|
134
|
+
trade: e == null ? void 0 : e.trade,
|
|
135
|
+
sponsoredText: h
|
|
126
136
|
},
|
|
127
137
|
m
|
|
128
138
|
)) : r == null ? void 0 : r.slice(0, t).map((e, m) => /* @__PURE__ */ a(
|
|
129
|
-
|
|
139
|
+
C,
|
|
130
140
|
{
|
|
131
|
-
|
|
141
|
+
name: e == null ? void 0 : e.name,
|
|
132
142
|
price: e == null ? void 0 : e.price,
|
|
143
|
+
sellingPrice: e == null ? void 0 : e.sellingPrice,
|
|
133
144
|
isFree: e == null ? void 0 : e.isFree,
|
|
134
145
|
isNegotiable: e == null ? void 0 : e.isNegotiable,
|
|
135
146
|
currency: e == null ? void 0 : e.currency,
|
|
147
|
+
categoryCode: e == null ? void 0 : e.categoryCode,
|
|
136
148
|
sellerUuid: e == null ? void 0 : e.sellerUuid,
|
|
137
149
|
uuid: e == null ? void 0 : e.uuid,
|
|
138
150
|
location: e == null ? void 0 : e.location,
|
|
139
|
-
|
|
151
|
+
sponsored: e == null ? void 0 : e.sponsored,
|
|
140
152
|
onSelectCard: (N, d) => c({
|
|
141
153
|
uuid: e == null ? void 0 : e.uuid,
|
|
142
154
|
nameSlug: e == null ? void 0 : e.nameSlug,
|
|
143
155
|
cardRef: d
|
|
144
156
|
}),
|
|
157
|
+
image: e == null ? void 0 : e.image,
|
|
145
158
|
imageUrl: u(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
|
|
159
|
+
imageComponent: e == null ? void 0 : e.imageComponent,
|
|
146
160
|
negotiableText: g,
|
|
147
161
|
freeText: p,
|
|
148
162
|
onBookmark: f,
|
|
149
163
|
bookmarkComponent: b,
|
|
150
164
|
bookmarked: e == null ? void 0 : e.bookmarked,
|
|
151
165
|
bookmarkLists: e == null ? void 0 : e.bookmarkLists,
|
|
152
|
-
metadata: { name: k, accessor: e == null ? void 0 : e.accessor }
|
|
166
|
+
metadata: { name: k, accessor: e == null ? void 0 : e.accessor },
|
|
167
|
+
tags: e == null ? void 0 : e.tags,
|
|
168
|
+
condition: e == null ? void 0 : e.condition,
|
|
169
|
+
quantity: e == null ? void 0 : e.quantity,
|
|
170
|
+
trade: e == null ? void 0 : e.trade,
|
|
171
|
+
sponsoredText: h
|
|
153
172
|
},
|
|
154
173
|
m
|
|
155
174
|
)) });
|
|
156
|
-
}, [r,
|
|
157
|
-
return /* @__PURE__ */
|
|
158
|
-
/* @__PURE__ */
|
|
175
|
+
}, [r, l, t, s, n]);
|
|
176
|
+
return /* @__PURE__ */ y(G, { ref: S, limit: t, children: [
|
|
177
|
+
/* @__PURE__ */ y("div", { className: "urgent-tag", children: [
|
|
159
178
|
/* @__PURE__ */ a("i", { className: "mng mng-lnc-bolt-filled" }),
|
|
160
|
-
/* @__PURE__ */ a("span", { children:
|
|
179
|
+
/* @__PURE__ */ a("span", { children: w })
|
|
161
180
|
] }),
|
|
162
181
|
/* @__PURE__ */ a(
|
|
163
182
|
A,
|
|
@@ -168,7 +187,7 @@ const G = _.div`
|
|
|
168
187
|
children: v
|
|
169
188
|
}
|
|
170
189
|
),
|
|
171
|
-
|
|
190
|
+
l === !0 && s < (r == null ? void 0 : r.length) && /* @__PURE__ */ a(
|
|
172
191
|
j,
|
|
173
192
|
{
|
|
174
193
|
className: "show-more",
|
|
@@ -177,13 +196,13 @@ const G = _.div`
|
|
|
177
196
|
color: "neutral",
|
|
178
197
|
onClick: (i) => {
|
|
179
198
|
var e;
|
|
180
|
-
(e = i == null ? void 0 : i.target) == null || e.blur(), U(!
|
|
199
|
+
(e = i == null ? void 0 : i.target) == null || e.blur(), U(!n);
|
|
181
200
|
},
|
|
182
|
-
children:
|
|
201
|
+
children: n === !0 ? P : L
|
|
183
202
|
}
|
|
184
203
|
)
|
|
185
204
|
] });
|
|
186
205
|
});
|
|
187
206
|
export {
|
|
188
|
-
|
|
207
|
+
K as default
|
|
189
208
|
};
|