Improve keyboard shortcuts for adding rows
This commit is contained in:
parent
61f05492ad
commit
e54ea6661f
|
@ -72,6 +72,7 @@
|
||||||
api = {
|
api = {
|
||||||
focus: () => open(),
|
focus: () => open(),
|
||||||
blur: () => close(),
|
blur: () => close(),
|
||||||
|
isActive: () => isOpen,
|
||||||
onKeyDown,
|
onKeyDown,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -50,6 +50,7 @@
|
||||||
const cellAPI = {
|
const cellAPI = {
|
||||||
focus: () => api?.focus(),
|
focus: () => api?.focus(),
|
||||||
blur: () => api?.blur(),
|
blur: () => api?.blur(),
|
||||||
|
isActive: () => api?.isActive?.() ?? false,
|
||||||
onKeyDown: (...params) => api?.onKeyDown(...params),
|
onKeyDown: (...params) => api?.onKeyDown(...params),
|
||||||
isReadonly: () => readonly,
|
isReadonly: () => readonly,
|
||||||
getType: () => column.schema.type,
|
getType: () => column.schema.type,
|
||||||
|
|
|
@ -43,6 +43,7 @@
|
||||||
api = {
|
api = {
|
||||||
focus: () => open(),
|
focus: () => open(),
|
||||||
blur: () => close(),
|
blur: () => close(),
|
||||||
|
isActive: () => isOpen,
|
||||||
onKeyDown,
|
onKeyDown,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -73,6 +73,7 @@
|
||||||
api = {
|
api = {
|
||||||
focus: open,
|
focus: open,
|
||||||
blur: close,
|
blur: close,
|
||||||
|
isActive: () => isOpen,
|
||||||
onKeyDown,
|
onKeyDown,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -235,6 +235,7 @@
|
||||||
api = {
|
api = {
|
||||||
focus: open,
|
focus: open,
|
||||||
blur: close,
|
blur: close,
|
||||||
|
isActive: () => isOpen,
|
||||||
onKeyDown,
|
onKeyDown,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
api = {
|
api = {
|
||||||
focus: () => input?.focus(),
|
focus: () => input?.focus(),
|
||||||
blur: () => input?.blur(),
|
blur: () => input?.blur(),
|
||||||
|
isActive: () => active,
|
||||||
onKeyDown,
|
onKeyDown,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -31,6 +31,10 @@
|
||||||
$: $tableId, (isAdding = false)
|
$: $tableId, (isAdding = false)
|
||||||
|
|
||||||
const addRow = async () => {
|
const addRow = async () => {
|
||||||
|
// Blur the active cell and tick to let final value updates propagate
|
||||||
|
$focusedCellAPI?.blur()
|
||||||
|
await tick()
|
||||||
|
|
||||||
// Create row
|
// Create row
|
||||||
const savedRow = await rows.actions.addRow(newRow, 0)
|
const savedRow = await rows.actions.addRow(newRow, 0)
|
||||||
if (savedRow) {
|
if (savedRow) {
|
||||||
|
@ -65,12 +69,6 @@
|
||||||
$hoveredRowId = rowId
|
$hoveredRowId = rowId
|
||||||
if (firstColumn) {
|
if (firstColumn) {
|
||||||
$focusedCellId = `${rowId}-${firstColumn.name}`
|
$focusedCellId = `${rowId}-${firstColumn.name}`
|
||||||
|
|
||||||
// Also focus the cell if it is a text-like cell
|
|
||||||
if (["string", "number"].includes(firstColumn.schema.type)) {
|
|
||||||
await tick()
|
|
||||||
$focusedCellAPI?.focus()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -89,8 +87,11 @@
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (e.key === "Escape") {
|
if (e.key === "Escape") {
|
||||||
e.preventDefault()
|
// Only close the new row component if we aren't actively inside a cell
|
||||||
clear()
|
if (!$focusedCellAPI?.isActive()) {
|
||||||
|
e.preventDefault()
|
||||||
|
clear()
|
||||||
|
}
|
||||||
} else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
} else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
addRow()
|
addRow()
|
||||||
|
@ -119,7 +120,9 @@
|
||||||
>
|
>
|
||||||
<GridCell width={GutterWidth} rowFocused>
|
<GridCell width={GutterWidth} rowFocused>
|
||||||
<div class="gutter">
|
<div class="gutter">
|
||||||
<div class="number">1</div>
|
<div class="number">
|
||||||
|
<Icon name="Add" />
|
||||||
|
</div>
|
||||||
{#if $config.allowExpandRows}
|
{#if $config.allowExpandRows}
|
||||||
<Icon name="Maximize" size="S" hoverable on:click={addViaModal} />
|
<Icon name="Maximize" size="S" hoverable on:click={addViaModal} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -30,7 +30,10 @@
|
||||||
// Always intercept certain key presses
|
// Always intercept certain key presses
|
||||||
const api = $focusedCellAPI
|
const api = $focusedCellAPI
|
||||||
if (e.key === "Escape") {
|
if (e.key === "Escape") {
|
||||||
api?.blur?.()
|
// By setting a tiny timeout here we can ensure that other listeners
|
||||||
|
// which depend on being able to read cell state on an escape keypress
|
||||||
|
// get a chance to observe the true state before we blur
|
||||||
|
setTimeout(api?.blur, 10)
|
||||||
} else if (e.key === "Tab") {
|
} else if (e.key === "Tab") {
|
||||||
api?.blur?.()
|
api?.blur?.()
|
||||||
changeFocusedColumn(1)
|
changeFocusedColumn(1)
|
||||||
|
|
Loading…
Reference in New Issue