From c56abcaa3444992da00531f5e93a74153ee8427a Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Mon, 27 Dec 2021 02:37:15 -0600
Subject: [PATCH] add action row component

---
 library/core/components/action-row.tsx | 26 +++++++++++++++++
 library/internal/message.ts            |  2 +-
 library/main.ts                        |  1 +
 test/action-row.test.tsx               | 40 ++++++++++++++++++++++++++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 library/core/components/action-row.tsx
 create mode 100644 test/action-row.test.tsx

diff --git a/library/core/components/action-row.tsx b/library/core/components/action-row.tsx
new file mode 100644
index 0000000..639e95b
--- /dev/null
+++ b/library/core/components/action-row.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react"
+import React from "react"
+import { ReacordElement } from "../../internal/element.js"
+import type { MessageOptions } from "../../internal/message"
+import { Node } from "../../internal/node.js"
+
+export type ActionRowProps = {
+  children?: ReactNode
+}
+
+export function ActionRow(props: ActionRowProps) {
+  return (
+    <ReacordElement props={props} createNode={() => new ActionRowNode(props)}>
+      {props.children}
+    </ReacordElement>
+  )
+}
+
+class ActionRowNode extends Node<{}> {
+  override modifyMessageOptions(options: MessageOptions): void {
+    options.actionRows.push([])
+    for (const child of this.children) {
+      child.modifyMessageOptions(options)
+    }
+  }
+}
diff --git a/library/internal/message.ts b/library/internal/message.ts
index 765d3d4..df89a31 100644
--- a/library/internal/message.ts
+++ b/library/internal/message.ts
@@ -9,7 +9,7 @@ export type MessageOptions = {
   actionRows: ActionRow[]
 }
 
-type ActionRow = Array<
+export type ActionRow = Array<
   MessageButtonOptions | MessageLinkOptions | MessageSelectOptions
 >
 
diff --git a/library/main.ts b/library/main.ts
index f99a699..ba513f1 100644
--- a/library/main.ts
+++ b/library/main.ts
@@ -1,5 +1,6 @@
 export * from "./core/adapters/adapter"
 export * from "./core/adapters/discord-js-adapter"
+export * from "./core/components/action-row"
 export * from "./core/components/button"
 export * from "./core/components/embed"
 export * from "./core/components/embed-author"
diff --git a/test/action-row.test.tsx b/test/action-row.test.tsx
new file mode 100644
index 0000000..39dc757
--- /dev/null
+++ b/test/action-row.test.tsx
@@ -0,0 +1,40 @@
+import React from "react"
+import { ActionRow, Button, Select } from "../library/main"
+import { setupReacordTesting } from "./setup-testing"
+
+const { assertRender } = setupReacordTesting()
+
+test("action row", async () => {
+  await assertRender(
+    <>
+      <Button label="outside button" onClick={() => {}} />
+      <ActionRow>
+        <Button label="button inside action row" onClick={() => {}} />
+      </ActionRow>
+      <Select />
+      <Button label="last row 1" onClick={() => {}} />
+      <Button label="last row 2" onClick={() => {}} />
+    </>,
+    [
+      {
+        content: "",
+        embeds: [],
+        actionRows: [
+          [{ type: "button", style: "secondary", label: "outside button" }],
+          [
+            {
+              type: "button",
+              style: "secondary",
+              label: "button inside action row",
+            },
+          ],
+          [{ type: "select", options: [], values: [] }],
+          [
+            { type: "button", style: "secondary", label: "last row 1" },
+            { type: "button", style: "secondary", label: "last row 2" },
+          ],
+        ],
+      },
+    ],
+  )
+})