|
- import { h, Component, ComponentChildren } from 'preact';
- import classes from './MarginalAnnotations.module.scss';
- import cls from 'classnames';
- import { AnnotationTargetHighlight } from './AnnotationTargetHighlight';
- import type { IAnnotation, IAnnotationWithSource } from '../storage/Annotation';
- import { WebAnnotation } from 'web-annotation-utils';
-
- interface MarginalAnnotationsProps {
- appContainer: Node;
- annotations: IAnnotationWithSource[];
- annotationInFocus?: IAnnotationWithSource;
- toolbarButtons?: ComponentChildren;
- onUpdateAnnotation: (
- id: IAnnotation['_id'],
- newWebAnnotation: WebAnnotation,
- ) => Promise<void>;
- onDeleteAnnotation: (id: IAnnotation['_id']) => Promise<void>;
- }
-
- interface MarginalAnnotationsState {
- showAll: boolean;
- }
-
- export class MarginalAnnotations extends Component<
- MarginalAnnotationsProps,
- MarginalAnnotationsState
- > {
- state: MarginalAnnotationsState = { showAll: false };
-
- toggleShowAll = () => {
- this.setState(({ showAll }) => ({ showAll: !showAll }));
- };
-
- render(
- {
- annotations,
- annotationInFocus,
- toolbarButtons,
- appContainer,
- onUpdateAnnotation,
- onDeleteAnnotation,
- }: MarginalAnnotationsProps,
- { showAll }: MarginalAnnotationsState,
- ) {
- const annotationElements = annotations.map((annotation) => (
- <AnnotationTargetHighlight
- key={annotation._id}
- annotation={annotation}
- appContainer={appContainer}
- inFocus={annotation._id === annotationInFocus?._id}
- onUpdateAnnotation={onUpdateAnnotation}
- onDeleteAnnotation={onDeleteAnnotation}
- />
- ));
-
- return (
- <div class={classes.annotationOuterContainer}>
- <div
- class={cls(classes.annotationContainer, {
- [classes.showAll]: showAll,
- })}
- >
- <div class={classes.toolbarContainer}>
- <div class={classes.toolbar}>
- {toolbarButtons}
- {(toolbarButtons || annotations.length > 0) && (
- <button
- class={classes.showAllButton}
- onClick={this.toggleShowAll}
- title="Show/hide all annotations"
- >
- {showAll ? '❯' : '❮'}
- </button>
- )}
- </div>
- </div>
- {annotationElements}
- </div>
- </div>
- );
- }
- }
|