Solve more elegantly without changing the api

swordev · Mar 5, 2024 · f8d382c · f8d382c
1 parent db004ad
commit f8d382c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/packages/material/src/Button/Button.tsx b/packages/material/src/Button/Button.tsx
@@ -8,7 +8,7 @@ import createComponentFactory from "@suid/base/createComponentFactory";
 import { alpha } from "@suid/system";
 import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
-import { Show, useContext } from "solid-js";
+import { children, Show, useContext } from "solid-js";
 
 type OwnerState = InPropsOf<ButtonTypeMap>;
 
@@ -339,6 +339,8 @@ const Button = $.component(function Button({
   classes,
 }) {
   const contextProps = useContext(ButtonGroupContext);
+  const startIcon = children(() => props.startIcon);
+  const endIcon = children(() => props.endIcon);
   return (
     <ButtonRoot
       ownerState={allProps}
@@ -354,18 +356,18 @@ const Button = $.component(function Button({
       {...otherProps}
       classes={props.classes}
     >
-      <Show when={props.startIcon}>
+      <Show when={startIcon()}>
         {(startIcon) => (
           <ButtonStartIcon class={classes.startIcon} ownerState={allProps}>
-            {startIcon()()}
+            {startIcon()}
           </ButtonStartIcon>
         )}
       </Show>
       {props.children}
-      <Show when={props.endIcon}>
+      <Show when={endIcon()}>
         {(endIcon) => (
           <ButtonEndIcon class={classes.endIcon} ownerState={allProps}>
-            {endIcon()()}
+            {endIcon()}
           </ButtonEndIcon>
         )}
       </Show>

diff --git a/packages/material/src/Button/ButtonProps.ts b/packages/material/src/Button/ButtonProps.ts
@@ -69,7 +69,7 @@ export type ButtonTypeMap<P = {}, D extends ElementType = "button"> = {
     /**
      * Element placed after the children.
      */
-    endIcon?: () => JSXElement;
+    endIcon?: JSXElement;
     /**
      * If `true`, the button will take up the full width of its container.
      * @default false
@@ -92,7 +92,7 @@ export type ButtonTypeMap<P = {}, D extends ElementType = "button"> = {
     /**
      * Element placed before the children.
      */
-    startIcon?: () => JSXElement;
+    startIcon?: JSXElement;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */