Add strike-through to deleted files

berzniz · Oct 10, 2018 · 504a824 · 504a824
1 parent 3a969c1
commit 504a824
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/js/components/branch.jsx b/src/js/components/branch.jsx
@@ -2,10 +2,10 @@ import React from 'react'
 import TreeView from 'react-treeview'
 import File from './file'
 
-const Branch = ({ nodeLabel, list, href, hasComments, diffElement, visibleElement }) => {
+const Branch = ({ nodeLabel, list, href, hasComments, isDeleted, diffElement, visibleElement }) => {
   if (href) {
     const isVisible = (diffElement === visibleElement)
-    return <File name={nodeLabel} href={href} hasComments={hasComments} isVisible={isVisible} />
+    return <File name={nodeLabel} href={href} hasComments={hasComments} isDeleted={isDeleted} isVisible={isVisible} />
   }
 
   return (

diff --git a/src/js/components/file.jsx b/src/js/components/file.jsx
@@ -4,10 +4,14 @@ import fileIcons from 'file-icons-js'
 const highlightColor = '#ebebeb'
 const transparentColor = 'transparent'
 
-const File = ({ name, href, hasComments, isVisible }) => {
+const File = ({ name, href, hasComments, isDeleted, isVisible }) => {
   const className = fileIcons.getClassWithColor(name)
+  const style = {
+    background: isVisible ? highlightColor : transparentColor,
+    textDecoration: isDeleted ? 'line-through' : null
+  }
   return (
-    <div className='github-pr-file' style={{ background: isVisible ? highlightColor : transparentColor }}>
+    <div className='github-pr-file' style={style}>
       <span className={`icon ${className}`} />
       <a href={href} className='link-gray-dark'>{name}</a> {hasComments ? ' 💬' : ''}
     </div>

diff --git a/src/js/lib.js b/src/js/lib.js
@@ -34,6 +34,16 @@ const hasCommentsForFileIndex = (fileIndex) => {
   return diffTable.querySelectorAll('.inline-comments').length
 }
 
+const isDeletedForFileIndex = (fileIndex) => {
+  const diffTable = document.getElementById(`diff-${fileIndex}`)
+  if (!diffTable) {
+    return false
+  }
+
+  const hiddenDiffReason = diffTable.querySelector('.hidden-diff-reason')
+  return hiddenDiffReason && (hiddenDiffReason.innerText.includes('file was deleted'))
+}
+
 export const folderConcat = (node) => {
   const isFileOrEmpty = (node.list === undefined || node.list.length === 0 || (node.href !== null && node.href !== undefined))
   if (isFileOrEmpty) {
@@ -47,6 +57,7 @@ export const folderConcat = (node) => {
     if (isLastCollapsedIsFolder) {
       node.nodeLabel = node.nodeLabel + '/' + collapsed.nodeLabel
       node.hasComments = collapsed.hasComments || node.hasComments
+      node.isDeleted = collapsed.isDeleted || node.isDeleted
       node.list = collapsed.list
     }
     return node
@@ -74,13 +85,15 @@ export const createFileTree = () => {
       let node = location.list.find(node => node.nodeLabel === part)
       if (!node) {
         const hasComments = (hasCommentsForFileIndex(fileIndex) > 0)
+        const isDeleted = isDeletedForFileIndex(fileIndex)
         const diffElement = document.getElementById(`diff-${fileIndex}`)
         tree.diffElements.push(diffElement)
         node = {
           nodeLabel: part,
           list: [],
           href: (index === parts.length - 1) ? href : null,
           hasComments,
+          isDeleted,
           diffElement
         }
         location.list.push(node)