RoyLiu
/
pdf-reader-web


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

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 SliderWithTitle from '../SliderWithTitle';
import TextBox from '../WatermarkTextBox';
import ColorSelector from '../../containers/ColorSelector';

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

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

const WatermarkOption: React.FC<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 onClick={onClick}>
          <Icon glyph="left-back" />
        </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' }} />
            <ColorSelector
              title={t('color')}
              mode="watermark"
              selectedColor={textcolor}
              onClick={(val: string): void => {
                setDataState({ textcolor: val });
              }}
              throughPortal
            />
          </>
        ) : 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;