hakowork/rojo
3
0
Fork 0
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-10-20 17:41:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Factor out form text input

Browse source
This commit is contained in:
Lucien Greathouse 2019-01-11 15:26:25 -08:00
parent d81eaa6c13
commit f21f01be1a
2 changed files with 66 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

75
plugin/src/Components/ConnectPanel.lua
View file

@ -9,6 +9,7 @@ local Assets = require(Plugin.Assets)
local FitList = require(Plugin.Components.FitList)
local FitText = require(Plugin.Components.FitText)
local FormButton = require(Plugin.Components.FormButton)
local FormTextInput = require(Plugin.Components.FormTextInput)
local WhiteCross = Assets.Sprites.WhiteCross
local GrayBox = Assets.Slices.GrayBox
@ -153,34 +154,15 @@ function ConnectPanel:render()
}),
}),
InputOuter = e("ImageLabel", {
LayoutOrder = 2,
Image = GrayBox.asset,
ImageRectOffset = GrayBox.offset,
ImageRectSize = GrayBox.size,
ScaleType = Enum.ScaleType.Slice,
SliceCenter = GrayBox.center,
Size = UDim2.new(0, 300, 0, 24),
BackgroundTransparency = 1,
}, {
InputInner = e("TextBox", {
BackgroundTransparency = 1,
Size = UDim2.new(1, -8, 1, -8),
Position = UDim2.new(0.5, 0, 0.5, 0),
AnchorPoint = Vector2.new(0.5, 0.5),
Font = Enum.Font.SourceSans,
ClearTextOnFocus = false,
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = FORM_TEXT_SIZE,
Text = self.state.address,
TextColor3 = TEXT_COLOR,
[Roact.Change.Text] = function(rbx)
self:setState({
address = rbx.Text,
})
end,
}),
Input = e(FormTextInput, {
layoutOrder = 2,
size = UDim2.new(0, 300, 0, 24),
value = self.state.address,
onValueChange = function(newValue)
self:setState({
address = newValue,
})
end,
}),
}),
@ -214,34 +196,15 @@ function ConnectPanel:render()
}),
}),
InputOuter = e("ImageLabel", {
LayoutOrder = 2,
Image = GrayBox.asset,
ImageRectOffset = GrayBox.offset,
ImageRectSize = GrayBox.size,
ScaleType = Enum.ScaleType.Slice,
SliceCenter = GrayBox.center,
Size = UDim2.new(0, 300, 0, 24),
BackgroundTransparency = 1,
}, {
InputInner = e("TextBox", {
BackgroundTransparency = 1,
Size = UDim2.new(1, -8, 1, -8),
Position = UDim2.new(0.5, 0, 0.5, 0),
AnchorPoint = Vector2.new(0.5, 0.5),
Font = Enum.Font.SourceSans,
ClearTextOnFocus = false,
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = FORM_TEXT_SIZE,
Text = self.state.port,
TextColor3 = TEXT_COLOR,
[Roact.Change.Text] = function(rbx)
self:setState({
port = rbx.Text,
})
end,
}),
Input = e(FormTextInput, {
layoutOrder = 2,
size = UDim2.new(0, 300, 0, 24),
value = self.state.port,
onValueChange = function(newValue)
self:setState({
port = newValue,
})
end,
}),
}),

47
plugin/src/Components/FormTextInput.lua Normal file
View file

@ -0,0 +1,47 @@
local Rojo = script:FindFirstAncestor("Rojo")
local Plugin = Rojo.Plugin
local Roact = require(Rojo.Roact)
local Assets = require(Plugin.Assets)
local e = Roact.createElement
local GrayBox = Assets.Slices.GrayBox
local function FormTextInput(props)
local value = props.value
local onValueChange = props.onValueChange
local layoutOrder = props.layoutOrder
local size = props.size
return e("ImageLabel", {
LayoutOrder = layoutOrder,
Image = GrayBox.asset,
ImageRectOffset = GrayBox.offset,
ImageRectSize = GrayBox.size,
ScaleType = Enum.ScaleType.Slice,
SliceCenter = GrayBox.center,
Size = size,
BackgroundTransparency = 1,
}, {
InputInner = e("TextBox", {
BackgroundTransparency = 1,
Size = UDim2.new(1, -8, 1, -8),
Position = UDim2.new(0.5, 0, 0.5, 0),
AnchorPoint = Vector2.new(0.5, 0.5),
Font = Enum.Font.SourceSans,
ClearTextOnFocus = false,
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = 20,
Text = value,
TextColor3 = Color3.new(0.05, 0.05, 0.05),
[Roact.Change.Text] = function(rbx)
onValueChange(rbx.Text)
end,
}),
})
end
return FormTextInput