Home Explore Help
Register Sign In
RoyLiu
/
pdf-reader-web
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update stylesheet class name

RoyLiu 5 years ago
parent
f562a6168f
commit
d729bc0d52
33 changed files with 116 additions and 178 deletions
Split View Show Diff Stats
  1. 6 0
      apis/index.ts
  2. 1 1
      components/AnnotationItem/index.tsx
  3. 3 3
      components/AnnotationList/index.tsx
  4. 0 0
      components/AnnotationList/styled.ts
  5. 3 3
      components/AnnotationSelector/index.tsx
  6. 1 1
      components/AnnotationSelector/styled.ts
  7. 3 3
      components/Drawer/index.tsx
  8. 1 1
      components/Drawer/styled.ts
  9. 5 3
      components/ExpansionPanel/index.tsx
  10. 6 2
      components/ExpansionPanel/styled.ts
  11. 22 30
      components/Navbar/index.tsx
  12. 1 1
      components/Navbar/styled.ts
  13. 3 4
      components/Page/index.tsx
  14. 14 6
      components/Page/styled.ts
  15. 3 3
      components/Pagination/index.tsx
  16. 1 1
      components/Pagination/styled.ts
  17. 3 3
      components/PdfSkeleton/index.tsx
  18. 1 1
      components/PdfSkeleton/styled.ts
  19. 3 3
      components/SelectBox/index.tsx
  20. 1 1
      components/SelectBox/styled.ts
  21. 14 9
      components/Sliders/index.tsx
  22. 1 1
      components/Sliders/styled.ts
  23. 4 4
      components/ThumbnailViewer/index.tsx
  24. 0 22
      components/Toasts/index.tsx
  25. 0 56
      components/Toasts/styled.ts
  26. 3 3
      components/Toolbar/index.tsx
  27. 1 1
      components/Toolbar/styled.ts
  28. 3 3
      components/Tooltip/index.tsx
  29. 1 1
      components/Tooltip/styled.ts
  30. 3 3
      components/Viewer/index.tsx
  31. 1 1
      components/Viewer/styled.ts
  32. 3 3
      components/Watermark/index.tsx
  33. 1 1
      global/sidebarStyled.ts

+ 6 - 0
apis/index.ts
View File 

@@ -1,5 +1,7 @@
 
+import fetch from 'isomorphic-unfetch';
 
 import invokeApi from '../helpers/apiHelpers';
 
 import apiPath from '../constants/apiPath';
 
+import config from '../config';
 
 
 export const initialPdfFile = async (token: string): Promise<any> => invokeApi({
 
   path: apiPath.initPdf,
 
@@ -15,4 +17,8 @@ export const saveFile = async (token: string, data: any): Promise<any> => invoke
 
   data,
 
 });
 
 
+export const fetchXfdf = (token: string): Promise<any> => (
 
+  fetch(`${config.API_HOST}${apiPath.getXfdf}?f=${token}`).then(res => res.text())
 
+);
 
+
 
 export default {};

+ 1 - 1
components/AnnotationItem/index.tsx
View File 

