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

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

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

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

import {
  shapeOptions, typeOptions,
} from './data';

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

  return (
    <>
      <Wrapper>
        <Typography
          variant="subtitle"
          style={{ marginTop: '8px' }}
          align="left"
        >
          {t('style')}
        </Typography>
        <SelectBox
          options={shapeOptions}
          style={{ marginRight: '10px' }}
          onChange={(item: Record<string, any>): void => { setDataState({ shape: item.key }); }}
        />
        {
          shape !== 'line' && shape !== 'arrow' && (
            <SelectBox
              options={typeOptions}
              onChange={(item: Record<string, any>): void => { setDataState({ type: item.key }); }}
            />
          )
        }
      </Wrapper>
      <Wrapper>
        <ColorSelector
          title={t('color')}
          mode="shape"
          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>
      <Wrapper>
        <SliderWithTitle
          title={t('width')}
          value={width}
          tips={`${width}pt`}
          onSlide={(val: number): void => { setDataState({ width: val }); }}
          maximum={40}
        />
      </Wrapper>
    </>
  );
};

export default ShapeOption;