18cbacaca1
Implémenter l'orientation verticale Modifier l'effet de append Implementer RigidBody Implementer Flex et simplex Implémenter Push Implémenter Swap Implement MinMaxHeight without behaviors Fix Margin for Height Implement PositionReference Fix dimension vertical position inside children Add orientation change in form Implement sortChildren Implement Anchor Fix warning message on overlapping Fix minimap when root container is vertical #7287 #7288 #7289 #7290 #7291 #7292 #7294 #7295 #7296 #7297 #7298 #7299 #7300 #7301 #7302
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface IFloatingButtonProps {
|
|
children: React.ReactNode[] | React.ReactNode
|
|
className: string
|
|
}
|
|
|
|
function ToggleState(isHidden: boolean,
|
|
setHidden: React.Dispatch<React.SetStateAction<boolean>>): void {
|
|
setHidden(!isHidden);
|
|
}
|
|
|
|
export function FloatingButton(props: IFloatingButtonProps): JSX.Element {
|
|
const [isHidden, setHidden] = React.useState(true);
|
|
const buttonListClasses = isHidden ? 'invisible opacity-0' : 'visible opacity-100';
|
|
const icon = isHidden
|
|
? <Bars3Icon className="floating-btn" />
|
|
: <XMarkIcon className="floating-btn" />;
|
|
|
|
return (
|
|
<div className={`transition-all ${props.className}`}>
|
|
<div className={`transition-all flex flex-col gap-2 items-center ${buttonListClasses}`}>
|
|
{props.children}
|
|
</div>
|
|
<button type="button"
|
|
className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
|
|
title='Open menu'
|
|
onClick={() => ToggleState(isHidden, setHidden)}
|
|
>
|
|
{icon}
|
|
</button>
|
|
</div>);
|
|
}
|