UNPKG

@lanaco/lnc-react-ui

Version:

React component library

424 lines (372 loc) 18.9 kB
"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;