43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import clsx from 'clsx';
|
|
import React, { ForwardedRef, forwardRef } from 'react';
|
|
|
|
import { Ripple } from '../animation/ripple/component';
|
|
import { Comet } from '../comet';
|
|
import { RawButton } from '../raw';
|
|
import { COMET_VARIANT_MAP } from './constants';
|
|
import styles from './styles.module.scss';
|
|
import { ButtonProps } from './types.js';
|
|
|
|
function ButtonInner(
|
|
{
|
|
variant = 'primary',
|
|
scale = 'm',
|
|
pending = false,
|
|
className,
|
|
children,
|
|
...props
|
|
}: ButtonProps,
|
|
ref: ForwardedRef<HTMLButtonElement>,
|
|
) {
|
|
const buttonClassName = clsx(
|
|
styles.button,
|
|
styles[variant],
|
|
styles[scale],
|
|
{ [styles.pending]: pending },
|
|
className,
|
|
);
|
|
return (
|
|
<RawButton className={buttonClassName} ref={ref} {...props}>
|
|
{pending && (
|
|
<div className={styles.cometWrapper}>
|
|
<Comet scale={scale} variant={COMET_VARIANT_MAP[variant]} />
|
|
</div>
|
|
)}
|
|
<div className={styles.childrenWrapper}>{children}</div>
|
|
<Ripple />
|
|
</RawButton>
|
|
);
|
|
}
|
|
|
|
export const Button = forwardRef(ButtonInner);
|