mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-14 06:03:45 +01:00
Rebeka Dekany
e2a8bf768b
* Merge intermediate component wrappers into OL-prefixed components * Replace all intermediate wrapper consumers with OL-prefixed components directly * Fix jsx/js files still importing deleted shim components * Remove duplicate OLNotification imports left by first pass * Rename OLTagIcon to TagIcon, remove OL prefix * Rename OLDropdownMenuItem to DropdownMenuItem, remove OL prefix * Remove OLNotification, use Notification directly * Move Notification to the main shared component folder * Update tag-icon import path out of ol/ * Move TagIcon to the main shared component folder * Update dropdown-menu-item import path out of ol/ * Move DropdownMenuItem to the main shared component folder * Fix dropdown-menu-item import path to dropdown/ subfolder * Remove BS5 alias prefixes from shared components * Restore notification-list wrapper in Notification component * Add translation for loading button * Remove redundant import aliasing * Resolve conflicts * Restore notification container `notification-list` GitOrigin-RevId: 24a5af18599a3e02ac6fd61c09cf5a49ef6e0020
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import { forwardRef } from 'react'
|
|
import { Button } from 'react-bootstrap'
|
|
import type { ButtonProps } from '@/shared/components/types/button-props'
|
|
import classNames from 'classnames'
|
|
import { useTranslation } from 'react-i18next'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import OLSpinner from './ol-spinner'
|
|
|
|
export type OLButtonProps = ButtonProps
|
|
|
|
const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>(
|
|
(
|
|
{
|
|
children,
|
|
className,
|
|
leadingIcon,
|
|
isLoading = false,
|
|
loadingLabel,
|
|
trailingIcon,
|
|
variant = 'primary',
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const { t } = useTranslation()
|
|
|
|
const buttonClassName = classNames('d-inline-grid', className, {
|
|
'button-loading': isLoading,
|
|
})
|
|
|
|
const loadingSpinnerClassName =
|
|
props.size === 'lg' ? 'loading-spinner-large' : 'loading-spinner-small'
|
|
const materialIconClassName =
|
|
props.size === 'lg' ? 'icon-large' : 'icon-small'
|
|
|
|
const leadingIconComponent =
|
|
leadingIcon && typeof leadingIcon === 'string' ? (
|
|
<MaterialIcon type={leadingIcon} className={materialIconClassName} />
|
|
) : (
|
|
leadingIcon
|
|
)
|
|
|
|
const trailingIconComponent =
|
|
trailingIcon && typeof trailingIcon === 'string' ? (
|
|
<MaterialIcon type={trailingIcon} className={materialIconClassName} />
|
|
) : (
|
|
trailingIcon
|
|
)
|
|
|
|
return (
|
|
<Button
|
|
className={buttonClassName}
|
|
variant={variant}
|
|
{...props}
|
|
ref={ref}
|
|
disabled={isLoading || props.disabled}
|
|
data-ol-loading={isLoading}
|
|
role={undefined}
|
|
>
|
|
{isLoading && (
|
|
<span className="spinner-container">
|
|
<OLSpinner size="sm" className={loadingSpinnerClassName} />
|
|
<span className="visually-hidden">
|
|
{loadingLabel ?? t('loading')}
|
|
</span>
|
|
</span>
|
|
)}
|
|
<span className="button-content" aria-hidden={isLoading}>
|
|
{leadingIconComponent}
|
|
{children}
|
|
{trailingIconComponent}
|
|
</span>
|
|
</Button>
|
|
)
|
|
}
|
|
)
|
|
|
|
OLButton.displayName = 'OLButton'
|
|
|
|
export default OLButton
|