refactor(annotation): improve annotation modal (#15359)

This commit is contained in:
Yaozong Liu 2021-07-09 13:14:06 +08:00 committed by GitHub
parent 1d572ca92b
commit 7e9674a8fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 14 deletions

View File

@ -279,6 +279,7 @@ function AnnotationList({
/> />
<AnnotationModal <AnnotationModal
addDangerToast={addDangerToast} addDangerToast={addDangerToast}
addSuccessToast={addSuccessToast}
annotation={currentAnnotation} annotation={currentAnnotation}
show={annotationModalOpen} show={annotationModalOpen}
onAnnotationAdd={() => refreshData()} onAnnotationAdd={() => refreshData()}

View File

@ -45,6 +45,7 @@ const store = mockStore({});
const mockedProps = { const mockedProps = {
addDangerToast: () => {}, addDangerToast: () => {},
addSuccessToast: () => {},
annotation: mockData, annotation: mockData,
onAnnotationAdd: jest.fn(() => []), onAnnotationAdd: jest.fn(() => []),
onHide: () => {}, onHide: () => {},

View File

@ -30,6 +30,7 @@ import { AnnotationObject } from './types';
interface AnnotationModalProps { interface AnnotationModalProps {
addDangerToast: (msg: string) => void; addDangerToast: (msg: string) => void;
addSuccessToast: (msg: string) => void;
annnotationLayerId: number; annnotationLayerId: number;
annotation?: AnnotationObject | null; annotation?: AnnotationObject | null;
onAnnotationAdd?: (annotation?: AnnotationObject) => void; onAnnotationAdd?: (annotation?: AnnotationObject) => void;
@ -85,6 +86,7 @@ const AnnotationContainer = styled.div`
const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
addDangerToast, addDangerToast,
addSuccessToast,
annnotationLayerId, annnotationLayerId,
annotation = null, annotation = null,
onAnnotationAdd, onAnnotationAdd,
@ -96,7 +98,6 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
currentAnnotation, currentAnnotation,
setCurrentAnnotation, setCurrentAnnotation,
] = useState<AnnotationObject | null>(null); ] = useState<AnnotationObject | null>(null);
const [isHidden, setIsHidden] = useState<boolean>(true);
const isEditMode = annotation !== null; const isEditMode = annotation !== null;
// annotation fetch logic // annotation fetch logic
@ -122,13 +123,12 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
}); });
}; };
// Functions
const hide = () => { const hide = () => {
setIsHidden(true); if (isEditMode) {
setCurrentAnnotation(resource);
// Reset annotation } else {
resetAnnotation(); resetAnnotation();
}
onHide(); onHide();
}; };
@ -153,6 +153,8 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
} }
hide(); hide();
addSuccessToast(t('The annotation has been updated'));
}); });
} }
} else if (currentAnnotation) { } else if (currentAnnotation) {
@ -167,6 +169,8 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
} }
hide(); hide();
addSuccessToast(t('The annotation has been saved'));
}); });
} }
}; };
@ -236,7 +240,7 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
(!currentAnnotation || (!currentAnnotation ||
!currentAnnotation.id || !currentAnnotation.id ||
(annotation && annotation.id !== currentAnnotation.id) || (annotation && annotation.id !== currentAnnotation.id) ||
(isHidden && show)) show)
) { ) {
if (annotation && annotation.id !== null && !loading) { if (annotation && annotation.id !== null && !loading) {
const id = annotation.id || 0; const id = annotation.id || 0;
@ -245,7 +249,7 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
} }
} else if ( } else if (
!isEditMode && !isEditMode &&
(!currentAnnotation || currentAnnotation.id || (isHidden && show)) (!currentAnnotation || currentAnnotation.id || show)
) { ) {
resetAnnotation(); resetAnnotation();
} }
@ -266,11 +270,6 @@ const AnnotationModal: FunctionComponent<AnnotationModalProps> = ({
currentAnnotation ? currentAnnotation.end_dttm : '', currentAnnotation ? currentAnnotation.end_dttm : '',
]); ]);
// Show/hide
if (isHidden && show) {
setIsHidden(false);
}
return ( return (
<Modal <Modal
disablePrimaryButton={disableSave} disablePrimaryButton={disableSave}