@lanaco/lnc-react-ui
Version:
React component library
96 lines (84 loc) • 6.23 kB
JavaScript
"use strict";const l=require("react/jsx-runtime"),n=require("react"),r=require("./index-BPVoEhTF.cjs"),V=require("./FlexBox.cjs"),R=require("./IconButton.cjs"),_=require("./ThemeProvider.cjs"),z=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),E=require("./consts-CtNoHdBj.cjs"),D=require("./useDetectMobile-D6d5LpdL.cjs"),K=require("./index-Cb_AeN9A.cjs"),O=require("./Button.cjs"),F=require("./Icon.cjs"),G=require("./utils-NZLCh-J5.cjs"),X=z.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 {
max-width: -webkit-fill-available;
max-width: -moz-available; /* WebKit-based browsers will ignore this. */
max-width: fill-available;
${e=>e.rightAlignArrows===!0&&e.noArrows!==!0&&"margin-right: 6rem"};
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 */
}
@media (max-width: ${E.MOBILE_SIZE_PX+"px"}) {
margin-right: 0;
}
}
& .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: ${E.MOBILE_SIZE_PX+"px"}) {
& .scrollable-container {
overflow: auto;
}
& .scroll-arrow-left,
& .scroll-arrow-right {
display: none;
}
& .gradient {
right: 0;
}
& .scrollable-container button:nth-of-type(3) {
${e=>e.noMargin!==!0&&"margin-left: 1rem"};
}
}
`,W=n.forwardRef(({columnGap:e="2rem",rowGap:w="1.25rem",scrollBySize:u=300,wrapForMobile:y=!1,wrap:a=!1,children:p,methodsRef:b,arrowsVisibleOnHover:T=!0,rightAlignArrows:v=!1,padding:f="0",showTimesBtn:h,noArrows:c,noGradient:x=!1,hideDisabledArrows:d=!1,noMargin:g=!1,...P},S)=>{const k=D.useDetectMobile(),{theme:o}=_.useTheme(),[t,j]=n.useState(!1),[m,N]=n.useState(!1),[H,I]=n.useState(!0),s=n.useRef(),q=()=>{var i;(i=s.current)==null||i.scrollBy(u,0)},B=()=>{var i;(i=s.current)==null||i.scrollBy(-u,0)},[$,L]=n.useState(!1);n.useEffect(()=>{var i,A;L(((i=s==null?void 0:s.current)==null?void 0:i.scrollWidth)>((A=s==null?void 0:s.current)==null?void 0:A.clientWidth))},[p]),n.useImperativeHandle(b,()=>({scrollToEnd(){M()},scrollLeft(){B()},scrollRight(){q()}}));const M=()=>{s.current.scrollLeft=s.current.scrollWidth};return l.jsx(X,{ref:S,arrowsVisibleOnHover:T,hasOverflow:$,noArrows:c,padding:f,rightAlignArrows:v,showTimesBtn:h,theme:o,noMargin:g,...P,children:l.jsxs(V,{ref:s,className:"scrollable-container",columnGap:e,rowGap:w,wrap:a||y&&k?"Wrap":"NoWrap",children:[c!==!0&&l.jsxs(l.Fragment,{children:[!(d===!0&&m===!0)&&l.jsx(R,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:m,icon:"angle-left",onClick:B}),!(d===!0&&t===!0)&&l.jsx(R,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:t,icon:"angle-right",onClick:q})]}),l.jsx(K.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{m===!0&&N(!1)},onIsVisible:()=>{m===!1&&N(!0)}}),p,l.jsx(K.InfiniteScrollEndElement,{className:"right-scroller",isHorizontal:!0,onIsNotVisible:()=>{t===!0&&j(!1),I(!0)},onIsVisible:()=>{t===!1&&j(!0),I(!1)}}),H&&$&&x!==!0&&l.jsx("div",{className:"gradient"})]})})});W.propTypes={title:r.PropTypes.string,rowGap:r.PropTypes.string,columnGap:r.PropTypes.string,scrollBySize:r.PropTypes.number,wrapForMobile:r.PropTypes.bool,wrap:r.PropTypes.bool,methodsRef:r.PropTypes.any,arrowsVisibleOnHover:r.PropTypes.bool,rightAlignArrows:r.PropTypes.bool,padding:r.PropTypes.string};const C=n.forwardRef((e,w)=>{const{allButton:u=!0,items:y=[],selectedIds:a=[],onSelect:p=()=>{},onRemove:b=()=>{},onSelectAll:T=()=>{},className:v,showTimesBtn:f=!1,labelKey:h="label",valueKey:c="value",codeKey:x="code",uniqueKey:d,typeKey:g,productsToolbarName:P="All",...S}=e,k=(o,t)=>{a!=null&&a.includes(t)?b(o,t):p(o,t)};return l.jsxs(W,{ref:w,arrowsVisibleOnHover:!1,className:v,columnGap:"0.75rem",padding:"0.25rem 0",rightAlignArrows:!0,showTimesBtn:f,...S,children:[u&&l.jsx(O,{borderRadius:"curved",btnType:a.length===0?"filled":"tinted",className:"badge-button",color:"neutral",onClick:T,children:P}),y.map((o,t)=>l.jsxs(O,{borderRadius:"curved",btnType:a.includes(o.uuid)?"filled":"tinted",className:"badge-button",color:"neutral",onClick:()=>k(o,o[c]),children:[G.isDefined(o==null?void 0:o.icon)&&l.jsxs(l.Fragment,{children:[l.jsx("i",{className:o==null?void 0:o.icon})," "]}),o[h],f===!0&&l.jsx(F,{className:"times-btn",icon:"times",sizeInUnits:"0.75rem",onClick:()=>b(o[c],o[h],o[x],d?o[d]:null,g?o[g]:null)})]},t))]})});C.propTypes={allButton:r.PropTypes.bool,items:r.PropTypes.array,selectedIds:r.PropTypes.array,onSelect:r.PropTypes.func,onRemove:r.PropTypes.func,onSelectAll:r.PropTypes.func,className:r.PropTypes.string,showTimesBtn:r.PropTypes.bool,valuKey:r.PropTypes.string,labelKey:r.PropTypes.string,codeKey:r.PropTypes.string};exports.SelectBar=C;