Add boolean cell

This commit is contained in:
Andrew Kingston 2023-03-14 09:53:08 +00:00
parent 125febdd5a
commit 9a024d96e7
3 changed files with 60 additions and 8 deletions

View File

@ -12,22 +12,25 @@
} = getContext("sheet") } = getContext("sheet")
const handleKeyDown = e => { const handleKeyDown = e => {
const api = get(selectedCellAPI) if (!get(selectedCellId)) {
if (!api) { if (e.key === "Tab") {
selectFirstCell()
}
return return
} }
const api = get(selectedCellAPI)
// Always intercept certain key presses // Always intercept certain key presses
if (e.key === "Escape") { if (e.key === "Escape") {
api.blur() api?.blur?.()
} else if (e.key === "Tab") { } else if (e.key === "Tab") {
api.blur() api?.blur?.()
changeSelectedColumn(1) changeSelectedColumn(1)
} }
// Pass the key event to the selected cell and let it decide whether to // Pass the key event to the selected cell and let it decide whether to
// capture it or not // capture it or not
const handled = api.onKeyDown?.(e) const handled = api?.onKeyDown?.(e)
if (handled) { if (handled) {
return return
} }
@ -56,6 +59,10 @@
} }
} }
const selectFirstCell = () => {
console.log("select first")
}
const changeSelectedColumn = delta => { const changeSelectedColumn = delta => {
if (!$selectedCellId) { if (!$selectedCellId) {
return return
@ -100,7 +107,7 @@
} }
const focusSelectedCell = () => { const focusSelectedCell = () => {
$selectedCellAPI?.focus() $selectedCellAPI?.focus?.()
} }
onMount(() => { onMount(() => {

View File

@ -0,0 +1,44 @@
<script>
import { onMount } from "svelte"
import { Checkbox } from "@budibase/bbui"
export let value
export let selected = false
export let onChange
export let readonly = false
export let api
$: editable = selected && !readonly
const handleChange = e => {
onChange(e.detail)
}
const onKeyDown = e => {
if (e.key === "Enter") {
onChange(!value)
return true
}
return false
}
onMount(() => {
api = {
onKeyDown,
}
})
</script>
<div class="boolean-cell" class:editable>
<Checkbox {value} on:change={handleChange} />
</div>
<style>
.boolean-cell {
padding: 0 var(--cell-padding);
pointer-events: none;
}
.boolean-cell.editable {
pointer-events: all;
}
</style>

View File

@ -6,16 +6,17 @@ import RelationshipCell from "./cells/RelationshipCell.svelte"
import TextCell from "./cells/TextCell.svelte" import TextCell from "./cells/TextCell.svelte"
import BlankCell from "./cells/BlankCell.svelte" import BlankCell from "./cells/BlankCell.svelte"
import LongFormCell from "./cells/LongFormCell.svelte" import LongFormCell from "./cells/LongFormCell.svelte"
import BooleanCell from "./cells/BooleanCell.svelte"
const TypeComponentMap = { const TypeComponentMap = {
text: TextCell, text: TextCell,
options: OptionsCell, options: OptionsCell,
datetime: DateCell, datetime: DateCell,
barcodeqr: BlankCell, barcodeqr: TextCell,
longform: LongFormCell, longform: LongFormCell,
array: MultiSelectCell, array: MultiSelectCell,
number: NumberCell, number: NumberCell,
boolean: BlankCell, boolean: BooleanCell,
attachment: BlankCell, attachment: BlankCell,
link: RelationshipCell, link: RelationshipCell,
formula: BlankCell, formula: BlankCell,