Clients/Client2018/content/internal/Chat/Modules/LuaChat/Components/ToastComponent.lua

97 lines
2.4 KiB
Lua

local Modules = script.Parent.Parent
local Create = require(Modules.Create)
local Constants = require(Modules.Constants)
local ToastComplete = require(Modules.Actions.ToastComplete)
local ToastComponent = {}
ToastComponent.__index = ToastComponent
local POSITION_HIDE = UDim2.new(0.5, 0, 1, 72)
local POSITION_SHOW = UDim2.new(0.5, 0, 1, -56-48)
local TEXT_SIZE = Constants.Font.FONT_SIZE_16
local PADDING = 12
function ToastComponent.new(appState, route)
local self = {}
self.appState = appState
self.route = route
setmetatable(self, ToastComponent)
self.rbx = Create.new"Frame" {
Name = "ToastComponent",
Size = UDim2.new(1, -48*2, 0, 56),
Position = POSITION_HIDE,
AnchorPoint = Vector2.new(0.5, 0),
BackgroundTransparency = 0.1,
BackgroundColor3 = Constants.Color.GRAY1,
BorderSizePixel = 0,
Visible = true,
Create.new"TextLabel" {
Name = "Message",
BackgroundTransparency = 1,
BorderSizePixel = 0,
Font = Enum.Font.SourceSans,
TextSize = TEXT_SIZE,
TextColor3 = Constants.Color.WHITE,
Text = "",
Size = UDim2.new(1, 0, 1, 0),
TextXAlignment = Enum.TextXAlignment.Center,
TextYAlignment = Enum.TextYAlignment.Center,
}
}
self.appState.store.Changed:Connect(function(current, previous)
if current ~= previous then
self:Update(current.ChatAppReducer.Toast)
end
end)
return self
end
function ToastComponent:Update(toast)
if toast == nil then
return
end
-- We don't want to show the toast if another one with the same id is being shown.
if self.toast and (self.toast.id == toast.id) then
return
end
self.toast = toast
self:Show(toast)
end
function ToastComponent:Hide()
self.rbx:TweenPosition(POSITION_HIDE, Enum.EasingDirection.In,
Enum.EasingStyle.Quad, 0.25, false, function(status)
self.appState.store:dispatch(ToastComplete(self.toast))
self.toast = nil
end)
end
function ToastComponent:Show(toast)
local message = toast.messageKey ~= nil and
self.appState.localization:Format(toast.messageKey, toast.messageArguments) or ""
self.rbx.Message.Text = message
local textWidth = self.rbx.Message.TextBounds.X
self.rbx.Size = UDim2.new(0, textWidth + PADDING * 2, 0, 56)
self.rbx.Position = POSITION_HIDE
self.rbx:TweenPosition(POSITION_SHOW, Enum.EasingDirection.Out,
Enum.EasingStyle.Quad, 0.25, false, function(status)
wait(2)
if self.toast.id == toast.id then
self:Hide()
end
end)
end
return ToastComponent