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