react-ranger
Advanced tools
Comparing version 1.0.2 to 1.0.3
@@ -197,3 +197,2 @@ 'use strict'; | ||
| value: value, | ||
| index: i, | ||
| getTickProps: function getTickProps() { | ||
@@ -228,3 +227,2 @@ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| value: value, | ||
| index: i, | ||
| getSegmentProps: function getSegmentProps() { | ||
@@ -257,3 +255,2 @@ var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| value: value, | ||
| index: i, | ||
| active: i === activeHandleIndex, | ||
@@ -293,2 +290,3 @@ getHandleProps: function getHandleProps() { | ||
| position: 'absolute', | ||
| cursor: 'pointer', | ||
| top: '50%', | ||
@@ -363,2 +361,4 @@ left: _this.getPercentageForValue(value) + '%', | ||
| tickSize: _propTypes2.default.number, | ||
| steps: _propTypes2.default.arrayOf(_propTypes2.default.number), | ||
| ticks: _propTypes2.default.arrayOf(_propTypes2.default.number), | ||
| onChange: _propTypes2.default.func, | ||
@@ -365,0 +365,0 @@ onTrackClick: _propTypes2.default.func, |
@@ -197,3 +197,2 @@ 'use strict'; | ||
| value: value, | ||
| index: i, | ||
| getTickProps: function getTickProps() { | ||
@@ -228,3 +227,2 @@ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| value: value, | ||
| index: i, | ||
| getSegmentProps: function getSegmentProps() { | ||
@@ -257,3 +255,2 @@ var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| value: value, | ||
| index: i, | ||
| active: i === activeHandleIndex, | ||
@@ -293,2 +290,3 @@ getHandleProps: function getHandleProps() { | ||
| position: 'absolute', | ||
| cursor: 'pointer', | ||
| top: '50%', | ||
@@ -363,2 +361,4 @@ left: _this.getPercentageForValue(value) + '%', | ||
| tickSize: _propTypes2.default.number, | ||
| steps: _propTypes2.default.arrayOf(_propTypes2.default.number), | ||
| ticks: _propTypes2.default.arrayOf(_propTypes2.default.number), | ||
| onChange: _propTypes2.default.func, | ||
@@ -365,0 +365,0 @@ onTrackClick: _propTypes2.default.func, |
| { | ||
| "name": "react-ranger", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "A render-prop component to build range and multi-range sliders in React", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
168
README.md
@@ -1,5 +0,1 @@ | ||
| <div style="text-align:center;"> | ||
| <a href="https://github.com/react-tools/react-ranger" target="\_parent"><img src="https://github.com/react-tools/media/raw/master/logo-react-ranger.png" alt="React Ranger Logo" style="width:450px;"/></a> | ||
| </div> | ||
| <!-- <a href="https://travis-ci.org/react-tools/react-ranger" target="\_parent"> | ||
@@ -25,5 +21,5 @@ <img alt="" src="https://travis-ci.org/react-tools/react-ranger.svg?branch=master" /> | ||
| # React Ranger | ||
| # React Ranger 🎚 | ||
| A render-prop component to build range and multi-range sliders in React. You want a range slider, and you want it your way! | ||
| A headless render-prop React component for building range and multi-range sliders. | ||
@@ -33,5 +29,8 @@ - 2kb gzipped. Wow! | ||
| ## Demo | ||
| ## Examples | ||
| - [Codesandbox.io](https://codesandbox.io/s/l5nnjl7jqm) | ||
| - [Codesandbox.io](https://codesandbox.io/s/l5nnjl7jqm) (contains all examples below) | ||
| - Simple | ||
| - Multi-Range | ||
| - Custom Steps | ||
@@ -68,128 +67,33 @@ ## Chat with us on Spectrum! | ||
| #### Changing Duration and Easing | ||
| ## Props | ||
| - Duration and easing can be changed with the `duration` and `easing` props. ReactRanger comes with a wide variety of easings built-in, too! Keep reading for a full list. | ||
| - `children: func.isRequired` A Function as a child that receives the following props: | ||
| - `getTrackProps(userProps): func` - A function that takes optional props and returns the combined necessary props for the track component. | ||
| - `ticks: array` - Ticks to be rendered. Each `tick` has the following props: | ||
| - `value: number` - The tick number to be displayed | ||
| - `getTickProps(userProps): func` - A function that take optional props and returns the combined necessary props for the tick component. | ||
| - `segments: array` - Segments to be rendered. Each `segment` has the following props: | ||
| - `value: number` - The segments ending value | ||
| - `getSegmentProps(userProps): func` - A function that take optional props and returns the combined necessary props for the segment component. | ||
| - `handles: array` - Handles to be rendered. Each `handle` has the following props: | ||
| - `value: number` - The current value for the handle | ||
| - `active: boolean` - Denotes if the handle is currently being dragged. | ||
| - `getHandleProps(userProps): func` - A function that take optional props and returns the combined necessary props for the handle component. | ||
| - `activeHandleIndex: oneOfType([null, number])` - The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged. | ||
| - `min: number.isRequired` - The minimum limit for the range | ||
| - `max: number.isRequired` - The maximum limit for the range | ||
| - `value: oneOfType([number, arrayOf(number)]).isRequired` - The current value (or values) for the range | ||
| - `stepSize: number.isRequired` - The distance between selectable steps | ||
| - `steps: arrayOf(number)` - An array of custom steps to use. This will override `stepSize`, | ||
| - `tickSize: number` | ||
| - `ticks: arrayOf(number): Default: 10` - An array of custom ticks to use. This will override `tickSize`, | ||
| - `onChange: func` - A function that is called with the following parameters: | ||
| - `newValue` - The new value or values for the range | ||
| - `onTrackClick: func` - A function that is called when the tracked is clicked with the following parameters: | ||
| - `stepValue` - The value that was clicked, but rounded to the nearest step. | ||
| - `preciseValue` - The value that was clicked, with decimal precision. | ||
| - `onPress: func` - A function that is called when a handle is pressed. | ||
| - `onDrag: func` - A function that is called when a handled is dragged. | ||
| - `onRelease: func` - A function that is called when a handle is released. | ||
| ```javascript | ||
| import ReactRanger from "react-ranger"; | ||
| const DurationAndEasingExample = () => ( | ||
| <ReactRanger | ||
| show={true || false} // Toggle true or false to show or hide the content! | ||
| duration={500} // // The duration of the transition in milliseconds | ||
| easing={ReactRanger.easings.easeOutQuad} // Comes with all the easings you could want! | ||
| > | ||
| Hello world! | ||
| </ReactRanger> | ||
| ); | ||
| ``` | ||
| #### Custom Show/Hide Styles | ||
| Want to animate width, opacity, or transforms? You can use your own custom show/hide styles by setting the `styleShow` and `styleHide` props with regular react `style` objects: | ||
| ```javascript | ||
| import ReactRanger from "react-ranger"; | ||
| const CustomExample = () => ( | ||
| <ReactRanger | ||
| show={true || false} // Toggle true or false to show or hide the content! | ||
| styleHide={{ | ||
| // This style will be used when hidden | ||
| height: "0px", | ||
| width: "0", | ||
| opacity: 0 | ||
| }} | ||
| styleShow={{ | ||
| // This style will be used when shown | ||
| height: "auto", | ||
| width: "100%", | ||
| opacity: 1 | ||
| }} | ||
| > | ||
| Hello world! | ||
| </ReactRanger> | ||
| ); | ||
| ``` | ||
| ## API | ||
| #### `<ReactRanger>` | ||
| The default export and main component for React-ranger. | ||
| ###### Props | ||
| | Prop | Required | Default Value | Description | | ||
| | :------------------- | :------- | :----------------------- | :-------------------------------------------------------------------- | | ||
| | `show` | `true` | `false` | Determines whether to "show" the content or not. | | ||
| | `duration` | | `300` | The `transition-duration` of the transition used to show the content | | ||
| | `easing` | | `easeOutQuint` | The `transition-timing-function` used to show the content | | ||
| | `transitionProperty` | | `all` | The `transition-property` used to show the content | | ||
| | `unmountOnHide` | | `true` | Determines whether the children will be unmounted when not visible. | | ||
| | `transitionOnMount` | | `false` | Determines whether to animate from a hidden to a shown state on mount | | ||
| | `styleHide` | | `{ height: '0px' }` | The standard react style object used to show the element | | ||
| | `styleShow` | | `{ height: 'auto' }` | The standard react style object used to hide the element | | ||
| | `style` | | `{ overflow: 'hidden' }` | The standard react style object | | ||
| #### `ReactRanger.easings` | ||
| React-ranger comes packaged with some awesome easings that are accessible via `ReactRanger.easings`. They are extremely simple to use too: | ||
| ```javascript | ||
| import ReactRanger from "react-ranger"; | ||
| const SimpleExample = () => ( | ||
| <ReactRanger show={true} easing={ReactRanger.easings.easeOutQuart}> | ||
| Hello world! | ||
| </ReactRanger> | ||
| ); | ||
| ``` | ||
| Below is a full list of the available easings located at `ReactRanger.easings` | ||
| ```javascript | ||
| ReactRanger.easings = { | ||
| // Cubic | ||
| easeInCubic: "cubic-bezier(0.550, 0.055, 0.675, 0.190)", | ||
| easeOutCubic: "cubic-bezier(0.215, 0.610, 0.355, 1.000)", | ||
| easeInOutCubic: "cubic-bezier(0.645, 0.045, 0.355, 1.000)", | ||
| // Circ | ||
| easeInCirc: "cubic-bezier(0.600, 0.040, 0.980, 0.335)", | ||
| easeOutCirc: "cubic-bezier(0.075, 0.820, 0.165, 1.000)", | ||
| easeInOutCirc: "cubic-bezier(0.785, 0.135, 0.150, 0.860)", | ||
| // Expo | ||
| easeInExpo: "cubic-bezier(0.950, 0.050, 0.795, 0.035)", | ||
| easeOutExpo: "cubic-bezier(0.190, 1.000, 0.220, 1.000)", | ||
| easeInOutExpo: "cubic-bezier(1.000, 0.000, 0.000, 1.000)", | ||
| // Quad | ||
| easeInQuad: "cubic-bezier(0.550, 0.085, 0.680, 0.530)", | ||
| easeOutQuad: "cubic-bezier(0.250, 0.460, 0.450, 0.940)", | ||
| easeInOutQuad: "cubic-bezier(0.455, 0.030, 0.515, 0.955)", | ||
| // Quart | ||
| easeInQuart: "cubic-bezier(0.895, 0.030, 0.685, 0.220)", | ||
| easeOutQuart: "cubic-bezier(0.165, 0.840, 0.440, 1.000)", | ||
| easeInOutQuart: "cubic-bezier(0.770, 0.000, 0.175, 1.000)", | ||
| // Quint | ||
| easeInQuint: "cubic-bezier(0.755, 0.050, 0.855, 0.060)", | ||
| easeOutQuint: "cubic-bezier(0.230, 1.000, 0.320, 1.000)", | ||
| easeInOutQuint: "cubic-bezier(0.860, 0.000, 0.070, 1.000)", | ||
| // Sine | ||
| easeInSine: "cubic-bezier(0.470, 0.000, 0.745, 0.715)", | ||
| easeOutSine: "cubic-bezier(0.390, 0.575, 0.565, 1.000)", | ||
| easeInOutSine: "cubic-bezier(0.445, 0.050, 0.550, 0.950)", | ||
| // Back | ||
| easeInBack: "cubic-bezier(0.600, -0.280, 0.735, 0.045)", | ||
| easeOutBack: "cubic-bezier(0.175, 0.885, 0.320, 1.275)", | ||
| easeInOutBack: "cubic-bezier(0.680, -0.550, 0.265, 1.550)" | ||
| }; | ||
| ``` | ||
| ## Contributing | ||
@@ -196,0 +100,0 @@ |
| /*! | ||
| * react-ranger v1.0.2 - https://react-ranger.js.org | ||
| * react-ranger v1.0.3 - https://react-ranger.js.org | ||
| * MIT Licensed | ||
@@ -274,3 +274,2 @@ */ | ||
| value: value, | ||
| index: i, | ||
| getTickProps: function getTickProps() { | ||
@@ -305,3 +304,2 @@ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| value: value, | ||
| index: i, | ||
| getSegmentProps: function getSegmentProps() { | ||
@@ -334,3 +332,2 @@ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, | ||
| value: value, | ||
| index: i, | ||
| active: i === activeHandleIndex, | ||
@@ -370,2 +367,3 @@ getHandleProps: function getHandleProps() { | ||
| position: 'absolute', | ||
| cursor: 'pointer', | ||
| top: '50%', | ||
@@ -435,2 +433,4 @@ left: _this.getPercentageForValue(value) + '%', | ||
| tickSize: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number, | ||
| steps: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number), | ||
| ticks: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number), | ||
| onChange: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.func, | ||
@@ -437,0 +437,0 @@ onTrackClick: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.func, |
| /*! | ||
| * react-ranger v1.0.2 - https://react-ranger.js.org | ||
| * react-ranger v1.0.3 - https://react-ranger.js.org | ||
| * MIT Licensed | ||
| */ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactRanger=t(require("react")):e.ReactRanger=t(e.React)}(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,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 r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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 a(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 s,u,c=n(2),l=n.n(c),p=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},f=function(e){var t=e.getBoundingClientRect();return{left:Math.ceil(t.left),width:Math.ceil(t.width)}},d=(u=s=function(e){function t(){var n,a,s;r(this,t);for(var u=arguments.length,c=Array(u),l=0;l<u;l++)c[l]=arguments[l];return n=a=i(this,e.call.apply(e,[this].concat(c))),a.state={activeHandleIndex:null},a.handleEls=[],a.handleDimensions=[],a.onPress=function(e,t){a.setState({activeHandleIndex:t}),document.addEventListener("mousemove",a.onDrag),document.addEventListener("touchmove",a.onDrag),document.addEventListener("mouseup",a.onRelease),document.addEventListener("touchend",a.onRelease),a.props.onPress&&a.props.onPress(e)},a.onDrag=function(e){var t=a.props,n=t.onChange,o=t.onDrag,r=a.state.activeHandleIndex,i=a.getValues(),s=a.getValueForClientX(e.clientX),u=a.roundToStep(s),c=[].concat(i.slice(0,r),[u],i.slice(r+1));o&&o(e),n(c)},a.onRelease=function(e){document.removeEventListener("mousemove",a.onDrag),document.removeEventListener("touchmove",a.onDrag),document.removeEventListener("mouseup",a.onRelease),document.removeEventListener("touchend",a.onRelease),a.setState({activeHandleIndex:null},function(){a.props.onRelease&&a.props.onRelease(e)})},a.roundToStep=function(e){var t=a.props,n=t.min,o=t.max,r=t.steps,i=t.stepSize,s=n,u=o;if(r)r.forEach(function(t){t<=e&&t>s&&(s=t),t>=e&&t<u&&(u=t)});else{for(;s<e&&s+i<e;)s+=i;u=Math.min(s+i,o)}return e-s<u-e?s:u},a.getValues=function(){return Array.isArray(a.props.value)?a.props.value:[a.props.value]},a.getPercentageForValue=function(e){var t=a.props,n=t.min,o=t.max;return Math.max(0,Math.min(100,(e-n)/(o-n)*100))},a.getValueForClientX=function(e){var t=a.props,n=t.min,o=t.max,r=f(a.trackEl);return(o-n)*((e-r.left)/r.width)+n},a.getTicks=function(){var e=a.props,t=e.min,n=e.max,o=e.tickSize,r=e.ticks,i=e.steps,s=r;if(!s)if(i)s=i;else{for(s=[t];s[s.length-1]<n-o;)s.push(s[s.length-1]+o);s.push(n)}return s.map(function(e,t){return{value:e,index:t,getTickProps:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.key,r=n.style,i=void 0===r?{}:r;return{key:void 0!==o?o:t,style:p({},i,{position:"absolute",left:a.getPercentageForValue(e)+"%"})}}}})},a.getSegments=function(){var e=a.props,t=e.min,n=e.max,o=a.getValues(),r=[].concat(o).sort(function(e,t){return e-t});return[].concat(r,[n]).map(function(e,n){return{value:e,index:n,getSegmentProps:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=o.key,s=o.style,u=void 0===s?{}:s,c=a.getPercentageForValue(r[n-1]?r[n-1]:t),l=a.getPercentageForValue(e)-c;return{key:void 0!==i?i:n,style:p({},u,{position:"absolute",left:c+"%",width:l+"%"})}}}})},a.getHandles=function(){var e=a.state.activeHandleIndex;return a.getValues().map(function(t,n){return{value:t,index:n,active:n===e,getHandleProps:function(){var r,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=i.key,u=i.refProp,c=void 0===u?"ref":u,l=i.innerRef,f=void 0===l?function(){}:l,d=i.onMouseDown,v=void 0===d?function(){}:d,g=i.onTouchStart,h=void 0===g?function(){}:g,m=i.style,y=void 0===m?{}:m,x=o(i,["key","refProp","innerRef","onMouseDown","onTouchStart","style"]);return p((r={key:void 0!==s?s:n},r[c]=function(e){a.handleEls[n]=e,f(e)},r.onMouseDown=function(e){e.persist(),a.onPress(e,n),v(e)},r.onTouchStart=function(e){e.persist(),a.onPress(e,n),h(e)},r.style=p({},y,{position:"absolute",top:"50%",left:a.getPercentageForValue(t)+"%",transform:"translate(-50%, -50%)",zIndex:n===e?"1":"0"}),r),x)}}})},a.getTrackProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.style,o=void 0===n?{}:n,r=t.refProp,i=void 0===r?"ref":r,s=a.props.onTrackClick,u=a.state.activeHandleIndex;return e={},e[i]=function(e){a.trackEl=e},e.onClick=function(e){if(e.persist(),null===u&&s&&!a.handleEls.find(function(t){return t.contains(e.target)})){var t=a.getValueForClientX(e.clientX);s(a.roundToStep(t),t)}},e.style=p({},o,{position:"relative",userSelect:"none"}),e},s=n,i(a,s)}return a(t,e),t.prototype.render=function(){var e=this.props.children,t=this.state.activeHandleIndex;return e({getTrackProps:this.getTrackProps,ticks:this.getTicks(),segments:this.getSegments(),handles:this.getHandles(),activeHandleIndex:t})},t}(l.a.Component),s.defaultProps={tickSize:10},u);t.default=d},function(t,n){t.exports=e}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactRanger=t(require("react")):e.ReactRanger=t(e.React)}(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,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 r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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 a(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 s,u,c=n(2),l=n.n(c),p=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},f=function(e){var t=e.getBoundingClientRect();return{left:Math.ceil(t.left),width:Math.ceil(t.width)}},d=(u=s=function(e){function t(){var n,a,s;r(this,t);for(var u=arguments.length,c=Array(u),l=0;l<u;l++)c[l]=arguments[l];return n=a=i(this,e.call.apply(e,[this].concat(c))),a.state={activeHandleIndex:null},a.handleEls=[],a.handleDimensions=[],a.onPress=function(e,t){a.setState({activeHandleIndex:t}),document.addEventListener("mousemove",a.onDrag),document.addEventListener("touchmove",a.onDrag),document.addEventListener("mouseup",a.onRelease),document.addEventListener("touchend",a.onRelease),a.props.onPress&&a.props.onPress(e)},a.onDrag=function(e){var t=a.props,n=t.onChange,o=t.onDrag,r=a.state.activeHandleIndex,i=a.getValues(),s=a.getValueForClientX(e.clientX),u=a.roundToStep(s),c=[].concat(i.slice(0,r),[u],i.slice(r+1));o&&o(e),n(c)},a.onRelease=function(e){document.removeEventListener("mousemove",a.onDrag),document.removeEventListener("touchmove",a.onDrag),document.removeEventListener("mouseup",a.onRelease),document.removeEventListener("touchend",a.onRelease),a.setState({activeHandleIndex:null},function(){a.props.onRelease&&a.props.onRelease(e)})},a.roundToStep=function(e){var t=a.props,n=t.min,o=t.max,r=t.steps,i=t.stepSize,s=n,u=o;if(r)r.forEach(function(t){t<=e&&t>s&&(s=t),t>=e&&t<u&&(u=t)});else{for(;s<e&&s+i<e;)s+=i;u=Math.min(s+i,o)}return e-s<u-e?s:u},a.getValues=function(){return Array.isArray(a.props.value)?a.props.value:[a.props.value]},a.getPercentageForValue=function(e){var t=a.props,n=t.min,o=t.max;return Math.max(0,Math.min(100,(e-n)/(o-n)*100))},a.getValueForClientX=function(e){var t=a.props,n=t.min,o=t.max,r=f(a.trackEl);return(o-n)*((e-r.left)/r.width)+n},a.getTicks=function(){var e=a.props,t=e.min,n=e.max,o=e.tickSize,r=e.ticks,i=e.steps,s=r;if(!s)if(i)s=i;else{for(s=[t];s[s.length-1]<n-o;)s.push(s[s.length-1]+o);s.push(n)}return s.map(function(e,t){return{value:e,getTickProps:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.key,r=n.style,i=void 0===r?{}:r;return{key:void 0!==o?o:t,style:p({},i,{position:"absolute",left:a.getPercentageForValue(e)+"%"})}}}})},a.getSegments=function(){var e=a.props,t=e.min,n=e.max,o=a.getValues(),r=[].concat(o).sort(function(e,t){return e-t});return[].concat(r,[n]).map(function(e,n){return{value:e,getSegmentProps:function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=o.key,s=o.style,u=void 0===s?{}:s,c=a.getPercentageForValue(r[n-1]?r[n-1]:t),l=a.getPercentageForValue(e)-c;return{key:void 0!==i?i:n,style:p({},u,{position:"absolute",left:c+"%",width:l+"%"})}}}})},a.getHandles=function(){var e=a.state.activeHandleIndex;return a.getValues().map(function(t,n){return{value:t,active:n===e,getHandleProps:function(){var r,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},s=i.key,u=i.refProp,c=void 0===u?"ref":u,l=i.innerRef,f=void 0===l?function(){}:l,d=i.onMouseDown,v=void 0===d?function(){}:d,g=i.onTouchStart,h=void 0===g?function(){}:g,m=i.style,y=void 0===m?{}:m,x=o(i,["key","refProp","innerRef","onMouseDown","onTouchStart","style"]);return p((r={key:void 0!==s?s:n},r[c]=function(e){a.handleEls[n]=e,f(e)},r.onMouseDown=function(e){e.persist(),a.onPress(e,n),v(e)},r.onTouchStart=function(e){e.persist(),a.onPress(e,n),h(e)},r.style=p({},y,{position:"absolute",cursor:"pointer",top:"50%",left:a.getPercentageForValue(t)+"%",transform:"translate(-50%, -50%)",zIndex:n===e?"1":"0"}),r),x)}}})},a.getTrackProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.style,o=void 0===n?{}:n,r=t.refProp,i=void 0===r?"ref":r,s=a.props.onTrackClick,u=a.state.activeHandleIndex;return e={},e[i]=function(e){a.trackEl=e},e.onClick=function(e){if(e.persist(),null===u&&s&&!a.handleEls.find(function(t){return t.contains(e.target)})){var t=a.getValueForClientX(e.clientX);s(a.roundToStep(t),t)}},e.style=p({},o,{position:"relative",userSelect:"none"}),e},s=n,i(a,s)}return a(t,e),t.prototype.render=function(){var e=this.props.children,t=this.state.activeHandleIndex;return e({getTrackProps:this.getTrackProps,ticks:this.getTicks(),segments:this.getSegments(),handles:this.getHandles(),activeHandleIndex:t})},t}(l.a.Component),s.defaultProps={tickSize:10},u);t.default=d},function(t,n){t.exports=e}])}); | ||
| //# sourceMappingURL=react-ranger.min.js.map |
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-2.15%
99433
- Number of lines in readme file
- decreased by-48.24%
103
No dependency changes