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

import React from 'react';

import Icon from '../Icon';
import Button from '../Button';
import Typography from '../Typography';
import ColorSelect from '../ColorSelector';
import SliderWithTitle from '../SliderWithTitle';

import { Group, Item } from '../../global/toolStyled';

type Props = {
  type: string;
  setType: (arg: string) => void;
  color: string;
  setColor: (arg: string) => void;
  opacity: number;
  handleOpacity: (arg: number) => void;
  width: number;
  handleWidth: (arg: number) => void;
};

const FreehandOption = ({
  type,
  setType,
  color,
  setColor,
  opacity,
  handleOpacity,
  width,
  handleWidth,
}: Props): React.ReactElement => (
  <>
    <Typography variant="subtitle" style={{ marginTop: '4px' }} align="left">Tools</Typography>
    <Group>
      <Item
        size="small"
        selected={type === 'pen'}
        onClick={(): void => { setType('pen'); }}
      >
        <Icon glyph="freehand" />
      </Item>
      <Item
        size="small"
        selected={type === 'eraser'}
        onClick={(): void => { setType('eraser'); }}
      >
        <Icon glyph="eraser" />
      </Item>
      <Item size="small">
        <Icon glyph="redo" />
      </Item>
      <Item size="small">
        <Icon glyph="undo" />
      </Item>
    </Group>
    <ColorSelect
      showTitle
      color={color}
      onClick={setColor}
    />
    <SliderWithTitle
      title="Opacity"
      value={opacity}
      tips={`${opacity}%`}
      onSlide={handleOpacity}
    />
    <SliderWithTitle
      title="Width"
      value={width}
      tips={`${width} pt`}
      onSlide={handleWidth}
      maximum={40}
    />
    <Group style={{ marginTop: '20px', paddingRight: '40px' }}>
      <Button
        appearance="danger-hollow"
        shouldFitContainer
      >
        <Icon glyph="clear" style={{ marginRight: '5px' }} />
        Clear all
      </Button>
    </Group>
  </>
);


export default FreehandOption;