@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
39 lines (38 loc) • 1.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NoteEditor = void 0;
const tslib_1 = require("tslib");
const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
const React = tslib_1.__importStar(require("react"));
const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const AdaptableContext_1 = require("../AdaptableContext");
const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
const { api } = (0, AdaptableContext_1.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 = (0, throttle_1.default)((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 (React.createElement(React.Fragment, null,
React.createElement(Textarea_1.default, { readOnly: isReadonly, ref: textAreaRef, width: "100%", minWidth: 180, minHeight: 120, style: { paddingRight: showPopupCloseButton ? 30 : 0 }, value: liveValue, onBlur: () => onClose(), onKeyDown: (event) => {
if (event.key === 'Escape') {
onClose();
}
}, onChange: (event) => throttledOnChange(event.target.value) }),
showPopupCloseButton && (React.createElement(SimpleButton_1.default, { variant: "text", style: { position: 'absolute', right: 5, top: 5 }, icon: "close" }))));
};
exports.NoteEditor = NoteEditor;