MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use BBUI spectrum table in standard components

This commit is contained in:
Andrew Kingston 2021-04-12 16:14:24 +01:00
parent 4703c87991
commit 0b3dcb40a3
11 changed files with 76 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Table/CellRenderer.svelte
View File

@ -26,7 +26,7 @@
$: renderer = customRenderer?.component ?? typeMap[type] $: renderer = customRenderer?.component ?? typeMap[type]
</script> </script>
{#if renderer && value != null && value !== ''} {#if renderer && (customRenderer || (value != null && value !== ''))}
<svelte:component this={renderer} {row} {schema} {value} on:clickrelationship> <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
<slot /> <slot />
</svelte:component> </svelte:component>

1
packages/bbui/src/Table/StringRenderer.svelte
View File

@ -3,7 +3,6 @@
</script> </script>
<div>{value}</div> <div>{value}</div>
<slot />
<style> <style>
div { div {

29
packages/bbui/src/Table/Table.svelte
View File

@ -84,22 +84,41 @@
} }
} }
const getDisplayName = schema => {
let name = schema?.displayName
if (schema && name === undefined) {
name = schema.name
}
return name || ""
}
const getFields = (schema, showAutoColumns) => { const getFields = (schema, showAutoColumns) => {
let columns = [] let columns = []
let autoColumns = [] let autoColumns = []
Object.entries(schema || {}).forEach(([field, fieldSchema]) => { Object.entries(schema || {}).forEach(([field, fieldSchema]) => {
if (!field || !fieldSchema) {
return
}
schema[field].name = field schema[field].name = field
if (!fieldSchema?.autocolumn) { if (!fieldSchema?.autocolumn) {
columns.push(field) columns.push(fieldSchema)
} else if (showAutoColumns) { } else if (showAutoColumns) {
autoColumns.push(field) autoColumns.push(fieldSchema)
} }
}) })
return columns return columns
.sort((a, b) => { .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) .concat(autoColumns)
.map(column => column.name)
} }
const onScroll = event => { const onScroll = event => {
@ -170,9 +189,7 @@
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'} class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(field)}> on:click={() => sortBy(field)}>
<div class="spectrum-Table-headCell-content"> <div class="spectrum-Table-headCell-content">
<div class="title"> <div class="title">{getDisplayName(schema[field])}</div>
{schema[field]?.displayName || schema[field]?.name}
</div>
{#if schema[field]?.autocolumn} {#if schema[field]?.autocolumn}
<svg <svg
class="spectrum-Icon spectrum-Table-autoIcon" class="spectrum-Icon spectrum-Table-autoIcon"

39
packages/standard-components/src/table/AttachmentRenderer.svelte
View File

@ -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>

38
packages/standard-components/src/table/BooleanRenderer.svelte
View File

@ -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>

27
packages/standard-components/src/table/CellRenderer.svelte
View File

@ -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}

13
packages/standard-components/src/table/DateTimeRenderer.svelte
View File

@ -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>

20
packages/standard-components/src/table/RelationshipRenderer.svelte
View File

@ -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
View File

@ -0,0 +1,11 @@
<script>
import { getContext } from "svelte"
export let row
const { Provider } = getContext("sdk")
</script>
<Provider data={row}>
<slot />
</Provider>

13
packages/standard-components/src/table/StringRenderer.svelte
View File

@ -1,13 +0,0 @@
<script>
export let value
</script>
<div>{value}</div>
<style>
div {
overflow: hidden;
text-overflow: ellipsis;
width: 150px;
}
</style>

275
packages/standard-components/src/table/Table.svelte
View File

@ -1,8 +1,8 @@
<script> <script>
import { fade } from "svelte/transition"
import "@spectrum-css/table/dist/index-vars.css" import "@spectrum-css/table/dist/index-vars.css"
import { getContext } from "svelte" import { getContext } from "svelte"
import CellRenderer from "./CellRenderer.svelte" import { Table } from "@budibase/bbui"
import SlotRenderer from "./SlotRenderer.svelte"
export let theme export let theme
export let size export let size
@ -14,70 +14,21 @@
const component = getContext("component") const component = getContext("component")
const { styleable, Provider } = getContext("sdk") const { styleable, Provider } = getContext("sdk")
const customColumnKey = `custom-${Math.random()}`
// Config const customRenderers = [
const rowHeight = 55 {
const headerHeight = 36 column: customColumnKey,
const rowPreload = 5 component: SlotRenderer,
const maxRows = 100 },
]
// Sorting state
let sortColumn
let sortOrder
// Table state // Table state
$: loaded = dataProvider?.loaded ?? false $: hasChildren = $component.children
$: rows = dataProvider?.rows ?? [] $: loading = dataProvider?.loading ?? false
$: visibleRowCount = loaded $: data = dataProvider?.rows || []
? Math.min(rows.length, rowCount || maxRows, maxRows) $: fullSchema = dataProvider?.schema ?? {}
: Math.min(8, rowCount || maxRows) $: fields = getFields(fullSchema, columns, showAutoColumns)
$: scroll = rows.length > visibleRowCount $: schema = getFilteredSchema(fullSchema, fields, hasChildren)
$: 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"
}
}
const getFields = (schema, customColumns, showAutoColumns) => { const getFields = (schema, customColumns, showAutoColumns) => {
// Check for an invalid column selection // Check for an invalid column selection
@ -106,185 +57,33 @@
return columns.concat(autoColumns) return columns.concat(autoColumns)
} }
const onScroll = event => { const getFilteredSchema = (schema, fields, hasChildren) => {
nextScrollTop = event.target.scrollTop let newSchema = {}
if (timeout) { if (hasChildren) {
return newSchema[customColumnKey] = { displayName: null, order: 0 }
} }
timeout = setTimeout(() => { fields.forEach(field => {
scrollTop = nextScrollTop newSchema[field] = schema[field]
timeout = null })
}, 50) return newSchema
}
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)
} }
</script> </script>
{#if !loaded} <div
<div class="content" style={contentStyle} />
{:else}
<div use:styleable={$component.styles}>
<div
on:scroll={onScroll}
lang="en" lang="en"
dir="ltr" dir="ltr"
class:quiet use:styleable={$component.styles}
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}> class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
<div class="content" style={contentStyle}> <Table
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}> {data}
<thead class="spectrum-Table-head"> {schema}
<tr> {loading}
{#if $component.children} {quiet}
<th class="spectrum-Table-headCell"> {customRenderers}
<div class="spectrum-Table-headCell-content" /> allowSelectRows={false}
</th> allowEditRows={false}
{/if} allowEditColumns={false}
{#each fields as field} showAutoColumns={true}>
<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 /> <slot />
</Provider> </Table>
</div> </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>