@adaptabletools/adaptable/src/View/Note/NoteEditor.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { throttle } from '../../Utilities/Helpers/TimingHelper';
import * as React from 'react';
import Textarea from '../../components/Textarea';
import SimpleButton from '../../components/SimpleButton';
import { useAdaptable } from '../AdaptableContext';
import { cn } from '../../lib/utils';
export const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
    const { api } = useAdaptable();
    const showPopupCloseButton = api.optionsApi.getNoteOptions()?.showPopupCloseButton ?? true;
    const textAreaRef = React.useRef(null);
    const [liveValue, setLiveValue] = React.useState(note || '');
    const throttledOnChange = React.useMemo(() => {
        const throttled = throttle((value) => onNoteChange(value), 300);
        return (value) => {
            setLiveValue(value);
            throttled(value);
        };
    }, []);
    React.useEffect(() => {
        if (editMode) {
            textAreaRef.current?.focus();
        }
    }, [editMode]);
    if (note === undefined || note === null) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [_jsx(Textarea, { readOnly: isReadonly, ref: textAreaRef, className: cn('twa:min-w-[180px] twa:min-h-[120px] twa:w-full', {
                    'twa:pr-[30px]': showPopupCloseButton,
                    'twa:pr-0': !showPopupCloseButton,
                }), value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {
                    if (event.key === 'Escape') {
                        onClose();
                    }
                }, onChange: (event) => throttledOnChange(event.target.value) }), showPopupCloseButton && (_jsx(SimpleButton, { variant: "text", style: { position: 'absolute', right: 5, top: 5 }, icon: "close" }))] }));
};