Skip to content

Commit

Permalink
Update Switch components to new standards
Browse files Browse the repository at this point in the history
  • Loading branch information
@ImAvafe
ImAvafe committed Jun 9, 2024
1 parent 082efd5 commit e6d90a1
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 183 deletions.
51 changes: 0 additions & 51 deletions src/Components/SettingToggle.lua
View file

This file was deleted.

40 changes: 10 additions & 30 deletions src/Components/SwitchGroup.lua
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,25 @@
local OnyxUI = script.Parent.Parent
local Fusion = require(OnyxUI.Parent.Fusion)

local EnsureValue = require(OnyxUI.Utils.EnsureValue)
local Themer = require(OnyxUI.Utils.Themer)
local CombineProps = require(OnyxUI.Utils.CombineProps)

local Children = Fusion.Children

local BaseButton = require(OnyxUI.Components.BaseButton)
local BaseButton = require(script.Parent.BaseButton)
local SwitchInput = require(script.Parent.SwitchInput)

local function SwitchGroup(Props: { [any]: any })
Props.SwitchedOn = EnsureValue(Props.SwitchedOn, "boolean", false)
Props.Disabled = EnsureValue(Props.Disabled, "boolean", false)
export type Props = SwitchInput.Props & {}

return BaseButton {
Name = Props.Name,
Parent = Props.Parent,
Position = Props.Position,
Rotation = Props.Rotation,
AnchorPoint = Props.AnchorPoint,
Size = Props.Size,
AutomaticSize = Props.AutomaticSize,
Visible = Props.Visible,
ZIndex = Props.ZIndex,
LayoutOrder = Props.LayoutOrder,
ClipsDescendants = Props.ClipsDescendants,
Active = Props.Active,
Selectable = Props.Selectable,
Interactable = Props.Interactable,
BackgroundColor3 = Props.BackgroundColor3,
BackgroundTransparency = Props.BackgroundTransparency,
local function SwitchGroup(Props: Props)
local Switched = EnsureValue(Props.Switched, "boolean", false)

return BaseButton(CombineProps(Props, {
Name = "SwitchGroup",
ClickSound = Themer.Theme.Sound.Switch,

Disabled = Props.Disabled,

OnActivated = function()
Props.SwitchedOn:set(not Props.SwitchedOn:get())
Switched:set(not Switched:get())
end,

[Children] = Props[Children],
}
}))
end

return SwitchGroup
191 changes: 97 additions & 94 deletions src/Components/SwitchInput.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,117 +3,125 @@ local Fusion = require(OnyxUI.Parent.Fusion)

local EnsureValue = require(OnyxUI.Utils.EnsureValue)
local Themer = require(OnyxUI.Utils.Themer)
local Modifier = require(OnyxUI.Utils.Modifier)
local PubTypes = require(OnyxUI.Utils.PubTypes)
local CombineProps = require(OnyxUI.Utils.CombineProps)

local Children = Fusion.Children
local Computed = Fusion.Computed
local Spring = Fusion.Spring

local Frame = require(OnyxUI.Components.Frame)
local BaseButton = require(OnyxUI.Components.BaseButton)

local function SwitchInput(Props: { [any]: any })
Props.Name = EnsureValue(Props.Name, "string", "SwitchInput")
Props.Size = EnsureValue(
local Value = Fusion.Value

local Frame = require(script.Parent.Frame)
local BaseButton = require(script.Parent.BaseButton)

export type Props = Frame.Props & {
Switched: PubTypes.CanBeState<boolean>?,
Disabled: PubTypes.CanBeState<boolean>?,
Color: PubTypes.CanBeState<Color3>?,
}

return function(Props: Props)
local Switched = EnsureValue(Props.Switched, "boolean", false)
local Disabled = EnsureValue(Props.Disabled, "boolean", false)
local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main)
local Size = EnsureValue(
Props.Size,
"UDim2",
Computed(function()
return UDim2.fromOffset(Themer.Theme.TextSize["1"]:get() * 2, Themer.Theme.TextSize["1"]:get())
end)
)
local AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.None)

Props.SwitchedOn = EnsureValue(Props.SwitchedOn, "boolean", false)
Props.Disabled = EnsureValue(Props.Disabled, "boolean", false)

Props.Padding = EnsureValue(
Props.Padding,
"UDim",
Computed(function()
return UDim.new(0, Themer.Theme.Spacing["0.25"]:get())
end)
)

