Fix type error in ChoiceButton

authgear · Dec 11, 2024 · f36a96c · f36a96c
1 parent 89459fe
commit f36a96c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 22 deletions.
diff --git a/portal/src/ChoiceButton.tsx b/portal/src/ChoiceButton.tsx
@@ -1,12 +1,6 @@
-import React, {
-  useCallback,
-  ReactNode,
-  ReactElement,
-  ComponentType,
-} from "react";
+import React, { useCallback, ReactElement, ComponentType } from "react";
 import {
   CompoundButton,
-  IButtonStyles,
   IButtonProps,
   useTheme,
   IRenderFunction,
@@ -18,12 +12,12 @@ export interface IconComponentProps {
 }
 
 export interface ChoiceButtonProps {
-  className?: string;
-  styles?: IButtonStyles;
+  className?: IButtonProps["className"];
+  styles?: IButtonProps["styles"];
   checked?: IButtonProps["checked"];
   disabled?: IButtonProps["disabled"];
-  text?: ReactNode;
-  secondaryText?: ReactNode;
+  text?: IButtonProps["text"];
+  secondaryText?: IButtonProps["secondaryText"];
   onClick?: IButtonProps["onClick"];
   IconComponent?: ComponentType<IconComponentProps>;
 }
@@ -87,7 +81,6 @@ export default function ChoiceButton(props: ChoiceButtonProps): ReactElement {
     <CompoundButton
       {...rest}
       toggle={true}
-      // @ts-expect-error
       styles={styles}
       onRenderIcon={IconComponent == null ? undefined : onRenderIcon}
     />

diff --git a/portal/src/graphql/portal/LoginMethodConfigurationScreen.tsx b/portal/src/graphql/portal/LoginMethodConfigurationScreen.tsx
@@ -1600,6 +1600,8 @@ function AuthenticationButton(props: AuthenticationButtonProps) {
   const checked = targetValue === currentValue;
   const iconName = AUTHENTICATION_BUTTON_ICON[targetValue];
 
+  const { renderToString } = useContext(Context);
+
   const IconComponent = useCallback(
     (props) => {
       return (
@@ -1641,16 +1643,12 @@ function AuthenticationButton(props: AuthenticationButtonProps) {
       styles={buttonStyles}
       disabled={disabled}
       checked={checked}
-      text={
-        <FormattedMessage
-          id={`LoginMethodConfigurationScreen.second-level.${targetValue}.title`}
-        />
-      }
-      secondaryText={
-        <FormattedMessage
-          id={`LoginMethodConfigurationScreen.second-level.${targetValue}.description`}
-        />
-      }
+      text={renderToString(
+        `LoginMethodConfigurationScreen.second-level.${targetValue}.title`
+      )}
+      secondaryText={renderToString(
+        `LoginMethodConfigurationScreen.second-level.${targetValue}.description`
+      )}
       IconComponent={IconComponent}
       onClick={onClick}
     />