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

Rename reordering to reorder

This commit is contained in:
Andrew Kingston 2023-02-22 15:48:17 +00:00
parent ca7aed617f
commit fc06811b2c
4 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/components/app/spreadsheet/ReorderingPlaceholder.svelte → packages/client/src/components/app/spreadsheet/ReorderPlaceholder.svelte
View File

@ -1,9 +1,9 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
const { reorderingPlaceholder } = getContext("spreadsheet") const { reorderPlaceholder } = getContext("spreadsheet")
$: style = getStyle($reorderingPlaceholder) $: style = getStyle($reorderPlaceholder)
const getStyle = state => { const getStyle = state => {
return ( return (
@ -14,7 +14,7 @@
} }
</script> </script>
{#if $reorderingPlaceholder.x != null} {#if $reorderPlaceholder.x != null}
<div {style} /> <div {style} />
{/if} {/if}

39
packages/client/src/components/app/spreadsheet/Spreadsheet.svelte
View File

@ -10,8 +10,8 @@
import NumberCell from "./cells/NumberCell.svelte" import NumberCell from "./cells/NumberCell.svelte"
import RelationshipCell from "./cells/RelationshipCell.svelte" import RelationshipCell from "./cells/RelationshipCell.svelte"
import { getColor } from "./utils.js" import { getColor } from "./utils.js"
import { createReorderingStores } from "./stores/reordering" import { createReorderStores } from "./stores/reorder"
import ReorderingPlaceholder from "./ReorderingPlaceholder.svelte" import ReorderPlaceholder from "./ReorderPlaceholder.svelte"
export let table export let table
export let filter export let filter
@ -43,11 +43,11 @@
selectedCellId, selectedCellId,
selectedRows, selectedRows,
} }
const { reordering, reorderingPlaceholder } = createReorderingStores(context) const { reorder, reorderPlaceholder } = createReorderStores(context)
setContext("spreadsheet", { setContext("spreadsheet", {
...context, ...context,
reordering, reorder,
reorderingPlaceholder, reorderPlaceholder,
}) })
let horizontallyScrolled = false let horizontallyScrolled = false
@ -301,9 +301,9 @@
class="header cell" class="header cell"
class:sticky={fieldIdx === 0} class:sticky={fieldIdx === 0}
class:shadow={horizontallyScrolled} class:shadow={horizontallyScrolled}
class:reordering-source={$reordering.columnIdx === fieldIdx} class:reorder-source={$reorder.columnIdx === fieldIdx}
class:reordering-target={$reordering.swapColumnIdx === fieldIdx} class:reorder-target={$reorder.swapColumnIdx === fieldIdx}
on:mousedown={e => reordering.actions.startReordering(fieldIdx, e)} on:mousedown={e => reorder.actions.startReordering(fieldIdx, e)}
id={`sheet-${rand}-header-${fieldIdx}`} id={`sheet-${rand}-header-${fieldIdx}`}
> >
<Icon <Icon
@ -320,7 +320,7 @@
<!-- Horizontal spacer --> <!-- Horizontal spacer -->
<div <div
class="header cell spacer" class="header cell spacer"
class:reordering-target={$reordering.swapColumnIdx === $columns.length} class:reorder-target={$reorder.swapColumnIdx === $columns.length}
/> />
<!-- All real rows --> <!-- All real rows -->
@ -354,8 +354,8 @@
class:hovered={rowHovered} class:hovered={rowHovered}
class:selected={$selectedCellId === cellIdx} class:selected={$selectedCellId === cellIdx}
class:shadow={horizontallyScrolled} class:shadow={horizontallyScrolled}
class:reordering-source={$reordering.columnIdx === fieldIdx} class:reorder-source={$reorder.columnIdx === fieldIdx}
class:reordering-target={$reordering.swapColumnIdx === fieldIdx} class:reorder-target={$reorder.swapColumnIdx === fieldIdx}
on:focus on:focus
on:mouseover={() => ($hoveredRowId = row._id)} on:mouseover={() => ($hoveredRowId = row._id)}
on:click={() => ($selectedCellId = cellIdx)} on:click={() => ($selectedCellId = cellIdx)}
@ -374,8 +374,7 @@
<!-- Horizontal spacer --> <!-- Horizontal spacer -->
<div <div
class="cell spacer" class="cell spacer"
class:reordering-target={$reordering.swapColumnIdx === class:reorder-target={$reorder.swapColumnIdx === $columns.length}
$columns.length}
/> />
{/each} {/each}
@ -395,8 +394,8 @@
class:sticky={fieldIdx === 0} class:sticky={fieldIdx === 0}
class:shadow={horizontallyScrolled} class:shadow={horizontallyScrolled}
class:hovered={$hoveredRowId === "new"} class:hovered={$hoveredRowId === "new"}
class:reordering-source={$reordering.columnIdx === fieldIdx} class:reorder-source={$reorder.columnIdx === fieldIdx}
class:reordering-target={$reordering.swapColumnIdx === fieldIdx} class:reorder-target={$reorder.swapColumnIdx === fieldIdx}
on:click={() => addRow(field)} on:click={() => addRow(field)}
on:focus on:focus
on:mouseover={() => ($hoveredRowId = "new")} on:mouseover={() => ($hoveredRowId = "new")}
@ -405,7 +404,7 @@
<!-- Horizontal spacer --> <!-- Horizontal spacer -->
<div <div
class="cell spacer" class="cell spacer"
class:reordering-target={$reordering.swapColumnIdx === $columns.length} class:reorder-target={$reorder.swapColumnIdx === $columns.length}
/> />
<!-- Vertical spacer --> <!-- Vertical spacer -->
@ -413,7 +412,7 @@
</div> </div>
<!-- Reorder placeholder --> <!-- Reorder placeholder -->
<ReorderingPlaceholder /> <ReorderPlaceholder />
</div> </div>
</div> </div>
@ -573,11 +572,11 @@
background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent); background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
} }
/* Reordering styles */ /* Reorder styles */
.cell.reordering-source { .cell.reorder-source {
background: var(--spectrum-global-color-gray-200); background: var(--spectrum-global-color-gray-200);
} }
.cell.reordering-target { .cell.reorder-target {
border-left-color: var(--spectrum-global-color-blue-400); border-left-color: var(--spectrum-global-color-blue-400);
} }

