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