@infinityfx/fluid/dist/components/input/slider.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as t,useRef as a,useState as n,useEffect as o}from"react";import i from"../feedback/halo.js";import{combineClasses as l,toNumber as s,classes as d,round as c}from"../../core/utils.js";import u from"../display/tooltip.js";import h from"../../hooks/use-input-props.js";import{createStyles as m}from"../../core/style.js";const p=m("slider",{".wrapper":{display:"flex",flexDirection:"column"},".wrapper:not(.vertical)":{minWidth:"min(100vw, 12em)",gap:"var(--f-spacing-xsm)"},".wrapper.vertical":{minHeight:"min(100vh, 12em)",gap:"var(--f-spacing-med)"},".label":{fontSize:".8em",fontWeight:500,color:"var(--f-clr-text-100)"},".slider":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",margin:"auto",width:"calc(100% - 1.1em)",height:"1.1em",userSelect:"none",flexGrow:1},".wrapper.vertical .slider":{order:-1,flexDirection:"column",height:"calc(100% - 1.1em)",width:"1.1em"},".track":{position:"relative",height:".4em",borderRadius:"999px",backgroundColor:"var(--f-clr-fg-200)",overflow:"hidden",touchAction:"none",flexGrow:1},".wrapper.vertical .track":{width:".4em"},".progress":{backgroundColor:"var(--f-clr-primary-100)",width:"100%",height:"100%",transformOrigin:"bottom left",willChange:"transform"},".handle":{position:"absolute",translate:"-50% 0%",width:"1.1em",height:"1.1em",outline:"none",borderRadius:"99px",touchAction:"none"},".wrapper.vertical .handle":{translate:"0% 50%"},".handle::after":{content:'""',display:"block",width:"100%",height:"100%",borderRadius:"99px",backgroundColor:"white",boxShadow:"var(--f-shadow-med)"},'.slider[data-disabled="false"]':{cursor:"pointer"},'.handle[aria-disabled="false"]':{cursor:"pointer"},'.handle[aria-disabled="true"]':{width:".8em",height:".8em"},'.handle[aria-disabled="true"]::after':{backgroundColor:"var(--f-clr-grey-200)"},'.slider[data-disabled="true"] .progress':{backgroundColor:"var(--f-clr-grey-300)"},".handle .halo":{inset:"-.5em"}});function v({cc:m={},handles:v=1,vertical:f=!1,tooltips:w="interact",formatTooltip:b,label:g,value:x,defaultValue:y,onChange:E,...k}){const A=l(p,m),M=t(),C=a(null),j=a(null),L=s(k.max,1),N=s(k.min,0),D=s(k.step,.1),R=e=>(e-N)/(L-N),S=e=>N+e*(L-N);function T(){const e=new Array(v).fill(1).map(((e,r)=>S(r/Math.max(v-1,1))));return y&&y.forEach(((r,t)=>{e[t]=r,t<e.length-2&&(e[t+1]=(e[t+2]+r)/2)})),e}const[$,z]=void 0!==x?[x]:n(T);function G(e){if(!C.current||k.disabled)return;e.stopPropagation();const r=("touches"in e?e.touches[0]:e)?.[f?"clientY":"clientX"];if(void 0===r)return;const{y:t,height:a,x:n,width:o}=C.current.getBoundingClientRect(),i=S(f?1-(r-t)/a:(r-n)/o);H(null===j.current||j.current<0?$.reduce(((e,r,t)=>{const a=Math.abs(r-i);return a<e[0]?[a,t]:e}),[Number.MAX_VALUE,0])[1]:j.current,i)}function H(e,r){if(e>0&&(r=Math.max(r,$[e-1]+D)),e<v-1&&(r=Math.min(r,$[e+1]-D)),(r=Math.min(Math.max(Math.round(r/D)*D,N),L))===$[e])return;const t=$.slice();t[e]=r,z?.(t),E?.(t)}o((()=>z?.(T())),[v]),o((()=>{const e=()=>j.current=null,r=e=>null!==j.current&&G(e);return window.addEventListener("mousemove",r),window.addEventListener("touchmove",r),window.addEventListener("mouseup",e),()=>{window.removeEventListener("mousemove",r),window.removeEventListener("touchmove",r),window.removeEventListener("mouseup",e)}}),[$,k.disabled]);const[I,U]=h(k);let V=R($[0]);const W=v<2?0:V;return v>1&&(V=R($[v-1])-V),e("div",{...U,className:d(A.wrapper,f&&A.vertical,k.className),children:[r("input",{...I,type:"hidden",value:$.join(",")}),g&&r("div",{id:M,className:A.label,children:g}),e("div",{className:A.slider,"data-disabled":!!k.disabled,onTouchEnd:()=>j.current=null,onMouseDown:e=>{j.current=-1,G(e.nativeEvent)},onTouchStart:e=>{e.preventDefault(),j.current=-1,G(e.nativeEvent)},children:[r("div",{ref:C,className:A.track,children:r("div",{className:A.progress,style:{scale:f?`1 ${V}`:`${V} 1`,translate:f?`0% ${-100*W}%`:100*W+"% 0%"}})}),new Array(v).fill(0).map(((e,t)=>{const a=$[t];return r(u,{delay:0,content:b?b(c(a,2)):c(a,2),visibility:w,position:f?"right":"bottom",children:r(i,{disabled:k.disabled,cc:{halo:A.halo},children:r("div",{className:A.handle,role:"slider",tabIndex:k.disabled?-1:0,"aria-disabled":!!k.disabled,onMouseDown:()=>j.current=t,onTouchStart:()=>j.current=t,onTouchEnd:()=>j.current=null,onKeyDown:e=>{switch(e.key){case"ArrowUp":case"ArrowRight":return H(t,a+D);case"ArrowDown":case"ArrowLeft":return H(t,a-D);case"Home":return H(t,N);case"End":return H(t,L)}},"aria-valuenow":a,"aria-valuemin":$[t-1]||0,"aria-valuemax":$[t+1]||1,"aria-orientation":f?"vertical":"horizontal","aria-label":I["aria-label"],"aria-labelledby":g?M:void 0,style:{[f?"bottom":"left"]:100*R(a)+"%"}})})},t)}))]})]})}export{v as default};
//# sourceMappingURL=slider.js.map