Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 05:32:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

disabled prop added to Slider

Browse source
This commit is contained in:
nklhrstv 2020-03-06 16:26:00 +02:00
parent 8412c22e64
commit d63ced26a4
1 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/common/Slider/Slider.js
View file

@ -6,7 +6,7 @@ const useAnimationFrame = require('stremio/common/useAnimationFrame');
const useLiveRef = require('stremio/common/useLiveRef');
const styles = require('./styles');
const Slider = ({ className, value, minimumValue, maximumValue, onSlide, onComplete }) => {
const Slider = ({ className, value, minimumValue, maximumValue, disabled, onSlide, onComplete }) => {
const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0, [minimumValue]);
const maximumValueRef = useLiveRef(maximumValue !== null && !isNaN(maximumValue) ? maximumValue : 100, [maximumValue]);
const valueRef = useLiveRef(value !== null && !isNaN(value) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, value)) : 0, [minimumValue, maximumValue, value]);
@ -83,10 +83,10 @@ const Slider = ({ className, value, minimumValue, maximumValue, onSlide, onCompl
retainThumb();
}, []);
React.useLayoutEffect(() => {
if (!routeFocused) {
if (!routeFocused || disabled) {
releaseThumb();
}
}, [routeFocused]);
}, [routeFocused, disabled]);
React.useLayoutEffect(() => {
return () => {
releaseThumb();
@ -94,7 +94,7 @@ const Slider = ({ className, value, minimumValue, maximumValue, onSlide, onCompl
}, []);
const thumbPosition = Math.max(0, Math.min(1, (valueRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current)));
return (
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'])} onMouseDown={onMouseDown}>
<div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}>
<div className={styles['layer']}>
<div className={styles['track']} />
</div>
@ -115,6 +115,7 @@ Slider.propTypes = {
value: PropTypes.number,
minimumValue: PropTypes.number,
maximumValue: PropTypes.number,
disabled: PropTypes.bool,
onSlide: PropTypes.func,
onComplete: PropTypes.func
};