feat(tableDiff): initial tableDiff component and story

app/components/compare/LineDiff.tsx

@@ -24,7 +24,7 @@ const LineDiff: React.FunctionComponent<LineDiffProps> = (props: LineDiffProps)
             return (
               <tr key={i}>
                 <td colSpan="3" className='truncated'>
-                  <i>Additional Content Hidden</i>
+                  <span>Additional Content Hidden</span>
                 </td>
               </tr>
             )
@@ -46,7 +46,9 @@ const LineDiff: React.FunctionComponent<LineDiffProps> = (props: LineDiffProps)
           return (<tr key={i} className={changeType}>
             <td className="line_count">{ changeType !== 'add' && leftCount}</td>
             <td className="line_count">{ changeType !== 'rem' && rightCount}</td>
-            <td className="text">{p[1]}</td>
+            <td className={changeType}>
+              <span className="text">{p[1]}</span>
+            </td>
           </tr>)
         })}
       </table>
@@ -63,8 +65,8 @@ const ChangeStat: React.FunctionComponent<ChangeStatProps> = (props: ChangeStatP
   const { added, removed } = props
   return (
     <span className="change_stat">
-      <b className="added">+{added}</b>
-      <b className="removed">-{removed}</b>
+      <b className="add">+{added}</b>
+      <b className="rem">-{removed}</b>
     </span>
   )
 }

