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

130
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,64 +439,75 @@ export default () => {
</thead> </thead>
<tbody> <tbody>
<For each={table.getRowModel().rows}> <Key each={table.getRowModel().rows} by={({ id }) => id}>
{(row) => ( {(keyedRow) => {
<tr class="h-8 hover:!bg-primary hover:text-primary-content"> const row = keyedRow()
<For each={row.getVisibleCells()}>
{(cell) => (
<td
onContextMenu={(e) => {
e.preventDefault()
const value = cell.renderValue() as null | string return (
value && writeClipboard(value).catch(() => {}) <tr class="h-8 hover:!bg-primary hover:text-primary-content">
}} <Key
> each={row.getVisibleCells()}
{cell.getIsGrouped() ? ( by={({ row }) => row.original.id}
<button >
class={twMerge( {(keyedCell) => {
row.getCanExpand() const cell = keyedCell()
? 'cursor-pointer'
: 'cursor-normal', return (
'flex items-center gap-2', <td
)} onContextMenu={(e) => {
onClick={row.getToggleExpandedHandler()} e.preventDefault()
const value = cell.renderValue() as null | string
value && writeClipboard(value).catch(() => {})
}}
> >
<div> {cell.getIsGrouped() ? (
{row.getIsExpanded() ? ( <button
<IconZoomOutFilled size={18} /> class={twMerge(
) : ( row.getCanExpand()
<IconZoomInFilled size={18} /> ? 'cursor-pointer'
)} : 'cursor-normal',
</div> 'flex items-center gap-2',
)}
onClick={row.getToggleExpandedHandler()}
>
<div>
{row.getIsExpanded() ? (
<IconZoomOutFilled size={18} />
) : (
<IconZoomInFilled size={18} />
)}
</div>
<div> <div>
{flexRender( {flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</div>
<div>({row.subRows.length})</div>
</button>
) : cell.getIsAggregated() ? (
flexRender(
cell.column.columnDef.aggregatedCell ??
cell.column.columnDef.cell,
cell.getContext(),
)
) : cell.getIsPlaceholder() ? null : (
flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext(), cell.getContext(),
)} )
</div> )}
</td>
<div>({row.subRows.length})</div> )
</button> }}
) : cell.getIsAggregated() ? ( </Key>
flexRender( </tr>
cell.column.columnDef.aggregatedCell ?? )
cell.column.columnDef.cell, }}
cell.getContext(), </Key>
)
) : cell.getIsPlaceholder() ? null : (
flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)
)}
</td>
)}
</For>
</tr>
)}
</For>
</tbody> </tbody>
</table> </table>
</div> </div>