@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.99 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),t=require("merge-sx"),i=require("react"),s=require("../../BrandCore/primitiveVariables.js"),l=require("../InputLabelHelp/InputLabelHelp.js"),n=require("./StyledSlider.js");const a=(e,r)=>{if(!e)return!1;const t=e.querySelectorAll(r);if(t.length<2)return!1;const i=Array.from(t).map(e=>e.getBoundingClientRect());let s=!1;for(let e=0;e<i.length-1;e++)if(i[e].right+5>i[e+1].left){s=!0;break}return s};module.exports=({labelLeft:d,labelMiddle:o,labelRight:u,labelRightProps:x,labelLeftProps:c,disabled:h,onChange:g,internalChange:b,max:m=5,min:f=1,marks:p,marksStep:j=1,step:S=1,value:M=f,slotProps:k,...C})=>{const{sanitisedMin:q,sanitisedMax:v}=((e,r)=>e>=r?{sanitisedMin:1,sanitisedMax:10}:{sanitisedMin:e,sanitisedMax:r})(f,m),B=i.useRef(null),y=p||((e,r,t)=>{const i=[];for(let s=e;s<=r;s++)s%t===0&&i.push({value:s,label:s.toString()});return i})(q,v,j),[L,w]=i.useState(!1),[R,A]=i.useState(!1),P=i.useCallback(()=>{w(a(B.current,".MuiSlider-markLabel")),A(a(B.current,".MuiSlider-mark"))},[B,w,A]);return i.useEffect(()=>{P()},[P,y?.length]),i.useEffect(()=>{const e=new ResizeObserver(P);return B.current&&e.observe(B.current),()=>{e.disconnect()}},[P]),e.jsxs(r.Box,{sx:t.mergeSx({minWidth:300},k?.root?.sx),...k?.root,children:[e.jsx(r.Box,{height:24,children:e.jsx(n.StyledSlider,{ref:B,valueLabelDisplay:h?"on":"auto",disabled:h,marks:y,step:S,hideMarkLabels:L,hideMarks:R,max:v,min:q,onChangeCommitted:()=>{b&&b()},onChange:(e,r,t)=>{g&&g(e,r,t)},value:M,...C})}),e.jsx(r.Box,{sx:{display:"flex",justifyContent:"space-between",pt:s.padding.lg,gap:1},children:(d||o||u)&&e.jsxs(e.Fragment,{children:[e.jsx(r.Box,{sx:{flex:1},children:e.jsx(l,{disabled:h,showicon:!1,...c,children:d})}),o&&e.jsx(r.Box,{sx:{flex:1,textAlign:"center"},children:e.jsx(l,{showicon:!1,disabled:h,children:o})}),e.jsx(r.Box,{sx:{flex:1,textAlign:"right"},children:e.jsx(l,{...x,showicon:!1,disabled:h,children:u})})]})})]})};