fix: mobile tables refactored

solana-labs · Oct 24, 2019 · 0f64139 · 0f64139
1 parent c109e89
commit 0f64139
Show file tree

Hide file tree

Showing 13 changed files with 282 additions and 321 deletions.
diff --git a/src/v2/components/Accounts/Table/index.jsx b/src/v2/components/Accounts/Table/index.jsx
@@ -12,6 +12,7 @@ import TypeLabel from 'v2/components/UI/TypeLabel';
 import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import TableCard from 'v2/components/UI/TableCard';
 
 import useStyles from './styles';
 
@@ -70,26 +71,22 @@ const AccountsTable = ({
   };
 
   const renderCard = account => {
-    return (
-      <div className={classes.card}>
-        <ul>
-          <li>
-            <div className={classes.cardTitle}>Account id</div>
-            <div>{account.programId}</div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Type</div>
-            <div>
-              TODO <TypeLabel type="other" label="other" />
-            </div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Time</div>
-            <div title={account.timestamp}>{asTime(account.timestamp)}</div>
-          </li>
-        </ul>
-      </div>
-    );
+    const {programId, timestamp, pubkey} = account;
+    const data = [
+      {
+        label: 'Account id',
+        value: programId,
+      },
+      {
+        label: 'Type',
+        value: <TypeLabel type="other" label="TODO" />,
+      },
+      {
+        label: 'Time',
+        value: asTime(timestamp),
+      },
+    ];
+    return <TableCard vertical={separate} key={pubkey} data={data} />;
   };
 
   return (

diff --git a/src/v2/components/Blocks/Table/index.jsx b/src/v2/components/Blocks/Table/index.jsx
@@ -12,6 +12,8 @@ import {map} from 'lodash/fp';
 import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import ValidatorName from 'v2/components/UI/ValidatorName';
+import TableCard from 'v2/components/UI/TableCard';
+
 import useStyles from './styles';
 
 const fields: TableHeadProps[] = [
@@ -86,40 +88,34 @@ const BlocksTable = ({
   };
 
   const renderCard = block => {
-    return (
-      <div className={classes.card} key={block.id}>
-        <ul>
-          <li>
-            <div className={classes.cardTitle}>Block</div>
-            <div>{block.id}</div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Slot</div>
-            <div>{block.slot}</div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Time</div>
-            <div title={block.timestamp}>{asTime(block.timestamp)}</div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Transactions</div>
-            <div>TODO</div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Confidence</div>
-            <div>TODO</div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Leader</div>
-            <ValidatorName
-              pubkey={block.leader}
-              name={block.leader}
-              avatar=""
-            />
-          </li>
-        </ul>
-      </div>
-    );
+    const {id, slot, timestamp, leader} = block;
+    const data = [
+      {
+        label: 'Block',
+        value: id,
+      },
+      {
+        label: 'Slot',
+        value: slot,
+      },
+      {
+        label: 'Time',
+        value: asTime(timestamp),
+      },
+      {
+        label: 'Transactions',
+        value: 'TODO',
+      },
+      {
+        label: 'Confidence',
+        value: 'TODO',
+      },
+      {
+        label: 'Leader',
+        value: <ValidatorName pubkey={leader} name={leader} avatar="" />,
+      },
+    ];
+    return <TableCard key={block.id} data={data} />;
   };
 
   return (

diff --git a/src/v2/components/Blocks/Table/styles.js b/src/v2/components/Blocks/Table/styles.js
@@ -1,5 +1,4 @@
 import {makeStyles} from '@material-ui/core';
-import getColor from 'v2/utils/getColor';
 
 export default makeStyles(theme => ({
   root: {
@@ -18,40 +17,4 @@ export default makeStyles(theme => ({
       flexDirection: 'column',
     },
   },
-  card: {
-    padding: 7,
-    background: getColor('grey2')(theme),
-    '& ul': {
-      padding: 0,
-      margin: 0,
-      display: 'flex',
-      flexWrap: 'wrap',
-      '& li': {
-        padding: 10,
-        width: '33.33%',
-        [theme.breakpoints.down('xs')]: {
-          width: '50%',
-        },
-        '& div:last-child': {
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-        },
-      },
-    },
-  },
-  cardVertical: {
-    [theme.breakpoints.down('sm')]: {
-      marginBottom: 2,
-      marginRight: 0,
-      maxWidth: '100%',
-    },
-  },
-  cardTitle: {
-    fontSize: 12,
-    textTransform: 'uppercase',
-    color: '#C4C4C4',
-    letterSpacing: 2,
-    fontWeight: 'bold',
-  },
 }));
diff --git a/src/v2/components/HelpLink/index.jsx b/src/v2/components/HelpLink/index.jsx
@@ -1,25 +1,32 @@
 // @flow
-import React from 'react';
+import React, {forwardRef} from 'react';
 import {Link, Tooltip} from '@material-ui/core';
 import {testnetDefaultChannel} from '@solana/web3.js/package.json';
 
 import useStyles from './styles';
 
 const BOOK_VERSION = testnetDefaultChannel === 'edge' ? 'book-edge' : 'book';
 
-const HelpLink = ({text, term}: {text: string, term: string}) => {
-  const classes = useStyles();
-  return (
-    <Tooltip classes={{tooltip: classes.tooltip}} placement="top" title={text}>
-      <Link
-        className={classes.link}
-        href={`https://solana-labs.github.io/${BOOK_VERSION}/terminology.html#${term}`}
-        target="_new"
+const HelpLink = forwardRef(
+  ({text = '', term = ''}: {text: string, term: string}, ref) => {
+    const classes = useStyles();
+    return (
+      <Tooltip
+        classes={{tooltip: classes.tooltip}}
+        placement="top"
+        title={text}
+        ref={ref}
       >
-        ?
-      </Link>
-    </Tooltip>
-  );
-};
+        <Link
+          className={classes.link}
+          href={`https://solana-labs.github.io/${BOOK_VERSION}/terminology.html#${term}`}
+          target="_new"
+        >
+          ?
+        </Link>
+      </Tooltip>
+    );
+  },
+);
 
 export default HelpLink;
diff --git a/src/v2/components/Programs/Table/index.jsx b/src/v2/components/Programs/Table/index.jsx
@@ -12,6 +12,7 @@ import TypeLabel from 'v2/components/UI/TypeLabel';
 import Table from 'v2/components/UI/Table';
 import type {TableHeadProps} from 'v2/@types/table';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import TableCard from 'v2/components/UI/TableCard';
 
 import useStyles from './styles';
 
@@ -70,26 +71,26 @@ const ProgramsTable = ({
   };
 
   const renderCard = program => {
-    return (
-      <div className={classes.card}>
-        <ul>
-          <li>
-            <div className={classes.cardTitle}>Program id</div>
-            <div>{program.programId}</div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Type</div>
-            <div>
-              TODO <TypeLabel type="other" label="other" />
-            </div>
-          </li>
-          <li>
-            <div className={classes.cardTitle}>Time</div>
-            <div title={program.timestamp}>{asTime(program.timestamp)}</div>
-          </li>
-        </ul>
-      </div>
-    );
+    const {programId, timestamp} = program;
+    const data = [
+      {
+        label: 'Program id',
+        value: programId,
+      },
+      {
+        label: 'Type',
+        value: (
+          <div>
+            TODO <TypeLabel type="other" label="other" />
+          </div>
+        ),
+      },
+      {
+        label: 'Time',
+        value: asTime(timestamp),
+      },
+    ];
+    return <TableCard data={data} key={programId} />;
   };
 
   return (

diff --git a/src/v2/components/Programs/Table/styles.js b/src/v2/components/Programs/Table/styles.js
@@ -1,5 +1,4 @@
 import {makeStyles} from '@material-ui/core';
-import getColor from 'v2/utils/getColor';
 
 export default makeStyles(theme => ({
   root: {
@@ -10,52 +9,6 @@ export default makeStyles(theme => ({
       marginBottom: 50,
     },
   },
-  head: {
-    border: '1px solid #979797',
-    '& th': {
-      textTransform: 'uppercase',
-      fontSize: 15,
-      letterSpacing: 2,
-      fontWeight: 'bold',
-      borderBottom: 'none',
-      paddingRight: 16,
-      '&:first-child': {
-        paddingLeft: 40,
-      },
-    },
-  },
-  body: {
-    '& td': {
-      fontSize: 15,
-      paddingTop: 18,
-      paddingBottom: 18,
-      maxWidth: 0,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      paddingRight: 16,
-      '&:first-child': {
-        paddingLeft: 40,
-      },
-    },
-  },
-  name: {
-    display: 'flex',
-    alignItems: 'center',
-    color: getColor('main')(theme),
-    textDecoration: 'none',
-    '& div': {
-      '&:first-child': {
-        marginRight: 15,
-      },
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    },
-    [theme.breakpoints.down('sm')]: {
-      marginBottom: 22,
-    },
-  },
   list: {
     width: '100%',
   },
@@ -64,43 +17,4 @@ export default makeStyles(theme => ({
       flexDirection: 'column',
     },
   },
-  card: {
-    padding: 7,
-    background: getColor('grey2')(theme),
-    '& ul': {
-      padding: 0,
-      margin: 0,
-      display: 'flex',
-      flexWrap: 'wrap',
-      '& li': {
-        padding: 10,
-        width: '33.33%',
-        [theme.breakpoints.down('xs')]: {
-          width: '50%',
-        },
-      },
-    },
-  },
-  cardVertical: {
-    [theme.breakpoints.down('sm')]: {
-      marginBottom: 2,
-      marginRight: 0,
-      maxWidth: '100%',
-    },
-  },
-  cardTitle: {
-    fontSize: 12,
-    textTransform: 'uppercase',
-    color: '#C4C4C4',
-    letterSpacing: 2,
-    fontWeight: 'bold',
-  },
-  miner: {
-    display: 'flex',
-    alignItems: 'center',
-    color: getColor('main')(theme),
-    '& div': {
-      marginLeft: 5,
-    },
-  },
 }));