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

import React from 'react';
import { useTranslation } from 'react-i18next';

import Icon from '../Icon';
import Pagination from '../Pagination';
import SelectBox from '../SelectBox';
import Divider from '../Divider';
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 - 288;
      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;