feat: Add table component for Table. (#2603)

* feat: Add table component for Table.

packages/neuron-ui/src/stories/Table.stories.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { ComponentStory } from '@storybook/react'
+import Table from 'widgets/Table'
+
+export default {
+  title: 'Table',
+  component: Table,
+  argTypes: {
+    head: { control: 'text' },
+  },
+}
+
+const Template: ComponentStory<typeof Table> = props => <Table {...props} />
+
+export const EmptyTable = Template.bind({})
+EmptyTable.args = {
+  columns: [
+    {
+      title: 'a',
+      dataIndex: 'a',
+    },
+    {
+      title: 'b',
+      dataIndex: 'b',
+    },
+  ],
+  dataSource: [],
+}
+
+export const DataTable = Template.bind({})
+DataTable.args = {
+  columns: [
+    {
+      title: 'a',
+      dataIndex: 'a',
+    },
+    {
+      title: 'b',
+      dataIndex: 'b',
+    },
+  ],
+  dataSource: [
+    {
+      a: 10,
+      b: 'aaa',
+    },
+    {
+      a: 20,
+      b: 'bbb',
+    },
+  ],
+}
+
+export const TableWithHead = Template.bind({})
+TableWithHead.args = {
+  columns: [
+    {
+      title: '时间',
+      dataIndex: 'a',
+    },
+    {
+      title: '类型',
+      dataIndex: 'b',
+    },
+  ],
+  dataSource: [
+    {
+      a: 10,
+      b: 'aaa',
+    },
+    {
+      a: 20,
+      b: 'bbb',
+    },
+  ],
+  head: <div style={{ padding: '16px' }}>head</div>,
+}
+
+export const TableWithColumnRender = Template.bind({})
+TableWithColumnRender.args = {
+  columns: [
+    {
+      title: '时间',
+      dataIndex: 'a',
+      align: 'center',
+    },
+    {
+      title: '类型',
+      dataIndex: 'b',
+    },
+    {
+      title: '余额',
+      dataIndex: 'balance',
+      isBalance: true,
+      render(v: string, _idx, _item, showBalance) {
+        return <span style={{ color: v.includes('-') ? undefined : '#00C891' }}>{showBalance ? v : '******'}</span>
+      },
+    },
+  ],
+  dataSource: [
+    {
+      a: 10,
+      b: 'aaa',
+      balance: '9850000',
+    },
+    {
+      a: 20,
+      b: 'bbb',
+      balance: '-0.1',
+    },
+  ],
+  head: <div style={{ padding: '16px' }}>head</div>,
+}

packages/neuron-ui/src/styles/mixin.scss

@@ -148,3 +148,8 @@
   text-align: center;
   color: var(--main-text-color)
 }
+
+@mixin card {
+  background: var(--secondary-background-color);
+  border-radius: 16px;
+}

packages/neuron-ui/src/styles/theme.scss

