siegel/lib/client_core/ui/Ranger/index.js

Web application development ecosystem

import e,{useState as r,useLayoutEffect as t}from"react";import a from"../_internals/resolve_tag_attributes.js";import i from"../_internals/apply_classname.js";import n from"../_internals/component.js";import l from"../_internals/ref_apply.js";import s from"../_internals/children.js";import{getRangeAreaElements as o,normalizeValue as c}from"./helpers/index.js";import _ from"./styles.sass";let d,m="-ui-ranger",v={stop:"stop",move:"move",cross:"cross"};function p(e={}){return e.anchorPos=e.anchorFraction=0,e.activeSlider=null,e.activeSliderArrValueIndex=d,e}let g=n(m,{rangersCrossBehavior:v.stop,theme:{root:d,_vertical:d,_single_picker:d,_disabled:d,_readonly:d,children:d,ranger_content_wrapper:d,range_area:d,label:d,range_slider:d,range_slider__active:d,range__selected:d,range__unselected:d}},n=>{let{theme:d,className:m,rootTagAttributes:g,label:u,disabled:f,value:h,rangersCrossBehavior:x,onChange:y,onRangePickStart:E,onRangePickFinish:S,children:L,isVertical:b}=n,j=r(p())[0];t(()=>()=>{C()},[]);let N=h.sort().map(c),w=1==h.length,I={className:i(m,[[d._single_picker,w],[d._vertical,b],[_._vertical,b],[d._disabled,f],[d._readonly,!f&&!y]])};l(I,n),I=a(I,g);let k={className:i(_.range_area,[[d.range_area,!0]]),children:o(n,N,w),onMouseDown:!f&&y?function(e){let r;E?.(e);let t=e.currentTarget,{x:a,y:i,width:n,height:l}=t.getBoundingClientRect(),{clientX:s,clientY:o,x:c,y:_}=e.nativeEvent,m=+(b?(o-i)/l:(s-a)/n).toFixed(2);if(w)r=t.children[1],N[0]!=m&&y([m],e);else{let a,i=n;for(let e=0,n=N.length;e<n;e++){let n=Math.abs(N[e]-m);if(n<i)r=t.children[2*e+1],a=e,i=n;else break}N[a]!=m&&(N[a]=m,y(N,e)),j.activeSliderArrValueIndex=a}d.range_slider__active&&r.classList.add(d.range_slider__active),j.anchorPos=b?_:c,j.anchorFraction=m,j.activeSlider=r,addEventListener("mousemove",A),addEventListener("mouseup",C)}:void 0};function A(e){let{anchorPos:r,anchorFraction:t,activeSlider:a,activeSliderArrValueIndex:i}=j,n=(b?e.y:e.x)-r;if(n){let{clientWidth:r,clientHeight:l}=a.parentNode,s=c(t+n/(b?l:r));if(s!=t)if(w)y([s],e);else{let r=x==v.stop;if(r||x==v.cross){let t=1^i,n=N[t];if(t%2?s>n:s<n)if(r){N[i]=n,y(N,e);return}else d.range_slider__active&&a.classList.remove(d.range_slider__active),j.activeSliderArrValueIndex=t,j.activeSlider=a.parentNode.querySelector(`[data-slider='${t}']`),d.range_slider__active&&j.activeSlider.classList.add(d.range_slider__active)}N[i]=s,y(N,e)}}}function C(e){S?.(e),d.range_slider__active&&j.activeSlider?.classList.remove(d.range_slider__active),p(j),removeEventListener("mousemove",A),removeEventListener("mouseup",C)}let F=e.createElement("div",{...k}),M=s(L,d);return e.createElement("div",{...I},u&&e.createElement("div",{className:d.label,children:u}),M?e.createElement("div",{className:d.ranger_content_wrapper},M,F):F)});export default g;export{m as componentID,v as rangerCrossTypesMap};