31
packages/client/src/components/app/spreadsheet/stores/reordering.js → packages/client/src/components/app/spreadsheet/stores/reorder.js
View File

@ -1,14 +1,14 @@
import { get, writable } from "svelte/store" import { get, writable } from "svelte/store"
export const createReorderingStores = context => { export const createReorderStores = context => {
const { columns, rand, rows } = context const { columns, rand, rows } = context
const reorderingInitialState = { const reorderInitialState = {
columnIdx: null, columnIdx: null,
swapColumnIdx: null, swapColumnIdx: null,
breakpoints: [], breakpoints: [],
initialMouseX: null, initialMouseX: null,
} }
const reordering = writable(reorderingInitialState) const reorder = writable(reorderInitialState)
// This is broken into its own store as it is rapidly updated, and we want to // This is broken into its own store as it is rapidly updated, and we want to
// ensure good performance by avoiding updating other components which depend // ensure good performance by avoiding updating other components which depend
@ -26,7 +26,6 @@ export const createReorderingStores = context => {
// Generate new breakpoints for the current columns // Generate new breakpoints for the current columns
let breakpoints = [] let breakpoints = []
const cols = get(columns) const cols = get(columns)
console.log(cols)
cols.forEach((col, idx) => { cols.forEach((col, idx) => {
const header = document.getElementById(`sheet-${rand}-header-${idx}`) const header = document.getElementById(`sheet-${rand}-header-${idx}`)
const bounds = header.getBoundingClientRect() const bounds = header.getBoundingClientRect()
@ -43,7 +42,7 @@ export const createReorderingStores = context => {
const bodyBounds = body.getBoundingClientRect() const bodyBounds = body.getBoundingClientRect()
// Update state // Update state
reordering.set({ reorder.set({
columnIdx, columnIdx,
breakpoints, breakpoints,
swapColumnIdx: null, swapColumnIdx: null,
@ -66,20 +65,20 @@ export const createReorderingStores = context => {
// Callback when moving the mouse when reordering columns // Callback when moving the mouse when reordering columns
const onReorderMouseMove = e => { const onReorderMouseMove = e => {
const $reordering = get(reordering) const $reorder = get(reorder)
if ($reordering.columnIdx == null) { if ($reorder.columnIdx == null) {
return return
} }
// Compute new placeholder position // Compute new placeholder position
const $placeholder = get(placeholder) const $placeholder = get(placeholder)
let newX = e.clientX - $reordering.initialMouseX + $placeholder.initialX let newX = e.clientX - $reorder.initialMouseX + $placeholder.initialX
newX = Math.max(0, newX) newX = Math.max(0, newX)
// Compute the closest breakpoint to the current position // Compute the closest breakpoint to the current position
let swapColumnIdx let swapColumnIdx
let minDistance = Number.MAX_SAFE_INTEGER let minDistance = Number.MAX_SAFE_INTEGER
$reordering.breakpoints.forEach((point, idx) => { $reorder.breakpoints.forEach((point, idx) => {
const distance = Math.abs(point - e.clientX) const distance = Math.abs(point - e.clientX)
if (distance < minDistance) { if (distance < minDistance) {
minDistance = distance minDistance = distance
@ -92,8 +91,8 @@ export const createReorderingStores = context => {
state.x = newX state.x = newX
return state return state
}) })
if (swapColumnIdx !== $reordering.swapColumnIdx) { if (swapColumnIdx !== $reorder.swapColumnIdx) {
reordering.update(state => { reorder.update(state => {
state.swapColumnIdx = swapColumnIdx state.swapColumnIdx = swapColumnIdx
return state return state
}) })
@ -103,7 +102,7 @@ export const createReorderingStores = context => {
// Callback when stopping reordering columns // Callback when stopping reordering columns
const stopReordering = () => { const stopReordering = () => {
// Swap position of columns // Swap position of columns
let { columnIdx, swapColumnIdx } = get(reordering) let { columnIdx, swapColumnIdx } = get(reorder)
const newColumns = get(columns).slice() const newColumns = get(columns).slice()
const removed = newColumns.splice(columnIdx, 1) const removed = newColumns.splice(columnIdx, 1)
if (--swapColumnIdx < columnIdx) { if (--swapColumnIdx < columnIdx) {
@ -113,7 +112,7 @@ export const createReorderingStores = context => {
columns.set(newColumns) columns.set(newColumns)
// Reset state // Reset state
reordering.set(reorderingInitialState) reorder.set(reorderInitialState)
placeholder.set(placeholderInitialState) placeholder.set(placeholderInitialState)
// Remove event handlers // Remove event handlers
@ -122,13 +121,13 @@ export const createReorderingStores = context => {
} }
return { return {
reordering: { reorder: {
...reordering, ...reorder,
actions: { actions: {
startReordering, startReordering,
stopReordering, stopReordering,
}, },
}, },
reorderingPlaceholder: placeholder, reorderPlaceholder: placeholder,
} }
} }

0
packages/client/src/components/app/spreadsheet/stores/resize.js Normal file
View File