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

import React, { useState } from 'react';

import ColorSelector from '../ColorSelector';
import Button from '../Button';
import Icon from '../Icon';
import Divider from '../Divider';
import Box from '../Box';
import Sliders from '../Sliders';
import DeleteDialog from '../DeleteDialog';

import {
  Wrapper, Subtitle, SliderWrapper,
} from './styled';

type Props = {
  onUpdate: (data: any) => void;
  onDelete: () => void;
  color?: string;
};

const index: React.FunctionComponent<Props> = ({
  onUpdate,
  onDelete,
}: Props) => {
  const [openSlider, setSlider] = useState(false);
  const [openDialog, setDialog] = useState(false);
  const [opacity, setOpacity] = useState(100);

  const handleClick = (color: string): void => {
    onUpdate({ color });
  };

  const handleChange = (value: number): void => {
    setOpacity(value);
    onUpdate({ opacity: value });
  };

  const sliderToggle = (e: React.MouseEvent<HTMLElement>): void => {
    e.preventDefault();
    setSlider(!openSlider);
  };

  const DialogToggle = (e: React.MouseEvent<HTMLElement>): void => {
    e.preventDefault();
    setDialog(!openDialog);
  };

  return (
    <Wrapper>
      {
        openSlider ? (
          <>
            <Box w="40px" h="36px" d="flex" j="center">
              <Icon glyph="right-arrow" onClick={sliderToggle} />
            </Box>
            <Divider style={{ margin: '0 10px 0 10px' }} />
            <SliderWrapper>
              <Sliders defaultValue={opacity} onChange={handleChange} />
            </SliderWrapper>
            <Subtitle>{`${opacity} %`}</Subtitle>
          </>
        ) : (
          <>
            <ColorSelector onClick={handleClick} />
            <Subtitle>opacity</Subtitle>
            <Button
              appearance="dark"
              style={{ height: '34px', width: '80px', fontSize: '12px' }}
              onClick={sliderToggle}
            >
              {`${opacity} %`}
            </Button>
            <Divider style={{ margin: '0 6px 0 15px' }} />
            <Box w="48px" h="36px" d="flex" j="center">
              <Icon glyph="trash" onClick={DialogToggle} />
            </Box>
          </>
        )
      }
      <DeleteDialog
        open={openDialog}
        onCancel={DialogToggle}
        onDelete={onDelete}
      />
    </Wrapper>
  );
};

export default index;