0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-10 22:22:45 -05:00

refactor(console): use colgroup in table (#445)

This commit is contained in:
Wang Sijie 2022-03-25 14:46:37 +08:00 committed by GitHub
parent 2ee88d19ee
commit b46cfd2bc3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 64 additions and 82 deletions

View file

@ -4,5 +4,5 @@
background: var(--color-on-primary);
border-radius: _.unit(4);
padding: _.unit(6);
height: 100%;
min-height: 100%;
}

View file

@ -1,18 +1,36 @@
import React, { ReactNode } from 'react';
import React, { useMemo } from 'react';
import ItemPreviewLoading from './ItemPreviewLoading';
import * as styles from './TableLoading.module.scss';
export { default as ItemPreviewLoading } from './ItemPreviewLoading';
type Props = {
children: ReactNode;
columns: number;
};
const TableLoading = ({ children }: Props) => (
<>
<tr className={styles.loading}>{children}</tr>
<tr className={styles.loading}>{children}</tr>
</>
);
const TableLoading = ({ columns }: Props) => {
const row = useMemo(
() => (
<tr className={styles.loading}>
<td>
<ItemPreviewLoading />
</td>
{Array.from({ length: columns - 1 }).map((_, index) => (
// eslint-disable-next-line react/no-array-index-key
<td key={index}>
<div />
</td>
))}
</tr>
),
[columns]
);
return (
<>
{row}
{row}
</>
);
};
export default TableLoading;

View file

@ -14,7 +14,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableError from '@/components/Table/TableError';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
@ -62,9 +62,13 @@ const ApiResources = () => {
</Modal>
</div>
<table className={styles.table}>
<colgroup>
<col className={styles.apiResourceName} />
<col />
</colgroup>
<thead>
<tr>
<th className={styles.apiResourceName}>{t('api_resources.api_name')}</th>
<th>{t('api_resources.api_name')}</th>
<th>{t('api_resources.api_identifier')}</th>
</tr>
</thead>
@ -75,16 +79,7 @@ const ApiResources = () => {
onRetry={async () => mutate(undefined, true)}
/>
)}
{isLoading && (
<TableLoading>
<td className={styles.apiResourceName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{isLoading && <TableLoading columns={2} />}
{data?.map(({ id, name, indicator }) => (
<tr
key={id}
@ -93,7 +88,7 @@ const ApiResources = () => {
navigate(buildDetailsLink(id));
}}
>
<td className={styles.apiResourceName}>
<td>
<ItemPreview title={name} icon={<ImagePlaceholder />} to={buildDetailsLink(id)} />
</td>
<td>

View file

@ -14,7 +14,7 @@ import CopyToClipboard from '@/components/CopyToClipboard';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableError from '@/components/Table/TableError';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
import { applicationTypeI18nKey } from '@/types/applications';
@ -60,9 +60,13 @@ const Applications = () => {
</Modal>
</div>
<table className={styles.table}>
<colgroup>
<col className={styles.applicationName} />
<col />
</colgroup>
<thead>
<tr>
<th className={styles.applicationName}>{t('applications.application_name')}</th>
<th>{t('applications.application_name')}</th>
<th>{t('applications.client_id')}</th>
</tr>
</thead>
@ -73,16 +77,7 @@ const Applications = () => {
onRetry={async () => mutate(undefined, true)}
/>
)}
{isLoading && (
<TableLoading>
<td className={styles.applicationName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{isLoading && <TableLoading columns={2} />}
{data?.map(({ id, name, type }) => (
<tr
key={id}
@ -91,7 +86,7 @@ const Applications = () => {
navigate(`/applications/${id}`);
}}
>
<td className={styles.applicationName}>
<td>
<ItemPreview
title={name}
subtitle={t(`${applicationTypeI18nKey[type]}.title`)}

View file

@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
import Button from '@/components/Button';
import Status from '@/components/Status';
import * as styles from '../index.module.scss';
import ConnectorName from './ConnectorName';
type Props = {
@ -31,7 +30,7 @@ const ConnectorRow = ({ type, connector, onClickSetup }: Props) => {
return (
<tr>
<td className={styles.connectorName}>
<td>
<ConnectorName connector={connector} titlePlaceholder={typeLabel} />
</td>
<td>{typeLabel}</td>

View file

@ -10,7 +10,7 @@ import Card from '@/components/Card';
import CardTitle from '@/components/CardTitle';
import TabNav, { TabNavLink } from '@/components/TabNav';
import TableError from '@/components/Table/TableError';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import ConnectorRow from './components/ConnectorRow';
@ -67,9 +67,14 @@ const Connectors = () => {
<TabNavLink href="/connectors/social">{t('connectors.tab_social')}</TabNavLink>
</TabNav>
<table className={styles.table}>
<colgroup>
<col className={styles.connectorName} />
<col />
<col />
</colgroup>
<thead>
<tr>
<th className={styles.connectorName}>{t('connectors.connector_name')}</th>
<th>{t('connectors.connector_name')}</th>
<th>{t('connectors.connector_type')}</th>
<th>{t('connectors.connector_status')}</th>
</tr>
@ -81,19 +86,7 @@ const Connectors = () => {
onRetry={async () => mutate(undefined, true)}
/>
)}
{isLoading && (
<TableLoading>
<td className={styles.connectorName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{isLoading && <TableLoading columns={3} />}
{socialConnectors?.length === 0 && (
<tr>
<td colSpan={3}>

View file

@ -11,7 +11,7 @@ import CardTitle from '@/components/CardTitle';
import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import TableError from '@/components/Table/TableError';
import TableLoading, { ItemPreviewLoading } from '@/components/Table/TableLoading';
import TableLoading from '@/components/Table/TableLoading';
import { RequestError } from '@/hooks/use-api';
import * as modalStyles from '@/scss/modal.module.scss';
@ -53,6 +53,11 @@ const Users = () => {
</Modal>
</div>
<table className={styles.table}>
<colgroup>
<col className={styles.userName} />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>{t('users.user_name')}</th>
@ -67,19 +72,7 @@ const Users = () => {
onRetry={async () => mutate(undefined, true)}
/>
)}
{isLoading && (
<TableLoading>
<td className={styles.userName}>
<ItemPreviewLoading />
</td>
<td>
<div />
</td>
<td>
<div />
</td>
</TableLoading>
)}
{isLoading && <TableLoading columns={3} />}
{data?.map(({ id, name, username }) => (
<tr
key={id}
@ -88,7 +81,7 @@ const Users = () => {
navigate(`/users/${id}`);
}}
>
<td className={styles.userName}>
<td>
<ItemPreview
title={name ?? '-'}
subtitle={username ?? '-'}

View file

@ -22,16 +22,10 @@ table {
border: 1px solid var(--color-neutral-90);
border-radius: _.unit(2);
border-spacing: 0;
width: 100%;
table-layout: fixed;
overflow: hidden;
thead,
tbody,
tr {
display: table;
width: 100%;
table-layout: fixed;
}
thead {
th {
font: var(--font-subhead-2);
@ -48,11 +42,6 @@ table {
}
tbody {
display: block;
overflow: auto;
table-layout: fixed;
max-height: calc(100% - _.unit(40));
td {
border-bottom: 1px solid var(--color-neutral-90);
padding: _.unit(5) _.unit(4);