@rbxts/uiblox 0.1.49 → 0.1.51

package/out/theme/hooks/useTheme.luau

@@ -1,22 +1,27 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useCallback = _react.useCallback
+local useEffect = _react.useEffect
 local useMemo = _react.useMemo
 local useState = _react.useState
 local themeProducer = TS.import(script, script.Parent.Parent, "context", "ThemeProducer").themeProducer
 local useTheme = function()
 	local theme, setTheme = useState(themeProducer:getState())
-	themeProducer:subscribe(function(state, _previousState)
-		setTheme(state)
+	useEffect(function()
+		local unsubscribeFn = themeProducer:subscribe(function(state, _previousState)
+			setTheme(state)
+		end)
+		return function()
+			unsubscribeFn()
+		end
 	end)
-	local setProducerTheme = useCallback(function(t)
-		themeProducer.setTheme(t)
-	end, { setTheme })
+	local memoizedSetTheme = useMemo(function()
+		return themeProducer.setTheme
+	end, { themeProducer.setTheme })
 	return useMemo(function()
 		return {
 			theme = theme,
-			setTheme = setProducerTheme,
+			setTheme = memoizedSetTheme,
 		}
 	end, { theme, setTheme })
 end

package/out/ui/packages/button/components/Button.d.ts

@@ -11,6 +11,7 @@ export interface ButtonProps {
     loading?: boolean;
     rounded?: boolean;
     hoveringDisabled?: boolean;
+    animating?: boolean;
     onLeftClick?: () => void;
     onLeftDown?: () => void;
     onLeftUp?: () => void;

package/out/ui/packages/button/components/Button.luau

@@ -4,6 +4,7 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
+local LoadingStroke = TS.import(script, script.Parent.Parent.Parent, "loadingStroke").LoadingStroke
 local function Button(props)
 	local _binding = props
 	local text = _binding.text
@@ -30,6 +31,10 @@ local function Button(props)
 	if hoveringDisabled == nil then
 		hoveringDisabled = false
 	end
+	local animating = _binding.animating
+	if animating == nil then
+		animating = false
+	end
 	local onLeftClick = _binding.onLeftClick
 	local onLeftDown = _binding.onLeftDown
 	local onLeftUp = _binding.onLeftUp
@@ -61,10 +66,10 @@ local function Button(props)
 	for _k, _v in font do
 		_attributes[_k] = _v
 	end
-	_attributes.Active = not disabled and not loading
+	_attributes.Active = not disabled
 	_attributes.Text = text
 	local _result
-	if (not hoveringDisabled and hovering) or disabled or loading then
+	if (not hoveringDisabled and hovering) or disabled then
 		_result = 0.75
 	else
 		local _result_1 = className
@@ -151,7 +156,9 @@ local function Button(props)
 		setmetatable(_attributes_1, nil)
 		_condition_2 = React.createElement("uicorner", _attributes_1)
 	end
-	return React.createElement("textbutton", _attributes, _condition_1, _condition_2, children)
+	return React.createElement("textbutton", _attributes, _condition_1, _condition_2, children, React.createElement(LoadingStroke, {
+		animating = animating,
+	}))
 end
 local default = Button
 return {

package/out/ui/packages/loadingStroke/components/LoadingStroke.d.ts

@@ -0,0 +1,6 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface LoadingStrokeProps {
+    animating?: boolean;
+}
+declare function LoadingStroke(props: CustomizedProps<UIStroke, LoadingStrokeProps>): JSX.Element;
+export default LoadingStroke;

package/out/ui/packages/loadingStroke/components/LoadingStroke.luau

@@ -0,0 +1,63 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local TweenService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TweenService
+local function LoadingStroke(props)
+	local _binding = props
+	local animating = _binding.animating
+	if animating == nil then
+		animating = false
+	end
+	local className = _binding.className
+	local children = _binding.children
+	local id = _binding.id
+	local ref = _binding.ref
+	local gradientRef = useRef()
+	useEffect(function()
+		if gradientRef.current then
+			if animating then
+				local tween = TweenService:Create(gradientRef.current, TweenInfo.new(2, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, false), {
+					Rotation = 360,
+				})
+				tween:Play()
+				return function()
+					return tween:Destroy()
+				end
+			else
+				gradientRef.current.Rotation = 0
+			end
+		end
+	end, { animating })
+	local _condition = animating
+	if _condition then
+		local _attributes = {}
+		local _condition_1 = id
+		if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+			_condition_1 = "LoadingStroke"
+		end
+		_attributes.key = _condition_1
+		_attributes.ref = ref
+		_attributes.Color = Color3.fromRGB(255, 255, 255)
+		_attributes.Thickness = 2
+		_attributes.ApplyStrokeMode = Enum.ApplyStrokeMode.Border
+		if className then
+			for _k, _v in className do
+				_attributes[_k] = _v
+			end
+		end
+		_condition = (React.createElement("uistroke", _attributes, React.createElement("uigradient", {
+			ref = gradientRef,
+			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 1) }),
+			Rotation = 0,
+			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 255, 255)), ColorSequenceKeypoint.new(0.5, Color3.fromRGB(235, 235, 235)), ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 255, 255)) }),
+		}), children))
+	end
+	return React.createElement(React.Fragment, nil, _condition)
+end
+local default = LoadingStroke
+return {
+	default = default,
+}

package/out/ui/packages/loadingStroke/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LoadingStroke } from "./components/LoadingStroke";
+export { LoadingStrokeProps } from "./components/LoadingStroke";
+export * from "./components/LoadingStroke";

package/out/ui/packages/loadingStroke/init.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.LoadingStroke = TS.import(script, script, "components", "LoadingStroke").default
+for _k, _v in TS.import(script, script, "components", "LoadingStroke") or {} do
+	exports[_k] = _v
+end
+return exports

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.49",
+	"version": "0.1.51",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {