feat: pass buttons' props separately to FrameButtonContainer (#499)

* feat: pass buttons' props separately to FrameButtonContainer * fix: code styling
framesjs · Sep 25, 2024 · 9b97405 · 9b97405
1 parent a72b5e8
commit 9b97405
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/.changeset/rich-experts-suffer.md b/.changeset/rich-experts-suffer.md
@@ -0,0 +1,5 @@
+---
+"@frames.js/render": patch
+---
+
+feat: pass buttons' props separately to FrameButtonContainer
diff --git a/packages/render/src/ui/frame.base.tsx b/packages/render/src/ui/frame.base.tsx
@@ -241,6 +241,34 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
   const isLoading =
     frameUiState.status === "loading" || frameUiState.isImageLoading;
 
+  const buttonsProps =
+    frameUiState.status === "loading" ||
+    !frameUiState.frame.buttons ||
+    frameUiState.frame.buttons.length === 0
+      ? null
+      : frameUiState.frame.buttons.map((frameButton, index) => ({
+          frameState: frameUiState,
+          frameButton,
+          index,
+          isDisabled: false,
+          onPress() {
+            // track dimensions of the root if possible
+            rootDimensionsRef.current = rootRef.current?.computeDimensions();
+
+            Promise.resolve(
+              frameState.onButtonPress(
+                // @todo change the type onButtonPress to accept partial frame as well because that can happen if partial frames are enabled
+                frameUiState.frame as Frame,
+                frameButton,
+                index
+              )
+            ).catch((error) => {
+              // eslint-disable-next-line no-console -- provide feedback to the user
+              console.error(error);
+            });
+          },
+        }));
+
   return components.Root(
     {
       createElement,
@@ -256,46 +284,21 @@ export function BaseFrameUI<TStylingProps extends Record<string, unknown>>({
             theme?.LoadingScreen || ({} as TStylingProps)
           )
         : null,
-      buttonsContainer:
-        frameUiState.status === "loading" ||
-        !frameUiState.frame.buttons ||
-        frameUiState.frame.buttons.length === 0
-          ? null
-          : components.ButtonsContainer(
-              {
-                frameState: frameUiState,
-                buttons: frameUiState.frame.buttons.map((frameButton, index) =>
-                  components.Button(
-                    {
-                      frameState: frameUiState,
-                      frameButton,
-                      index,
-                      // @TODO provide previous frame to pending state so we can remove loading check and render some loading indicator?
-                      isDisabled: false,
-                      onPress() {
-                        // track dimensions of the root if possible
-                        rootDimensionsRef.current =
-                          rootRef.current?.computeDimensions();
-
-                        Promise.resolve(
-                          frameState.onButtonPress(
-                            // @todo change the type onButtonPress to accept partial frame as well because that can happen if partial frames are enabled
-                            frameUiState.frame as Frame,
-                            frameButton,
-                            index
-                          )
-                        ).catch((error) => {
-                          // eslint-disable-next-line no-console -- provide feedback to the user
-                          console.error(error);
-                        });
-                      },
-                    },
-                    theme?.Button || ({} as TStylingProps)
-                  )
-                ),
-              },
-              theme?.ButtonsContainer || ({} as TStylingProps)
-            ),
+      buttonsContainer: buttonsProps
+        ? components.ButtonsContainer(
+            {
+              frameState: frameUiState,
+              buttons: buttonsProps.map((buttonProps) =>
+                components.Button(
+                  buttonProps,
+                  theme?.Button || ({} as TStylingProps)
+                )
+              ),
+              buttonsProps,
+            },
+            theme?.ButtonsContainer || ({} as TStylingProps)
+          )
+        : null,
       imageContainer: components.ImageContainer(
         {
           frameState: frameUiState,

diff --git a/packages/render/src/ui/types.ts b/packages/render/src/ui/types.ts
@@ -82,6 +82,8 @@ export type FrameLoadingScreenProps = FrameUIStateProps & {
 
 export type FrameButtonContainerProps = {
   buttons: ReactElement[];
+  /** Props passed to buttons in the container */
+  buttonsProps: FrameButtonProps[];
 } & FrameUIStateProps;
 
 export type FrameTextInputContainerProps = {