Skip to content

Commit

Permalink
fix(Slider): allow move the slider over current value
Browse files Browse the repository at this point in the history 
It was impossible to slide over the currently selected value. It is fixed now
  • Loading branch information
@DSil
DSil committed Jun 28, 2023
1 parent 7fb5229 commit 8696c1b
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 31 deletions.
38 changes: 14 additions & 24 deletions packages/orbit-components/src/Slider/index.tsx
View file
Expand Up @@ -131,7 +131,6 @@ const PureSlider = ({
pauseEvent(event);
if (onChange) {
injectCallbackAndSetState(
value,
updateValue,
onChange,
moveValueByExtraStep(value, maxValue, minValue, step, handleIndex.current, step),
Expand All @@ -142,7 +141,6 @@ const PureSlider = ({
pauseEvent(event);
if (onChange) {
injectCallbackAndSetState(
value,
updateValue,
onChange,
moveValueByExtraStep(value, maxValue, minValue, step, handleIndex.current, -step),
Expand All @@ -154,7 +152,6 @@ const PureSlider = ({
pauseEvent(event);
if (onChange) {
injectCallbackAndSetState(
value,
updateValue,
onChange,
moveValueByExtraStep(value, maxValue, minValue, step, handleIndex.current, switchStep),
Expand All @@ -166,7 +163,6 @@ const PureSlider = ({
pauseEvent(event);
if (onChange) {
injectCallbackAndSetState(
value,
updateValue,
onChange,
moveValueByExtraStep(value, maxValue, minValue, step, handleIndex.current, switchStep),
Expand All @@ -177,7 +173,6 @@ const PureSlider = ({
pauseEvent(event);
if (onChange) {
injectCallbackAndSetState(
value,
updateValue,
onChange,
moveValueByExtraStep(value, maxValue, minValue, step, handleIndex.current, 0, minValue),
Expand All @@ -188,7 +183,6 @@ const PureSlider = ({
pauseEvent(event);
if (onChange) {
injectCallbackAndSetState(
value,
updateValue,
onChange,
moveValueByExtraStep(value, maxValue, minValue, step, handleIndex.current, 0, maxValue),
Expand All @@ -202,7 +196,7 @@ const PureSlider = ({
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("focusout", handleBlur);
if (onChangeAfter) {
injectCallbackAndSetState(value, updateValue, onChangeAfter, value, true);
injectCallbackAndSetState(updateValue, onChangeAfter, value);
}
};

Expand All @@ -213,7 +207,7 @@ const PureSlider = ({
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("focusout", handleBlur);
if (onChangeBefore) {
injectCallbackAndSetState(value, updateValue, onChangeBefore, value, true);
injectCallbackAndSetState(updateValue, onChangeBefore, value);
}
};

Expand Down Expand Up @@ -253,18 +247,14 @@ const PureSlider = ({
alignValue(maxValue, minValue, step, newValue),
index || 0,
);
if (onChangeBefore)
injectCallbackAndSetState(value, updateValue, onChangeBefore, value, true);
if (onChange) injectCallbackAndSetState(value, updateValue, onChange, replacedValue);
if (onChangeAfter)
injectCallbackAndSetState(value, updateValue, onChangeAfter, replacedValue);
if (onChangeBefore) injectCallbackAndSetState(updateValue, onChangeBefore, value);
if (onChange) injectCallbackAndSetState(updateValue, onChange, replacedValue);
if (onChangeAfter) injectCallbackAndSetState(updateValue, onChangeAfter, replacedValue);
} else {
const alignedValue = alignValue(maxValue, minValue, step, newValue);
if (onChangeBefore)
injectCallbackAndSetState(value, updateValue, onChangeBefore, value, true);
if (onChange) injectCallbackAndSetState(value, updateValue, onChange, alignedValue);
if (onChangeAfter)
injectCallbackAndSetState(value, updateValue, onChangeAfter, alignedValue);
if (onChangeBefore) injectCallbackAndSetState(updateValue, onChangeBefore, value);
if (onChange) injectCallbackAndSetState(updateValue, onChange, alignedValue);
if (onChangeAfter) injectCallbackAndSetState(updateValue, onChangeAfter, alignedValue);
}
}
};
Expand All @@ -282,7 +272,7 @@ const PureSlider = ({
pageX: event.pageX,
});
pauseEvent(event);
injectCallbackAndSetState(value, updateValue, onChange, handleMove(newValue));
injectCallbackAndSetState(updateValue, onChange, handleMove(newValue));
};

const handleMouseUp = () => {
Expand All @@ -291,7 +281,7 @@ const PureSlider = ({
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
if (onChangeAfter) {
injectCallbackAndSetState(value, updateValue, onChangeAfter, valueRef.current, true);
injectCallbackAndSetState(updateValue, onChangeAfter, valueRef.current);
}
};

Expand All @@ -304,7 +294,7 @@ const PureSlider = ({
window.addEventListener("mouseup", handleMouseUp);
pauseEvent(event);
if (onChangeBefore) {
injectCallbackAndSetState(value, updateValue, onChangeBefore, value, true);
injectCallbackAndSetState(updateValue, onChangeBefore, value);
}
}
};
Expand All @@ -323,15 +313,15 @@ const PureSlider = ({
pageX: event.touches[0]?.pageX || 0,
});
pauseEvent(event);
injectCallbackAndSetState(value, updateValue, onChange, handleMove(newValue));
injectCallbackAndSetState(updateValue, onChange, handleMove(newValue));
};

const handleTouchEnd = () => {
setFocused(false);
window.removeEventListener("touchmove", handleOnTouchMove);
window.removeEventListener("touchend", handleTouchEnd);
if (onChangeAfter) {
injectCallbackAndSetState(value, updateValue, onChangeAfter, valueRef.current, true);
injectCallbackAndSetState(updateValue, onChangeAfter, valueRef.current);
}
};

Expand All @@ -345,7 +335,7 @@ const PureSlider = ({
window.addEventListener("touchend", handleTouchEnd);
stopPropagation(event);
if (onChangeBefore) {
injectCallbackAndSetState(value, updateValue, onChangeBefore, value, true);
injectCallbackAndSetState(updateValue, onChangeBefore, value);
}
}
};
Expand Down
10 changes: 3 additions & 7 deletions packages/orbit-components/src/Slider/utils/index.ts
View file
Expand Up @@ -84,19 +84,15 @@ export const alignValue = (
};

export const injectCallbackAndSetState = (
value: Value,
setValue: (value: Value) => void,
callback: SliderCallback | undefined,
newValue: Value | null,
forced?: boolean,
): void => {
if (newValue != null) {
if (isNotEqual(newValue, value) || forced) {
if (callback) {
callback(sortArray(newValue));
}
setValue(newValue);
if (callback) {
callback(sortArray(newValue));
}
setValue(newValue);
}
};

Expand Down

0 comments on commit 8696c1b

Please sign in to comment.