RoyLiu
/
pdf-reader-web


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

import { WatermarkType, SelectOptionType } from '../../constants/type';
import Button from '../Button';
import Box from '../Box';
import Icon from '../Icon';
import Typography from '../Typography';
import Tabs from '../Tabs';
import Divider from '../Divider';
import ColorSelect from '../ColorSelector';
import SliderWithTitle from '../SliderWithTitle';
import TextBox from '../WatermarkTextBox';

import {
  Container, Head, Body, Footer, IconWrapper,
} from '../../global/sidebarStyled';

type Props = WatermarkType & {
  onClick: () => void;
  isActive: boolean;
  onSave: () => void;
  onDelete: () => void;
  setDataState: (arg: Record<string, any>) => void;
};

const WatermarkOption: React.SFC<Props> = ({
  onClick,
  type,
  opacity = 0,
  scale = 1,
  rotation,
  textcolor,
  text,
  onSave,
  onDelete,
  setDataState = (): void => {
    // do nothing
  },
}: Props) => {
  const { t } = useTranslation('sidebar');

  return (
    <Container>
      <Head>
        <IconWrapper>
          <Icon glyph="left-back" onClick={onClick} />
        </IconWrapper>
        <Typography light>
          {t('watermark')}
        </Typography>
      </Head>
      <Body>
        <Typography variant="subtitle" align="left">
          {t('type')}
        </Typography>
        <Tabs
          options={[
            {
              key: 'text',
              content: t('text'),
              child: (
                <TextBox
                  t={t}
                  value={text}
                  onChange={(value: string): void => { setDataState({ text: value }); }}
                />
              ),
            },
          ]}
          onChange={(option: SelectOptionType): void => { setDataState({ type: option.key }); }}
        />
        {
          type === 'text' ? (
            <>
              <Divider orientation="horizontal" style={{ margin: '20px 0' }} />
              <ColorSelect
                title={t('color')}
                mode="watermark"
                selectedColor={textcolor}
                onClick={(val: string): void => { setDataState({ textcolor: val }); }}
              />
            </>
          ) : null
        }
        <Box mt="20">
          <SliderWithTitle
            title={t('opacity')}
            value={opacity * 100}
            tips={`${(opacity * 100).toFixed(0)}%`}
            onSlide={(val: number): void => { setDataState({ opacity: val * 0.01 }); }}
          />
        </Box>
        <Box mt="20">
          <SliderWithTitle
            title={t('rotate')}
            value={rotation}
            maximum={360}
            tips={`${rotation}°`}
            onSlide={(val: number): void => { setDataState({ rotation: val }); }}
          />
        </Box>
        <Box mt="20">
          <SliderWithTitle
            title={t('scale')}
            value={scale * 100}
            tips={`${Math.round(scale * 100)}%`}
            minimum={50}
            maximum={250}
            onSlide={(val: number): void => { setDataState({ scale: val / 100 }); }}
          />
        </Box>
        <Divider orientation="horizontal" style={{ margin: '20px 0' }} />
      </Body>
      <Footer>
        <Button appearance="primary" onClick={onSave}>
          {t('save')}
        </Button>
        <Button appearance="danger-link" onClick={onDelete}>
          {t('removeWatermark')}
        </Button>
      </Footer>
    </Container>
  );
};

export default WatermarkOption;