Use BBUI spectrum table in standard components
This commit is contained in:
Andrew Kingston
parent
d7cb604151
commit
41742e7138
11 changed files with 76 additions and 400 deletions
|
|
@ -26,7 +26,7 @@
|
|||
$: renderer = customRenderer?.component ?? typeMap[type]
|
||||
</script>
|
||||
|
||||
{#if renderer && value != null && value !== ''}
|
||||
{#if renderer && (customRenderer || (value != null && value !== ''))}
|
||||
<svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
|
||||
<slot />
|
||||
</svelte:component>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
</script>
|
||||
|
||||
<div>{value}</div>
|
||||
<slot />
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -84,22 +84,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
const getDisplayName = schema => {
|
||||
let name = schema?.displayName
|
||||
if (schema && name === undefined) {
|
||||
name = schema.name
|
||||
}
|
||||
return name || ""
|
||||
}
|
||||
|
||||
const getFields = (schema, showAutoColumns) => {
|
||||
let columns = []
|
||||
let autoColumns = []
|
||||
Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
|
||||
if (!field || !fieldSchema) {
|
||||
return
|
||||
}
|
||||
schema[field].name = field
|
||||
if (!fieldSchema?.autocolumn) {
|
||||
columns.push(field)
|
||||
columns.push(fieldSchema)
|
||||
} else if (showAutoColumns) {
|
||||
autoColumns.push(field)
|
||||
autoColumns.push(fieldSchema)
|
||||
}
|
||||
})
|
||||
return columns
|
||||
.sort((a, b) => {
|
||||
return a.toLowerCase() < b.toLowerCase() ? a : b
|
||||
const orderA = a.order || Number.MAX_SAFE_INTEGER
|
||||
const orderB = b.order || Number.MAX_SAFE_INTEGER
|
||||
const nameA = getDisplayName(a)
|
||||
const nameB = getDisplayName(b)
|
||||
if (orderA !== orderB) {
|
||||
return orderA < orderB ? orderA : orderB
|
||||
}
|
||||
return nameA < nameB ? a : b
|
||||
})
|
||||
.concat(autoColumns)
|
||||
.map(column => column.name)
|
||||
}
|
||||
|
||||
const onScroll = event => {
|
||||
|
|
@ -170,9 +189,7 @@
|
|||
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
|
||||
on:click={() => sortBy(field)}>
|
||||
<div class="spectrum-Table-headCell-content">
|
||||
<div class="title">
|
||||
{schema[field]?.displayName || schema[field]?.name}
|
||||
</div>
|
||||
<div class="title">{getDisplayName(schema[field])}</div>
|
||||
{#if schema[field]?.autocolumn}
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-Table-autoIcon"
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<script>
|
||||
export let value
|
||||
|
||||
const displayLimit = 5
|
||||
$: attachments = value?.slice(0, displayLimit) ?? []
|
||||
$: leftover = (value?.length ?? 0) - attachments.length
|
||||
</script>
|
||||
|
||||
{#each attachments as attachment}
|
||||
{#if attachment.type.startsWith('image')}
|
||||
<img src={attachment.url} alt={attachment.extension} />
|
||||
{:else}
|
||||
<div class="file">{attachment.extension}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if leftover}
|
||||
<div>+{leftover} more</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
img {
|
||||
height: 32px;
|
||||
max-width: 64px;
|
||||
}
|
||||
.file {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
color: var(--spectrum-global-color-gray-800);
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<script>
|
||||
import "@spectrum-css/checkbox/dist/index-vars.css"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<label
|
||||
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="spectrum-Checkbox-input"
|
||||
id="checkbox-1"
|
||||
disabled
|
||||
checked={!!value} />
|
||||
<span class="spectrum-Checkbox-box">
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
|
||||
focusable="false"
|
||||
aria-hidden="true">
|
||||
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
||||
</svg>
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
|
||||
focusable="false"
|
||||
aria-hidden="true">
|
||||
<use xlink:href="#spectrum-css-icon-Dash100" />
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.spectrum-Checkbox {
|
||||
min-height: 0;
|
||||
}
|
||||
.spectrum-Checkbox-box {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<script>
|
||||
import StringRenderer from "./StringRenderer.svelte"
|
||||
import BooleanRenderer from "./BooleanRenderer.svelte"
|
||||
import DateTimeRenderer from "./DateTimeRenderer.svelte"
|
||||
import RelationshipRenderer from "./RelationshipRenderer.svelte"
|
||||
import AttachmentRenderer from "./AttachmentRenderer.svelte"
|
||||
|
||||
export let schema
|
||||
export let value
|
||||
|
||||
const plainTypes = ["string", "options", "number", "longform"]
|
||||
$: type = schema?.type ?? "string"
|
||||
</script>
|
||||
|
||||
{#if value != null && value !== ''}
|
||||
{#if plainTypes.includes(type)}
|
||||
<StringRenderer {value} />
|
||||
{:else if type === 'boolean'}
|
||||
<BooleanRenderer {value} />
|
||||
{:else if type === 'datetime'}
|
||||
<DateTimeRenderer {value} />
|
||||
{:else if type === 'link'}
|
||||
<RelationshipRenderer {value} />
|
||||
{:else if type === 'attachment'}
|
||||
<AttachmentRenderer {value} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script>
|
||||
import dayjs from "dayjs"
|
||||
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<script>
|
||||
import "@spectrum-css/label/dist/index-vars.css"
|
||||
|
||||
export let value
|
||||
|
||||
const displayLimit = 5
|
||||
$: relationships = value?.slice(0, displayLimit) ?? []
|
||||
$: leftover = (value?.length ?? 0) - relationships.length
|
||||
</script>
|
||||
|
||||
{#each relationships as relationship}
|
||||
{#if relationship?.primaryDisplay}
|
||||
<span class="spectrum-Label spectrum-Label--grey">
|
||||
{relationship.primaryDisplay}
|
||||
</span>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if leftover}
|
||||
<div>+{leftover} more</div>
|
||||
{/if}
|
||||
11
packages/standard-components/src/table/SlotRenderer.svelte
Normal file
11
packages/standard-components/src/table/SlotRenderer.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let row
|
||||
|
||||
const { Provider } = getContext("sdk")
|
||||
</script>
|
||||
|
||||
<Provider data={row}>
|
||||
<slot />
|
||||
</Provider>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script>
|
||||
export let value
|
||||
</script>
|
||||
|
||||
<div>{value}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
import { fade } from "svelte/transition"
|
||||
import "@spectrum-css/table/dist/index-vars.css"
|
||||
import { getContext } from "svelte"
|
||||
import CellRenderer from "./CellRenderer.svelte"
|
||||
import { Table } from "@budibase/bbui"
|
||||
import SlotRenderer from "./SlotRenderer.svelte"
|
||||
|
||||
export let theme
|
||||
export let size
|
||||
|
|
@ -14,70 +14,21 @@
|
|||
|
||||
const component = getContext("component")
|
||||
const { styleable, Provider } = getContext("sdk")
|
||||
|
||||
// Config
|
||||
const rowHeight = 55
|
||||
const headerHeight = 36
|
||||
const rowPreload = 5
|
||||
const maxRows = 100
|
||||
|
||||
// Sorting state
|
||||
let sortColumn
|
||||
let sortOrder
|
||||
const customColumnKey = `custom-${Math.random()}`
|
||||
const customRenderers = [
|
||||
{
|
||||
column: customColumnKey,
|
||||
component: SlotRenderer,
|
||||
},
|
||||
]
|
||||
|
||||
// Table state
|
||||
$: loaded = dataProvider?.loaded ?? false
|
||||
$: rows = dataProvider?.rows ?? []
|
||||
$: visibleRowCount = loaded
|
||||
? Math.min(rows.length, rowCount || maxRows, maxRows)
|
||||
: Math.min(8, rowCount || maxRows)
|
||||
$: scroll = rows.length > visibleRowCount
|
||||
$: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
|
||||
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
|
||||
$: schema = dataProvider?.schema ?? {}
|
||||
$: fields = getFields(schema, columns, showAutoColumns)
|
||||
|
||||
// Scrolling state
|
||||
let timeout
|
||||
let nextScrollTop = 0
|
||||
let scrollTop = 0
|
||||
$: firstVisibleRow = calculateFirstVisibleRow(scrollTop)
|
||||
$: lastVisibleRow = calculateLastVisibleRow(
|
||||
firstVisibleRow,
|
||||
visibleRowCount,
|
||||
rows.length
|
||||
)
|
||||
|
||||
const getContentStyle = (visibleRows, useFixedHeight) => {
|
||||
if (!useFixedHeight) {
|
||||
return ""
|
||||
}
|
||||
return `height: ${headerHeight - 1 + visibleRows * (rowHeight + 1)}px;`
|
||||
}
|
||||
|
||||
const sortRows = (rows, sortColumn, sortOrder) => {
|
||||
if (!sortColumn || !sortOrder) {
|
||||
return rows
|
||||
}
|
||||
return rows.slice().sort((a, b) => {
|
||||
const colA = a[sortColumn]
|
||||
const colB = b[sortColumn]
|
||||
if (sortOrder === "Descending") {
|
||||
return colA > colB ? -1 : 1
|
||||
} else {
|
||||
return colA > colB ? 1 : -1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const sortBy = field => {
|
||||
if (field === sortColumn) {
|
||||
sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
|
||||
} else {
|
||||
sortColumn = field
|
||||
sortOrder = "Descending"
|
||||
}
|
||||
}
|
||||
$: hasChildren = $component.children
|
||||
$: loading = dataProvider?.loading ?? false
|
||||
$: data = dataProvider?.rows || []
|
||||
$: fullSchema = dataProvider?.schema ?? {}
|
||||
$: fields = getFields(fullSchema, columns, showAutoColumns)
|
||||
$: schema = getFilteredSchema(fullSchema, fields, hasChildren)
|
||||
|
||||
const getFields = (schema, customColumns, showAutoColumns) => {
|
||||
// Check for an invalid column selection
|
||||
|
|
@ -106,185 +57,33 @@
|
|||
return columns.concat(autoColumns)
|
||||
}
|
||||
|
||||
const onScroll = event => {
|
||||
nextScrollTop = event.target.scrollTop
|
||||
if (timeout) {
|
||||
return
|
||||
const getFilteredSchema = (schema, fields, hasChildren) => {
|
||||
let newSchema = {}
|
||||
if (hasChildren) {
|
||||
newSchema[customColumnKey] = { displayName: null, order: 0 }
|
||||
}
|
||||
timeout = setTimeout(() => {
|
||||
scrollTop = nextScrollTop
|
||||
timeout = null
|
||||
}, 50)
|
||||
}
|
||||
|
||||
const calculateFirstVisibleRow = scrollTop => {
|
||||
return Math.max(Math.floor(scrollTop / (rowHeight + 1)) - rowPreload, 0)
|
||||
}
|
||||
|
||||
const calculateLastVisibleRow = (firstRow, visibleRowCount, allRowCount) => {
|
||||
return Math.min(firstRow + visibleRowCount + 2 * rowPreload, allRowCount)
|
||||
fields.forEach(field => {
|
||||
newSchema[field] = schema[field]
|
||||
})
|
||||
return newSchema
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !loaded}
|
||||
<div class="content" style={contentStyle} />
|
||||
{:else}
|
||||
<div use:styleable={$component.styles}>
|
||||
<div
|
||||
on:scroll={onScroll}
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
class:quiet
|
||||
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
|
||||
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
|
||||
<div class="content" style={contentStyle}>
|
||||
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
|
||||
<thead class="spectrum-Table-head">
|
||||
<tr>
|
||||
{#if $component.children}
|
||||
<th class="spectrum-Table-headCell">
|
||||
<div class="spectrum-Table-headCell-content" />
|
||||
</th>
|
||||
{/if}
|
||||
{#each fields as field}
|
||||
<th
|
||||
class="spectrum-Table-headCell is-sortable"
|
||||
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
|
||||
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
|
||||
on:click={() => sortBy(field)}>
|
||||
<div class="spectrum-Table-headCell-content">
|
||||
<div class="title">{schema[field]?.name}</div>
|
||||
<svg
|
||||
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
|
||||
class:visible={sortColumn === field}
|
||||
focusable="false"
|
||||
aria-hidden="true">
|
||||
<use xlink:href="#spectrum-css-icon-Arrow100" />
|
||||
</svg>
|
||||
</div>
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="spectrum-Table-body">
|
||||
{#each sortedRows as row, idx}
|
||||
<tr
|
||||
class="spectrum-Table-row"
|
||||
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
|
||||
{#if idx >= firstVisibleRow && idx <= lastVisibleRow}
|
||||
{#if $component.children}
|
||||
<td
|
||||
class="spectrum-Table-cell spectrum-Table-cell--divider">
|
||||
<div class="spectrum-Table-cell-content">
|
||||
<Provider data={row}>
|
||||
<slot />
|
||||
</Provider>
|
||||
</div>
|
||||
</td>
|
||||
{/if}
|
||||
{#each fields as field}
|
||||
<td class="spectrum-Table-cell">
|
||||
<div class="spectrum-Table-cell-content">
|
||||
<CellRenderer
|
||||
schema={schema[field]}
|
||||
value={row[field]} />
|
||||
</div>
|
||||
</td>
|
||||
{/each}
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.spectrum {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
border: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||
}
|
||||
.spectrum.quiet {
|
||||
border: none !important;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spectrum-Table-sortedIcon {
|
||||
opacity: 0;
|
||||
display: block !important;
|
||||
}
|
||||
.spectrum-Table-sortedIcon.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.spectrum,
|
||||
th {
|
||||
border-bottom: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||
}
|
||||
th {
|
||||
vertical-align: middle;
|
||||
height: var(--header-height);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--spectrum-global-color-gray-100);
|
||||
z-index: 2;
|
||||
}
|
||||
.spectrum-Table-headCell-content {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
.spectrum-Table-headCell-content .title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
tbody {
|
||||
z-index: 1;
|
||||
}
|
||||
tbody tr {
|
||||
height: var(--row-height);
|
||||
}
|
||||
tbody tr.hidden {
|
||||
height: calc(var(--row-height) + 1px);
|
||||
}
|
||||
tbody tr.offset {
|
||||
background-color: red;
|
||||
display: block;
|
||||
}
|
||||
td {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-top: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||
}
|
||||
tr:first-child td {
|
||||
border-top: none !important;
|
||||
}
|
||||
.spectrum:not(.quiet) td.spectrum-Table-cell--divider {
|
||||
width: 1px;
|
||||
border-right: 1px solid
|
||||
var(--spectrum-table-border-color, var(--spectrum-alias-border-color-mid)) !important;
|
||||
}
|
||||
.spectrum-Table-cell-content {
|
||||
height: var(--row-height);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
lang="en"
|
||||
dir="ltr"
|
||||
use:styleable={$component.styles}
|
||||
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
|
||||
<Table
|
||||
{data}
|
||||
{schema}
|
||||
{loading}
|
||||
{quiet}
|
||||
{customRenderers}
|
||||
allowSelectRows={false}
|
||||
allowEditRows={false}
|
||||
allowEditColumns={false}
|
||||
showAutoColumns={true}>
|
||||
<slot />
|
||||
</Table>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue