react-slider-simple
Version:
Slider component for React
2 lines • 9.24 kB
JavaScript
!function(e,t){if("object"===typeof exports&&"object"===typeof module)module.exports=t(require("react"));else if("function"===typeof define&&define.amd)define(["react"],t);else{var n=t("object"===typeof exports?require("react"):e.react);for(var o in n)("object"===typeof exports?exports:e)[o]=n[o]}}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function u(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=n(2),d=o(c),f=n(3),p=o(f),h=n(6),v=o(h),y=n(7),b=n(8),m=function(e){function t(){var e,n,o,u;i(this,t);for(var a=arguments.length,l=Array(a),c=0;c<a;c++)l[c]=arguments[c];return n=o=s(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(l))),o.state={percent:o.props.defaultValue,hover:!1,isActive:!1},o.getPercent=function(){var e=o._isControlled?o.props.value:o.state.percent;return e>100?100:e<0?0:e},o.shouldUpdateState=function(e,t){return(0,v.default)(e,t)},o.shouldUpdateProps=function(e,t){return(0,v.default)(e,t)},o.shouldComponentUpdate=function(e,t){return o.shouldUpdateState(t,o.state)||o.shouldUpdateProps(e,o.props)},o.onWindowResize=function(){o._sliderWidth=o._sliderRef.clientWidth,o.forceUpdate()},o.done=function(){o.props.onDone(o.getPercent())},o.update=function(e){if((0,y.isNumber)(e.percent)&&e.percent!==o.getPercent())if(o.props.onChange(e.percent),o._isControlled){var t=(e.percent,r(e,["percent"]));o.setState(t)}else o.setState(e)},o.onMouseUp=function(){o.setState({isActive:!1}),o.done(),o.removeDocumentMouseEventListeners()},o.onMouseMove=function(e){e.preventDefault();var t=o.calcNewSliderOffset(e.clientX,o.sliderStartPos),n=o.calcPercent(t);o.update({percent:n})},o.onGrab=function(e){if((0,y.isValidButton)(e.button)){var t=o.getCurrentSliderOffset();o.sliderStartPos=o.calcSliderStartPos(e.nativeEvent.clientX,t),o.setState({isActive:!0}),o.removeDocumentMouseEventListeners(),o.addDocumentMouseEventListeners()}},o.onMouseDown=function(e){if((0,y.isValidButton)(e.button)){o.sliderStartPos=o.calcSliderStartPos(e.nativeEvent.clientX,e.nativeEvent.offsetX);var t=o.calcNewSliderOffset(e.clientX,o.sliderStartPos),n=o.calcPercent(t);o.update({percent:n,isActive:!0}),o.removeDocumentMouseEventListeners(),o.addDocumentMouseEventListeners()}},o.calcSliderStartPos=function(e,t){return e-t},o.calcPercent=function(e){return e/o._sliderWidth*100},o.getCurrentSliderOffset=function(){return o.getPercent()/100*o._sliderWidth},o.onMouseEnter=function(){o.setState({hover:!0})},o.onMouseLeave=function(){o.setState({hover:!1})},u=n,s(o,u)}return u(t,e),l(t,[{key:"componentDidMount",value:function(){this._isControlled=null!==this.props.value,this._sliderWidth=this._sliderRef.clientWidth,this._document=this._sliderRef.ownerDocument,window.addEventListener("resize",this.onWindowResize);var e=this.props,t=e.value,n=e.defaultValue;(t>0||n>0)&&this.forceUpdate()}},{key:"componentWillUnmount",value:function(){this.removeDocumentMouseEventListeners(),this.removeWindowListeners()}},{key:"removeWindowListeners",value:function(){this._sliderRef.addEventListener("resize",this.onWindowResize)}},{key:"addDocumentMouseEventListeners",value:function(){this._document.addEventListener("mousemove",this.onMouseMove),this._document.addEventListener("mouseup",this.onMouseUp)}},{key:"removeDocumentMouseEventListeners",value:function(){this._document.removeEventListener("mousemove",this.onMouseMove),this._document.removeEventListener("mouseup",this.onMouseUp)}},{key:"calcNewSliderOffset",value:function(e,t){var n=e-t;return n<0?0:n>this._sliderWidth?this._sliderWidth:n}},{key:"render",value:function(){var e=this,t=this.props,n=(t.onChange,t.onDone,t.displayThumb),o=t.thumbColor,i=t.shadowColor,s=t.sliderPathColor,u=t.rounded,l=t.style,c=r(t,["onChange","onDone","displayThumb","thumbColor","shadowColor","sliderPathColor","rounded","style"]),f=this.state,p=f.hover,h=f.isActive,v=function(){return u?"9999px":"0px"},y={path:s||"rgb(245, 245, 245)",shadow:i||"rgb(131, 213, 252)",thumb:o||"rgb(102, 202, 249)"},m={sliderWrapperStyle:a({},b.sliderWrapper,l),pathStyle:a({},b.sliderPath,{backgroundColor:y.path,borderRadius:v()}),shadowStyle:a({},b.sliderShadow,{transform:function(){return"scaleX("+e.getPercent()/100+")"}(),backgroundColor:y.shadow,borderRadius:v()}),thumbStyle:a({},b.thumb,{transform:function(){return"translateX("+e.getPercent()/100*e._sliderWidth+"px)"}(),backgroundColor:y.thumb,display:function(){return p||h||n?"inline":"none"}()})};return d.default.createElement("div",a({style:m.sliderWrapperStyle},c,{onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave}),d.default.createElement("div",{style:b.selectable,onMouseDown:this.onMouseDown},d.default.createElement("div",{style:m.pathStyle},d.default.createElement("div",{style:m.shadowStyle,ref:function(t){e._sliderRef=t}}))),d.default.createElement("div",{style:m.thumbStyle,onMouseDown:this.onGrab}))}}]),t}(c.Component);m.propTypes={onChange:p.default.func,onDone:p.default.func,value:p.default.number,defaultValue:p.default.number,displayThumb:p.default.bool,thumbColor:p.default.string,shadowColor:p.default.string,sliderPathColor:p.default.string,rounded:p.default.bool,style:p.default.object},m.defaultProps={onDone:function(){},onChange:function(){},value:null,defaultValue:0,displayThumb:!0,thumbColor:"",shadowColor:"",sliderPathColor:"",rounded:!0,style:{}},t.default=m},function(t,n){t.exports=e},function(e,t,n){e.exports=n(4)()},function(e,t,n){"use strict";function o(){}function r(){}var i=n(5);r.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,r,s){if(s!==i){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";var o="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=function(e,t,n,r){var i=n?n.call(r,e,t):void 0;if(void 0!==i)return!!i;if(e===t)return!0;if("object"!==("undefined"===typeof e?"undefined":o(e))||!e||"object"!==("undefined"===typeof t?"undefined":o(t))||!t)return!1;var s=Object.keys(e),u=Object.keys(t);if(s.length!==u.length)return!1;for(var a=Object.prototype.hasOwnProperty.bind(t),l=0;l<s.length;l+=1){var c=s[l];if(!a(c))return!1;var d=e[c],f=t[c];if(!1===(i=n?n.call(r,d,f,c):void 0)||void 0===i&&d!==f)return!1}return!0}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.isNumber=function(e){return!isNaN(parseFloat(e))&&isFinite(e)},t.isValidButton=function(e){return 0===e}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.sliderWrapper={cursor:"pointer",height:"13px",paddingLeft:"6px",paddingRight:"6px",textAlign:"left"},t.selectable={overflowY:"hidden",height:"100%",width:"100%"},t.sliderPath={marginTop:"4px",width:"100%",height:"5px",overflow:"hidden"},t.sliderShadow={pointerEvents:"none",height:"100%",transformOrigin:"left"},t.thumb={position:"absolute",marginTop:"-12.5px",marginLeft:"-6px",width:"12px",height:"12px",borderRadius:"25px"}}])});
//# sourceMappingURL=index.js.map