@@ -56,7 +56,7 @@ const AnnotationItem = ({
 
       <AnnotationBox onClick={handleClick}>
 
         <Content>
 
           {
 
-            content.map((textContent: string, index: number): any => {
 
+            content.length && content.map((textContent: string, index: number): any => {
 
               const key = `key_${index}`;
 
               return textContent ? (
 
                 <Inner key={key}>

+ 3 - 3
components/AnnotationList/index.tsx
View File 

@@ -15,7 +15,7 @@ import { downloadFileWithUri, watchScroll } from '../../helpers/utility';
 
 import { getAnnotationText } from '../../helpers/annotation';
 
 import { Separator } from '../../global/otherStyled';
 
 import {
 
-  Wrapper, Head, Body, IconWrapper,
 
+  Container, Head, Body, IconWrapper,
 
 } from '../../global/sidebarStyled';
 
 
 type Props = {
 
@@ -87,7 +87,7 @@ const AnnotationsList: React.FunctionComponent<Props> = ({
 
 
   return (
 
     <Drawer anchor="right" open={isActive}>
 
-      <Wrapper>
 
+      <Container>
 
         <Head>
 
           <IconWrapper>
 
             <Icon glyph="right-back" onClick={close} />
 
@@ -135,7 +135,7 @@ const AnnotationsList: React.FunctionComponent<Props> = ({
 
             })}
 
           </div>
 
         </Body>
 
-      </Wrapper>
 
+      </Container>
 
     </Drawer>
 
   );
 
 };

+ 0 - 0
components/AnnotationList/styled.ts
View File


+ 3 - 3
components/AnnotationSelector/index.tsx
View File 

@@ -9,7 +9,7 @@ import Sliders from '../Sliders';
 
 import DeleteDialog from '../DeleteDialog';
 
 
 import {
 
-  Wrapper, Subtitle, SliderWrapper,
 
+  Container, Subtitle, SliderWrapper,
 
 } from './styled';
 
 
 type Props = {
 
@@ -50,7 +50,7 @@ const index: React.FunctionComponent<Props> = ({
 
   };
 
 
   return (
 
-    <Wrapper>
 
+    <Container>
 
       {
 
         openSlider ? (
 
           <>
 
@@ -86,7 +86,7 @@ const index: React.FunctionComponent<Props> = ({
 
         onCancel={DialogToggle}
 
         onDelete={onDelete}
 
       />
 
-    </Wrapper>
 
+    </Container>
 
   );
 
 };

+ 1 - 1
components/AnnotationSelector/styled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled from 'styled-components';
 
 
-export const Wrapper = styled.div`
 
+export const Container = styled.div`
 
   min-width: 300px;
 
   height: 53px;
 
   border-radius: 2px;

+ 3 - 3
components/Drawer/index.tsx
View File 

@@ -2,7 +2,7 @@ import React from 'react';
 
 
 import Portal from '../Portal';
 
 
-import { Slide, Container } from './styled';
 
+import { Slide, Wrapper } from './styled';
 
 
 type Props = {
 
   anchor?: 'left' | 'top' | 'right' |'bottom';
 
@@ -24,9 +24,9 @@ const Drawer: React.FunctionComponent<Props> = ({
 
       data-testid="drawer"
 
       zIndex={zIndex}
 
     >
 
-      <Container>
 
+      <Wrapper>
 
         {children}
 
-      </Container>
 
+      </Wrapper>
 
     </Slide>
 
   </Portal>
 
 );

+ 1 - 1
components/Drawer/styled.ts
View File 

@@ -56,7 +56,7 @@ export const Slide = styled('div')<{open: boolean; anchor: string; zIndex: numbe
 
   )}
 
 `;
 
 
-export const Container = styled.div`
 
+export const Wrapper = styled.div`
 
   min-width: 267px;
 
   min-height: 267px;
 
   height: 100%;

+ 5 - 3
components/ExpansionPanel/index.tsx
View File 

@@ -1,19 +1,21 @@
 
 import React, { useState, useEffect } from 'react';
 
 
 import {
 
-  Wrapper, Label, ContentWrapper, Content,
 
+  Container, Label, ContentWrapper, Content,
 
 } from './styled';
 
 
 type Props = {
 
   label: React.ReactNode;
 
   children?: React.ReactNode;
 
   isActive?: boolean;
 
+  showBottomBorder?: boolean;
 
 };
 
 
 const Collapse: React.FunctionComponent<Props> = ({
 
   label = '',
 
   children = '',
 
   isActive = false,
 
+  showBottomBorder = false,
 
 }: Props) => {
 
   const [isCollapse, setCollapse] = useState(true);
 
 
@@ -22,7 +24,7 @@ const Collapse: React.FunctionComponent<Props> = ({
 
   }, [isActive]);
 
 
   return (
 
-    <Wrapper>
 
+    <Container showBottomBorder={isActive && showBottomBorder}>
 
       <Label>
 
         {label}
 
       </Label>
 
@@ -33,7 +35,7 @@ const Collapse: React.FunctionComponent<Props> = ({
 
           </Content>
 
         </ContentWrapper>
 
       ) : null}
 
-    </Wrapper>
 
+    </Container>
 
   );
 
 };

+ 6 - 2
components/ExpansionPanel/styled.ts
View File 

@@ -1,11 +1,15 @@
 
-import styled from 'styled-components';
 
+import styled, { css } from 'styled-components';
 
 
 import { color } from '../../constants/style';
 
 
-export const Wrapper = styled.div`
 
+export const Container = styled('div')<{showBottomBorder: boolean}>`
 
   display: inline-flex;
 
   flex-direction: column;
 
   width: 100%;
 
+  
+  ${props => (props.showBottomBorder ? css`
 
+    border-bottom: 1px solid ${color.black12};
 
+  ` : '')}  
 `;
 
 
 export const Label = styled.span`

+ 22 - 30
components/Navbar/index.tsx
View File 

@@ -1,10 +1,9 @@
 
-import React, { useRef, useEffect } from 'react';
 
-import queryString from 'query-string';
 
+import React from 'react';
 
 
 import Icon from '../Icon';
 
 import Typography from '../Typography';
 
 
-import { Wrapper } from './styled';
 
+import { Container } from './styled';
 
 import { Separator } from '../../global/otherStyled';
 
 import data from './data';
 
 
@@ -13,6 +12,7 @@ type Props = {
 
   navbarState: string;
 
   children: React.ReactNode;
 
   displayMode: string;
 
+  fileName: string;
 
 };
 
 
 const Navbar: React.FunctionComponent<Props> = ({
 
@@ -20,32 +20,24 @@ const Navbar: React.FunctionComponent<Props> = ({
 
   navbarState,
 
   children,
 
   displayMode,
 
-}: Props) => {
 
-  const fileName = useRef('');
 
-
 
-  useEffect(() => {
 
-    const parsed = queryString.parse(window.location.search);
 
-    fileName.current = atob(parsed.token as string);
 
-  }, []);
 
-
 
-  return (
 
-    <Wrapper isHidden={displayMode === 'full'}>
 
-      <Typography variant="title">{fileName.current}</Typography>
 
-      {/* <Icon glyph="edit" /> */}
 
-      <Separator />
 
-      {
 
-        data.btnGroup.map(ele => (
 
-          <Icon
 
-            key={ele.key}
 
-            glyph={ele.content}
 
-            isActive={navbarState === ele.content}
 
-            onClick={(): void => { onClick(ele.content); }}
 
-          />
 
-        ))
 
-      }
 
-      {children}
 
-    </Wrapper>
 
-  );
 
-};
 
+  fileName,
 
+}: Props) => (
 
+  <Container isHidden={displayMode === 'full'}>
 
+    <Typography variant="title">{fileName}</Typography>
 
+    {/* <Icon glyph="edit" /> */}
 
+    <Separator />
 
+    {
 
+      data.btnGroup.map(ele => (
 
+        <Icon
 
+          key={ele.key}
 
+          glyph={ele.content}
 
+          isActive={navbarState === ele.content}
 
+          onClick={(): void => { onClick(ele.content); }}
 
+        />
 
+      ))
 
+    }
 
+    {children}
 
+  </Container>
 
+);
 
 
 export default Navbar;

+ 1 - 1
components/Navbar/styled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled, { css } from 'styled-components';
 
 
-export const Wrapper = styled('div')<{isHidden: boolean}>`
 
+export const Container = styled('div')<{isHidden: boolean}>`
 
   position: fixed;
 
   top: 0;
 
   height: 60px;

+ 3 - 4
components/Page/index.tsx
View File 

@@ -6,7 +6,7 @@ import { renderPdfPage } from '../../helpers/pdf';
 
 import { TypeRenderingStates, ViewportType } from '../../constants/type';
 
 
 import {
 
-  PageWrapper, PdfCanvas, AnnotationLayer, TextLayer, LoadingLayer,
 
+  PageWrapper, PdfCanvas, AnnotationLayer, TextLayer, DrawingLayer, LoadingLayer,
 
 } from './styled';
 
 
 type Props = {
 
@@ -72,9 +72,8 @@ const PageView: React.FunctionComponent<Props> = ({
 
           </>
 
         ) : (
 
           <>
 
-            <div>
 
-              <PdfCanvas />
 
-            </div>
 
+            <PdfCanvas />
 
+            <DrawingLayer data-id="drawing-layer" />
 
             <TextLayer data-id="text-layer" />
 
             <AnnotationLayer data-id="annotation-layer">
 
               {annotations}

+ 14 - 6
components/Page/styled.ts
View File 

@@ -25,12 +25,6 @@ export const PdfCanvas = styled.canvas`
 
   height: 100%;
 
 `;
 
 
-export const AnnotationLayer = styled.div`
 
-  position: absolute;
 
-  left: 0;
 
-  top: 0;
 
-`;
 
-
 
 export const TextLayer = styled.div`
 
   position: absolute;
 
   left: 0;
 
@@ -50,4 +44,18 @@ export const TextLayer = styled.div`
 
   }
 
 `;
 
 
+export const AnnotationLayer = styled.div`
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+`;
 
+
 
+export const DrawingLayer = styled.svg`
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+`;
 
+
 
 export const LoadingLayer = styled.div``;

+ 3 - 3
components/Pagination/index.tsx
View File 

@@ -1,7 +1,7 @@
 
 import React, { useEffect, useState } from 'react';
 
 
 import {
 
-  Wrapper, Text, Input, ArrowButton,
 
+  Container, Text, Input, ArrowButton,
 
 } from './styled';
 
 
 type Props = {
 
@@ -52,7 +52,7 @@ const Pagination: React.FunctionComponent<Props> = ({
 
   }, [currentPage]);
 
 
   return (
 
-    <Wrapper>
 
+    <Container>
 
       <Text>Page</Text>
 
       <ArrowButton onClick={handleLeftClick} variant="left" />
 
       <Input
 
@@ -67,7 +67,7 @@ const Pagination: React.FunctionComponent<Props> = ({
 
         {' '}
 
         {totalPage}
 
       </Text>
 
-    </Wrapper>
 
+    </Container>
 
   );
 
 };

+ 1 - 1
components/Pagination/styled.ts
View File 

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 
 import { color } from '../../constants/style';
 
 
-export const Wrapper = styled.div`
 
+export const Container = styled.div`
 
   display: inline-flex;
 
   align-items: center;
 
 `;

+ 3 - 3
components/PdfSkeleton/index.tsx
View File 

@@ -3,10 +3,10 @@ import React from 'react';
 
 import Box from '../Box';
 
 import Skeleton from '../Skeleton';
 
 
-import { Wrapper } from './styled';
 
+import { Container } from './styled';
 
 
 const PdfSkeleton: React.FunctionComponent = () => (
 
-  <Wrapper>
 
+  <Container>
 
     <Skeleton variant="rect" width="50%" height="36px" />
 
     <Skeleton variant="rect" width="45%" height="12px" />
 
     <Skeleton variant="rect" width="40%" height="12px" />
 
@@ -35,7 +35,7 @@ const PdfSkeleton: React.FunctionComponent = () => (
 
       <Skeleton variant="rect" width="90%" height="14px" />
 
       <Skeleton variant="rect" width="85%" height="14px" />
 
     </Box>
 
-  </Wrapper>
 
+  </Container>
 
 );
 
 
 export default PdfSkeleton;

+ 1 - 1
components/PdfSkeleton/styled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled from 'styled-components';
 
 
-export const Wrapper = styled.div`
 
+export const Container = styled.div`
 
   padding: 50px 40px;
 
   background-color: white;
 
   width: 730px;

+ 3 - 3
components/SelectBox/index.tsx
View File 

@@ -5,7 +5,7 @@ import Icon from '../Icon';
 
 import Divider from '../Divider';
 
 
 import {
 
-  Wrapper,
 
+  Container,
 
   Selected,
 
   Content,
 
   InputContent,
 
@@ -88,7 +88,7 @@ const SelectBox: React.FunctionComponent<Props> = ({
 
   });
 
 
   return (
 
-    <Wrapper width={width} style={style}>
 
+    <Container width={width} style={style}>
 
       <Selected
 
         ref={selectRef}
 
         onMouseDown={handleClick}
 
@@ -128,7 +128,7 @@ const SelectBox: React.FunctionComponent<Props> = ({
 
           </OptionWrapper>
 
         ) : null
 
       }
 
-    </Wrapper>
 
+    </Container>
 
   );
 
 };

+ 1 - 1
components/SelectBox/styled.ts
View File 

@@ -2,7 +2,7 @@
 
 import styled from 'styled-components';
 
 import { color } from '../../constants/style';
 
 
-export const Wrapper = styled('div')<{width: string}>`
 
+export const Container = styled('div')<{width: string}>`
 
   position: relative;
 
   cursor: pointer;
 
   font-size: 12px;

+ 14 - 9
components/Sliders/index.tsx
View File 

@@ -7,13 +7,12 @@ import {
 
 } from 'rxjs/operators';
 
 
 import {
 
-  Container, Wrapper, Rail, Track,
 
+  OuterWrapper, Wrapper, Rail, Track,
 
 } from './styled';
 
 
 type Props = {
 
   color?: 'primary' | 'secondary';
 
-  max?: number;
 
-  min?: number;
 
+  maximum?: number;
 
   defaultValue?: number;
 
   disabled?: boolean;
 
   onChange?: (value: number) => void;
 
@@ -22,6 +21,7 @@ type Props = {
 
 const Sliders: React.FunctionComponent<Props> = ({
 
   defaultValue = 0,
 
   onChange,
 
+  maximum = 100,
 
 }: Props) => {
 
   const sliderRef = useRef<HTMLDivElement>(null);
 
   const [valueState, setValueState] = useState(defaultValue);
 
@@ -35,8 +35,9 @@ const Sliders: React.FunctionComponent<Props> = ({
 
 
     if (slider) {
 
       const { width, left } = slider.getBoundingClientRect();
 
-      const value = (event.clientX - left) / width;
 
-      let percent = parseValueToPercent(value);
 
+      const moveDistance = event.clientX - left;
 
+      const moveRate = moveDistance / width;
 
+      let percent = parseValueToPercent(moveRate);
 
 
       if (percent <= 0) {
 
         percent = 0;
 
@@ -45,7 +46,10 @@ const Sliders: React.FunctionComponent<Props> = ({
 
       }
 
 
       setValueState(percent);
 
-      if (onChange) onChange(percent);
 
+      if (onChange) {
 
+        const value = Math.floor(percent * (maximum * 0.01));
 
+        onChange(value);
 
+      }
 
     }
 
   };
 
 
@@ -72,11 +76,12 @@ const Sliders: React.FunctionComponent<Props> = ({
 
   }, []);
 
 
   useEffect(() => {
 
-    setValueState(defaultValue);
 
+    const percent = parseValueToPercent(defaultValue / maximum);
 
+    setValueState(percent);
 
   }, []);
 
 
   return (
 
-    <Container>
 
+    <OuterWrapper>
 
       <Wrapper
 
         ref={sliderRef}
 
         onMouseDown={handleMouseDown}
 
@@ -87,7 +92,7 @@ const Sliders: React.FunctionComponent<Props> = ({
 
           isActive={isActive}
 
         />
 
       </Wrapper>
 
-    </Container>
 
+    </OuterWrapper>
 
   );
 
 };

+ 1 - 1
components/Sliders/styled.ts
View File 

@@ -1,7 +1,7 @@
 
 import styled, { css } from 'styled-components';
 
 import { color } from '../../constants/style';
 
 
-export const Container = styled.div`
 
+export const OuterWrapper = styled.div`
 
   padding: 10px;
 
 `;

+ 4 - 4
components/ThumbnailViewer/index.tsx
View File 

@@ -8,7 +8,7 @@ import { ScrollStateType } from '../../constants/type';
 
 import { watchScroll, scrollIntoView } from '../../helpers/utility';
 
 
 import {
 
-  Wrapper, Head, Body, IconWrapper,
 
+  Container, Head, Body, IconWrapper,
 
 } from '../../global/sidebarStyled';
 
 import { ThumbnailsWrapper } from './styled';
 
 
@@ -55,7 +55,7 @@ const Thumbnails: React.FunctionComponent<Props> = ({
 
   };
 
 
   const updateThumbnails = (): void => {
 
-    const renderingIndexQueue = _.range(scrollIndex - 1, scrollIndex + 3);
 
+    const renderingIndexQueue = _.range(scrollIndex - 2, scrollIndex + 4);
 
     let index = scrollIndex - 5;
 
     const end = scrollIndex + 5;
 
 
@@ -107,7 +107,7 @@ const Thumbnails: React.FunctionComponent<Props> = ({
 
 
   return (
 
     <Drawer anchor="right" open={isActive}>
 
-      <Wrapper>
 
+      <Container>
 
         <Head>
 
           <IconWrapper>
 
             <Icon glyph="right-back" onClick={close} />
 
@@ -118,7 +118,7 @@ const Thumbnails: React.FunctionComponent<Props> = ({
 
             {elements}
 
           </ThumbnailsWrapper>
 
         </Body>
 
-      </Wrapper>
 
+      </Container>
 
     </Drawer>
 
   );
 
 };

+ 0 - 22
components/Toasts/index.tsx
View File 

@@ -1,22 +0,0 @@
 
-import React from 'react';
 
-
 
-import { Wrapper, Message, Action } from './styled';
 
-
 
-type Props = {
 
-  message: string;
 
-  appearance?: 'default';
 
-  action?: React.ReactNode;
 
-};
 
-
 
-const Toasts: React.FunctionComponent<Props> = ({
 
-  message,
 
-  appearance = 'default',
 
-  action,
 
-}: Props) => (
 
-  <Wrapper appearance={appearance}>
 
-    <Message>{message}</Message>
 
-    {action ? <Action>{action}</Action> : null}
 
-  </Wrapper>
 
-);
 
-
 
-export default Toasts;

+ 0 - 56
components/Toasts/styled.ts
View File 

@@ -1,56 +0,0 @@
 
-import styled, { css } from 'styled-components';
 
-import { color } from '../../constants/style';
 
-
 
-const staticStyles = css`
 
-  border-radius: 4px;
 
-  display: inline-flex;
 
-  flex-wrap: wrap;
 
-  align-items: center;
 
-  justify-content: flex-start;
 
-  padding: 6px 16px;
 
-  font-size: 14px;
 
-  z-index: 1400;
 
-  min-width: 288px;
 
-  max-width: 330px;
 
-  flex-grow: initial;
 
-  width: auto;
 
-
 
-  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 4px 12px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
 
-`;
 
-
 
-const theme: {[index: string]: any} = {
 
-  default: css`
 
-    color: ${color.black87};
 
-    background-color: white;
 
-  `,
 
-  success: css`
 
-    color: ${color.black87};
 
-    background-color: ${color.success};
 
-  `,
 
-  error: css`
 
-    color: ${color.black87};
 
-    background-color: ${color.error};
 
-  `,
 
-  warning: css`
 
-    color: ${color.black87};
 
-    background-color: ${color.warning};
 
-  `,
 
-};
 
-
 
-export const Wrapper = styled('div')<{appearance: string}>`
 
-  ${staticStyles}
 
-  ${props => theme[props.appearance]}
 
-`;
 
-
 
-export const Message = styled.div`
 
-  padding: 8px 0;
 
-`;
 
-
 
-export const Action = styled.div`
 
-  display: flex;
 
-  align-items: center;
 
-  margin-left: auto;
 
-  padding-left: 16px;
 
-  margin-right: -8px;
 
-`;

+ 3 - 3
components/Toolbar/index.tsx
View File 

@@ -7,7 +7,7 @@ import Divider from '../Divider';
 
 import { SelectOptionType, ViewportType } from '../../constants/type';
 
 import { scaleCheck } from '../../helpers/utility';
 
 
-import { Wrapper, ToggleButton } from './styled';
 
+import { Container, ToggleButton } from './styled';
 
 import data from './data';
 
 
 type Props = {
 
@@ -68,7 +68,7 @@ const Toolbar: React.FunctionComponent<Props> = ({
 
 
   return (
 
     <>
 
-      <Wrapper isHidden={displayMode === 'full'}>
 
+      <Container isHidden={displayMode === 'full'}>
 
         <Pagination totalPage={totalPage} currentPage={currentPage} onChange={setCurrentPage} />
 
         <Divider />
 
         <Icon glyph="hand" style={{ width: '30px' }} onClick={handleHandClick} />
 
@@ -78,7 +78,7 @@ const Toolbar: React.FunctionComponent<Props> = ({
 
         <Divider />
 
         <Icon glyph="rotate-left" style={{ width: '30px' }} onClick={handleCounterclockwiseRotation} />
 
         <Icon glyph="rotate-right" style={{ width: '30px' }} onClick={handleClockwiseRotation} />
 
-      </Wrapper>
 
+      </Container>
 
       <ToggleButton>
 
         {
 
           displayMode === 'normal' ? (

+ 1 - 1
components/Toolbar/styled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled, { css } from 'styled-components';
 
 
-export const Wrapper = styled('div')<{isHidden: boolean}>`
 
+export const Container = styled('div')<{isHidden: boolean}>`
 
   position: fixed;
 
   top: 86px;
 
   left: 267px;

+ 3 - 3
components/Tooltip/index.tsx
View File 

@@ -1,7 +1,7 @@
 
 import React from 'react';
 
 import { Manager, Reference, Popper } from 'react-popper';
 
 
-import { TargetContainer, TooltipContainer, Arrow } from './styled';
 
+import { TargetWrapper, TooltipContainer, Arrow } from './styled';
 
 import Portal from '../Portal';
 
 
 type Props = {
 
@@ -18,9 +18,9 @@ const Tooltip: React.FunctionComponent<Props> = ({
 
   <Manager>
 
     <Reference>
 
       {({ ref }): React.ReactElement => (
 
-        <TargetContainer ref={ref}>
 
+        <TargetWrapper ref={ref}>
 
           {children}
 
-        </TargetContainer>
 
+        </TargetWrapper>
 
       )}
 
     </Reference>
 
     <Portal>

+ 1 - 1
components/Tooltip/styled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled from 'styled-components';
 
 
-export const TargetContainer = styled.div`
 
+export const TargetWrapper = styled.div`
 
   display: inline-block;
 
   margin-top: 100px;
 
   margin-left: 100px;

+ 3 - 3
components/Viewer/index.tsx
View File 

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 
 import { ViewportType } from '../../constants/type';
 
 
-import { Container, Wrapper } from './styled';
 
+import { OuterWrapper, Wrapper } from './styled';
 
 
 type Props = {
 
   children: React.ReactNode;
 
@@ -21,11 +21,11 @@ const Viewer = forwardRef<Ref, Props>(({
 
   const width = (Math.abs(rotation) / 90) % 2 === 1 ? viewport.height : viewport.width;
 
 
   return (
 
-    <Container ref={ref} isFull={displayMode === 'full'}>
 
+    <OuterWrapper ref={ref} isFull={displayMode === 'full'}>
 
       <Wrapper width={width}>
 
         {children}
 
       </Wrapper>
 
-    </Container>
 
+    </OuterWrapper>
 
   );
 
 });

+ 1 - 1
components/Viewer/styled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled from 'styled-components';
 
 
-export const Container = styled('div')<{isFull: boolean}>`
 
+export const OuterWrapper = styled('div')<{isFull: boolean}>`
 
   position: fixed;
 
   left: ${props => (props.isFull ? 0 : '267px')};
 
   right: 0;

+ 3 - 3
components/Watermark/index.tsx
View File 

@@ -12,7 +12,7 @@ import TextField from '../TextField';
 
 
 import { BtnWrapper, ContentWrapper } from './styled';
 
 import {
 
-  Wrapper, Head, Body, Footer, IconWrapper,
 
+  Container, Head, Body, Footer, IconWrapper,
 
 } from '../../global/sidebarStyled';
 
 import { Group, SliderWrapper } from '../../global/toolStyled';
 
 
@@ -49,7 +49,7 @@ const Watermark: React.FunctionComponent<Props> = ({
 
       </Button>
 
     </BtnWrapper>
 
     <Drawer open={isActive} anchor="left" zIndex={4}>
 
-      <Wrapper>
 
+      <Container>
 
         <Head>
 
           <IconWrapper>
 
             <Icon glyph="left-back" onClick={onClick} />
 
@@ -91,7 +91,7 @@ const Watermark: React.FunctionComponent<Props> = ({
 
           <Button appearance="primary">Save</Button>
 
           <Button appearance="danger-link">Remove watermark</Button>
 
         </Footer>
 
-      </Wrapper>
 
+      </Container>
 
     </Drawer>
 
   </>
 
 );

+ 1 - 1
global/sidebarStyled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled from 'styled-components';
 
 
-export const Wrapper = styled.div`
 
+export const Container = styled.div`
 
   margin-top: 60px;
 
   padding: 24px 8px;
 
   position: relative;