improve tab nav

This commit is contained in:
andrzej 2024-06-30 20:28:02 +02:00
parent 52578b7979
commit 0e0c2a71ea
4 changed files with 13 additions and 16 deletions

View File

@ -18,11 +18,13 @@ import { PubsWithGenres } from "./page"
import { DialogClose } from "@radix-ui/react-dialog" import { DialogClose } from "@radix-ui/react-dialog"
import { actions } from "app/ui/tables/actions" import { actions } from "app/ui/tables/actions"
import { TextInputCell } from "app/ui/inputs/textInput" import { TextInputCell } from "app/ui/inputs/textInput"
import { selectCol } from "app/ui/tables/selectColumn"
const columnHelper = createColumnHelper<PubsWithGenres>() const columnHelper = createColumnHelper<PubsWithGenres>()
export const columns: ColumnDef<PubsWithGenres>[] = [ export const columns: ColumnDef<PubsWithGenres>[] = [
selectCol,
{ {
accessorKey: "title", accessorKey: "title",
header: ({ column }) => { header: ({ column }) => {

View File

@ -27,7 +27,6 @@ export const TextInputCell = (props: CellContext<any, any>) => {
handleClose() handleClose()
} }
function handleOpen() { function handleOpen() {
console.log(props.row.getEx)
setIsActive(true) setIsActive(true)
} }
function handleClose() { function handleClose() {
@ -44,6 +43,12 @@ export const TextInputCell = (props: CellContext<any, any>) => {
return (<div return (<div
onDoubleClick={() => setIsActive(prev => !prev)} onDoubleClick={() => setIsActive(prev => !prev)}
className="w-full h-fit flex items-center justify-center" className="w-full h-fit flex items-center justify-center"
tabIndex={0}
onKeyDown={e => {
if (e.code === "Enter" && !isActive) {
setIsActive(true)
}
}}
> >
{isActive ? {isActive ?
<Input <Input

View File

@ -22,21 +22,9 @@ export default function FormContextMenu({ table, row }: ComponentProps<"div"> &
</> </>
: "" : ""
} }
{ {
selectedRows.length <= 1 ? selectedRows.length > 0 ?
<ContextMenuSub>
<ContextMenuSubTrigger>Edit</ContextMenuSubTrigger>
<ContextMenuSubContent>
{Object.keys(row.original).map(e => {
if (e !== "id") {
return <ContextMenuItem>{letterCase(e)}</ContextMenuItem>
}
})}
</ContextMenuSubContent>
</ContextMenuSub> : ""
}
{
selectedRows ?
<ContextMenuItem onClick={() => { table.resetRowSelection() }}>Deselect</ContextMenuItem> <ContextMenuItem onClick={() => { table.resetRowSelection() }}>Deselect</ContextMenuItem>
: "" : ""
} }

View File

@ -22,7 +22,9 @@ export const selectCol = {
<Checkbox <Checkbox
checked={props.row.getIsSelected()} checked={props.row.getIsSelected()}
onCheckedChange={props.row.toggleSelected} onCheckedChange={props.row.toggleSelected}
aria-label="select/deselect row" /> aria-label="select/deselect row"
/>
</div> </div>
) )
} }