@jbrowse/core/esm/ui/DraggableDialog.js

JBrowse 2 core libraries used by plugins

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import CloseIcon from '@mui/icons-material/Close';
import { Dialog, DialogTitle, Divider, IconButton, Paper, ScopedCssBaseline, } from '@mui/material';
import { observer } from 'mobx-react';
import Draggable from 'react-draggable';
const useStyles = makeStyles()(theme => ({
    closeButton: {
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1),
        color: theme.palette.grey[500],
    },
}));
function PaperComponent(props) {
    const ref = useRef(null);
    return (_jsx(Draggable, { nodeRef: ref, cancel: '[class*="MuiDialogContent-root"]', onStart: arg => `${arg.target?.className}`.includes('MuiDialogTitle'), children: _jsx(Paper, { ref: ref, ...props }) }));
}
const DraggableDialog = observer(function DraggableDialog(props) {
    const { classes } = useStyles();
    const { title, children, onClose } = props;
    return (_jsx(Dialog, { ...props, PaperComponent: PaperComponent, children: _jsxs(ScopedCssBaseline, { children: [_jsxs(DialogTitle, { style: { cursor: 'move' }, children: [title, onClose ? (_jsx(IconButton, { className: classes.closeButton, onClick: () => {
                                onClose();
                            }, children: _jsx(CloseIcon, {}) })) : null] }), _jsx(Divider, {}), children] }) }));
});
export default DraggableDialog;