@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
59 lines (58 loc) • 3.37 kB
JavaScript
import * as React from 'react';
import { useSelector } from 'react-redux';
import { Flex } from 'rebass';
import { GetNoteSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
import { CommentsAndNotesEditModeSelector, CommentsAndNotesFocusedEntitySelector, CommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/InternalRedux';
import { useAdaptable } from '../../../AdaptableContext';
import { CommentsEditor } from '../../../Comments/CommentsEditor';
import { NoteEditor } from '../../../Note/NoteEditor';
import { CellPopup } from '../../CellPopup';
const ConnectedNoteEditor = ({ enableEditMode }) => {
const { api } = useAdaptable();
const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');
const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
const annotationsService = api.internalApi.getAnnotationsService();
const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
const note = useSelector((state) => {
return cellAddress ? GetNoteSelector(state.Note, cellAddress) : null;
});
const handleNoteChange = React.useCallback((value) => {
api.noteApi.updateNoteText(value, note);
}, [note]);
return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup" },
React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note?.Uuid, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) })));
};
export const GridCellPopup = (props) => {
const { api } = useAdaptable();
const cellPopupRef = React.useRef(null);
const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
const focusedEntity = useSelector((state) => CommentsAndNotesFocusedEntitySelector(state.Internal));
const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
const enableEditMode = (entity) => {
if (!editMode) {
const annotationsService = api.internalApi.getAnnotationsService();
annotationsService.showPopup(cellAddress, true);
annotationsService.editFocusedEntity(entity);
}
};
React.useEffect(() => {
cellPopupRef?.current?.refreshContent?.();
}, [focusedEntity]);
if (!cellAddress) {
return React.createElement(React.Fragment, null);
}
const noteEditor = React.createElement(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
const commentEditor = (React.createElement(CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
return (React.createElement(CellPopup, { ref: cellPopupRef, key: `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId }, (() => {
switch (focusedEntity) {
case 'Note':
return noteEditor;
case 'Comment':
return commentEditor;
default:
return (React.createElement(React.Fragment, null,
noteEditor,
commentEditor));
}
})()));
};