@rbxts/uiblox 0.1.52 → 0.2.0-alpha.0

package/out/ui/packages/treeView/components/TreeView.luau

@@ -4,56 +4,47 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useCallback = _react.useCallback
 local useEffect = _react.useEffect
+local useRef = _react.useRef
 local useState = _react.useState
-local DEFAULT_THEME = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DEFAULT_THEME
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local cx = _theme.cx
+local useTheme = _theme.useTheme
 local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local Typography = TS.import(script, script.Parent.Parent.Parent, "typography").Typography
+local VirtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList").VirtualList
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local useTreeViewStyles = TS.import(script, script.Parent, "TreeView.styles").default
+local _treeRows = TS.import(script, script.Parent, "treeRows")
+local pathsToExpand = _treeRows.pathsToExpand
+local treeRowLayout = _treeRows.treeRowLayout
+local visibleRows = _treeRows.visibleRows
 local function TreeView(props)
 	local _binding = props
 	local tree = _binding.tree
 	local icon = _binding.icon
 	local filter = _binding.filter
+	local selected = _binding.selected
 	local className = _binding.className
+	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useTreeViewStyles()
 	local root = _binding_1.root
 	local header = _binding_1.header
 	local list = _binding_1.list
-	local gridLayout = _binding_1.gridLayout
 	local row = _binding_1.row
-	local branchIcon = _binding_1.branchIcon
-	local branchTypography = _binding_1.branchTypography
-	local leafIcon = _binding_1.leafIcon
-	local leafTypography = _binding_1.leafTypography
-	local selectedBranch, setSelectedBranch = useState()
-	local selectedLeaf, setSelectedLeaf = useState()
+	local rowIcon = _binding_1.rowIcon
+	local label = _binding_1.label
+	local _binding_2 = useTheme()
+	local theme = _binding_2.theme
+	local step = theme.padding.calc(4)
+	local chevronWidth = theme.spacing.calc(1)
+	local iconWidth = theme.spacing.calc(1) + theme.padding.calc(2)
+	local itemHeight = theme.spacing.calc(1) + theme.padding.calc(4)
+	local listRef = useRef()
+	local clickedPath, setClickedPath = useState()
+	local clickedLeaf, setClickedLeaf = useState()
 	local expanded, setExpanded = useState({})
-	local canvasSize, setCanvasSize = useState(UDim2.new(0, 0, 0, 0))
-	local resizeScrollingFrame = function(rbx, child)
-		if child and not child:IsA("GuiObject") then
-			return nil
-		end
-		local height = 0
-		local _exp = rbx:GetChildren()
-		-- ▼ ReadonlyArray.forEach ▼
-		local _callback = function(c)
-			if c:IsA("GuiObject") then
-				height += c.AbsoluteSize.Y
-			end
-		end
-		for _k, _v in _exp do
-			_callback(_v, _k - 1, _exp)
-		end
-		-- ▲ ReadonlyArray.forEach ▲
-		TS.try(function()
-			setCanvasSize(UDim2.new(0, 0, 0, height))
-		end, function()
-			-- Component is unmounting. Do nothing.
-		end)
-	end
 	local matchesFilter = useCallback(function(title)
 		local isMatch = false
 		local _condition = filter == nil
@@ -80,7 +71,6 @@ local function TreeView(props)
 		-- ▲ ReadonlyArray.forEach ▲
 		return isMatch
 	end, { filter })
