From 74cde4db70402233ccac050752d8a87d7d906383 Mon Sep 17 00:00:00 2001 From: memorycode Date: Mon, 25 Dec 2023 17:39:25 -0500 Subject: [PATCH 1/7] detect what cell was clicked --- src/widgets/table.lua | 56 ++++++++++++++++++++++++++++------------- stories/table.story.lua | 33 ++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 18 deletions(-) create mode 100644 stories/table.story.lua diff --git a/src/widgets/table.lua b/src/widgets/table.lua index 8d31acb..afb9253 100644 --- a/src/widgets/table.lua +++ b/src/widgets/table.lua @@ -5,10 +5,11 @@ local create = require(script.Parent.Parent.create) local automaticSize = require(script.Parent.Parent.automaticSize) local cell = Runtime.widget(function(text, font) + local clicked, setClicked = Runtime.useState(false) local refs = Runtime.useInstance(function(ref) local style = Style.get() - return create("TextLabel", { + return create("TextButton", { [ref] = "label", BackgroundTransparency = 1, Font = Enum.Font.SourceSans, @@ -17,6 +18,11 @@ local cell = Runtime.widget(function(text, font) TextSize = 20, TextXAlignment = Enum.TextXAlignment.Left, RichText = true, + Active = true, + + Activated = function() + setClicked(true) + end, create("UIPadding", { PaddingBottom = UDim.new(0, 8), @@ -29,20 +35,30 @@ local cell = Runtime.widget(function(text, font) refs.label.Font = font or Enum.Font.SourceSans refs.label.Text = text + + return { + clicked = function() + if clicked then + setClicked(false) + return true + end + + return false + end, + } end) local row = Runtime.widget(function(columns, darken, selectable, font) - local clicked, setClicked = Runtime.useState(false) + local clicked, setClicked = Runtime.useState() local hovering, setHovering = Runtime.useState(false) - local selected = columns.selected local refs = Runtime.useInstance(function(ref) - return create("TextButton", { + return create("TextLabel", { [ref] = "row", BackgroundTransparency = if darken then 0.7 else 1, BackgroundColor3 = Color3.fromRGB(0, 0, 0), - AutoButtonColor = false, + --AutoButtonColor = false, Text = "", Active = false, @@ -53,10 +69,6 @@ local row = Runtime.widget(function(columns, darken, selectable, font) MouseLeave = function() setHovering(false) end, - - Activated = function() - setClicked(true) - end, }) end) @@ -79,15 +91,17 @@ local row = Runtime.widget(function(columns, darken, selectable, font) if type(column) == "function" then Runtime.scope(column) else - cell(column, font) + if cell(column, font):clicked() then + setClicked(column) + end end end return { clicked = function() if clicked then - setClicked(false) - return true + setClicked(nil) + return clicked end return false end, @@ -162,21 +176,26 @@ return Runtime.widget(function(items, options) end) local selected, setSelected = Runtime.useState() + --local selectedHeading, setSelectedHeading = Runtime.useState() local hovered for i, columns in items do local selectable = options.selectable local font = options.font + local isHeading = options.headings and i == 1 - if options.headings and i == 1 then - selectable = false + if isHeading then font = Enum.Font.GothamBold end local currentRow = row(columns, i % 2 == 1, selectable, font) - - if currentRow:clicked() then - setSelected(columns) + local clickedCell = currentRow:clicked() + if clickedCell then + if isHeading then + --setSelectedHeading() + else + setSelected({ row = columns, cell = clickedCell }) + end end if currentRow:hovered() then @@ -185,10 +204,11 @@ return Runtime.widget(function(items, options) end return { + --selectedHeading = function() end, selected = function() if selected then setSelected(nil) - return selected + return selected.row, selected.cell end end, hovered = function() diff --git a/stories/table.story.lua b/stories/table.story.lua new file mode 100644 index 0000000..b8caef4 --- /dev/null +++ b/stories/table.story.lua @@ -0,0 +1,33 @@ +local RunService = game:GetService("RunService") +local ReplicatedStorage = game:GetService("ReplicatedStorage") +local Plasma = require(ReplicatedStorage.Plasma) + +return function(target) + local root = Plasma.new(target) + + local connection = RunService.Heartbeat:Connect(function() + Plasma.start(root, function() + Plasma.window("Spinner", function() + Plasma.row({ + alignment = Enum.HorizontalAlignment.Center, + }, function() + local tbl = Plasma.table({ + { "Name", "Count" }, + { "Test", "3" }, + { " More Test", "4" }, + }, { + headings = true, + selectable = true, + }) + + --print(tbl:selected()) + end) + end) + end) + end) + + return function() + connection:Disconnect() + Plasma.start(root, function() end) + end +end From 2a2dabda8fbdf567f049b8e8b2e4e008a27bc190 Mon Sep 17 00:00:00 2001 From: memorycode Date: Mon, 25 Dec 2023 17:50:52 -0500 Subject: [PATCH 2/7] example sort using headings --- src/widgets/table.lua | 14 ++++++++++++-- stories/table.story.lua | 26 +++++++++++++++++++++----- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/widgets/table.lua b/src/widgets/table.lua index afb9253..a6f85a6 100644 --- a/src/widgets/table.lua +++ b/src/widgets/table.lua @@ -176,7 +176,7 @@ return Runtime.widget(function(items, options) end) local selected, setSelected = Runtime.useState() - --local selectedHeading, setSelectedHeading = Runtime.useState() + local selectedHeading, setSelectedHeading = Runtime.useState() local hovered for i, columns in items do @@ -192,7 +192,7 @@ return Runtime.widget(function(items, options) local clickedCell = currentRow:clicked() if clickedCell then if isHeading then - --setSelectedHeading() + setSelectedHeading({ row = columns, cell = clickedCell }) else setSelected({ row = columns, cell = clickedCell }) end @@ -205,11 +205,21 @@ return Runtime.widget(function(items, options) return { --selectedHeading = function() end, + selectedHeading = function() + if selectedHeading then + setSelectedHeading(nil) + return selectedHeading.row, selectedHeading.cell + end + + return nil + end, selected = function() if selected then setSelected(nil) return selected.row, selected.cell end + + return nil end, hovered = function() return hovered diff --git a/stories/table.story.lua b/stories/table.story.lua index b8caef4..7ed6de3 100644 --- a/stories/table.story.lua +++ b/stories/table.story.lua @@ -4,6 +4,11 @@ local Plasma = require(ReplicatedStorage.Plasma) return function(target) local root = Plasma.new(target) + local heading = { "Name", "Count" } + local items = { + { "Test", 3 }, + { "More Test", 4 }, + } local connection = RunService.Heartbeat:Connect(function() Plasma.start(root, function() @@ -11,15 +16,26 @@ return function(target) Plasma.row({ alignment = Enum.HorizontalAlignment.Center, }, function() - local tbl = Plasma.table({ - { "Name", "Count" }, - { "Test", "3" }, - { " More Test", "4" }, - }, { + local selectedHeading + + local entry = table.clone(items) + table.insert(entry, 1, heading) + + local tbl = Plasma.table(entry, { headings = true, selectable = true, }) + _, selectedHeading = tbl:selectedHeading() + if selectedHeading == "Name" then + table.sort(items, function(a, b) + return a[1] < b[1] + end) + elseif selectedHeading == "Count" then + table.sort(items, function(a, b) + return a[2] < b[2] + end) + end --print(tbl:selected()) end) end) From d1f2873e70ab1931ebbe963ee5468a7f36682c55 Mon Sep 17 00:00:00 2001 From: memorycode Date: Mon, 25 Dec 2023 18:11:55 -0500 Subject: [PATCH 3/7] better example --- src/widgets/table.lua | 1 - stories/table.story.lua | 24 +++++++++++++++--------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/widgets/table.lua b/src/widgets/table.lua index a6f85a6..000d2fb 100644 --- a/src/widgets/table.lua +++ b/src/widgets/table.lua @@ -204,7 +204,6 @@ return Runtime.widget(function(items, options) end return { - --selectedHeading = function() end, selectedHeading = function() if selectedHeading then setSelectedHeading(nil) diff --git a/stories/table.story.lua b/stories/table.story.lua index 7ed6de3..c93d404 100644 --- a/stories/table.story.lua +++ b/stories/table.story.lua @@ -4,20 +4,19 @@ local Plasma = require(ReplicatedStorage.Plasma) return function(target) local root = Plasma.new(target) + local heading = { "Name", "Count" } - local items = { - { "Test", 3 }, - { "More Test", 4 }, - } + local items = {} + for index, letter in { "A", "B", "C", "D", "E" } do + table.insert(items, { letter, 100 - index }) + end local connection = RunService.Heartbeat:Connect(function() Plasma.start(root, function() - Plasma.window("Spinner", function() + Plasma.window("Table", function() Plasma.row({ alignment = Enum.HorizontalAlignment.Center, }, function() - local selectedHeading - local entry = table.clone(items) table.insert(entry, 1, heading) @@ -26,7 +25,7 @@ return function(target) selectable = true, }) - _, selectedHeading = tbl:selectedHeading() + local _, selectedHeading = tbl:selectedHeading() if selectedHeading == "Name" then table.sort(items, function(a, b) return a[1] < b[1] @@ -36,7 +35,14 @@ return function(target) return a[2] < b[2] end) end - --print(tbl:selected()) + + local selectedRow, selectedCell = tbl:selected() + if selectedCell then + local index = table.find(selectedRow, selectedCell) + if index == 2 then + selectedRow[index] = Random.new():NextInteger(1, 100) + end + end end) end) end) From d3a3804bcbcc637e782dd832623906196b3cffc3 Mon Sep 17 00:00:00 2001 From: memorycode Date: Mon, 25 Dec 2023 20:22:25 -0500 Subject: [PATCH 4/7] cleanup --- src/widgets/table.lua | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/widgets/table.lua b/src/widgets/table.lua index 000d2fb..226dd26 100644 --- a/src/widgets/table.lua +++ b/src/widgets/table.lua @@ -10,7 +10,7 @@ local cell = Runtime.widget(function(text, font) local style = Style.get() return create("TextButton", { - [ref] = "label", + [ref] = "button", BackgroundTransparency = 1, Font = Enum.Font.SourceSans, AutomaticSize = Enum.AutomaticSize.XY, @@ -18,6 +18,7 @@ local cell = Runtime.widget(function(text, font) TextSize = 20, TextXAlignment = Enum.TextXAlignment.Left, RichText = true, + AutoButtonColor = false, Active = true, Activated = function() @@ -33,8 +34,8 @@ local cell = Runtime.widget(function(text, font) }) end) - refs.label.Font = font or Enum.Font.SourceSans - refs.label.Text = text + refs.button.Font = font or Enum.Font.SourceSans + refs.button.Text = text return { clicked = function() @@ -58,7 +59,6 @@ local row = Runtime.widget(function(columns, darken, selectable, font) [ref] = "row", BackgroundTransparency = if darken then 0.7 else 1, BackgroundColor3 = Color3.fromRGB(0, 0, 0), - --AutoButtonColor = false, Text = "", Active = false, From 01a2a1abc79ff88140b62a8a9fb73f07e08319de Mon Sep 17 00:00:00 2001 From: memorycode Date: Mon, 25 Dec 2023 20:34:02 -0500 Subject: [PATCH 5/7] improve docs --- src/widgets/table.lua | 16 ++++++++++++---- stories/table.story.lua | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/widgets/table.lua b/src/widgets/table.lua index 226dd26..2a2d257 100644 --- a/src/widgets/table.lua +++ b/src/widgets/table.lua @@ -103,7 +103,8 @@ local row = Runtime.widget(function(columns, darken, selectable, font) setClicked(nil) return clicked end - return false + + return nil end, hovered = function() return hovering @@ -117,8 +118,15 @@ end) @param items {{string}} @param options {marginTop?: number, selectable?: boolean, font?: Font, headings?: boolean} @tag widgets + @return TableWidgetHandle + + A table widget. Items is a list of rows, with each row being a list of cells. + + Returns a widget handle, which has the fields: - A table widget. Items is a list of rows, with each row being a list of cells. + - `selected`, a function you can call to check what row and cell were selected this frame, if any + - `selectedHeading`, a function you can call to check which heading was selected this frame, if any + - `hovered`, a function you can call to check what row is being hovered over ```lua local items = { @@ -192,7 +200,7 @@ return Runtime.widget(function(items, options) local clickedCell = currentRow:clicked() if clickedCell then if isHeading then - setSelectedHeading({ row = columns, cell = clickedCell }) + setSelectedHeading(clickedCell) else setSelected({ row = columns, cell = clickedCell }) end @@ -207,7 +215,7 @@ return Runtime.widget(function(items, options) selectedHeading = function() if selectedHeading then setSelectedHeading(nil) - return selectedHeading.row, selectedHeading.cell + return selectedHeading end return nil diff --git a/stories/table.story.lua b/stories/table.story.lua index c93d404..424d194 100644 --- a/stories/table.story.lua +++ b/stories/table.story.lua @@ -25,7 +25,7 @@ return function(target) selectable = true, }) - local _, selectedHeading = tbl:selectedHeading() + local selectedHeading = tbl:selectedHeading() if selectedHeading == "Name" then table.sort(items, function(a, b) return a[1] < b[1] From 6128415c0933f818722832b51b04adbc05816dee Mon Sep 17 00:00:00 2001 From: memorycode Date: Mon, 25 Dec 2023 22:15:52 -0500 Subject: [PATCH 6/7] use index for cell to account for duplicates --- src/widgets/table.lua | 8 ++++---- stories/table.story.lua | 29 +++++++++++++++++------------ 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/widgets/table.lua b/src/widgets/table.lua index 2a2d257..9aafdfe 100644 --- a/src/widgets/table.lua +++ b/src/widgets/table.lua @@ -87,12 +87,12 @@ local row = Runtime.widget(function(columns, darken, selectable, font) refs.row.BackgroundTransparency = transparency refs.row.BackgroundColor3 = selected and Color3.fromHex("bd515c") or Color3.fromRGB(0, 0, 0) - for _, column in ipairs(columns) do + for index, column in ipairs(columns) do if type(column) == "function" then Runtime.scope(column) else if cell(column, font):clicked() then - setClicked(column) + setClicked(index) end end end @@ -202,7 +202,7 @@ return Runtime.widget(function(items, options) if isHeading then setSelectedHeading(clickedCell) else - setSelected({ row = columns, cell = clickedCell }) + setSelected({ row = columns, cellIndex = clickedCell }) end end @@ -223,7 +223,7 @@ return Runtime.widget(function(items, options) selected = function() if selected then setSelected(nil) - return selected.row, selected.cell + return selected.row, selected.cellIndex end return nil diff --git a/stories/table.story.lua b/stories/table.story.lua index 424d194..8b0b8a1 100644 --- a/stories/table.story.lua +++ b/stories/table.story.lua @@ -5,7 +5,7 @@ local Plasma = require(ReplicatedStorage.Plasma) return function(target) local root = Plasma.new(target) - local heading = { "Name", "Count" } + local headings = { "Name", "Count" } local items = {} for index, letter in { "A", "B", "C", "D", "E" } do table.insert(items, { letter, 100 - index }) @@ -17,31 +17,36 @@ return function(target) Plasma.row({ alignment = Enum.HorizontalAlignment.Center, }, function() - local entry = table.clone(items) - table.insert(entry, 1, heading) + local entries = table.clone(items) + table.insert(entries, 1, headings) - local tbl = Plasma.table(entry, { + local tbl = Plasma.table(entries, { headings = true, selectable = true, }) local selectedHeading = tbl:selectedHeading() - if selectedHeading == "Name" then + if headings[selectedHeading] == headings[1] then table.sort(items, function(a, b) return a[1] < b[1] end) - elseif selectedHeading == "Count" then + elseif headings[selectedHeading] == headings[2] then table.sort(items, function(a, b) return a[2] < b[2] end) end - local selectedRow, selectedCell = tbl:selected() - if selectedCell then - local index = table.find(selectedRow, selectedCell) - if index == 2 then - selectedRow[index] = Random.new():NextInteger(1, 100) - end + local selectedRow, cellIndex = tbl:selected() + if selectedRow then + print(selectedRow, cellIndex) + end + + if cellIndex == 1 then + -- Remove row if click name + table.remove(items, table.find(items, selectedRow)) + elseif cellIndex == 2 then + -- Shuffle number if click count + selectedRow[cellIndex] = Random.new():NextInteger(1, 100) end end) end) From ebad8a6c1ec58cff93a7e105435c7c8fab570a35 Mon Sep 17 00:00:00 2001 From: memorycode Date: Mon, 25 Dec 2023 22:17:48 -0500 Subject: [PATCH 7/7] cleanup --- stories/table.story.lua | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/stories/table.story.lua b/stories/table.story.lua index 8b0b8a1..fe5a7df 100644 --- a/stories/table.story.lua +++ b/stories/table.story.lua @@ -27,20 +27,18 @@ return function(target) local selectedHeading = tbl:selectedHeading() if headings[selectedHeading] == headings[1] then + -- Sort alphabetically table.sort(items, function(a, b) return a[1] < b[1] end) elseif headings[selectedHeading] == headings[2] then + -- Sort by count table.sort(items, function(a, b) return a[2] < b[2] end) end local selectedRow, cellIndex = tbl:selected() - if selectedRow then - print(selectedRow, cellIndex) - end - if cellIndex == 1 then -- Remove row if click name table.remove(items, table.find(items, selectedRow))