@knowmax/genericlist-fluentuiv9/dist/components/core/ToggleOpenButton.js

Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { ToggleButton, makeStyles } from '@fluentui/react-components';
import { ChevronRight24Regular } from '@fluentui/react-icons';
const useClasses = makeStyles({
    root: {
        '& .toggle-icon': {
            transformOrigin: 'center',
            transition: 'transform 200ms cubic-bezier(0.4, 0, 0.2, 1)'
        },
        '&[aria-pressed="true"] .toggle-icon': {
            transform: 'rotate(90deg)'
        },
        '&[aria-pressed="false"] .toggle-icon': {
            transform: 'rotate(0deg)'
        }
    }
});
/** Toggle button.
 * @param Initial or updated value. True means open, false closed.
 * @param onToggle Callback after user toggles.
 */
export const ToggleOpenButton = observer(({ value = false, disabled, onToggle }) => {
    const [open, setOpen] = useState(value);
    const classes = useClasses();
    useEffect(() => {
        setOpen(value);
    }, [value]);
    const toggle = useCallback(() => {
        if (onToggle) {
            onToggle();
        }
        setOpen(o => !o);
    }, [setOpen]);
    return _jsx(ToggleButton, { appearance: 'transparent', className: classes.root, disabled: disabled, checked: open, icon: _jsx(ChevronRight24Regular, { className: "toggle-icon" }), onClick: toggle });
});