39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
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}
|