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

A React component library for building retro-style websites

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