RoyLiu
/
pdf-reader-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							import React, { useState } from 'react';

import Button from '../Button';
import Icon from '../Icon';
import Drawer from '../Drawer';
import Typography from '../Typography';
import Tabs from '../Tabs';
import Sliders from '../Sliders';
import Divider from '../Divider';
import ColorSelect from '../ColorSelect';
import TextField from '../TextField';

import { BtnWrapper, ContentWrapper } from './styled';
import { Wrapper, Head, Body, IconWrapper } from '../../global/sidebarStyled';
import { Group, SliderWrapper } from '../../global/toolStyled';

type Props = {
  sidebarState: string;
  onClick: (state: string) => void;
};

const TextContent = () => {
  return (
    <>
      <ContentWrapper>
        <Typography variant="subtitle">Content</Typography>
      </ContentWrapper>
      <TextField variant="multiline" shouldFitContainer />
    </>
  );
}

const ImageContent = () => {
  return (
    <ContentWrapper>
      <Icon glyph="add-image" />
      <Button appearance="link">Select Image</Button>
    </ContentWrapper>
  );
}

const Watermark: React.FunctionComponent<Props> = ({
  onClick,
}) => {
  const [isActive, setActive] = useState(false);

  const handleClick = () => {
    setActive(!isActive);
    onClick(!isActive ? 'watermark' : '');
  }

  return (
    <>
      <BtnWrapper>
        <Button shouldFitContainer align="left" onClick={handleClick}>
          <Icon glyph="watermark" style={{marginRight: '10px'}} />
          Watermark
        </Button>
      </BtnWrapper>
      <Drawer open={isActive} anchor="left">
        <Wrapper>
          <Head>
            <IconWrapper>
              <Icon glyph="left-back" onClick={handleClick} />
            </IconWrapper>
            <Typography light>Watermark</Typography>
          </Head>
          <Body>
            <Typography variant="subtitle">Type</Typography>
            <Tabs
              options={[
                {
                  key: 'text',
                  content: 'Text',
                  child: <TextContent />,
                },
                {
                  key: 'image',
                  content: 'Image',
                  child: <ImageContent />,
                }
              ]}
            />
            <Divider orientation="horizontal" style={{ margin: '20px 0' }} />
            <ColorSelect />
            <Typography variant="subtitle">Opacity</Typography>
            <Group>
              <SliderWrapper>
                <Sliders />
              </SliderWrapper>
              40%
            </Group>
            <Divider orientation="horizontal" style={{ margin: '20px 0' }} />
            <Group>
              <Typography variant="subtitle">Page Range</Typography>
              <Button appearance="primary-hollow" style={{width: '50%'}}>All Pages</Button>
            </Group>
          </Body>
        </Wrapper>
      </Drawer>
    </>
  );
};

export default Watermark;