From 722051bee88da74956427c61e74194723933e561 Mon Sep 17 00:00:00 2001
From: sircfenner <sircfenner@users.noreply.github.com>
Date: Mon, 24 Jun 2024 17:36:00 +0100
Subject: [PATCH] Implement OnCompleted prop for Slider (#46)

* add oncompleted prop to slider
* forward numericinput onsubmitted to slider oncompleted
* update changelog
---
 CHANGELOG.md                     |  1 +
 src/Components/NumericInput.luau |  2 ++
 src/Components/Slider.luau       | 21 +++++++++++++++++++--
 src/Hooks/useMouseDrag.luau      |  2 +-
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b517aa..74de922 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 -   Fixed image links in documentation
+-   Added OnCompleted prop to Slider
 
 ## 1.0.0
 
diff --git a/src/Components/NumericInput.luau b/src/Components/NumericInput.luau
index 5af276a..17447c3 100644
--- a/src/Components/NumericInput.luau
+++ b/src/Components/NumericInput.luau
@@ -20,6 +20,7 @@
 
 	Use the `Arrows` and `Slider` props to specify whether up/down arrows and a slider should be
 	included. If arrows or a slider are displayed, they will increment the value by the amount of the step. 
+	Completing a slide with a slider will call the `OnSubmitted` prop (if provided) with the latest value.
 	
 	Only decimal inputs are allowed (so, for example, hex characters a-f will not be permitted).
 ]=]
@@ -327,6 +328,7 @@ local function NumericInput(props: NumericInputProps)
 			Max = max,
 			Step = step,
 			OnChanged = props.OnValidChanged,
+			OnCompleted = props.OnSubmitted,
 			Disabled = props.Disabled,
 		}),
 	})
diff --git a/src/Components/Slider.luau b/src/Components/Slider.luau
index 1ab42b6..33e21d2 100644
--- a/src/Components/Slider.luau
+++ b/src/Components/Slider.luau
@@ -30,6 +30,10 @@
 	end
 	```
 
+	Optionally, an `OnCompleted` callback prop can be provided. This will be called with the latest
+	value of the Slider when sliding is finished. It is also called if, while sliding is in progress,
+	the component becomes Disabled via props or is unmounted.
+
 	Two further props can optionally be provided:
 	1. `Border` determines whether a border is drawn around the component.
 	This is useful for giving visual feedback when the slider is hovered or selected. 
@@ -47,6 +51,8 @@ local React = require("@pkg/@jsdotlua/react")
 
 local CommonProps = require("../CommonProps")
 local Constants = require("../Constants")
+
+local useFreshCallback = require("../Hooks/useFreshCallback")
 local useMouseDrag = require("../Hooks/useMouseDrag")
 local useTheme = require("../Hooks/useTheme")
 
@@ -58,6 +64,7 @@ local useTheme = require("../Hooks/useTheme")
 	@field ... CommonProps
 	@field Value number
 	@field OnChanged ((newValue: number) -> ())?
+	@field OnCompleted ((newValue: number) -> ())?
 	@field Min number
 	@field Max number
 	@field Step number?
@@ -68,6 +75,7 @@ local useTheme = require("../Hooks/useTheme")
 type SliderProps = CommonProps.T & {
 	Value: number,
 	OnChanged: ((newValue: number) -> ())?,
+	OnCompleted: ((newValue: number) -> ())?,
 	Min: number,
 	Max: number,
 	Step: number?,
@@ -86,7 +94,7 @@ local function Slider(props: SliderProps)
 
 	local onChanged: (number) -> () = props.OnChanged or function() end
 
-	local drag = useMouseDrag(function(rbx: GuiObject, input: InputObject)
+	local dragCallback = function(rbx: GuiObject, input: InputObject)
 		local regionPos = rbx.AbsolutePosition.X + PADDING_REGION_SIDE
 		local regionSize = rbx.AbsoluteSize.X - PADDING_REGION_SIDE * 2
 		local inputPos = input.Position.X
@@ -102,7 +110,16 @@ local function Slider(props: SliderProps)
 		if value ~= props.Value then
 			onChanged(value)
 		end
-	end, { props.Value, props.Min, props.Max, props.Step, onChanged } :: { unknown })
+	end
+
+	local dragEndedCallback = useFreshCallback(function()
+		if props.OnCompleted then
+			props.OnCompleted(props.Value)
+		end
+	end, { props.Value, props.OnCompleted } :: { unknown })
+
+	local dragDeps = { props.Value, props.Min, props.Max, props.Step, props.OnCompleted, onChanged } :: { unknown }
+	local drag = useMouseDrag(dragCallback, dragDeps, nil, dragEndedCallback)
 
 	local hovered, setHovered = React.useState(false)
 	local mainModifier = Enum.StudioStyleGuideModifier.Default
diff --git a/src/Hooks/useMouseDrag.luau b/src/Hooks/useMouseDrag.luau
index 2ce2669..3c12f76 100644
--- a/src/Hooks/useMouseDrag.luau
+++ b/src/Hooks/useMouseDrag.luau
@@ -40,7 +40,7 @@ local function useMouseDrag(
 			moveConnection.current:Disconnect()
 			moveConnection.current = nil
 		end
-		if onEndedCallback then
+		if onEndedCallback and holding.current == true then
 			onEndedCallback()
 		end
 	end