60 lines
1.1 KiB
TypeScript
60 lines
1.1 KiB
TypeScript
import { Button as ButtonRAC } from 'react-aria-components'
|
|
|
|
import { variants } from './variants'
|
|
|
|
import type { ButtonProps } from './types'
|
|
import { Spinner } from '../Spinner'
|
|
import styles from './button.module.css'
|
|
import { SpinnerProps } from '../Spinner/Spinner'
|
|
|
|
export function Button({
|
|
variant,
|
|
color,
|
|
size,
|
|
wrapping,
|
|
|
|
typography,
|
|
className,
|
|
children,
|
|
...props
|
|
}: ButtonProps) {
|
|
const classNames = variants({
|
|
variant,
|
|
color,
|
|
size,
|
|
wrapping,
|
|
typography,
|
|
className,
|
|
})
|
|
|
|
let spinnerType: SpinnerProps['type'] = 'Dark'
|
|
|
|
switch (color) {
|
|
case 'Primary':
|
|
spinnerType = 'Dark'
|
|
break
|
|
case 'Inverted':
|
|
spinnerType = 'White'
|
|
break
|
|
default:
|
|
spinnerType = 'Dark'
|
|
}
|
|
|
|
return (
|
|
<ButtonRAC {...props} className={classNames}>
|
|
{({ isPending }) => {
|
|
return (
|
|
<>
|
|
{children}
|
|
{isPending && (
|
|
<div className={styles.spinnerWrapper}>
|
|
<Spinner size={20} type={spinnerType} />
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}}
|
|
</ButtonRAC>
|
|
)
|
|
}
|