retro-react/dist/esm/components/slider/Slider.js

A React component library for building retro-style websites

import{__rest as e}from"../../_virtual/_tslib.js";import{forwardRef as t,useState as n,useRef as o,useEffect as s}from"react";import{jsxs as i,jsx as r}from"../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js";import{classNames as m}from"../../utils/classNames.js";import a from"../../constants/commonClassNames.js";import{Tooltip as l,Tick as c,TickContainer as d,Mark as u,MarksContainer as h,Slider as v,SliderWrapper as p}from"./Slider.styled.js";const f=t(((t,f)=>{var{id:g,sx:M,className:x,value:j=0,min:b=0,max:N=100,step:w=1,showTooltip:C=!0,showTicks:E=!1,marks:L,onChange:O,disabled:k=!1}=t,y=e(t,["id","sx","className","value","min","max","step","showTooltip","showTicks","marks","onChange","disabled"]);const[T,B]=n(j),[R,S]=n(!1),[X,$]=n(!1),[_,A]=n(0),D=o(null);s((()=>{void 0!==j&&B(j)}),[j]);const P=e=>{const t=(e-b)/(N-b)*100;A(Math.max(5,Math.min(95,t)))};s((()=>{P(T)}),[T,b,N]);s((()=>{if(R){const e=e=>{if(D.current){const t=D.current.getBoundingClientRect(),n=(e.clientX-t.left)/t.width*100;A(Math.max(5,Math.min(95,n)))}},t=()=>{S(!1)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",t),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",t)}}}),[R]);const q=E?Array.from({length:Math.floor((N-b)/w)+1},((e,t)=>b+t*w)):[],z=C&&(R||X);return i(p,Object.assign({className:m("slider-root",x,a)},{children:[z&&r(l,Object.assign({$leftPosition:_},{children:(null==L?void 0:L[T])||T}),void 0),E&&r(d,{children:q.map((e=>r(c,{$position:(e-b)/(N-b)*100},e)))},void 0),L&&r(h,{children:Object.entries(L).map((e=>{let[t,n]=e;return r(u,Object.assign({$position:(Number(t)-b)/(N-b)*100},{children:n}),t)}))},void 0),r(v,Object.assign({ref:D,id:g,sx:M,className:"slider-input",type:"range",min:b,max:N,step:w,value:T,onChange:e=>{const t=Number(e.target.value);B(t),P(t),null==O||O(t)},onMouseDown:e=>{if(!k&&(S(!0),D.current)){const t=D.current.getBoundingClientRect(),n=(e.clientX-t.left)/t.width*100;A(Math.max(5,Math.min(95,n)))}},onMouseMove:e=>{if(R&&D.current){const t=D.current.getBoundingClientRect(),n=(e.clientX-t.left)/t.width*100;A(Math.max(5,Math.min(95,n)))}},onMouseEnter:()=>{k||$(!0)},onMouseLeave:()=>{$(!1)},disabled:k},y),void 0)]}),void 0)}));f.displayName="Slider";export{f as Slider};