@jbrowse/core/ui/EditableTypography.js

JBrowse 2 core libraries used by plugins

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
const material_1 = require("@mui/material");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.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 = (0, react_1.forwardRef)(function EditableTypography2(props, ref) {
    const { value, setValue, variant, ...other } = props;
    const [ref2, { width }] = (0, useMeasure_1.default)();
    const [editedValue, setEditedValue] = (0, react_1.useState)();
    const [inputNode, setInputNode] = (0, react_1.useState)(null);
    const [blur, setBlur] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        if (blur) {
            inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
            setBlur(false);
        }
    }, [blur, inputNode]);
    const { classes } = useStyles(props, { props });
    const theme = (0, material_1.useTheme)();
    const val = editedValue === undefined ? value : editedValue;
    return ((0, jsx_runtime_1.jsxs)("div", { ...other, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { ref: ref2, component: "span", variant: variant, className: classes.typography, children: val }) }), (0, jsx_runtime_1.jsx)(material_1.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 === null || inputNode === void 0 ? void 0 : inputNode.blur();
                    }
                    else if (event.key === 'Escape') {
                        setEditedValue(undefined);
                        setBlur(true);
                    }
                }, onBlur: () => {
                    setValue(editedValue || value || '');
                    setEditedValue(undefined);
                } })] }));
});
exports.default = EditableTypography;