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

import React from 'react';
import { useTranslation } from '../../i18n';

import Icon from '../Icon';
import Pagination from '../Pagination';
import SelectBox from '../SelectBox';
import Divider from '../Divider';
import { SelectOptionType, ViewportType } from '../../constants/type';
import { scaleCheck } from '../../helpers/utility';

import { Container, ToggleButton } from './styled';
import dataset from './data';

type Props = {
  totalPage: number;
  currentPage: number;
  setCurrentPage: (num: number) => void;
  changeScale: (num: number | string) => void;
  changeRotate: (num: number) => void;
  scale: number;
  rotation: number;
  viewport: ViewportType;
  displayMode: string;
  toggleDisplayMode: (state: string) => void;
  handleHandClick: () => void;
};

const Toolbar: React.FC<Props> = ({
  totalPage,
  currentPage,
  setCurrentPage,
  changeScale,
  changeRotate,
  scale,
  rotation,
  viewport,
  displayMode,
  toggleDisplayMode,
  handleHandClick,
}: Props) => {
  const { t } = useTranslation('toolbar');
  const data = dataset(t);

  const handleClockwiseRotation = (): void => {
    const r = rotation + 90;
    changeRotate(r);
  };

  const handleCounterclockwiseRotation = (): void => {
    const r = rotation - 90;
    changeRotate(r);
  };

  const handleScaleSelect = async (selected: SelectOptionType): Promise<any> => {
    if (selected.child === 'fit') {
      const screenWidth = window.document.body.offsetWidth - 276;
      const originPdfWidth = viewport.width / scale;
      const rate = screenWidth / originPdfWidth;
      changeScale(rate);
    } else {
      changeScale(scaleCheck(selected.child as number));
    }
  };

  const handleZoomIn = (): void => {
    changeScale(scaleCheck(scale * 100 + 10));
  };

  const handleZoomOut = (): void => {
    changeScale(scaleCheck(scale * 100 - 10));
  };

  return (
    <>
      <Container isHidden={displayMode === 'full'}>
        <Pagination totalPage={totalPage} currentPage={currentPage} onChange={setCurrentPage} />
        <Divider />
        <Icon glyph="hand" style={{ width: '30px' }} onClick={handleHandClick} />
        <Icon glyph="zoom-in" style={{ width: '30px' }} onClick={handleZoomIn} />
        <Icon glyph="zoom-out" style={{ width: '30px' }} onClick={handleZoomOut} />
        <SelectBox
          options={data.scaleOptions}
          style={{ width: '94px' }}
          useInput
          isDivide
          onChange={handleScaleSelect}
          defaultValue={`${Math.round(scale * 100)} %`}
        />
        <Divider />
        <Icon glyph="rotate-left" style={{ width: '30px' }} onClick={handleCounterclockwiseRotation} />
        <Icon glyph="rotate-right" style={{ width: '30px' }} onClick={handleClockwiseRotation} />
      </Container>
      <ToggleButton>
        {
          displayMode === 'normal' ? (
            <Icon glyph="tool-close" onClick={(): void => { toggleDisplayMode('full'); }} />
          ) : (
            <Icon glyph="tool-open" onClick={(): void => { toggleDisplayMode('normal'); }} />
          )
        }
      </ToggleButton>
    </>
  );
};

export default Toolbar;