UNPKG

@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
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)); } })())); };