overleaf/services/web/frontend/js/features/ui/components/ol/ol-toggle-button-group.tsx
ilkin-overleaf 35728d7681 Merge pull request #20436 from overleaf/ii-bs5-editor-toolbar
[web] BS5 editor toolbar

GitOrigin-RevId: a517fd52d648d165e89231d6f5551c026a951c43
2024-10-01 08:04:42 +00:00

42 lines
1.3 KiB
TypeScript

import { ToggleButtonGroup, ToggleButtonGroupProps } from 'react-bootstrap-5'
import BS3ToggleButtonGroup from '@/features/ui/components/bootstrap-3/toggle-button-group'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
type BS3ToggleButtonGroupProps = React.ComponentProps<
typeof BS3ToggleButtonGroup
>
type OLToggleButtonGroupProps<T> = ToggleButtonGroupProps<T> & {
bs3Props?: BS3ToggleButtonGroupProps
}
function OLToggleButtonGroup<T>(props: OLToggleButtonGroupProps<T>) {
const { bs3Props, ...rest } = props
const bs3ToggleButtonGroupProps = {
name: rest.name,
type: rest.type,
value: rest.value,
onChange: rest.onChange,
children: rest.children,
className: rest.className,
defaultValue: rest.defaultValue,
defaultChecked: rest.defaultChecked,
...bs3Props,
} as BS3ToggleButtonGroupProps
// Get all `aria-*` and `data-*` attributes
const extraProps = getAriaAndDataProps(rest)
return (
<BootstrapVersionSwitcher
bs3={
<BS3ToggleButtonGroup {...extraProps} {...bs3ToggleButtonGroupProps} />
}
bs5={<ToggleButtonGroup {...rest} />}
/>
)
}
export default OLToggleButtonGroup