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

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

import Icon from '../Icon';
import Typography from '../Typography';
import ColorSelector from '../ColorSelector';
import SliderWithTitle from '../SliderWithTitle';
import { OptionPropsType } from '../../constants/type';

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

const HighlightOption: React.SFC<OptionPropsType> = ({
  type,
  color,
  opacity,
  setDataState = (): void => {
    // do nothing
  },
}: OptionPropsType) => {
  const { t } = useTranslation('sidebar');

  return (
    <>
      <Wrapper>
        <Typography variant="subtitle" style={{ marginTop: '8px' }} align="left">
          {t('style')}
        </Typography>
        <Group>
          {data.lineType.map(ele => (
            <Item
              key={ele.key}
              selected={type === ele.key}
              onClick={(): void => { setDataState({ type: ele.key }); }}
            >
              <Icon glyph={ele.icon} />
            </Item>
          ))}
        </Group>
      </Wrapper>
      <Wrapper>
        <ColorSelector
          title={t('color')}
          selectedColor={color}
          onClick={(selected: string): void => { setDataState({ color: selected }); }}
        />
      </Wrapper>
      <Wrapper>
        <SliderWithTitle
          title={t('opacity')}
          value={opacity}
          tips={`${opacity}%`}
          onSlide={(val: number): void => { setDataState({ opacity: val }); }}
        />
      </Wrapper>
    </>
  );
};

export default HighlightOption;