Add boolean cell
This commit is contained in:
parent
125febdd5a
commit
9a024d96e7
|
@ -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(() => {
|
||||||
|
|
|
@ -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>
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue