clickable-json/lib/inserts/ValueInput.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValueInput = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const flexible_input_1 = require("flexible-input");
const css = require("../css");
const utils_1 = require("../ClickableJson/utils");
const CrdtTypeSwitch_1 = require("../buttons/CrdtTypeSwitch");
const selectOnFocus_1 = require("../utils/selectOnFocus");
const ValueInput = ({ inp, focus, initialValue = '', visible, types = ['any', 'con', 'val', 'vec'], initialType, withType, onSubmit, onCancel, }) => {
    const [value, setValue] = React.useState(initialValue);
    const inputRef = React.useRef(null);
    const theme = (0, nano_theme_1.useTheme)();
    const type = React.useRef(initialType !== null && initialType !== void 0 ? initialType : (types && types.length ? types[0] : ''));
    const handleSubmit = () => {
        if (inputRef.current)
            inputRef.current.blur();
        setValue('');
        onSubmit(value, type.current);
    };
    const style = (0, utils_1.inputStyle)(theme, !theme.isLight, value);
    style.display = visible ? undefined : 'none';
    style.margin = '-1px 0 -1px -2px';
    style.padding = '3px 4px 3px 5px';
    style.border = `1px solid ${theme.g(0.85)}`;
    let afterValue = null;
    if (types && types.length && withType) {
        afterValue = (React.createElement(CrdtTypeSwitch_1.CrdtTypeSwitch, { type: type, onSubmit: handleSubmit, onClick: () => {
                if (inputRef.current)
                    inputRef.current.focus();
            } }));
    }
    return (React.createElement("span", { className: css.input, style: style },
        React.createElement(flexible_input_1.FlexibleInput, { focus: focus, inp: (el) => {
                inputRef.current = el;
                if (inp)
                    inp(el);
            }, value: value, typeahead: (0, utils_1.typeahead)(value), onChange: (e) => setValue(e.target.value), onSubmit: handleSubmit, onFocus: (e) => (0, selectOnFocus_1.selectOnFocus)(e.target), onCancel: (e) => {
                setValue('');
                if (onCancel)
                    onCancel(e);
            }, onTab: (e) => {
                const ahead = (0, utils_1.typeahead)(value);
                if (ahead) {
                    e.preventDefault();
                    setValue(value + ahead);
                }
            } }),
        afterValue));
};
exports.ValueInput = ValueInput;
//# sourceMappingURL=ValueInput.js.map