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

import React from 'react';

import {
  AnnotationElementPropsType, PositionType, CoordType,
} from '../../constants/type';
import Icon from '../Icon';
import OuterRect from '../OuterRect';
import { AnnotationContainer } from '../../global/otherStyled';
import { rectCalc } from '../../helpers/position';

import { TextArea, TextAreaContainer, TrashCan } from './styled';

const Note: React.SFC<AnnotationElementPropsType> = ({
  viewport,
  scale,
  obj_attr: {
    position,
    content,
  },
  onEdit,
  isEdit,
  onBlur,
  onUpdate,
  onDelete,
}: AnnotationElementPropsType) => {
  const annotRect = rectCalc(position as PositionType, viewport.height, scale);

  const handleClick = (event: React.MouseEvent): void => {
    event.preventDefault();
    onEdit();
  };

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
    const textValue = event.currentTarget.value;

    onUpdate({
      content: textValue,
    });
  };

  const handleMove = (moveCoord: CoordType): void => {
    const top = (viewport.height - moveCoord.top) / scale;
    const left = moveCoord.left / scale;

    onUpdate({
      position: {
        top,
        left,
        bottom: top,
        right: left,
      },
    });
  };

  return (
    <>
      <AnnotationContainer
        top={`${annotRect.top}px`}
        left={`${annotRect.left}px`}
        width="auto"
        height="auto"
      >
        <Icon
          glyph="sticky-note-2"
          style={{ width: '30px' }}
        />
      </AnnotationContainer>
      {
        isEdit ? (
          <TextAreaContainer
            top={`${annotRect.top + 36}px`}
            left={`${annotRect.left - 106}px`}
          >
            <TextArea
              autoFocus
              onBlur={onBlur}
              defaultValue={content}
              onChange={handleChange}
            />
            <TrashCan>
              <Icon
                glyph="trash-2"
                onClick={onDelete}
              />
            </TrashCan>
          </TextAreaContainer>
        ) : null
      }
      <OuterRect
        top={annotRect.top}
        left={annotRect.left}
        width={25}
        height={25}
        onMove={handleMove}
        onClick={handleClick}
      />
    </>
  );
};

export default Note;