rojo 7.6.1

Enables professional-grade development tools for Roblox developers
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

local Rojo = script:FindFirstAncestor("Rojo")
local Plugin = Rojo.Plugin
local Packages = Rojo.Packages

local Roact = require(Packages.Roact)
local Flipper = require(Packages.Flipper)

local Theme = require(Plugin.App.Theme)
local Assets = require(Plugin.Assets)
local bindingUtil = require(Plugin.App.bindingUtil)

local SlicedImage = require(script.Parent.SlicedImage)

local SPRING_PROPS = {
	frequency = 5,
	dampingRatio = 1,
}

local e = Roact.createElement

local TextInput = Roact.Component:extend("TextInput")

function TextInput:init()
	self.motor = Flipper.GroupMotor.new({
		hover = 0,
		enabled = self.props.enabled and 1 or 0,
	})
	self.binding = bindingUtil.fromMotor(self.motor)
end

function TextInput:didUpdate(lastProps)
	if lastProps.enabled ~= self.props.enabled then
		self.motor:setGoal({
			enabled = Flipper.Spring.new(self.props.enabled and 1 or 0),
		})
	end
end

function TextInput:render()
	return Theme.with(function(theme)
		local textInputTheme = theme.TextInput

		local bindingHover = bindingUtil.deriveProperty(self.binding, "hover")
		local bindingEnabled = bindingUtil.deriveProperty(self.binding, "enabled")

		return e(SlicedImage, {
			slice = Assets.Slices.RoundedBorder,
			color = bindingUtil.mapLerp(
				bindingEnabled,
				textInputTheme.Enabled.BorderColor,
				textInputTheme.Disabled.BorderColor
			),
			transparency = self.props.transparency,

			size = self.props.size or UDim2.new(1, 0, 1, 0),
			position = self.props.position,
			layoutOrder = self.props.layoutOrder,
			anchorPoint = self.props.anchorPoint,
		}, {
			HoverOverlay = e(SlicedImage, {
				slice = Assets.Slices.RoundedBackground,
				color = textInputTheme.ActionFillColor,
				transparency = Roact.joinBindings({
					hover = bindingHover:map(function(value)
						return 1 - value
					end),
					transparency = self.props.transparency,
				}):map(function(values)
					return bindingUtil.blendAlpha({
						textInputTheme.ActionFillTransparency,
						values.hover,
						values.transparency,
					})
				end),
				size = UDim2.new(1, 0, 1, 0),
				zIndex = -1,
			}),
			Input = e("TextBox", {
				BackgroundTransparency = 1,
				Size = UDim2.fromScale(1, 1),
				Text = self.props.text,
				PlaceholderText = self.props.placeholder,
				FontFace = theme.Font.Main,
				TextColor3 = bindingUtil.mapLerp(
					bindingEnabled,
					textInputTheme.Disabled.TextColor,
					textInputTheme.Enabled.TextColor
				),
				PlaceholderColor3 = bindingUtil.mapLerp(
					bindingEnabled,
					textInputTheme.Disabled.PlaceholderColor,
					textInputTheme.Enabled.PlaceholderColor
				),
				TextSize = theme.TextSize.Large,
				TextEditable = self.props.enabled,
				ClearTextOnFocus = self.props.clearTextOnFocus,

				[Roact.Event.MouseEnter] = function()
					self.motor:setGoal({
						hover = Flipper.Spring.new(1, SPRING_PROPS),
					})
				end,

				[Roact.Event.MouseLeave] = function()
					self.motor:setGoal({
						hover = Flipper.Spring.new(0, SPRING_PROPS),
					})
				end,

				[Roact.Event.FocusLost] = function(rbx)
					self.props.onEntered(rbx.Text)
				end,
			}),
			Children = Roact.createFragment(self.props[Roact.Children]),
		})
	end)
end

return TextInput