93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* Imports */
|
|
/* -------------------------------------------------------------------------- */
|
|
import React from "react";
|
|
import classNames from "classnames";
|
|
import { StyleType } from "core/_variants";
|
|
import * as btnEmphasis from "./_btnEmphasis";
|
|
import IconButton from "./IconButton";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Extention for component */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
type ButtonExtentions = {
|
|
Icon: React.FC<{
|
|
children: Required<React.ReactElement>;
|
|
className?: string;
|
|
}>;
|
|
};
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component props */
|
|
/* -------------------------------------------------------------------------- */
|
|
type ButtonProps = {
|
|
defaultStyle?: boolean;
|
|
emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high"
|
|
disabled?: boolean;
|
|
} & Omit<React.ComponentPropsWithoutRef<"button">, "">;
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component implementation */
|
|
/* -------------------------------------------------------------------------- */
|
|
export const Button: React.FC<ButtonProps> & ButtonExtentions = ({
|
|
defaultStyle = true,
|
|
emphasis = "high",
|
|
disabled = false,
|
|
className,
|
|
children,
|
|
...props
|
|
}) => {
|
|
const isOnlyIcon =
|
|
children &&
|
|
React.isValidElement(children) &&
|
|
React.Children.only(children).type == IconButton;
|
|
|
|
const padding = isOnlyIcon ? "px-2.5 py-2" : "px-4 py-2";
|
|
|
|
return (
|
|
<button
|
|
//TODO change on click event
|
|
onClick={!disabled ? () => {} : undefined}
|
|
className={classNames([
|
|
"flex content-center justify-between",
|
|
"text-center",
|
|
padding,
|
|
"rounded",
|
|
{
|
|
"!cursor-default": disabled,
|
|
"transition-all": !disabled,
|
|
"transition duration-200": !disabled,
|
|
},
|
|
{
|
|
// Define high emphasis
|
|
[`${btnEmphasis.EnableHigh}`]:
|
|
defaultStyle && !disabled && emphasis === "high",
|
|
[`${btnEmphasis.DisabledHigh}`]:
|
|
defaultStyle && disabled && emphasis === "high",
|
|
[`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high",
|
|
// Define medium emphasis
|
|
[`${btnEmphasis.EnabledMedium}`]:
|
|
defaultStyle && !disabled && emphasis === "medium",
|
|
[`${btnEmphasis.DisabledMedium}`]:
|
|
defaultStyle && disabled && emphasis === "medium",
|
|
[`${btnEmphasis.GeneralMedium}`]:
|
|
defaultStyle && emphasis === "medium",
|
|
// Define low emphasis
|
|
[`${btnEmphasis.EnabledLow}`]:
|
|
defaultStyle && !disabled && emphasis === "low",
|
|
[`${btnEmphasis.DisabledLow}`]:
|
|
defaultStyle && disabled && emphasis === "low",
|
|
[`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low",
|
|
},
|
|
className,
|
|
])}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
Button.Icon = IconButton;
|