RoyLiu
/
pdf-reader-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							import React 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, Footer, IconWrapper,
} from '../../global/sidebarStyled';
import { Group, SliderWrapper } from '../../global/toolStyled';

type Props = {
  onClick: () => void;
  isActive: boolean;
};

const TextContent = (): React.ReactElement => (
  <>
    <ContentWrapper>
      <Typography variant="subtitle">Content</Typography>
    </ContentWrapper>
    <TextField variant="multiline" shouldFitContainer />
  </>
);

const ImageContent = (): React.ReactElement => (
  <ContentWrapper>
    <Icon glyph="add-image" />
    <Button appearance="link" style={{ marginLeft: '10px' }}>Select Image</Button>
  </ContentWrapper>
);

const Watermark: React.FunctionComponent<Props> = ({
  onClick,
  isActive,
}: Props) => (
  <>
    <BtnWrapper>
      <Button shouldFitContainer align="left" onClick={onClick}>
        <Icon glyph="watermark" style={{ marginRight: '10px' }} />
        Watermark
      </Button>
    </BtnWrapper>
    <Drawer open={isActive} anchor="left">
      <Wrapper>
        <Head>
          <IconWrapper>
            <Icon glyph="left-back" onClick={onClick} />
          </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>
        <Footer>
          <Button appearance="primary">Save</Button>
          <Button appearance="danger-link">Remove watermark</Button>
        </Footer>
      </Wrapper>
    </Drawer>
  </>
);

export default Watermark;