-	-- Automatically expand branches that match filter
 	useEffect(function()
 		local _condition = filter == nil
 		if not _condition then
@@ -94,47 +84,174 @@ local function TreeView(props)
 			setExpanded({})
 			return nil
 		end
-		local newExpanded = {}
-		-- Figure out which branches should be expanded
-		local _exp = tree.branches
-		-- ▼ ReadonlyArray.forEach ▼
-		local _callback = function(branch)
-			local matchesBranchFilter = matchesFilter(branch.title)
-			if matchesBranchFilter then
-				-- If branch is a match, whole branch should be expanded
-				local _branch = branch
-				if not (table.find(newExpanded, _branch) ~= nil) then
-					local _branch_1 = branch
-					table.insert(newExpanded, _branch_1)
+		setExpanded(pathsToExpand(tree.branches, matchesFilter))
+	end, { tree, filter })
+	useEffect(function()
+		if selected == nil or #selected == 0 then
+			return nil
+		end
+		local parts = string.split(selected, "/")
+		local ancestors = {}
+		local acc = ""
+		for i = 0, #parts - 2 do
+			acc = if i == 0 then parts[i + 1] else `{acc}/{parts[i + 1]}`
+			local _acc = acc
+			table.insert(ancestors, _acc)
+		end
+		if #ancestors == 0 then
+			return nil
+		end
+		setExpanded(function(old)
+			local updated = old
+			for _, path in ancestors do
+				if not (table.find(updated, path) ~= nil) then
+					local _array = {}
+					local _length = #_array
+					local _updatedLength = #updated
+					table.move(updated, 1, _updatedLength, _length + 1, _array)
+					_length += _updatedLength
+					_array[_length + 1] = path
+					updated = _array
 				end
-			else
-				-- If any of the leaves are a match, branch should be expanded
-				local _exp_1 = branch.leaves
-				-- ▼ ReadonlyArray.forEach ▼
-				local _callback_1 = function(leaf)
-					local _branch = branch
-					if table.find(newExpanded, _branch) ~= nil then
-						return nil
+			end
+			return updated
+		end)
+	end, { tree, filter, selected })
+	local rows = visibleRows(tree.branches, expanded, selected, clickedPath, matchesFilter)
+	local _result
+	if selected ~= nil and #selected > 0 then
+		-- ▼ ReadonlyArray.findIndex ▼
+		local _callback = function(entry)
+			return entry.path == selected
+		end
+		local _result_1 = -1
+		for _i, _v in rows do
+			if _callback(_v, _i - 1, rows) == true then
+				_result_1 = _i - 1
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.findIndex ▲
+		_result = _result_1
+	else
+		_result = -1
+	end
+	local selectedIndex = _result
+	useEffect(function()
+		if selectedIndex >= 0 then
+			local _result_1 = listRef.current
+			if _result_1 ~= nil then
+				_result_1.ensureVisible(selectedIndex)
+			end
+		end
+	end, { selected, selectedIndex })
+	local renderRow = function(entry)
+		local _binding_3 = treeRowLayout(entry.depth, step, chevronWidth, iconWidth)
+		local chevronX = _binding_3.chevronX
+		local iconX = _binding_3.iconX
+		local labelX = _binding_3.labelX
+		local rowIconImage = if entry.kind == "leaf" then (entry.icon or icon or Icons.ListPrimary) else entry.icon
+		local bold = if entry.kind == "branch" then entry.emphasized elseif selected ~= nil then selected == entry.path else clickedLeaf == entry.path
+		local _attributes = table.clone(row)
+		setmetatable(_attributes, nil)
+		_attributes.Event = {
+			MouseButton1Click = function()
+				local _result_1 = listRef.current
+				if _result_1 ~= nil then
+					_result_1 = _result_1.suppressClick()
+				end
+				if _result_1 then
+					return nil
+				end
+				if entry.kind == "leaf" then
+					setClickedLeaf(entry.path)
+					setClickedPath(string.sub(entry.path, 1, #entry.path - #entry.title - 1))
+					local _result_2 = entry.leaf
+					if _result_2 ~= nil then
+						_result_2 = _result_2.onClick
+						if _result_2 ~= nil then
+							_result_2()
+						end
 					end
-					local matchesLeafFilter = matchesFilter(leaf.title)
-					if matchesLeafFilter then
-						local _branch_1 = branch
-						table.insert(newExpanded, _branch_1)
+					return nil
+				end
+				local _result_2 = entry.branch
+				if _result_2 ~= nil then
+					_result_2 = _result_2.onClick
+					if _result_2 ~= nil then
+						_result_2()
 					end
 				end
-				for _k, _v in _exp_1 do
-					_callback_1(_v, _k - 1, _exp_1)
+				if entry.expandable then
+					setExpanded(function(oldExpanded)
+						local _oldExpanded = oldExpanded
+						local _path = entry.path
+						local _result_3
+						if table.find(_oldExpanded, _path) ~= nil then
+							-- ▼ ReadonlyArray.filter ▼
+							local _newValue = {}
+							local _callback = function(item)
+								return item ~= entry.path
+							end
+							local _length = 0
+							for _k, _v in oldExpanded do
+								if _callback(_v, _k - 1, oldExpanded) == true then
+									_length += 1
+									_newValue[_length] = _v
+								end
+							end
+							-- ▲ ReadonlyArray.filter ▲
+							_result_3 = _newValue
+						else
+							local _array = {}
+							local _length = #_array
+							local _oldExpandedLength = #oldExpanded
+							table.move(oldExpanded, 1, _oldExpandedLength, _length + 1, _array)
+							_length += _oldExpandedLength
+							_array[_length + 1] = entry.path
+							_result_3 = _array
+						end
+						return _result_3
+					end)
+				else
+					setClickedPath(entry.path)
 				end
-				-- ▲ ReadonlyArray.forEach ▲
-			end
-		end
-		for _k, _v in _exp do
-			_callback(_v, _k - 1, _exp)
+			end,
+		}
+		local _condition = entry.expandable
+		if _condition then
+			local _attributes_1 = {
+				key = "Chevron",
+			}
+			local _path = entry.path
+			_attributes_1.icon = if table.find(expanded, _path) ~= nil then Icons.Expanded else Icons.Collapsed
+			_attributes_1.size = "xxs"
+			_attributes_1.className = cx(rowIcon, {
+				AnchorPoint = Vector2.new(0.5, 0.5),
+				Position = UDim2.new(0, chevronX + chevronWidth / 2, 0.5, 0),
+			})
+			_attributes_1.tint = theme.palette.text.secondary
+			_condition = (React.createElement(Icon, _attributes_1))
 		end
-		-- ▲ ReadonlyArray.forEach ▲
-		-- Set expanded to new array
-		setExpanded(newExpanded)
-	end, { tree, filter })
+		return React.createElement("textbutton", _attributes, _condition, rowIconImage ~= nil and (React.createElement(Icon, {
+			key = "Icon",
+			icon = rowIconImage,
+			size = "xs",
+			className = cx(rowIcon, {
+				Position = UDim2.new(0, iconX, 0.5, 0),
+			}),
+			tint = theme.palette.primary.main,
+		})), React.createElement(Typography, {
+			text = entry.title,
+			className = cx(label, {
+				Position = UDim2.new(0, labelX, 0.5, 0),
+				Size = UDim2.new(1, -labelX, 1, -theme.padding.calc(4)),
+			}),
+			color = "textPrimary",
+			variant = "body",
+			family = if bold then "bold" else "default",
+		}))
+	end
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -150,6 +267,11 @@ local function TreeView(props)
 			_attributes[_k] = _v
 		end
 	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {}
 	local _object = {
 		Text = tree.title,
@@ -161,165 +283,19 @@ local function TreeView(props)
 	_attributes_1.color = "textSecondary"
 	_attributes_1.variant = "body"
 	_attributes_1.family = "bold"
-	local _exp = React.createElement(Typography, _attributes_1)
-	local _attributes_2 = {
+	return React.createElement("frame", _attributes, React.createElement(Typography, _attributes_1), React.createElement(VirtualList, {
 		key = "List",
-	}
-	for _k, _v in list do
-		_attributes_2[_k] = _v
-	end
-	_attributes_2.CanvasSize = canvasSize
-	_attributes_2.Event = {
-		AncestryChanged = resizeScrollingFrame,
-		ChildAdded = resizeScrollingFrame,
-		ChildRemoved = resizeScrollingFrame,
-	}
-	local _attributes_3 = table.clone(gridLayout)
-	setmetatable(_attributes_3, nil)
-	local _exp_1 = React.createElement("uigridlayout", _attributes_3)
-	local _exp_2 = tree.branches
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#_exp_2)
-	local _callback = function(branch, branchIndex)
-		local matchesBranchFilter = matchesFilter(branch.title)
-		local hasMatchingLeaf = matchesBranchFilter
-		if not hasMatchingLeaf then
-			for _, leaf in branch.leaves do
-				if matchesFilter(leaf.title) then
-					hasMatchingLeaf = true
-					break
-				end
-			end
-		end
-		if matchesBranchFilter or hasMatchingLeaf then
-			local _attributes_4 = {
-				key = `{branch.title}-{branchIndex}`,
-			}
-			for _k, _v in row do
-				_attributes_4[_k] = _v
-			end
-			_attributes_4.Event = {
-				MouseButton1Click = function()
-					if branch.onClick then
-						branch.onClick()
-					end
-					-- If there are leaves... Expand/Collapse
-					if #branch.leaves > 0 then
-						local _branch = branch
-						local isExpanded = table.find(expanded, _branch) ~= nil
-						if isExpanded then
-							setExpanded(function(oldExpanded)
-								-- ▼ ReadonlyArray.filter ▼
-								local _newValue_1 = {}
-								local _callback_1 = function(b)
-									return b ~= branch
-								end
-								local _length = 0
-								for _k, _v in oldExpanded do
-									if _callback_1(_v, _k - 1, oldExpanded) == true then
-										_length += 1
-										_newValue_1[_length] = _v
-									end
-								end
-								-- ▲ ReadonlyArray.filter ▲
-								return _newValue_1
-							end)
-						else
-							setExpanded(function(oldExpanded)
-								local _array = {}
-								local _length = #_array
-								local _oldExpandedLength = #oldExpanded
-								table.move(oldExpanded, 1, _oldExpandedLength, _length + 1, _array)
-								_length += _oldExpandedLength
-								_array[_length + 1] = branch
-								return _array
-							end)
-						end
-					else
-						setSelectedBranch(branch)
-					end
-				end,
-			}
-			local _condition_1 = #branch.leaves > 0
-			if _condition_1 then
-				local _attributes_5 = {}
-				local _branch = branch
-				_attributes_5.icon = if table.find(expanded, _branch) ~= nil then Icons.Expanded else Icons.Collapsed
-				_attributes_5.size = "xxs"
-				_attributes_5.className = branchIcon
-				_attributes_5.tint = DEFAULT_THEME.options.constants.extendedPalette.Gray[70]
-				_condition_1 = (React.createElement(Icon, _attributes_5))
-			end
-			local _attributes_5 = {
-				text = branch.title,
-			}
-			local _object_1 = table.clone(branchTypography)
-			setmetatable(_object_1, nil)
-			_attributes_5.className = _object_1
-			_attributes_5.color = "textPrimary"
-			_attributes_5.variant = "body"
-			_attributes_5.family = if selectedBranch == branch then "bold" else "default"
-			local _exp_3 = React.createElement("textbutton", _attributes_4, _condition_1, React.createElement(Typography, _attributes_5))
-			local _branch = branch
-			local _condition_2 = table.find(expanded, _branch) ~= nil
-			if _condition_2 then
-				local _exp_4 = branch.leaves
-				-- ▼ ReadonlyArray.map ▼
-				local _newValue_1 = table.create(#_exp_4)
-				local _callback_1 = function(leaf, leafIndex)
-					local matchesLeafFilter = matchesFilter(leaf.title)
-					if matchesBranchFilter or matchesLeafFilter then
-						local _attributes_6 = {
-							key = `{branch.title}-{branchIndex}-{leaf.title}-{leafIndex}`,
-						}
-						for _k, _v in row do
-							_attributes_6[_k] = _v
-						end
-						_attributes_6.Event = {
-							MouseButton1Click = function()
-								setSelectedLeaf(leaf)
-								setSelectedBranch(branch)
-								if leaf.onClick then
-									leaf.onClick()
-								end
-							end,
-						}
-						local _exp_5 = React.createElement(Icon, {
-							icon = icon or Icons.ListPrimary,
-							size = "xs",
-							className = leafIcon,
-							tint = DEFAULT_THEME.palette.secondary.main,
-						})
-						local _attributes_7 = {
-							text = leaf.title,
-						}
-						local _object_2 = table.clone(leafTypography)
-						setmetatable(_object_2, nil)
-						_attributes_7.className = _object_2
-						_attributes_7.color = "textPrimary"
-						_attributes_7.variant = "body"
-						_attributes_7.family = if selectedLeaf == leaf then "bold" else "default"
-						return React.createElement("textbutton", _attributes_6, _exp_5, React.createElement(Typography, _attributes_7))
-					else
-						return React.createElement(React.Fragment)
-					end
-				end
-				for _k, _v in _exp_4 do
-					_newValue_1[_k] = _callback_1(_v, _k - 1, _exp_4)
-				end
-				-- ▲ ReadonlyArray.map ▲
-				_condition_2 = _newValue_1
-			end
-			return React.createElement(React.Fragment, nil, _exp_3, _condition_2)
-		else
-			return React.createElement(React.Fragment)
-		end
-	end
-	for _k, _v in _exp_2 do
-		_newValue[_k] = _callback(_v, _k - 1, _exp_2)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", _attributes, _exp, React.createElement("scrollingframe", _attributes_2, _exp_1, _newValue))
+		items = rows,
+		getKey = function(entry)
+			return entry.path
+		end,
+		itemHeight = itemHeight,
+		listRef = listRef,
+		className = list,
+		renderItem = function(entry)
+			return renderRow(entry)
+		end,
+	}))
 end
 local default = TreeView
 return {

package/out/ui/packages/treeView/components/TreeView.styles.luau

@@ -2,8 +2,8 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
-local makeStyles = _theme.makeStyles
-local useTreeViewStyles = makeStyles(function(theme)
+local componentStyles = _theme.componentStyles
+local useTreeViewStyles = componentStyles("TreeView", function(theme)
 	return createStyles({
 		root = {
 			Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4)),
@@ -28,57 +28,29 @@ local useTreeViewStyles = makeStyles(function(theme)
 			Position = UDim2.new(0.5, 0, 0, theme.spacing.calc(1) + theme.padding.calc(2)),
 			AnchorPoint = Vector2.new(0.5, 0),
 			BackgroundTransparency = 1,
-			AutomaticCanvasSize = Enum.AutomaticSize.XY,
 			ScrollBarThickness = theme.spacing.calc(0.5),
 			ScrollBarImageTransparency = 0.75,
 			ClipsDescendants = true,
 			ZIndex = 300,
 		},
-		gridLayout = {
-			CellPadding = UDim2.new(0, 0, 0, 0),
-			CellSize = UDim2.new(1, 0, 0, theme.spacing.calc(1) + theme.padding.calc(4)),
-			FillDirection = Enum.FillDirection.Horizontal,
-			FillDirectionMaxCells = 1,
-			HorizontalAlignment = Enum.HorizontalAlignment.Center,
-			VerticalAlignment = Enum.VerticalAlignment.Top,
-			SortOrder = Enum.SortOrder.Name,
-		},
 		row = {
 			Text = "",
+			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ZIndex = 5200,
 		},
-		branchIcon = {
-			Position = UDim2.new(0, 0, 0.5, 0),
+		rowIcon = {
 			AnchorPoint = Vector2.new(0, 0.5),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ZIndex = 5300,
 		},
-		branchTypography = {
-			Size = UDim2.new(1, -(theme.spacing.calc(0.5) + theme.padding.calc(2)), 1, -theme.padding.calc(4)),
-			Position = UDim2.new(1, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(1, 0.5),
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextYAlignment = Enum.TextYAlignment.Center,
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			ZIndex = 5300,
-		},
-		leafIcon = {
-			Position = UDim2.new(0, theme.padding.calc(4), 0.5, 0),
+		label = {
 			AnchorPoint = Vector2.new(0, 0.5),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			ZIndex = 5300,
-		},
-		leafTypography = {
-			Size = UDim2.new(1, -(theme.spacing.calc(1) + theme.padding.calc(6)), 1, -theme.padding.calc(4)),
-			Position = UDim2.new(1, 0, 0.5, 0),
-			AnchorPoint = Vector2.new(1, 0.5),
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextYAlignment = Enum.TextYAlignment.Center,
+			TextTruncate = Enum.TextTruncate.AtEnd,
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ZIndex = 5300,

package/out/ui/packages/treeView/components/treeRows.d.ts

@@ -0,0 +1,23 @@
+import type { Icons } from "../../../enums/index";
+import type Branch from "../interfaces/Branch";
+import type Leaf from "../interfaces/Leaf";
+export interface TreeRow {
+    kind: "branch" | "leaf";
+    title: string;
+    path: string;
+    depth: number;
+    emphasized: boolean;
+    expandable: boolean;
+    icon?: Icons;
+    branch?: Branch;
+    leaf?: Leaf;
+}
+export interface TreeRowLayout {
+    chevronX: number;
+    iconX: number;
+    labelX: number;
+}
+export declare function treeRowLayout(depth: number, indent: number, chevronWidth: number, iconWidth: number): TreeRowLayout;
+export declare function branchHoldsSelection(branchPath: string, selected?: string): boolean;
+export declare function pathsToExpand(branches: Branch[], matches: (title: string) => boolean): string[];
+export declare function visibleRows(branches: Branch[], expanded: string[], selected?: string, clickedPath?: string, matches?: (title: string) => boolean): TreeRow[];