Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-09-20 14:02:46 +08:00
Code Issues Projects Releases Wiki Activity

feat(connections): keyed connection rows and cells

Browse Source
This commit is contained in:
kunish 2023-09-10 17:43:23 +08:00
parent 4f8c4b2d15
commit e7eb3dd331
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 71 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/Connections.tsx
View File

@ -1,5 +1,6 @@
import { writeClipboard } from '@solid-primitives/clipboard' import { writeClipboard } from '@solid-primitives/clipboard'
import { useI18n } from '@solid-primitives/i18n' import { useI18n } from '@solid-primitives/i18n'
import { Key } from '@solid-primitives/keyed'
import { makePersisted } from '@solid-primitives/storage' import { makePersisted } from '@solid-primitives/storage'
import { import {
IconCircleX, IconCircleX,
@ -321,20 +322,20 @@ export default () => {
<div class="flex h-full flex-col gap-2"> <div class="flex h-full flex-col gap-2">
<div class="flex w-full flex-wrap items-center gap-2"> <div class="flex w-full flex-wrap items-center gap-2">
<div class="tabs-boxed tabs gap-2"> <div class="tabs-boxed tabs gap-2">
<For each={tabs()}> <Key each={tabs()} by={({ type }) => type}>
{(tab) => ( {(tab) => (
<button <button
class={twMerge( class={twMerge(
activeTab() === tab.type && 'tab-active', activeTab() === tab().type && 'tab-active',
'tab tab-sm gap-2 sm:tab-md', 'tab tab-sm gap-2 sm:tab-md',
)} )}
onClick={() => setActiveTab(tab.type)} onClick={() => setActiveTab(tab().type)}
> >
<span>{tab.name}</span> <span>{tab().name}</span>
<div class="badge badge-sm">{tab.count}</div> <div class="badge badge-sm">{tab().count}</div>
</button> </button>
)} )}
</For> </Key>
</div> </div>
<div class="join flex w-full items-center md:flex-1"> <div class="join flex w-full items-center md:flex-1">
@ -438,11 +439,20 @@ export default () => {
</thead> </thead>
<tbody> <tbody>
<For each={table.getRowModel().rows}> <Key each={table.getRowModel().rows} by={({ id }) => id}>
{(row) => ( {(keyedRow) => {
const row = keyedRow()
return (
<tr class="h-8 hover:!bg-primary hover:text-primary-content"> <tr class="h-8 hover:!bg-primary hover:text-primary-content">
<For each={row.getVisibleCells()}> <Key
{(cell) => ( each={row.getVisibleCells()}
by={({ row }) => row.original.id}
>
{(keyedCell) => {
const cell = keyedCell()
return (
<td <td
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault() e.preventDefault()
@ -491,11 +501,13 @@ export default () => {
) )
)} )}
</td> </td>
)} )
</For> }}
</Key>
</tr> </tr>
)} )
</For> }}
</Key>
</tbody> </tbody>
</table> </table>
</div> </div>