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

import React, { useState } from 'react';

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

import { OnUpdateType } from '../../constants/type';

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

type Props = {
  onUpdate: OnUpdateType;
  onDelete: () => void;
  colorProps?: string;
  opacityProps?: number;
};

const index: React.FC<Props> = ({
  onUpdate,
  onDelete,
  colorProps,
  opacityProps,
}: Props) => {
  const [openSlider, setSlider] = useState(false);
  const [opacity, setOpacity] = useState(opacityProps);

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

  const handleChange = (value: number): void => {
    setOpacity(value);
    onUpdate({ transparency: value * 0.01 });
  };

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

  return (
    <Container>
      {
        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 value={opacity} onChange={handleChange} />
            </SliderWrapper>
            <Subtitle>{`${opacity} %`}</Subtitle>
          </>
        ) : (
          <>
            <ColorSelector
              selectedColor={colorProps}
              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={onDelete} />
            </Box>
          </>
        )
      }
    </Container>
  );
};

export default index;