@lanaco/lnc-react-ui
Version:
React component library
200 lines (169 loc) • 6.52 kB
JavaScript
"use strict";const r=require("react/jsx-runtime"),d=require("react"),x=require("./index-DeS-oqJB.cjs"),u=require("./style-17Ie7d9D.cjs"),h=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),t=require("./breakpoints-CcVm-gVm.cjs"),v=require("./Button.cjs"),w=require("./useDetectMobile-DYV6V1yw.cjs"),y=require("./utils-BK6B_Y9X.cjs"),j=h.styled(u.SkeletonAnimationColumnContainer)`
@media ${t.down("S")} {
& > div {
height: 100%;
aspect-ratio: 1 / 1;
}
}
`,k=({keyPrefix:i})=>r.jsx(j,{children:r.jsx(u.SkeletonRect,{keyPrefix:`${i}-0`,width:"100%",height:"22.5rem"})}),S=({keyPrefix:i,isLoading:n=!1,fallbackComponent:o=r.jsx(r.Fragment,{}),children:a})=>r.jsx(d.Suspense,{fallbackComponent:o,children:n===!0?r.jsx(k,{keyPrefix:i}):a}),C=h.styled.div`
&:hover {
cursor: pointer;
& .react-multiple-carousel__arrow {
visibility: visible;
}
}
& .carousel-slider {
align-items: center;
}
& .carousel-item {
padding-right: 0;
&:not(.react-multi-carousel-item--active) {
& .section__card {
height: 22.5rem;
}
}
& .section__card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 0.75rem;
width: 100%;
height: 22.5rem;
position: relative;
overflow: hidden;
& .section__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: inherit;
}
& .card__content {
position: absolute;
top: 0;
left: 0;
padding: 3rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
& .card__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
& .card__title {
color: var(--white, #fff);
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 2.25rem;
}
& .card__description {
color: var(--white, #fff);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}
& .card__action {
padding: 0.625rem 0.75rem;
background: var(--white, #fff);
color: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
width: fit-content;
}
}
}
& .react-multiple-carousel__arrow {
width: 3rem;
height: 3rem;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 4px 0 rgba(20, 22, 26, 0.08),
0 2px 16px 0 rgba(20, 22, 26, 0.16);
backdrop-filter: blur(1.25rem);
visibility: hidden;
&::before {
color: var(--gray-950, #14161a);
}
&:hover {
background: rgba(255, 255, 255, 0.5);
}
}
& .react-multiple-carousel__arrow--left {
left: 1rem;
}
& .react-multiple-carousel__arrow--right {
right: 1rem;
}
@media ${t.down("M")} {
& .carousel-item .section__card,
& .carousel-item:not(.react-multi-carousel-item--active) .section__card {
height: 100%;
}
& .carousel-item .section__card .section__image {
object-fit: contain;
object-position: center;
}
}
@media ${t.down("S")} {
& .carousel-item .section__card .section__image {
object-fit: cover;
object-position: center;
}
}
@media ${t.down("XS")} {
& .carousel-container {
min-height: 23.4375rem;
}
& .carousel-item {
padding-right: 1rem;
&:last-of-type {
padding-left: 1rem;
padding-right: 0;
}
&:nth-last-child(2) {
padding-right: 0;
}
&:not(.react-multi-carousel-item--active) {
& .section__card {
height: 20.625rem;
}
}
&.react-multi-carousel-item--active:not([data-index="0"]) {
& .section__card {
animation: scaleCarouselItem 500ms forwards;
}
}
& .section__card {
height: 23.4375rem;
border-radius: 0.5rem;
& .section__image {
object-fit: cover;
object-position: center;
}
& .card__content {
display: none;
}
}
}
@keyframes scaleCarouselItem {
from {
height: 20.625rem;
}
top {
height: 23.4375rem;
}
}
}
`,q=d.forwardRef(({items:i=[],isLoading:n=!1,deviceType:o,partialVisible:a=!0,fallbackComponent:m=r.jsx(r.Fragment,{}),onSelectItem:_=()=>{},onButtonAction:p=()=>{},carouselProps:g},f)=>{const b={desktop:{breakpoint:{max:3e3,min:t.screenSizes.M.max},items:1,partialVisibilityGutter:0},tablet:{breakpoint:{max:t.screenSizes.M.max,min:t.screenSizes.S.min},items:1,partialVisibilityGutter:0},mobile:{breakpoint:{max:t.screenSizes.XS.max,min:0},items:1,partialVisibilityGutter:64}},c=w.useDetectMobile();return r.jsx(C,{className:"lp-section lp-bnr-section lp-banner-section-carousel banner-section-carousel-lnc",ref:f,children:r.jsx(S,{fallbackComponent:m,keyPrefix:"banner-carousel-skeleton",isLoading:n,children:r.jsx(x.Carousel,{responsive:b,deviceType:o,removeArrowOnDeviceType:["tablet","mobile"],infinite:!c,keyBoardControl:!0,autoPlay:!0,partialVisible:a,customTransition:"transform 500ms ease-in-out",sliderClass:"carousel-slider",itemClass:"carousel-item",containerClass:"carousel-container",rewind:!0,rewindWithAnimation:!0,...g,children:i==null?void 0:i.map((e,l)=>r.jsxs("div",{className:"section__card",onClick:()=>_(e),children:[y.isDefined(e==null?void 0:e.imageComponent)?e==null?void 0:e.imageComponent:r.jsx("img",{src:e==null?void 0:e.imageUrl,alt:`Slide ${l+1}`,loading:"lazy",className:"section__image"}),r.jsxs("div",{className:"card__content",children:[r.jsxs("div",{className:"card__text",children:[(e==null?void 0:e.title)&&r.jsx("div",{className:"card__title",children:e==null?void 0:e.title}),(e==null?void 0:e.title)&&r.jsx("div",{className:"card__description",children:e==null?void 0:e.description})]}),(e==null?void 0:e.buttonText)&&r.jsx(v,{text:e==null?void 0:e.buttonText,className:"card__action",size:"medium",onClick:s=>{s==null||s.stopPropagation(),p(e)}})]})]},`banner-section-carousel-item__${l+1}`))})})},`banner-section-carousel__${c}`)});module.exports=q;