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