overleaf/services/web/frontend/js/features/ui/components/ol/ol-toggle-button.tsx

49 lines
1.4 KiB
TypeScript
Raw Normal View History

import { ToggleButton, ToggleButtonProps } from 'react-bootstrap-5'
import {
ToggleButton as BS3ToggleButton,
ToggleButtonProps as BS3ToggleButtonProps,
} from 'react-bootstrap'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
import classnames from 'classnames'
type OLToggleButtonProps = ToggleButtonProps & {
bs3Props?: BS3ToggleButtonProps
}
function OLToggleButton(props: OLToggleButtonProps) {
const { bs3Props, ...rest } = props
const bs3ToggleButtonProps: BS3ToggleButtonProps & { active?: boolean } = {
type: rest.type,
name: rest.name,
active: rest.active,
checked: rest.checked,
disabled: rest.disabled,
onChange: rest.onChange as BS3ToggleButtonProps['onChange'],
onClick: rest.onClick as BS3ToggleButtonProps['onClick'],
value: rest.value as BS3ToggleButtonProps['value'],
children: rest.children,
className: classnames(`btn-${props.variant || 'primary'}`, rest.className),
...bs3Props,
}
// Get all `aria-*` and `data-*` attributes
const extraProps = getAriaAndDataProps(rest)
return (
<BootstrapVersionSwitcher
bs3={
<BS3ToggleButton
{...extraProps}
{...bs3ToggleButtonProps}
bsStyle={null}
/>
}
bs5={<ToggleButton {...rest} />}
/>
)
}
export default OLToggleButton