react-slider/dist/es/prod/components/ReactSlider/ReactSlider.mjs

Slider component for React

import e from"@babel/runtime/helpers/inheritsLoose";import t from"react";function s(e){return e&&e.stopPropagation&&e.stopPropagation(),e&&e.preventDefault&&e.preventDefault(),!1}function n(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}function i(e){return null!==e&&1===e.length?e[0]:e.slice()}function o(e){Object.keys(e).forEach((t=>{"undefined"!=typeof document&&document.addEventListener(t,e[t],!1)}))}function r(e,t){return a(function(e,t){let s=e;s<=t.min&&(s=t.min);s>=t.max&&(s=t.max);return s}(e,t),t)}function a(e,t){const s=(e-t.min)%t.step;let n=e-s;return 2*Math.abs(s)>=t.step&&(n+=s>0?t.step:-t.step),parseFloat(n.toFixed(5))}let p=function(p){function u(e){var a;(a=p.call(this,e)||this).onKeyUp=()=>{a.onEnd()},a.onMouseUp=()=>{a.onEnd(a.getMouseEventMap())},a.onTouchEnd=e=>{e.preventDefault(),a.onEnd(a.getTouchEventMap())},a.onBlur=()=>{a.setState({index:-1},a.onEnd(a.getKeyDownEventMap()))},a.onMouseMove=e=>{a.setState({pending:!0});const t=a.getMousePosition(e),s=a.getDiffPosition(t[0]),n=a.getValueFromPosition(s);a.move(n)},a.onTouchMove=e=>{if(e.touches.length>1)return;a.setState({pending:!0});const t=a.getTouchPosition(e);if(void 0===a.isScrolling){const e=t[0]-a.startPosition[0],s=t[1]-a.startPosition[1];a.isScrolling=Math.abs(s)>Math.abs(e)}if(a.isScrolling)return void a.setState({index:-1});const s=a.getDiffPosition(t[0]),n=a.getValueFromPosition(s);a.move(n)},a.onKeyDown=e=>{if(!(e.ctrlKey||e.shiftKey||e.altKey||e.metaKey))switch(a.setState({pending:!0}),e.key){case"ArrowLeft":case"ArrowDown":case"Left":case"Down":e.preventDefault(),a.moveDownByStep();break;case"ArrowRight":case"ArrowUp":case"Right":case"Up":e.preventDefault(),a.moveUpByStep();break;case"Home":e.preventDefault(),a.move(a.props.min);break;case"End":e.preventDefault(),a.move(a.props.max);break;case"PageDown":e.preventDefault(),a.moveDownByStep(a.props.pageFn(a.props.step));break;case"PageUp":e.preventDefault(),a.moveUpByStep(a.props.pageFn(a.props.step))}},a.onSliderMouseDown=e=>{if(!a.props.disabled&&2!==e.button){if(a.setState({pending:!0}),!a.props.snapDragDisabled){const t=a.getMousePosition(e);a.forceValueFromPosition(t[0],(e=>{a.start(e,t[0]),o(a.getMouseEventMap())}))}s(e)}},a.onSliderClick=e=>{if(!a.props.disabled&&a.props.onSliderClick&&!a.hasMoved){const t=a.getMousePosition(e),s=r(a.calcValue(a.calcOffsetFromPosition(t[0])),a.props);a.props.onSliderClick(s)}},a.createOnKeyDown=e=>t=>{a.props.disabled||(a.start(e),o(a.getKeyDownEventMap()),s(t))},a.createOnMouseDown=e=>t=>{if(a.props.disabled||2===t.button)return;a.setState({pending:!0});const n=a.getMousePosition(t);a.start(e,n[0]),o(a.getMouseEventMap()),s(t)},a.createOnTouchStart=e=>t=>{if(a.props.disabled||t.touches.length>1)return;a.setState({pending:!0});const s=a.getTouchPosition(t);a.startPosition=s,a.isScrolling=void 0,a.start(e,s[0]),o(a.getTouchEventMap()),function(e){e.stopPropagation&&e.stopPropagation()}(t)},a.handleResize=()=>{const e=window.setTimeout((()=>{a.pendingResizeTimeouts.shift(),a.resize()}),0);a.pendingResizeTimeouts.push(e)},a.renderThumb=(e,t)=>{const s=a.props.thumbClassName+" "+a.props.thumbClassName+"-"+t+" "+(a.state.index===t?a.props.thumbActiveClassName:""),n={ref:e=>{a["thumb"+t]=e},key:a.props.thumbClassName+"-"+t,className:s,style:e,onMouseDown:a.createOnMouseDown(t),onTouchStart:a.createOnTouchStart(t),onFocus:a.createOnKeyDown(t),tabIndex:0,role:"slider","aria-orientation":a.props.orientation,"aria-valuenow":a.state.value[t],"aria-valuemin":a.props.min,"aria-valuemax":a.props.max,"aria-label":Array.isArray(a.props.ariaLabel)?a.props.ariaLabel[t]:a.props.ariaLabel,"aria-labelledby":Array.isArray(a.props.ariaLabelledby)?a.props.ariaLabelledby[t]:a.props.ariaLabelledby,"aria-disabled":a.props.disabled},o={index:t,value:i(a.state.value),valueNow:a.state.value[t]};return a.props.ariaValuetext&&(n["aria-valuetext"]="string"==typeof a.props.ariaValuetext?a.props.ariaValuetext:a.props.ariaValuetext(o)),a.props.renderThumb(n,o)},a.renderTrack=(e,t,s)=>{const n={key:a.props.trackClassName+"-"+e,className:a.props.trackClassName+" "+a.props.trackClassName+"-"+e,style:a.buildTrackStyle(t,a.state.upperBound-s)},o={index:e,value:i(a.state.value)};return a.props.renderTrack(n,o)};let u=n(e.value);u.length||(u=n(e.defaultValue)),a.pendingResizeTimeouts=[];const h=[];for(let t=0;t<u.length;t+=1)u[t]=r(u[t],e),h.push(t);return a.resizeObserver=null,a.resizeElementRef=t.createRef(),a.state={index:-1,upperBound:0,sliderLength:0,value:u,zIndices:h},a}e(u,p);var h=u.prototype;return h.componentDidMount=function(){"undefined"!=typeof window&&(this.resizeObserver=new ResizeObserver(this.handleResize),this.resizeObserver.observe(this.resizeElementRef.current),this.resize())},u.getDerivedStateFromProps=function(e,t){const s=n(e.value);return s.length?t.pending?null:{value:s.map((t=>r(t,e)))}:null},h.componentDidUpdate=function(){0===this.state.upperBound&&this.resize()},h.componentWillUnmount=function(){this.clearPendingResizeTimeouts(),this.resizeObserver&&this.resizeObserver.disconnect()},h.onEnd=function(e){e&&function(e){Object.keys(e).forEach((t=>{"undefined"!=typeof document&&document.removeEventListener(t,e[t],!1)}))}(e),this.hasMoved&&this.fireChangeEvent("onAfterChange"),this.setState({pending:!1}),this.hasMoved=!1},h.getValue=function(){return i(this.state.value)},h.getClosestIndex=function(e){let t=Number.MAX_VALUE,s=-1;const{value:n}=this.state,i=n.length;for(let o=0;o<i;o+=1){const i=this.calcOffset(n[o]),r=Math.abs(e-i);r<t&&(t=r,s=o)}return s},h.getMousePosition=function(e){return[e["page"+this.axisKey()],e["page"+this.orthogonalAxisKey()]]},h.getTouchPosition=function(e){const t=e.touches[0];return[t["page"+this.axisKey()],t["page"+this.orthogonalAxisKey()]]},h.getKeyDownEventMap=function(){return{keydown:this.onKeyDown,keyup:this.onKeyUp,focusout:this.onBlur}},h.getMouseEventMap=function(){return{mousemove:this.onMouseMove,mouseup:this.onMouseUp}},h.getTouchEventMap=function(){return{touchmove:this.onTouchMove,touchend:this.onTouchEnd}},h.getValueFromPosition=function(e){const t=e/(this.state.sliderLength-this.state.thumbSize)*(this.props.max-this.props.min);return r(this.state.startValue+t,this.props)},h.getDiffPosition=function(e){let t=e-this.state.startPosition;return this.props.invert&&(t*=-1),t},h.resize=function(){const{slider:e,thumb0:t}=this;if(!e||!t)return;const s=this.sizeKey(),n=e.getBoundingClientRect(),i=e[s],o=n[this.posMaxKey()],r=n[this.posMinKey()],a=t.getBoundingClientRect()[s.replace("client","").toLowerCase()],p=i-a,u=Math.abs(o-r);this.state.upperBound===p&&this.state.sliderLength===u&&this.state.thumbSize===a||this.setState({upperBound:p,sliderLength:u,thumbSize:a})},h.calcOffset=function(e){const t=this.props.max-this.props.min;if(0===t)return 0;return(e-this.props.min)/t*this.state.upperBound},h.calcValue=function(e){return e/this.state.upperBound*(this.props.max-this.props.min)+this.props.min},h.calcOffsetFromPosition=function(e){const{slider:t}=this,s=t.getBoundingClientRect(),n=s[this.posMaxKey()],i=s[this.posMinKey()];let o=e-(window["page"+this.axisKey()+"Offset"]+(this.props.invert?n:i));return this.props.invert&&(o=this.state.sliderLength-o),o-=this.state.thumbSize/2,o},h.forceValueFromPosition=function(e,t){const s=this.calcOffsetFromPosition(e),n=this.getClosestIndex(s),i=r(this.calcValue(s),this.props),o=this.state.value.slice();o[n]=i;for(let e=0;e<o.length-1;e+=1)if(o[e+1]-o[e]<this.props.minDistance)return;this.fireChangeEvent("onBeforeChange"),this.hasMoved=!0,this.setState({value:o},(()=>{t(n),this.fireChangeEvent("onChange")}))},h.clearPendingResizeTimeouts=function(){do{const e=this.pendingResizeTimeouts.shift();clearTimeout(e)}while(this.pendingResizeTimeouts.length)},h.start=function(e,t){const s=this["thumb"+e];s&&s.focus();const{zIndices:n}=this.state;n.splice(n.indexOf(e),1),n.push(e),this.setState((s=>({startValue:s.value[e],startPosition:void 0!==t?t:s.startPosition,index:e,zIndices:n})))},h.moveUpByStep=function(e){void 0===e&&(e=this.props.step);const t=this.state.value[this.state.index],s=r(this.props.invert&&"horizontal"===this.props.orientation?t-e:t+e,this.props);this.move(Math.min(s,this.props.max))},h.moveDownByStep=function(e){void 0===e&&(e=this.props.step);const t=this.state.value[this.state.index],s=r(this.props.invert&&"horizontal"===this.props.orientation?t+e:t-e,this.props);this.move(Math.max(s,this.props.min))},h.move=function(e){const t=this.state.value.slice(),{index:s}=this.state,{length:n}=t,i=t[s];if(e===i)return;this.hasMoved||this.fireChangeEvent("onBeforeChange"),this.hasMoved=!0;const{pearling:o,max:r,min:a,minDistance:p}=this.props;if(!o){if(s>0){const n=t[s-1];e<n+p&&(e=n+p)}if(s<n-1){const n=t[s+1];e>n-p&&(e=n-p)}}t[s]=e,o&&n>1&&(e>i?(this.pushSucceeding(t,p,s),function(e,t,s,n){for(let i=0;i<e;i+=1){const o=n-i*s;t[e-1-i]>o&&(t[e-1-i]=o)}}(n,t,p,r)):e<i&&(this.pushPreceding(t,p,s),function(e,t,s,n){for(let i=0;i<e;i+=1){const e=n+i*s;t[i]<e&&(t[i]=e)}}(n,t,p,a))),this.setState({value:t},this.fireChangeEvent.bind(this,"onChange"))},h.pushSucceeding=function(e,t,s){let n,i;for(n=s,i=e[n]+t;null!==e[n+1]&&i>e[n+1];n+=1,i=e[n]+t)e[n+1]=a(i,this.props)},h.pushPreceding=function(e,t,s){for(let n=s,i=e[n]-t;null!==e[n-1]&&i<e[n-1];n-=1,i=e[n]-t)e[n-1]=a(i,this.props)},h.axisKey=function(){return"vertical"===this.props.orientation?"Y":"X"},h.orthogonalAxisKey=function(){return"vertical"===this.props.orientation?"X":"Y"},h.posMinKey=function(){return"vertical"===this.props.orientation?this.props.invert?"bottom":"top":this.props.invert?"right":"left"},h.posMaxKey=function(){return"vertical"===this.props.orientation?this.props.invert?"top":"bottom":this.props.invert?"left":"right"},h.sizeKey=function(){return"vertical"===this.props.orientation?"clientHeight":"clientWidth"},h.fireChangeEvent=function(e){this.props[e]&&this.props[e](i(this.state.value),this.state.index)},h.buildThumbStyle=function(e,t){const s={position:"absolute",touchAction:"none",willChange:this.state.index>=0?this.posMinKey():void 0,zIndex:this.state.zIndices.indexOf(t)+1};return s[this.posMinKey()]=e+"px",s},h.buildTrackStyle=function(e,t){const s={position:"absolute",willChange:this.state.index>=0?this.posMinKey()+","+this.posMaxKey():void 0};return s[this.posMinKey()]=e,s[this.posMaxKey()]=t,s},h.buildMarkStyle=function(e){var t;return(t={position:"absolute"})[this.posMinKey()]=e,t},h.renderThumbs=function(e){const{length:t}=e,s=[];for(let n=0;n<t;n+=1)s[n]=this.buildThumbStyle(e[n],n);const n=[];for(let e=0;e<t;e+=1)n[e]=this.renderThumb(s[e],e);return n},h.renderTracks=function(e){const t=[],s=e.length-1;t.push(this.renderTrack(0,0,e[0]));for(let n=0;n<s;n+=1)t.push(this.renderTrack(n+1,e[n],e[n+1]));return t.push(this.renderTrack(s+1,e[s],this.state.upperBound)),t},h.renderMarks=function(){let{marks:e}=this.props;const t=this.props.max-this.props.min+1;return"boolean"==typeof e?e=Array.from({length:t}).map(((e,t)=>t)):"number"==typeof e&&(e=Array.from({length:t}).map(((e,t)=>t)).filter((t=>t%e==0))),e.map(parseFloat).sort(((e,t)=>e-t)).map((e=>{const t=this.calcOffset(e),s={key:e,className:this.props.markClassName,style:this.buildMarkStyle(t)};return this.props.renderMark(s)}))},h.render=function(){const e=[],{value:s}=this.state,n=s.length;for(let t=0;t<n;t+=1)e[t]=this.calcOffset(s[t],t);const i=this.props.withTracks?this.renderTracks(e):null,o=this.renderThumbs(e),r=this.props.marks?this.renderMarks():null;return t.createElement("div",{ref:e=>{this.slider=e,this.resizeElementRef.current=e},style:{position:"relative"},className:this.props.className+(this.props.disabled?" disabled":""),onMouseDown:this.onSliderMouseDown,onClick:this.onSliderClick},i,o,r)},u}(t.Component);p.displayName="ReactSlider",p.defaultProps={min:0,max:100,step:1,pageFn:e=>10*e,minDistance:0,defaultValue:0,orientation:"horizontal",className:"slider",thumbClassName:"thumb",thumbActiveClassName:"active",trackClassName:"track",markClassName:"mark",withTracks:!0,pearling:!1,disabled:!1,snapDragDisabled:!1,invert:!1,marks:[],renderThumb:e=>t.createElement("div",e),renderTrack:e=>t.createElement("div",e),renderMark:e=>t.createElement("span",e)};var u=p;export{u as default};