Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-20 21:32:31 -05:00
Code Issues Activity

style(console): table loading style (#2971)

Browse source
This commit is contained in:
Xiao Yijun 2023-01-17 15:20:12 +08:00 • committed by GitHub
parent e4f3a5b6b2
commit 2676561720
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/console/src/components/Table/TableLoading.module.scss
View file

@ -11,10 +11,11 @@
height: 40px;
margin-right: _.unit(4);
border-radius: 12px;
flex-shrink: 0;
}
.content {
width: 135px;
width: 100%;
.title {
@include _.shimmering-animation;

10
packages/console/src/components/Table/TableLoading.tsx
View file

@ -1,16 +1,16 @@
import * as styles from './TableLoading.module.scss';
type Props = {
columns: number;
columnSpans: number[];
};
const TableLoading = ({ columns }: Props) => {
const TableLoading = ({ columnSpans }: Props) => {
return (
<>
{Array.from({ length: 8 }).map((_, rowIndex) => (
// eslint-disable-next-line react/no-array-index-key
<tr key={`row-${rowIndex}`} className={styles.loading}>
<td>
<td colSpan={columnSpans[0]}>
<div className={styles.itemPreview}>
<div className={styles.avatar} />
<div className={styles.content}>
@ -19,9 +19,9 @@ const TableLoading = ({ columns }: Props) => {
</div>
</div>
</td>
{Array.from({ length: columns - 1 }).map((_, index) => (
{columnSpans.slice(1).map((colSpan, index) => (
// eslint-disable-next-line react/no-array-index-key
<td key={index}>
<td key={index} colSpan={colSpan}>
<div className={styles.rect} />
</td>
))}

82
packages/console/src/components/Table/index.tsx
View file

@ -95,7 +95,9 @@ const Table = <
<div className={classNames(styles.bodyTable, bodyClassName)}>
<table>
<tbody>
{isLoading && <TableLoading columns={columns.length} />}
{isLoading && (
<TableLoading columnSpans={columns.map(({ colSpan }) => colSpan ?? 1)} />
)}
{!isLoading && !hasData && errorMessage && (
<TableError columns={columns.length} content={errorMessage} onRetry={onRetry} />
)}
@ -109,45 +111,47 @@ const Table = <
{placeholder?.content}
</TableEmpty>
)}
{rowGroups.map(({ key, label, labelClassName, data }) => (
<Fragment key={key}>
{label && (
<tr>
<td colSpan={totalColspan} className={labelClassName}>
{label}
</td>
</tr>
)}
{data?.map((row) => {
const rowClickable = isRowClickable(row);
const onClick = conditional(
rowClickable &&
rowClickHandler &&
(() => {
rowClickHandler(row);
})
);
return (
<tr
key={row[rowIndexKey]}
className={classNames(
rowClickable && styles.clickable,
!isRowHoverEffectDisabled && styles.hoverEffect
)}
onClick={onClick}
>
{columns.map(({ dataIndex, colSpan, className, render }) => (
<td key={dataIndex} colSpan={colSpan} className={className}>
{render(row)}
</td>
))}
{!isLoading &&
hasData &&
rowGroups.map(({ key, label, labelClassName, data }) => (
<Fragment key={key}>
{label && (
<tr>
<td colSpan={totalColspan} className={labelClassName}>
{label}
</td>
</tr>
);
})}
</Fragment>
))}
)}
{data?.map((row) => {
const rowClickable = isRowClickable(row);
const onClick = conditional(
rowClickable &&
rowClickHandler &&
(() => {
rowClickHandler(row);
})
);
return (
<tr
key={row[rowIndexKey]}
className={classNames(
rowClickable && styles.clickable,
!isRowHoverEffectDisabled && styles.hoverEffect
)}
onClick={onClick}
>
{columns.map(({ dataIndex, colSpan, className, render }) => (
<td key={dataIndex} colSpan={colSpan} className={className}>
{render(row)}
</td>
))}
</tr>
);
})}
</Fragment>
))}
</tbody>
</table>
</div>