@lanaco/lnc-react-ui
Version:
React component library
424 lines (372 loc) • 18.9 kB
JavaScript
"use strict";const r=require("react/jsx-runtime"),s=require("react"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),S=require("./utils-NZLCh-J5.cjs"),I=require("./consts-CtNoHdBj.cjs"),K=require("./motion-B_VPZaJq.cjs"),i=require("./index-BPVoEhTF.cjs"),Q=require("./Icon.cjs"),ee=require("./Badge.cjs"),M=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),G=require("./useDetectMobile-D6d5LpdL.cjs"),re=require("./FlexBox.cjs"),q=require("./index-Cb_AeN9A.cjs"),z=require("./IconButton.cjs"),te=u.newStyled.div`
cursor: pointer;
display: flex;
gap: 1rem;
padding: 1.25rem;
border-radius: 20px;
border: 1px solid var(--gray-95008, #14161a14);
@media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
flex-direction: column;
padding: 0;
gap: 0;
border: none;
border-radius: 0;
}
`,oe=u.newStyled.div`
border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,"edged")};
height: 15rem;
width: 15rem;
min-width: 15rem;
cursor: pointer;
position: relative;
overflow: hidden;
& img {
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
object-fit: cover;
transform: scale(1.1);
transition: var(--transition, all 0.3s ease);
&:hover {
transform: scale(1.25);
}
}
@media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
width: 100%;
max-width: 100dvh;
height: 23.438rem;
}
`,ie=u.newStyled.div`
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
color: var(--gray-950, #14161a);
font-weight: 400;
font-size: 0.875rem;
& .campaign-title {
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.1rem;
color: var(--primary-500, #f59e0b);
}
& .campaign-title-text {
font-weight: 600;
font-size: 1.375rem;
transition: var(--transition, all 0.3s ease);
&:hover {
color: var(--primary-500, #f59e0b);
font-size: 1.4rem;
}
}
& .text-block-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
& .title-block-wrapper {
display: flex;
flex-direction: column;
}
& .timestamp-text {
font-size: 0.875rem;
font-weight: 400;
padding-top: 0.25rem;
color: var(--gray-700, #4e555f);
}
& .profile-item:hover {
background-color: transparent;
}
@media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
padding: 1.25rem;
& .campaign-title {
font-size: 0.875rem;
}
& .text-block-wrapper {
gap: 0.25rem;
}
& .text-block-wrapper {
gap: 0.25rem;
}
}
`,ne={"#ADE3EB":"#76D0DB","#DDD6FE":"#C4B5FD","#FDE68A":"#FCD34D","#A7F3D0":"#6EE7B7","#BADFFF":"#87C6FA","#FECDD3":"#FDA4AF","#EFE2CF":"#EAD2AF","#DDDFE4":"#C4C8CF","#E7E5E4":"#D6D3D1","#FED7AA":"#FDBA74",default:"#C4C8CF"},V=(e=!1,o=!1,c=!1)=>`
display: flex;
${o?"flex-wrap: wrap;":""}
${o?"":"flex-wrap: nowrap;"}
${e?"align-items: center;":""}
${c?"justify-content: center;":""}
`,se=u.newStyled(K.motion.div)`
text-decoration: none;
${e=>e.hasPermission===!0&&"cursor: pointer"};
&:focus,
&:hover,
&:visited,
&:link,
&:active {
text-decoration: none;
}
& .icon,
.name {
text-decoration: none;
}
${V(!0)}
gap: 0.5rem;
padding: 0.5rem;
color: ${e=>e.isActive===!1?"var(--gray-900)":"var(--primary-600)"};
font-weight: 500;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,"slight")};
transition: all 0.25s ease;
& .logo-wrapper {
${V(!0,!1,!0)}
flex-shrink: 0;
border-radius: 999px;
border: 3px solid
${e=>e.isActive===!1?"var(--gray-300, #c4c8cf)":ne[e.themeColor]??"var(--gray-300, #c4c8cf)"};
& img,
.img-placeholder {
border-radius: 999px;
object-fit: cover;
height: 1.25rem;
width: 1.25rem;
background-color: var(--gray-200, #dddfe4);
}
& .no-image {
background: white;
}
}
&.user-profile-item {
& .logo-wrapper {
border: 3px solid transparent;
}
}
& .name {
flex-grow: 15;
}
& .notifications-number .badge {
font-size: 0.75rem;
}
& .badge {
max-height: 1.25rem;
min-height: 1.25rem;
padding: 0.375rem;
line-height: 1rem;
}
&:hover {
cursor: pointer;
background-color: var(--gray-95080, #14161acc);
color: var(--gray-600, #676e79);
}
`,ae=u.newStyled.div`
position: absolute;
top: 0.5rem;
${e=>e.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
display: flex;
gap: 0.25rem;
`,le=e=>`var(--${e}-700)`,ce=u.newStyled.div`
border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,e.borderRadius||"slight")};
background-color: ${e=>le(e==null?void 0:e.color)};
color: white;
height: 1.5rem;
min-width: 1.5rem;
width: ${e=>e.fitContent===!0?"fit-content":"1.5rem"};
${e=>e.fitContent===!0&&"padding: 0 0.1rem;"};
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
padding: ${e=>e.padding};
& i {
font-size: 0.813rem;
}
`,X=e=>{const{uuid:o,hasPermission:c=!0,isUser:n,image:m,name:a,notifications:d=0,color:x="primary",size:w="large",style:j,disabled:l,onSelect:g=()=>{},isActive:y,className:b,themeData:f}=e,T={theme:M.useTheme(),color:x,size:w,style:j,disabled:l};return s.createElement(se,{onClick:t=>{t.stopPropagation(),c===!0&&(g==null||g())},...T,key:a,animate:{y:0,opacity:1},className:`profile-item ${b}`,exit:{opacity:0},hasPermission:c,initial:{y:-10,opacity:0},isActive:y,themeColor:(f==null?void 0:f.code)||"transparent"},r.jsx("div",{className:"logo-wrapper",children:m}),r.jsx("div",{className:"name",children:a}),d>0&&r.jsx("div",{className:"notifications-number",children:r.jsx(ee,{className:"badge",color:"danger",size:"small",children:d>99?"99+":d})}))};X.propTypes={id:i.PropTypes.any,isUserProfile:i.PropTypes.bool,themeColor:i.PropTypes.string,image:i.PropTypes.any,name:i.PropTypes.string,notifications:i.PropTypes.number,style:i.PropTypes.object,className:i.PropTypes.string,color:i.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral"]),size:i.PropTypes.oneOf(["large"]),onSelect:i.PropTypes.func,hasPermission:i.PropTypes.bool};const H=(e,o)=>{if(!e||!o)return null;let c=Math.floor((e==null?void 0:e.getTime())-(o==null?void 0:o.getTime())),n=1e3*60*60*24;return Math.ceil(c/n)},Y=e=>{const o=M.useTheme(),{uuid:c,shopUuid:n,title:m="",description:a,badges:d,coverPhoto:x,onSelect:w,status:j,startDate:l,endDate:g,salesPackages:y,shopName:b,shopImage:f,onSelectCard:h=()=>{},onSelectShop:T=()=>{},campaignSingleText:t,salesCampaignTypes:$=[],startsInPrefixTextPlural:P,startsinSuffixTextPlural:F,startsInPrefixTextSingular:k,startsinSuffixTextSingular:A,themeData:O,...R}=e,p=l?new Date(l)<=new Date:!1;H(g?new Date(g):null,l?new Date(l):null);const v=H(l?new Date(l):null,new Date);return r.jsxs(te,{theme:o,onClick:h,...R,children:[r.jsxs(oe,{theme:o,onClick:()=>w==null?void 0:w(),children:[r.jsx("img",{src:x}),r.jsx(ae,{children:y==null?void 0:y.map((C,E)=>{var N,W;return r.jsx(ce,{color:(N=$==null?void 0:$.find(B=>B.value===C))==null?void 0:N.color,theme:o,children:r.jsx(Q,{icon:(W=$==null?void 0:$.find(B=>B.value===C))==null?void 0:W.icon})},`package__${E}`)})})]}),r.jsxs(ie,{theme:o,children:[r.jsxs("div",{className:"text-block-wrapper",children:[r.jsxs("div",{className:"title-block-wrapper",children:[r.jsx("div",{className:"campaign-title",children:t}),r.jsx("div",{className:"campaign-title-text",children:m}),r.jsx("div",{className:"timestamp-text",children:p?"":v===1?`${k} ${v} ${A}`:`${P} ${v} ${F}`})]}),r.jsx("div",{children:a})]}),r.jsx(X,{hasPermission:!0,image:r.jsx("img",{src:f,className:`${f?"":"no-image"}`}),themeData:O,isActive:!0,isUser:!1,name:b,onClick:()=>T(n)})]})]})};Y.propTypes={title:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]),numberOfListings:i.PropTypes.number,dropdown:i.PropTypes.any,color:i.PropTypes.string};const de=u.newStyled.div`
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
& .hover-left-arrow {
display: none;
position: absolute;
top: 50%;
left: 1.5rem;
z-index: ${e=>S.isDefined(e.arrowsZIndex)?e.arrowsZIndex:20};
}
& .hover-right-arrow {
display: none;
position: absolute;
top: 50%;
right: 1.5rem;
z-index: ${e=>S.isDefined(e.arrowsZIndex)?e.arrowsZIndex:20};
}
& .clip-loader-wrapper {
margin: auto;
padding: 0 1rem;
}
@media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
gap: 1.25rem;
& .hover-left-arrow,
.hover-right-arrow {
display: flex;
}
}
`,ge=u.newStyled.div`
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-weight: 600;
font-size: 1.5rem;
& .btns-group {
display: flex;
gap: 0.375rem;
}
@media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
padding: 0 1rem;
& .btns-group {
display: none;
}
}
`,he=u.newStyled.div`
position: relative;
padding: ${e=>e.padding};
& button {
white-space: nowrap;
}
& .badge-button {
${e=>e.showTimesBtn===!0&&"padding-left: 0.5rem; padding-right: 0.5rem;"}
}
& .gradient {
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 4;
transition: ${"0.3s"};
right: ${e=>e.noArrows!==!0?"6rem":"0"};
width: 2rem;
background: #fff;
height: 100%;
-webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
mask-image: linear-gradient(to left, black 10%, transparent 50%);
}
& .scrollable-container {
scroll-behavior: smooth;
overflow: hidden;
-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 */
}
}
& .scroll-arrow-right,
& .scroll-arrow-left {
position: absolute;
top: 50%;
transform: translate(0, -50%);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
visibility: ${e=>e.arrowsVisibleOnHover===!1&&e.hasOverflow?"visible":"hidden"};
z-index: 4;
transition: ${"0.3s"};
}
& .scroll-arrow-right {
${e=>e.rightAlignArrows===!0?"right: 0":"right: 0.7rem"};
}
& .scroll-arrow-left {
${e=>e.rightAlignArrows===!0?"right: 2.625rem":"left: 0.7rem"};
}
& .scrollable-container:hover > .scroll-arrow-left,
& .scrollable-container:hover > .scroll-arrow-right {
visibility: ${e=>e.hasOverflow?"visible":"hidden"};
}
@media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
& .scroll-arrow-left,
& .scroll-arrow-right {
display: none;
}
& .gradient {
right: 0;
}
}
`,pe=(e,o)=>{const[c,n]=s.useState({trigger:null,direction:null}),m=a=>a.touches||a.originalEvent.touches;return s.useEffect(()=>{const a=typeof e=="string"||e instanceof String?document.getElementById(e):e.current;let d=null,x=null;if(a){const w=l=>{const g=m(l)[0];d=g.clientX,x=g.clientY},j=l=>{if(!d||!x)return;const g=l.touches[0].clientX,y=l.touches[0].clientY,b=d-g,f=x-y;Math.abs(b)>Math.abs(f)?b>0?n(h=>({trigger:!h.trigger,direction:_.LEFT})):n(h=>({trigger:!h.trigger,direction:_.RIGHT})):f>0?n(h=>({trigger:!h.trigger,direction:_.UP})):n(h=>({trigger:!h.trigger,direction:_.DOWN})),d=null,x=null};return a.addEventListener("touchstart",w),a.addEventListener("touchmove",j),()=>{a.removeEventListener("touchstart",w),a.addEventListener("touchmove",j)}}},[]),c},_={UP:"up",DOWN:"down",RIGHT:"right",LEFT:"left"},J=s.forwardRef(({title:e,columnGap:o="2rem",rowGap:c="1.25rem",scrollBySize:n=300,wrapForMobile:m=!1,wrap:a=!1,children:d,methodsRef:x,arrowsVisibleOnHover:w=!0,rightAlignArrows:j=!1,padding:l="0",showTimesBtn:g,noArrows:y,onShowEnd:b,arrowsZIndex:f,...h},T)=>{const t=G.useDetectMobile(),$=M.useTheme(),[P,F]=s.useState(!1),[k,A]=s.useState(!1),[O,R]=s.useState(!0),p=s.useRef(),v=pe(p);s.useEffect(()=>{(v==null?void 0:v.direction)===_.RIGHT&&k!==!0?E():(v==null?void 0:v.direction)===_.LEFT&&P!==!0&&C()},[v]);const C=()=>{var D;(D=p.current)==null||D.scrollBy(n,0)},E=()=>{var D;(D=p.current)==null||D.scrollBy(-n,0)},[N,W]=s.useState(!1);s.useEffect(()=>{var D,U;W(((D=p==null?void 0:p.current)==null?void 0:D.scrollWidth)>((U=p==null?void 0:p.current)==null?void 0:U.clientWidth))},[d]),s.useImperativeHandle(x,()=>({scrollToEnd(){B()},scrollLeft(){E()},scrollRight(){C()}}));const B=()=>{p.current.scrollLeft=p.current.scrollWidth};return r.jsxs(de,{arrowsZIndex:f,children:[r.jsxs(ge,{children:[r.jsx("div",{children:e}),r.jsxs("div",{className:"btns-group",children:[r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:k,icon:"angle-left",onClick:E}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:P,icon:"angle-right",onClick:C})]})]}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"hover-left-arrow scroll-arrow-left",color:"neutral",disabled:k,icon:"angle-left",onClick:E}),r.jsx(z,{borderRadius:"curved",btnType:"tinted",className:"hover-right-arrow scroll-arrow-right",color:"neutral",disabled:P,icon:"angle-right",onClick:C}),r.jsx(he,{ref:T,arrowsVisibleOnHover:w,hasOverflow:N,noArrows:y,padding:l,rightAlignArrows:j,showTimesBtn:g,theme:$,...h,children:r.jsxs(re,{ref:p,className:"scrollable-container",columnGap:o,rowGap:c,wrap:a||m&&t?"Wrap":"NoWrap",children:[r.jsx(q.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{k===!0&&A(!1)},onIsVisible:()=>{k===!1&&A(!0)}}),d,r.jsx(q.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{P===!0&&F(!1),R(!0)},onIsVisible:()=>{P===!1&&F(!0),R(!1),b==null||b()}}),O&&N&&r.jsx("div",{className:"gradient"})]})})]})});J.propTypes={title:i.PropTypes.string,rowGap:i.PropTypes.string,columnGap:i.PropTypes.string,scrollBySize:i.PropTypes.number,wrapForMobile:i.PropTypes.bool,wrap:i.PropTypes.bool,methodsRef:i.PropTypes.any,arrowsVisibleOnHover:i.PropTypes.bool,rightAlignArrows:i.PropTypes.bool,padding:i.PropTypes.string};const ue=u.newStyled.div`
display: flex;
flex-direction: column;
gap: 1.5rem;
& .arrow-icon {
& i {
transition: all 0.25s ease;
transform: ${e=>e.expanded===!0?"rotate(-180deg)":"rotate(0)"};
}
}
& .badge-button {
white-space: nowrap;
font-weight: 500;
}
& .campaign-item {
min-width: calc(50% - 0.87rem);
width: calc(50% - 0.87rem);
margin-right: 1.25rem;
}
@media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
& .campaign-item {
min-width: 100%;
width: 100%;
margin-right: 0;
}
}
`,L=u.newStyled.div`
width: ${e=>e.width||"100%"};
height: ${e=>(e.heightCoeff||1)*1.125}rem;
background-color: var(--gray-200, #dddfe4);
${S.linearGradientAnimation("-90deg")}
`,fe=u.newStyled.div`
display: flex;
flex-direction: ${e=>e!=null&&e.row?"row":"column"};
gap: ${e=>(e==null?void 0:e.gap)??"0.5rem"};
width: ${e=>(e==null?void 0:e.width)??"100%"};
`,Z=u.newStyled.div`
border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,(e==null?void 0:e.borderRadius)??"regular")};
background: var(--gray-200, #dddfe4);
position: relative;
max-height: ${e=>(e==null?void 0:e.height)??"5rem"};
max-width: ${e=>(e==null?void 0:e.width)??"5rem"};
height: ${e=>(e==null?void 0:e.height)??"5rem"};
width: ${e=>(e==null?void 0:e.width)??"5rem"};
flex-shrink: 0;
${S.linearGradientAnimation()}
`,me=u.newStyled.div`
background: var(--white, #fff);
border-radius: ${e=>S.getBorderRadiusValueWithUnits(e.theme,"edged")};
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
border: 1px solid var(--gray-95012, #14161a1f);
display: flex;
gap: 1rem;
padding: 1.25rem;
width: 100%;
& .campaign__left-section {
position: relative;
}
& .campaign__right-section {
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 18rem;
width: 100%;
}
& .campaign__user {
display: flex;
align-items: center;
gap: 0.5rem;
}
`,xe=s.forwardRef(({},e)=>{const o=M.useTheme();return r.jsxs(me,{ref:e,theme:o,children:[r.jsx("div",{className:"campaign__left-section",children:r.jsx(Z,{theme:o,width:"15rem",height:"15rem",borderRadius:"edged"})}),r.jsxs("div",{className:"campaign__right-section",children:[r.jsxs(fe,{theme:o,children:[r.jsx(L,{heightCoeff:.75,theme:o,width:"35%"}),r.jsx(L,{heightCoeff:1.25,theme:o}),r.jsx(L,{heightCoeff:3,theme:o})]}),r.jsxs("div",{className:"campaign__user",children:[r.jsx(Z,{theme:o,width:"2.5rem",height:"2.5rem",borderRadius:"curved"}),r.jsx(L,{theme:o,width:"75%"})]})]})]})}),we=({itemsCount:e=5,keyPrefix:o})=>r.jsx(r.Fragment,{children:Array.from({length:e},(c,n)=>r.jsx(xe,{},`${o}-skeleton-campaign-card-${n}`))}),be=({children:e,fallbackComponent:o=r.jsx(r.Fragment,{}),isLoading:c=!1,itemsCount:n=5,keyPrefix:m})=>r.jsx(s.Suspense,{fallback:o,children:c===!0?r.jsx(we,{itemsCount:n,keyPrefix:m}):e}),ye=s.memo(Y),ve=s.forwardRef(({sellerType:e="Shop",items:o=[],title:c,isLoading:n,onSelectCard:m=()=>{},onSelectShop:a=()=>{},customScrollSize:d,campaignSingleText:x,salesCampaignTypes:w=[],startsInPrefixTextPlural:j,startsinSuffixTextPlural:l,startsInPrefixTextSingular:g,startsinSuffixTextSingular:y},b)=>{const f=s.useRef(),h=G.useDetectMobile(),T=s.useMemo(()=>o==null?void 0:o.map((t,$)=>r.jsx(ye,{className:"campaign-item",coverPhoto:t==null?void 0:t.coverPhoto,description:t==null?void 0:t.description,endDate:t==null?void 0:t.endDate,salesPackages:t==null?void 0:t.salesPackages,sellerType:e,shopImage:t==null?void 0:t.profileImage,shopName:t==null?void 0:t.shopName,shopUuid:t==null?void 0:t.shopUuid,startDate:t==null?void 0:t.startDate,title:t==null?void 0:t.name,uuid:t==null?void 0:t.campaignUuid,onSelectCard:()=>m(t==null?void 0:t.campaignUuid,t==null?void 0:t.shopUuid),onSelectShop:()=>a(t==null?void 0:t.shopUuid),campaignSingleText:x,salesCampaignTypes:w,startsInPrefixTextPlural:j,startsinSuffixTextPlural:l,startsInPrefixTextSingular:g,startsinSuffixTextSingular:y,themeData:t==null?void 0:t.themeData},`campaign__item__${$}__${t==null?void 0:t.startDate}___${t==null?void 0:t.endDate}`)),[o]);return r.jsx(r.Fragment,{children:(o==null?void 0:o.length)>0&&r.jsx(ue,{ref:b,className:"row-section-scroll",children:r.jsx(J,{arrowsVisibleOnHover:!1,columnGap:"0",methodsRef:f,mobileHoverScrollButtons:!0,noArrows:!0,padding:"0.25rem 0",rightAlignArrows:!0,scrollBySize:h?window.innerWidth:d>0?d:window.innerWidth,showTimesBtn:!1,title:c,onShowEnd:()=>{},arrowsZIndex:11,children:r.jsx(be,{isLoading:n,itemsCount:2,keyPrefix:"sales-camp",children:T})})})})});module.exports=ve;