app/components/compare/TableDiff.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react'
+
+interface TableDiffProps {
+  data: any
+}
+
+const initialState: Record<string, any> = {}
+
+const TableDiff: React.FunctionComponent<TableDiffProps> = (props: TableDiffProps) => {
+  const { data } = props
+  const [opened, setOpened] = useState(initialState)
+
+  let count: number
+  return (
+    <div className='table_diff'>
+      <div className='header'>
+        <b>{data.meta['---']}</b>
+        <div style={{ 'float': 'right' }}>
+          <a onClick={() => setOpened({ 'all': !(opened['all']) })}>{ opened['all'] ? 'collapse all changes' : 'expand all changes'}</a>
+          <ChangeStat added={data.meta.added} removed={data.meta.removed} />
+        </div>
+      </div>
+      <table className='content'>
+        <thead>
+          <tr>
+            <th className="line_count">#</th>
+            <th className="data">1</th>
+            <th className="data">2</th>
+            <th className="data">3</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.patch.map((p, i) => {
+            if (Array.isArray(p[0])) {
+              count = 1
+              // leftCount = p[0][0][0]
+              // rightCount = p[0][1][0]
+              return (
+                <tr key={i}>
+                  <td colSpan={4} className='truncated'>
+                    <span>Additional Content Hidden</span>
+                  </td>
+                </tr>
+              )
+            }
+
+            let changeType
+            if (p[0] === '-') {
+              changeType = 'rem'
+              const open = (opened[`${i}`] || opened['all'])
+              if (open) {
+                return (
+                  <tr key={i} className={'previous_row'} onClick={() => {
+                    const key = `${i}`
+                    const open = (opened[key])
+                    setOpened({ [key]: !open })
+                  }}>
+                    <td className="line_count rem">
+                      <div className="line_num">{count + 1}</div>
+                    </td>
+                    {p[1].map((el, i) => (<td key={i} className="rem">{el}</td>))}
+                  </tr>
+                )
+              }
+
+              return (
+                <tr key={i} className={'collapsed_row'} onClick={() => {
+                  const key = `${i}`
+                  const open = (opened[key])
+                  setOpened({ [key]: !open })
+                }}><td colSpan={4} className="rem"></td>
+                </tr>
+              )
+            } else if (p[0] === '+') {
+              count++
+              changeType = 'add'
+            } else {
+              count++
+              changeType = 'ctx'
+            }
+
+            return (<tr key={i} className={changeType}>
+              <td className="line_count">
+                <div className="line_num">{count}</div>
+              </td>
+              {p.length === 2 && p[1].map((el, i) => {
+                return <td key={i}>{el}</td>
+              })}
+              {p.length === 3 && foldRowChanges(p[2]).map((change, i) => {
+                const row = count
+                const col = i
+                return <td key={i} className={change.type}>
+                  {change.prev && <div className={`${(opened[`${row}.${col}`] || opened['all']) ? 'previous_cell' : 'collapsed_cell'} rem`} onClick={() => {
+                    const key = `${row}.${col}`
+                    const open = (opened[key])
+                    setOpened({ [key]: !open })
+                  }}>{change.prev.value}</div>}
+                  {change.value}
+                </td>
+              })}
+            </tr>)
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+const foldRowChanges = (patch: any[]): any[] => {
+  let prev: any
+  return patch.reduce((acc: any[], a) => {
+    let type: string
+    if (a[0] === '-') {
+      type = 'rem'
+    } else if (a[0] === '+') {
+      type = 'add'
+    } else {
+      type = 'ctx'
+    }
+
+    const change = { type, value: a[1] }
+    if (change.type === 'rem') {
+      prev = change
+      return acc
+    }
+
+    if (prev) {
+      change.prev = prev
+      prev = undefined
+    }
+
+    acc.push(change)
+    return acc
+  }, [])
+}
+
+interface ChangeStatProps {
+  added: number
+  removed: number
+}
+
+const ChangeStat: React.FunctionComponent<ChangeStatProps> = (props: ChangeStatProps) => {
+  const { added, removed } = props
+  return (
+    <span className="change_stat">
+      <b className="add">+{added}</b>
+      <b className="rem">-{removed}</b>
+    </span>
+  )
+}
+
+export default TableDiff

app/scss/_lineDiff.scss

@@ -13,35 +13,72 @@
     border-bottom: 1px solid #ddd;
   }
 
-  .add {
-    background: #86FDA250;
-  }
-  .rem {
-    background: #FB9EA850;
+  .line_count {
+    width: 3%;
+    text-align: right;
+    color: #aaa;
   }
 
-  .line_count {
+  .line_num {
+    max-width: 50px;
     width: 50px;
-    text-align: right;
   }
 
   .text {
     padding-left: 20px;
   }
 
   .truncated {
+    background: #ededed;
+    padding: 5px 0;
     text-align: center;
     width: 100%;
   }
 
   table {
     font-family: 'Courier New', Courier, monospace;
+    width: 100%;
+
     tr {
       height: 20px;
+
+      td .text {
+        margin-left: 20px;
+      }
+
+      td.add:before {
+        position: absolute;
+        margin-left: 15px;
+        color: #aaa;
+        content: "+";
+      }
+
+      td.rem:before {
+        position: absolute;
+        margin-left: 15px;
+        color: #aaa;
+        content: "-";
+      }
+    }
+
+    .add {
+      background: #86FDA250;
+    }
+    .rem {
+      background: #FB9EA850;
     }
   }
 }
 
 .change_stat {
+  b {
+    margin-right: 8px;
+  }
 
+  .add {
+    color: #51B300;
+  }
+  .rem {
+    color: #A60000;
+  }
 }

app/scss/_tableDiff.scss

@@ -0,0 +1,100 @@
+
+
+.table_diff {
+  min-width: 600px;
+  background: white;
+  box-shadow: 0 0 4px #00000015;
+  margin: 20px auto;
+
+  .header {
+    width: 100%;
+    height: 50px;
+    padding: 15px 10px 10px 10px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .line_count {
+    width: 3%;
+    text-align: right;
+    color: #aaa;
+  }
+
+  .line_num {
+    max-width: 50px;
+    width: 50px;
+  }
+
+  .text {
+    padding-left: 20px;
+  }
+
+  .truncated {
+    background: #ededed;
+    padding: 5px 0;
+    text-align: center;
+    width: 100%;
+  }
+
+  table {
+    font-weight: 400;
+    width: 100%;
+
+    .add {
+      background: #86FDA250;
+    }
+
+    .rem {
+      background: #FB9EA850;
+    }
+
+    .collapsed_row {
+      cursor: pointer;
+      height: 2px;
+      td {
+        height: 2px;
+        background: #A60000;
+        overflow: hidden;
+      }
+    }
+    .previous_row {
+      cursor: pointer;
+    }
+
+    .collapsed_cell {
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      overflow: hidden;
+      width: 5px;
+      background: #A60000;
+      padding-left: 5px;
+    }
+    .previous_cell {
+      cursor: pointer;
+    }
+
+    tr {
+      height: 20px;
+      td {
+        position: relative;
+        border: 1px solid #eee;
+        padding: 2px 10px;
+      }
+    }
+  }
+}
+
+.change_stat {
+  b {
+    margin-right: 8px;
+  }
+
+  .add {
+    color: #51B300;
+  }
+  .rem {
+    color: #A60000;
+  }
+}

app/scss/style.scss

@@ -34,6 +34,7 @@
 @import "metadata";
 @import "readme";
 @import "lineDiff";
+@import "tableDiff";
 @import "stats";
 
 @import '~easymde/dist/easymde.min.css';