Merge pull request #102 from KevinHu2014/feat/add_decoration

Add Decoration to DiffView

Author: pvinis

src/__tests__/__snapshots__/App.spec.js.snap

@@ -3,34 +3,34 @@
 exports[`renders without crashing 1`] = `
 <div>
   <div
-    class="sc-jWBwVP eMzqrb"
+    class="sc-cMljjf kjukSP"
   >
     <div
-      class="ant-card sc-brqgnP jqshtE ant-card-bordered"
+      class="ant-card sc-jAaTju jExkfr ant-card-bordered"
     >
       <div
         class="ant-card-body"
       >
         <div
-          class="sc-cMljjf bqDeCs"
+          class="sc-jDwBTQ iPrvAS"
         >
           <img
             alt="React Native upgrade helper logo"
-            class="sc-jAaTju iQnFlP"
+            class="sc-gPEVay isecjX"
             src="logo.svg"
             title="React Native upgrade helper logo"
           />
           <a
             href="https://react-native-community.github.io/upgrade-helper"
           >
             <h1
-              class="sc-jDwBTQ kdxkQr"
+              class="sc-iRbamj fwveLy"
             >
               React Native upgrade helper
             </h1>
           </a>
           <div
-            class="sc-gPEVay bKLGYK"
+            class="sc-jlyJG dRjxEc"
           >
             <div>
               ReactGitHubBtn - 

src/__tests__/components/__snapshots__/Home.spec.js.snap

@@ -3,34 +3,34 @@
 exports[`renders without crashing 1`] = `
 <div>
   <div
-    class="sc-jWBwVP eMzqrb"
+    class="sc-cMljjf kjukSP"
   >
     <div
-      class="ant-card sc-brqgnP jqshtE ant-card-bordered"
+      class="ant-card sc-jAaTju jExkfr ant-card-bordered"
     >
       <div
         class="ant-card-body"
       >
         <div
-          class="sc-cMljjf bqDeCs"
+          class="sc-jDwBTQ iPrvAS"
         >
           <img
             alt="React Native upgrade helper logo"
-            class="sc-jAaTju iQnFlP"
+            class="sc-gPEVay isecjX"
             src="logo.svg"
             title="React Native upgrade helper logo"
           />
           <a
             href="https://react-native-community.github.io/upgrade-helper"
           >
             <h1
-              class="sc-jDwBTQ kdxkQr"
+              class="sc-iRbamj fwveLy"
             >
               React Native upgrade helper
             </h1>
           </a>
           <div
-            class="sc-gPEVay bKLGYK"
+            class="sc-jlyJG dRjxEc"
           >
             <div>
               ReactGitHubBtn - 

src/components/common/Diff/Diff.js

@@ -1,6 +1,12 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Diff as RDiff, Hunk, markEdits, tokenize } from 'react-diff-view'
+import {
+  Diff as RDiff,
+  Hunk,
+  markEdits,
+  tokenize,
+  Decoration as DiffDecoration
+} from 'react-diff-view'
 import DiffHeader from './DiffHeader'
 import { getComments } from './DiffComment'
 
@@ -11,6 +17,17 @@ const Container = styled.div`
   margin-top: 16px;
 `
 
+const More = styled.div`
+  background-color: #f1f8ff;
+  margin-left: 30px;
+  padding-left: 4px;
+  color: '#1b1f23b3';
+`
+
+const Decoration = styled(DiffDecoration)`
+  background-color: #dbedff;
+`
+
 const DiffView = styled(RDiff)`
   .diff-gutter-col {
     width: 30px;
@@ -122,14 +139,17 @@ const Diff = ({
 
             const tokens = tokenize(hunks, options)
 
-            return hunks.map(hunk => (
+            return hunks.map(hunk => [
+              <Decoration key={'decoration-' + hunk.content}>
+                <More>{hunk.content}</More>
+              </Decoration>,
               <Hunk
                 key={hunk.content}
                 hunk={hunk}
                 tokens={tokens}
                 gutterEvents={{ onClick: onToggleChangeSelection }}
               />
-            ))
+            ])
           }}
         </DiffView>
       )}