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

import React from 'react';

import OuterRect from '../OuterRect';
import {
  AnnotationElementPropsType, PositionType, CoordType,
} from '../../constants/type';
import { rectCalc, parsePositionForBackend } from '../../helpers/position';

import { AnnotationContainer } from '../../global/otherStyled';
import { TextWrapper, Input } from './styled';

const FreeText: React.SFC<AnnotationElementPropsType> = ({
  obj_type,
  obj_attr: {
    content,
    position,
    fontname,
    fontsize,
    textcolor,
  },
  scale,
  viewport,
  isCollapse,
  isEdit,
  onEdit,
  onUpdate,
  onBlur,
}: AnnotationElementPropsType) => {
  const annotRect = rectCalc(position as PositionType, viewport.height, scale);

  const handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
    const textValue = event.currentTarget.value;
    const fontWidth = textValue.length * (fontsize || 1);
    const newPosition = { ...position as PositionType };
    newPosition.right = newPosition.left + fontWidth;

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

  const handleScaleOrMove = ({
    top, left, width = 0, height = 0,
  }: CoordType): void => {
    const newPosition = {
      top,
      left,
      bottom: top + (height || annotRect.height),
      right: left + (width || annotRect.width),
    };

    onUpdate({
      fontsize: (height || annotRect.height) / scale,
      position: parsePositionForBackend(obj_type, newPosition, viewport.height, scale),
    });
  };

  const styles = {
    fontFamily: fontname,
    fontSize: fontsize ? fontsize * scale : 0,
    color: textcolor,
  };

  return (
    <div>
      <AnnotationContainer
        top={`${annotRect.top}px`}
        left={`${annotRect.left}px`}
        width={`${annotRect.width + 2}px`}
        height={`${annotRect.height + 4}px`}
      >
        {
          isEdit ? (
            <Input
              defaultValue={content}
              onChange={handleChange}
              autoFocus
              onBlur={onBlur}
              style={styles}
            />
          ) : (
            <TextWrapper
              style={styles}
            >
              {content}
            </TextWrapper>
          )
        }
      </AnnotationContainer>
      {
        !isCollapse ? (
          <OuterRect
            top={annotRect.top}
            left={annotRect.left}
            width={annotRect.width}
            height={annotRect.height}
            onMove={handleScaleOrMove}
            onScale={handleScaleOrMove}
            onDoubleClick={onEdit}
          />
        ) : ''
      }
    </div>
  );
};

export default FreeText;