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

JBrowse 2 core libraries used by plugins

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState } from 'react';
import useMeasure from '@jbrowse/core/util/useMeasure';
import { InputBase, Typography, useTheme } from '@mui/material';
import { makeStyles } from "../util/tss-react/index.js";
const useStyles = makeStyles()(theme => ({
    input: {},
    inputBase: {},
    typography: {
        top: 6,
        left: 2,
        position: 'absolute',
        whiteSpace: 'nowrap',
        visibility: 'hidden',
    },
    inputRoot: {
        padding: theme.spacing(0.5),
    },
    inputFocused: {
        borderStyle: 'solid',
        borderWidth: 2,
    },
}));
const EditableTypography = forwardRef(function EditableTypography2(props, ref) {
    const { value, setValue, variant, ...other } = props;
    const [ref2, { width }] = useMeasure();
    const [editedValue, setEditedValue] = useState();
    const [inputNode, setInputNode] = useState(null);
    const { classes } = useStyles(props, { props });
    const theme = useTheme();
    const val = editedValue === undefined ? value : editedValue;
    return (_jsxs("div", { ...other, ref: ref, children: [_jsx("div", { style: { position: 'relative' }, children: _jsx(Typography, { ref: ref2, component: "span", variant: variant, className: classes.typography, children: val }) }), _jsx(InputBase, { inputRef: node => {
                    setInputNode(node);
                }, className: classes.inputBase, inputProps: {
                    style: {
                        width,
                        ...(variant && variant !== 'inherit'
                            ? theme.typography[variant]
                            : {}),
                    },
                }, classes: {
                    input: classes.input,
                    root: classes.inputRoot,
                    focused: classes.inputFocused,
                }, value: val, onChange: event => {
                    setEditedValue(event.target.value);
                }, onKeyDown: event => {
                    if (event.key === 'Enter') {
                        inputNode?.blur();
                    }
                    else if (event.key === 'Escape') {
                        setEditedValue(undefined);
                        inputNode?.blur();
                    }
                }, onBlur: () => {
                    setValue(editedValue || value || '');
                    setEditedValue(undefined);
                } })] }));
});
export default EditableTypography;