pdf-reader-web/components/Annotation/index.tsx

/* eslint-disable @typescript-eslint/camelcase */
import React from 'react';

import { AnnotationType } from '../../constants/type';
import AnnotationSelector from '../AnnotationSelector';

import {
  Markup, Popper,
} from './styled';

type Props = AnnotationType & {
  isCovered: boolean;
  isCollapse: boolean;
  mousePosition: Record<string, any>;
  onUpdate: (data: any) => void;
  onDelete: () => void;
  scale: number;
};

const Annotation: React.FunctionComponent<Props> = ({
  obj_type,
  obj_attr,
  isCovered,
  mousePosition,
  isCollapse,
  onUpdate,
  onDelete,
  scale,
}: any) => {
  const {
    page, position, bdcolor, transparency,
  } = obj_attr;

  return (
    <>
      {
        position.map((ele: any, index: number) => (
          <Markup
            key={`block_${page + index}`}
            position={ele}
            scale={scale}
            bdcolor={bdcolor}
            opacity={transparency}
            markupType={obj_type}
            isCovered={isCovered}
          />
        ))
      }
      {
        !isCollapse ? (
          <Popper position={mousePosition}>
            <AnnotationSelector
              onUpdate={onUpdate}
              onDelete={onDelete}
            />
          </Popper>
        ) : ''
      }
    </>
  );
};

export default Annotation;