@lanaco/lnc-react-ui
Version:
React component library
250 lines (236 loc) • 6.86 kB
JavaScript
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { memo as K, forwardRef as q, useMemo as Q } from "react";
import { s as G } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as p } from "./breakpoints-BubDitvo.js";
import H from "./IconButton.js";
import J from "./Button.js";
import { l as n } from "./utils-BUdHa0nB.js";
import { u as W } from "./useDetectMobile-B0Jog4jQ.js";
import { D as X, S as Y } from "./index-CZkKSTfr.js";
import { S as Z } from "./index-CCwfh-7A.js";
import { S as x } from "./index-ChXypC-5.js";
const ee = G.div`
display: flex;
flex-direction: column;
gap: 1.5rem;
& .section__heading {
display: flex;
justify-content: space-between;
}
& .section__title {
color: var(--gray-950, #14161a);
font-weight: 600;
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: -0.0294rem;
& i {
font-size: 1.5rem;
color: var(--primary-500, #f59e0b);
}
}
& .section__options {
& button {
&:focus {
outline: none;
outline-offset: 0;
}
}
}
& .section__items {
display: grid;
grid-template-columns: ${(r) => `repeat(${r.limit}, minmax(0, 1fr))`};
gap: 2rem;
}
@media ${p("M")} {
& .section__items {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
& .section__show-more {
color: var(--neutral-600, #0f2a46);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.0056rem;
width: 100%;
max-width: 100%;
align-self: center;
&:focus {
outline: none;
}
}
& .section__view-all {
white-space: nowrap;
}
@media ${p("S")} {
gap: 1.25rem;
& .section__items {
display: flex;
gap: 1rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
::-webkit-scrollbar {
-webkit-appearance: none;
}
-ms-overflow-style: none;
/* Internet Explorer 10+ */
scrollbar-width: none;
/* Firefox */
&::-webkit-scrollbar {
display: none;
/* Safari and Chrome */
}
}
}
`, oe = K(X), ge = q((r, g) => {
const {
title: c,
icon: m,
items: i,
limit: f = 4,
isLoading: l = !1,
onSelectCard: b = () => {
},
onLoadMore: h = () => {
},
onButtonAction: _ = () => {
},
getImage: S = () => {
},
viewAllbuttonLink: d,
viewAllButonText: u = "View all",
negotiableText: w,
freeText: y,
loadMoreButtonIcon: v = "angle-down",
sponsoredText: k,
onBookmark: C = () => {
},
actionComponent: N,
componentName: P,
hasNextPage: L = !1,
LinkComponent: B,
urgentText: O,
options: t = [],
isLoadingOptions: M = !1,
selectedOption: T,
onSelectOption: A = () => {
},
onRemoveOption: D = () => {
},
allOptionsEnabled: z = !1,
allOptionsLabel: F = "All",
onSelectAllOptions: I = () => {
},
optionLabel: R = "label",
optionValue: $ = "value",
optionCode: U = "code"
} = r, V = W(), j = Q(() => i == null ? void 0 : i.map((e, a) => /* @__PURE__ */ o(
oe,
{
name: e == null ? void 0 : e.name,
price: e == null ? void 0 : e.price,
sellingPrice: e == null ? void 0 : e.sellingPrice,
currency: e == null ? void 0 : e.currency,
image: e == null ? void 0 : e.image,
sellerUuid: e == null ? void 0 : e.sellerUuid,
uuid: e == null ? void 0 : e.uuid,
sponsored: e == null ? void 0 : e.sponsored,
imageComponent: e == null ? void 0 : e.imageComponent,
onSelectCard: (te, E) => b({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug, cardRef: E }),
nameSlug: e == null ? void 0 : e.nameSlug,
imageUrl: S(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
isFree: e == null ? void 0 : e.isFree,
isNegotiable: e == null ? void 0 : e.isNegotiable,
negotiableText: w,
freeText: y,
tags: e == null ? void 0 : e.tags,
categoryCode: e == null ? void 0 : e.categoryCode,
condition: e == null ? void 0 : e.condition,
quantity: e == null ? void 0 : e.quantity,
hasQuantities: e == null ? void 0 : e.hasQuantities,
status: e == null ? void 0 : e.status,
trade: e == null ? void 0 : e.trade,
sponsoredText: k,
onBookmark: C,
actionComponent: N,
bookmarked: e == null ? void 0 : e.bookmarked,
bookmarkLists: e == null ? void 0 : e.bookmarkLists,
metadata: { accessor: e == null ? void 0 : e.accessor, name: P },
sellerName: e == null ? void 0 : e.sellerName,
forCart: e == null ? void 0 : e.forCart,
forOrder: e == null ? void 0 : e.forOrder,
contactSeller: e == null ? void 0 : e.contactSeller,
hasVariants: e == null ? void 0 : e.hasVariants,
LinkComponent: B,
activeSalesPackages: e == null ? void 0 : e.activeSalesPackages,
urgentText: O,
hasFreeShipping: e == null ? void 0 : e.hasFreeShipping
},
a
)), [i]);
return /* @__PURE__ */ s(ee, { ref: g, limit: f, className: "lp-section lp-detailed-products-infinitive-section", children: [
/* @__PURE__ */ s("div", { className: "section__heading", children: [
n(c) && /* @__PURE__ */ s("div", { className: "section__title", children: [
n(m) && /* @__PURE__ */ o("i", { className: m }),
" ",
c
] }),
n(d) && n(u) && !l && /* @__PURE__ */ o(
J,
{
type: "button",
btnType: "tinted",
color: "neutral",
onClick: (e) => {
var a;
(a = e == null ? void 0 : e.target) == null || a.blur(), _(d);
},
borderRadius: "curved",
className: "section__view-all",
children: u
}
)
] }),
/* @__PURE__ */ o(x, { isLoading: M, children: t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ o(
Z,
{
items: t,
selectedIds: T,
onRemove: D,
onSelect: A,
allButton: z,
onSelectAll: I,
labelKey: R,
valueKey: $,
codeKey: U,
noMargin: !0,
productsToolbarName: F,
noGradient: !0,
className: "section__options"
}
) }),
/* @__PURE__ */ o(
Y,
{
isLoading: l,
keyPrefix: "detailed-product-card-skeleton",
children: /* @__PURE__ */ o("div", { className: "section__items", children: j })
}
),
!V && !l && L && /* @__PURE__ */ o(
H,
{
icon: v,
borderRadius: "curved",
btnType: "basic",
color: "neutral",
className: "section__show-more",
onClick: h
}
)
] });
});
export {
ge as default
};