local ContentColor = Computed(function()
if Props.SwitchedOn:get() then
return Themer.Theme.Colors.Primary.Main:get()
local IsHolding = Value(false)
local IsHovering = Value(false)
local EffectiveColor = Computed(function()
if Switched:get() then
return Color:get()
else
return Themer.Theme.Colors.NeutralContent.Dark:get()
end
end)
local EffectiveBallColor = Computed(function(): any
if Switched:get() then
return Themer.Theme.Colors.Base.Main:get()
else
return Themer.Theme.Colors.NeutralContent.Dark:get()
end
end)

return BaseButton {
Name = Props.Name,
Parent = Props.Parent,
Position = Props.Position,
Rotation = Props.Rotation,
AnchorPoint = Props.AnchorPoint,
Size = Props.Size,
AutomaticSize = Props.AutomaticSize,
Visible = Props.Visible,
ZIndex = Props.ZIndex,
LayoutOrder = Props.LayoutOrder,
ClipsDescendants = Props.ClipsDescendants,
Active = Props.Active,
Selectable = Props.Selectable,
Interactable = Props.Interactable,
BackgroundColor3 = Props.BackgroundColor3,
BackgroundTransparency = Props.BackgroundTransparency,

return BaseButton(CombineProps(Props, {
Name = "SwitchInput",
Size = Size,
AutomaticSize = AutomaticSize,
Disabled = Disabled,
StrokeEnabled = true,
StrokeTransparency = Spring(
Computed(function()
if Disabled:get() then
return 0.7
end
if Switched:get() then
return 0
else
return 0.5
end
end),
Themer.Theme.SpringSpeed["1"],
Themer.Theme.SpringDampening
),
StrokeColor = Spring(EffectiveColor, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening),
CornerRadius = Computed(function()
return UDim.new(0, Themer.Theme.CornerRadius["Full"]:get())
end),
ClickSound = Themer.Theme.Sound.Switch,

Disabled = Props.Disabled,

IsHovering = IsHovering,
IsHolding = IsHolding,
OnActivated = function()
Props.SwitchedOn:set(not Props.SwitchedOn:get())
Switched:set(not Switched:get())
end,

[Children] = {
Frame {
Name = "Switch",
Size = Props.Size,
AutomaticSize = Enum.AutomaticSize.None,
BackgroundColor3 = Themer.Theme.Colors.Base.Light,
BackgroundTransparency = 0,
Size = Size,
AutomaticSize = AutomaticSize,
BackgroundColor3 = Spring(EffectiveColor, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening),
BackgroundTransparency = Spring(
Computed(function()
if Switched:get() then
return 0
else
return 1
end
end),
Themer.Theme.SpringSpeed["1"],
Themer.Theme.SpringDampening
),
Padding = UDim.new(0, 2),

[Children] = {
Modifier.Stroke {
Transparency = Spring(
Computed(function()
if Props.Disabled:get() then
return 0.7
end
if Props.SwitchedOn:get() then
return 0
else
return 0.6
end
end),
Themer.Theme.SpringSpeed["1"],
Themer.Theme.SpringDampening
),
Color = Spring(ContentColor, 30, Themer.Theme.SpringDampening),
},
Modifier.Corner {
CornerRadius = Computed(function()
return UDim.new(0, Themer.Theme.CornerRadius["2"]:get())
end),
},
Modifier.Padding {
Padding = UDim.new(0, 3),
},

Frame {
Name = "Ball",
AnchorPoint = Spring(
Computed(function()
return (Props.SwitchedOn:get() and Vector2.new(1, 0.5)) or Vector2.new(0, 0.5)
if Switched:get() then
return Vector2.new(1, 0.5)
else
return Vector2.new(0, 0.5)
end
end),
Themer.Theme.SpringSpeed["1"],
Themer.Theme.SpringDampening
),
Position = Spring(
Computed(function()
return (Props.SwitchedOn:get() and UDim2.fromScale(1, 0.5)) or UDim2.fromScale(0, 0.5)
if Switched:get() then
return UDim2.fromScale(1, 0.5)
else
return UDim2.fromScale(0, 0.5)
end
end),
Themer.Theme.SpringSpeed["1"],
Themer.Theme.SpringDampening
Expand All @@ -122,10 +130,10 @@ local function SwitchInput(Props: { [any]: any })
AutomaticSize = Enum.AutomaticSize.None,
BackgroundTransparency = Spring(
Computed(function()
if Props.Disabled:get() then
if Disabled:get() then
return 0.7
end
if Props.SwitchedOn:get() then
if Switched:get() then
return 0
else
return 0
Expand All @@ -134,25 +142,20 @@ local function SwitchInput(Props: { [any]: any })
Themer.Theme.SpringSpeed["1"],
Themer.Theme.SpringDampening
),
BackgroundColor3 = Spring(ContentColor, 40, Themer.Theme.SpringDampening),

[Children] = {
Modifier.AspectRatioConstraint {
AspectRatio = 1,
AspectType = Enum.AspectType.ScaleWithParentSize,
DominantAxis = Enum.DominantAxis.Height,
},
Modifier.Corner {
CornerRadius = Computed(function()
return UDim.new(0, Themer.Theme.CornerRadius["2"]:get())
end),
},
},
BackgroundColor3 = Spring(
EffectiveBallColor,
Themer.Theme.SpringSpeed["1"],
Themer.Theme.SpringDampening
),
AspectRatio = 1,
AspectType = Enum.AspectType.ScaleWithParentSize,
DominantAxis = Enum.DominantAxis.Height,
CornerRadius = Computed(function()
return UDim.new(0, Themer.Theme.CornerRadius.Full:get())
end),
},
},
},
},
}
}, { "Size", "AutomaticSize" }))
end

return SwitchInput
16 changes: 8 additions & 8 deletions src/Components/SwitchInput.story.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@ return {
PaddingTop = PreviewPadding,
},
SwitchInput {
[Children] = {
Text {
AnchorPoint = Vector2.new(0, 0.5),
Position = UDim2.fromScale(0, 0.5),
Text = "uwu",
TextSize = 19,
},
},
-- [Children] = {
-- Text {
-- AnchorPoint = Vector2.new(0, 0.5),
-- Position = UDim2.fromScale(0, 0.5),
-- Text = "uwu",
-- TextSize = 19,
-- },
-- },
},
},
}
Expand Down

0 comments on commit e6d90a1

Please sign in to comment.