48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
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"
|
|
|
|
/**
|
|
* Props for an action row
|
|
* @category Components
|
|
*/
|
|
export type ActionRowProps = {
|
|
children?: ReactNode
|
|
}
|
|
|
|
/**
|
|
* An action row is a top-level container for message components.
|
|
*
|
|
* You don't need to use this; Reacord automatically creates action rows for you.
|
|
* But this can be useful if you want a specific layout.
|
|
*
|
|
* ```tsx
|
|
* // put buttons on two separate rows
|
|
* <ActionRow>
|
|
* <Button onClick={handleFirst}>First</Button>
|
|
* </ActionRow>
|
|
* <Button onClick={handleSecond}>Second</Button>
|
|
* ```
|
|
*
|
|
* @category Components
|
|
* @see https://discord.com/developers/docs/interactions/message-components#action-rows
|
|
*/
|
|
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)
|
|
}
|
|
}
|
|
}
|