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';