mm

packages/ui-web-headless/componnets/button/ButtonRoot.tsx

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { useButtonSlot } from "./useButtonSlots";
+
+export type ButtonRootOwnProps = {
+  iconOnly?: boolean;
+  hideIcon?: boolean;
+};
+
+export type ButtonRootStateProps = {
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export type ButtonRootPrimitiveProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  keyof ButtonRootStateProps
+>;
+
+export type ButtonRootProps = ButtonRootOwnProps &
+  ButtonRootStateProps &
+  ButtonRootPrimitiveProps;
+
+export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
+  (props, ref) => {
+    const { children, loading, iconOnly, hideIcon, ...rest } = props;
+    const { iconNode, loadingNode } = useButtonSlot(children);
+
+    return (
+      <button ref={ref} {...rest}>
+        {loadingNode ?? loadingNode}
+        {!loadingNode && iconNode ? (hideIcon ? null : iconNode) : null}
+        {children}
+      </button>
+    );
+  },
+);
+ButtonRoot.displayName = "ButtonRoot";
+// 我需要一个通用hook方法 useProps<ownProps,stateProps,primitiveProps>(props)，返一个对象 { ownProps，stateProps,primitiveProps}