Add Inverted and Direction props to ProgressBar

ImAvafe · Jun 10, 2024 · a574634 · a574634
1 parent 69657a5
commit a574634
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 6 deletions.
diff --git a/src/Components/ProgressBar.lua b/src/Components/ProgressBar.lua
@@ -14,40 +14,74 @@ local Frame = require(script.Parent.Frame)
 export type Props = Frame.Props & {
 	Progress: PubTypes.CanBeState<number>?,
 	Color: PubTypes.CanBeState<Color3>?,
+	Direction: PubTypes.CanBeState<Enum.FillDirection>?,
+	Inverted: PubTypes.CanBeState<boolean>?,
 }
 
 return function(Props: Props)
 	local Progress = EnsureValue(Props.Progress, "number", 0)
 	local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main)
+	local Direction = EnsureValue(Props.Direction, "EnumItem", Enum.FillDirection.Horizontal)
+	local Inverted = EnsureValue(Props.Inverted, "boolean", false)
 
-	local CornerRadius = Computed(function()
-		return UDim.new(0, Themer.Theme.CornerRadius["2"]:get())
+	local EffectiveCornerRadius = Computed(function()
+		return UDim.new(0, Themer.Theme.CornerRadius["Full"]:get())
 	end)
 
 	return Frame(CombineProps(Props, {
 		Name = "ProgressBar",
 		Size = Computed(function()
-			return UDim2.fromOffset(250, Themer.Theme.TextSize["1"]:get())
+			if Direction:get() == Enum.FillDirection.Horizontal then
+				return UDim2.fromOffset(250, Themer.Theme.TextSize["0.75"]:get())
+			else
+				return UDim2.fromOffset(Themer.Theme.TextSize["0.75"]:get(), 250)
+			end
 		end),
 		AutomaticSize = Enum.AutomaticSize.None,
 		BackgroundTransparency = 0,
 		BackgroundColor3 = Themer.Theme.Colors.Neutral.Dark,
-		CornerRadius = CornerRadius,
+		EffectiveCornerRadius = EffectiveCornerRadius,
 
 		[Children] = {
 			Frame {
 				Name = "ProgressFill",
 				Size = Spring(
 					Computed(function()
-						return UDim2.fromScale(Progress:get(), 1)
+						if Direction:get() == Enum.FillDirection.Horizontal then
+							return UDim2.fromScale(Progress:get(), 1)
+						else
+							return UDim2.fromScale(1, Progress:get())
+						end
 					end),
 					Themer.Theme.SpringSpeed["0.5"],
 					Themer.Theme.SpringDampening
 				),
+				AnchorPoint = Computed(function()
+					if Inverted:get() then
+						if Direction:get() == Enum.FillDirection.Horizontal then
+							return Vector2.new(1, 0)
+						else
+							return Vector2.new(0, 1)
+						end
+					else
+						return Vector2.new(0, 0)
+					end
+				end),
+				Position = Computed(function()
+					if Inverted:get() then
+						if Direction:get() == Enum.FillDirection.Horizontal then
+							return UDim2.fromScale(1, 0)
+						else
+							return UDim2.fromScale(0, 1)
+						end
+					else
+						return UDim2.fromScale(0, 0)
+					end
+				end),
 				AutomaticSize = Enum.AutomaticSize.None,
 				BackgroundTransparency = 0,
 				BackgroundColor3 = Color,
-				CornerRadius = CornerRadius,
+				EffectiveCornerRadius = EffectiveCornerRadius,
 			},
 		},
 	}))

diff --git a/src/Components/ProgressBar.story.lua b/src/Components/ProgressBar.story.lua
@@ -1,12 +1,17 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
 local OnyxUI = script.Parent.Parent
+local Colors = require(ReplicatedStorage.OnyxUI.Packages.OnyxUI.Utils.Colors)
 local Fusion = require(OnyxUI.Parent.Fusion)
 local ColorUtils = require(OnyxUI.Parent.ColorUtils)
+local Themer = require(OnyxUI.Utils.Themer)
 
 local Children = Fusion.Children
 local Value = Fusion.Value
+local Computed = Fusion.Computed
 
 local Frame = require(script.Parent.Frame)
 local ProgressBar = require(script.Parent.ProgressBar)
+local Text = require(script.Parent.Text)
 
 return {
 	story = function(Parent: GuiObject, _Props: { [any]: any })
@@ -29,6 +34,33 @@ return {
 					Progress = Progress,
 					Color = Color,
 				},
+				Frame {
+					ListEnabled = true,
+					ListFillDirection = Enum.FillDirection.Horizontal,
+					ListVerticalAlignment = Enum.VerticalAlignment.Center,
+
+					[Children] = {
+						Text {
+							Text = "Label",
+						},
+						ProgressBar {
+							Progress = Progress,
+							Color = Colors.Emerald["500"],
+							Size = Computed(function()
+								return UDim2.fromOffset(150, Themer.Theme.TextSize["0.75"]:get())
+							end),
+						},
+					},
+				},
+				ProgressBar {
+					Progress = Progress,
+					Inverted = true,
+				},
+				ProgressBar {
+					Direction = Enum.FillDirection.Vertical,
+					Progress = Progress,
+					Inverted = true,
+				},
 			},
 		}