@@ -24,6 +24,9 @@ body {
   --enable-button-text-color: #333333;
   --main-pagination-button-text-color: #666666;
   --main-pagination-text-color: #666666;
+  // table
+  --table-head-background-color: #FAFAFA;
+  --table-head-border-color: #F0F0F0;
 
   @media (prefers-color-scheme: dark) {
     --primary-color: #00C891;
@@ -51,5 +54,8 @@ body {
     --enable-button-text-color: #FFFFFF;
     --main-pagination-button-text-color: #CCCCCC;
     --main-pagination-text-color: #999999;
+    // table
+    --table-head-background-color: #171B1A;
+    --table-head-border-color: #282E2D;
   }
 }

packages/neuron-ui/src/widgets/Table/index.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useState } from 'react'
+import { PasswordHide, PasswordShow } from 'widgets/Icons/icon'
+import TableNoData from 'widgets/Icons/TableNoData.png'
+
+import styles from './table.module.scss'
+
+type TableProps<T> = {
+  head?: React.ReactNode
+  columns: {
+    title: string
+    dataIndex: string
+    key?: string
+    isBalance?: boolean
+    render?: (v: any, idx: number, item: T, showBalance: boolean) => React.ReactNode
+    align?: 'left' | 'right' | 'center'
+    className?: string
+  }[]
+  dataKey?: string
+  dataSource: T[]
+  noDataContent?: string
+  onRowDoubleClick?: (e: React.SyntheticEvent, item: T, idx: number) => void
+}
+
+const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
+  const { head, columns, dataSource, noDataContent, onRowDoubleClick, dataKey } = props
+  const [showBalance, setShowBalance] = useState(true)
+  const onClickBalanceIcon = useCallback(() => {
+    setShowBalance(v => !v)
+  }, [setShowBalance])
+  return (
+    <div className={styles.tableRoot}>
+      {head}
+      <table className={`${styles.table} ${head === null || head === undefined ? styles.noHead : ''}`}>
+        <thead>
+          <tr>
+            {columns.map(({ title, dataIndex, key, isBalance, align, className }) => {
+              return (
+                <th
+                  key={key || dataIndex}
+                  title={title}
+                  aria-label={title}
+                  data-field={dataIndex}
+                  align={align ?? 'left'}
+                  className={className}
+                >
+                  {!!dataSource.length && isBalance ? (
+                    <div className={styles.headWithBalance} style={{ justifyContent: align }}>
+                      {title}
+                      {showBalance ? (
+                        <PasswordShow onClick={onClickBalanceIcon} className={styles.balanceIcon} />
+                      ) : (
+                        <PasswordHide onClick={onClickBalanceIcon} className={styles.balanceIcon} />
+                      )}
+                    </div>
+                  ) : (
+                    title
+                  )}
+                </th>
+              )
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {dataSource.map((item, idx) => {
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              <tr
+                onDoubleClick={onRowDoubleClick ? e => onRowDoubleClick(e, item, idx) : undefined}
+                key={dataKey ? item[dataKey] : idx}
+              >
+                {columns.map(({ dataIndex, key, render, align }) => (
+                  <td align={align ?? 'left'} key={key ?? dataIndex}>
+                    {render ? render(item[dataIndex], idx, item, showBalance) : item[dataIndex]}
+                  </td>
+                ))}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      {dataSource.length ? null : (
+        <div className={styles.noData}>
+          <img src={TableNoData} alt="No Data" />
+          {noDataContent}
+        </div>
+      )}
+    </div>
+  )
+}
+
+Table.displayName = 'Table'
+export default Table

packages/neuron-ui/src/widgets/Table/table.module.scss

@@ -0,0 +1,62 @@
+@import '../../styles/mixin.scss';
+
+.tableRoot {
+  @include card;
+}
+
+.noHead {
+  thead {
+    :first-child {
+      border-top-left-radius: 16px;
+    }
+    :last-child {
+      border-top-right-radius: 16px;
+    }
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    height: 48px;
+    background-color: var(--table-head-background-color);
+    font-weight: 400;
+    color: #999;
+    th {
+      padding: 0 0 0 18px;
+      font-weight: 400;
+      border-top: 1px solid var(--table-head-border-color);
+      border-bottom: 1px solid var(--table-head-border-color);
+
+      & > .headWithBalance {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .balanceIcon {
+      margin-left: 8px;
+    }
+  }
+
+  tbody {
+    tr {
+      height: 58px;
+    }
+    td {
+      padding: 0 0 0 18px;
+      border-bottom: 1px solid var(--table-head-border-color);
+    }
+  }
+}
+
+.noData {
+  padding: 22px 0 44px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

packages/neuron-wallet/package.json

@@ -93,7 +93,7 @@
     "lint-staged": "9.5.0",
     "neuron-ui": "0.106.0",
     "prettier": "1.19.1",
-    "ttypescript": "1.5.13",
+    "ttypescript": "1.5.15",
     "typescript": "4.3.5"
   }
 }

yarn.lock

@@ -20148,10 +20148,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
   integrity sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==
 
-[email protected].13:
-  version "1.5.13"
-  resolved "https://registry.yarnpkg.com/ttypescript/-/ttypescript-1.5.13.tgz#c3bcb760599fe49157d30c5d5895a0023cbb7f30"
-  integrity sha512-KT/RBfGGlVJFqEI8cVvI3nMsmYcFvPSZh8bU0qX+pAwbi7/ABmYkzn7l/K8skw0xmYjVCoyaV6WLsBQxdadybQ==
+[email protected].15:
+  version "1.5.15"
+  resolved "https://registry.yarnpkg.com/ttypescript/-/ttypescript-1.5.15.tgz#e45550ad69289d06d3bc3fd4a3c87e7c1ef3eba7"
+  integrity sha512-48ykDNHzFnPMnv4hYX1P8Q84TvCZyL1QlFxeuxsuZ48X2+ameBgPenvmCkHJtoOSxpoWTWi8NcgNrRnVDOmfSg==
   dependencies:
     resolve ">=1.9.0"