@selfcommunity/react-ui/lib/esm/components/EditCourse/MenuRow.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, IconButton, SwipeableDrawer, useMediaQuery, useTheme, Menu } from '@mui/material';
import { Fragment, memo, useCallback, useState } from 'react';
function MenuRow(props) {
    // PROPS
    const { icon = _jsx(Icon, { children: "more_vert" }), buttonClassName, disabled, children } = props;
    // STATES
    const [anchorEl, setAnchorEl] = useState(null);
    // HOOKS
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    // HANDLERS
    const handleClick = useCallback((e) => {
        setAnchorEl(e.currentTarget);
    }, [anchorEl]);
    const handleClose = useCallback(() => {
        setAnchorEl(null);
    }, [anchorEl]);
    return (_jsxs(Fragment, { children: [_jsx(IconButton, Object.assign({ className: buttonClassName, onClick: handleClick, disabled: disabled }, { children: icon })), isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: Boolean(anchorEl), onClick: handleClose, onClose: handleClose, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: children }))) : (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: Boolean(anchorEl), onClick: handleClose }, { children: children })))] }));
}
export default memo(MenuRow);