mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
8a5ef4cb3e
Avoids this: ![image](https://github.com/user-attachments/assets/49b214e4-7dde-4c3a-be5d-0de7afe30dcc)
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import clsx from "clsx";
|
|
import { forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
|
|
|
|
import "./button.scss";
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
className?: string;
|
|
children?: ReactNode;
|
|
as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
|
|
}
|
|
|
|
const Button = memo(
|
|
forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ children, disabled, className = "", as: Component = "button", ...props }: ButtonProps, ref) => {
|
|
const btnRef = useRef<HTMLButtonElement>(null);
|
|
useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement);
|
|
|
|
// Check if the className contains any of the categories: solid, outlined, or ghost
|
|
const containsButtonCategory = /(solid|outline|ghost)/.test(className);
|
|
// If no category is present, default to 'solid'
|
|
const categoryClassName = containsButtonCategory ? className : `solid ${className}`;
|
|
|
|
// Check if the className contains any of the color options: green, grey, red, or yellow
|
|
const containsColor = /(green|grey|red|yellow)/.test(categoryClassName);
|
|
// If no color is present, default to 'green'
|
|
const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`;
|
|
|
|
return (
|
|
<Component
|
|
ref={btnRef}
|
|
tabIndex={disabled ? -1 : 0}
|
|
className={clsx("wave-button", finalClassName)}
|
|
disabled={disabled}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Component>
|
|
);
|
|
}
|
|
)
|
|
);
|
|
|
|
Button.displayName = "Button";
|
|
|
|
export { Button };
|