feat: add expandable table, new icons

new-lamassu-admin/src/components/expandable-table/ExpTable.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react'
+import { map, set } from 'lodash/fp'
+import classnames from 'classnames'
+import uuidv1 from 'uuid/v1'
+import { makeStyles } from '@material-ui/core/styles'
+
+import { Table, THead, Tr, TBody, Td, Th } from '../fake-table/Table'
+import { ReactComponent as ExpandClosedIcon } from '../../styling/icons/action/expand/closed.svg'
+import { ReactComponent as ExpandOpenIcon } from '../../styling/icons/action/expand/open.svg'
+import { mainWidth } from '../../styling/variables'
+
+const styles = {
+  hideDetailsRow: {
+    display: 'none'
+  },
+  expandButton: {
+    border: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    padding: 4
+  }
+}
+
+const useStyles = makeStyles(styles)
+
+const ExpRow = ({ id, columns, details, sizes, expanded, className, expandRow, ...props }) => {
+  const classes = useStyles()
+
+  const detailsRowClasses = {
+    [classes.detailsRow]: true,
+    [classes.hideDetailsRow]: expanded
+  }
+
+  return (
+    <>
+      <Tr className={classnames(className)} {...props}>
+        {columns.map((col, idx) => (
+          <Td key={uuidv1()} size={sizes[idx]} className={col.className} textAlign={col.textAlign}>{col.value}</Td>
+        ))}
+        <Td size={sizes[sizes.length - 1]}>
+          <button onClick={() => expandRow(id)} className={classes.expandButton}>
+            {expanded && <ExpandOpenIcon />}
+            {!expanded && <ExpandClosedIcon />}
+          </button></Td>
+      </Tr>
+      <Tr className={classnames(detailsRowClasses)}>
+        <Td size={mainWidth}>
+          {details}
+        </Td>
+      </Tr>
+    </>
+  )
+}
+
+/* headers = [{ value, className, textAlign }]
+ * rows = [{ columns = [{ value, className, textAlign }], details, className, error, errorMessage }]
+ */
+const ExpTable = ({ headers = [], rows = [], sizes = [], className, ...props }) => {
+  const [rowStates, setRowStates] = useState(null)
+
+  useEffect(() => {
+    setRowStates(rows && rows.map((x) => { return { id: x.id, expanded: false } }))
+  }, [rows])
+
+  const expandRow = (id) => {
+    setRowStates(map(r => set('expanded', r.id === id ? !r.expanded : false, r)))
+  }
+
+  return (
+    <Table className={classnames(className)}>
+      <THead>
+        {headers.map((header, idx) => (
+          <Th key={uuidv1()} size={sizes[idx]} className={header.className} textAlign={header.textAlign}>{header.value}</Th>
+        ))}
+      </THead>
+      <TBody>
+        {rowStates && rowStates.map((r, idx) => {
+          const row = rows[idx]
+
+          return (
+            <ExpRow
+              key={uuidv1()}
+              id={r.id}
+              columns={row.columns}
+              details={row.details}
+              sizes={sizes}
+              expanded={r.expanded}
+              className={row.className}
+              expandRow={expandRow}
+              error={row.error}
+              errorMessage={row.errorMessage}
+            />
+          )
+        })}
+      </TBody>
+    </Table>
+  )
+}
+
+export default ExpTable