improve tab nav
This commit is contained in:
parent
52578b7979
commit
0e0c2a71ea
|
@ -18,11 +18,13 @@ import { PubsWithGenres } from "./page"
|
|||
import { DialogClose } from "@radix-ui/react-dialog"
|
||||
import { actions } from "app/ui/tables/actions"
|
||||
import { TextInputCell } from "app/ui/inputs/textInput"
|
||||
import { selectCol } from "app/ui/tables/selectColumn"
|
||||
|
||||
|
||||
const columnHelper = createColumnHelper<PubsWithGenres>()
|
||||
|
||||
export const columns: ColumnDef<PubsWithGenres>[] = [
|
||||
selectCol,
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: ({ column }) => {
|
||||
|
|
|
@ -27,7 +27,6 @@ export const TextInputCell = (props: CellContext<any, any>) => {
|
|||
handleClose()
|
||||
}
|
||||
function handleOpen() {
|
||||
console.log(props.row.getEx)
|
||||
setIsActive(true)
|
||||
}
|
||||
function handleClose() {
|
||||
|
@ -44,6 +43,12 @@ export const TextInputCell = (props: CellContext<any, any>) => {
|
|||
return (<div
|
||||
onDoubleClick={() => setIsActive(prev => !prev)}
|
||||
className="w-full h-fit flex items-center justify-center"
|
||||
tabIndex={0}
|
||||
onKeyDown={e => {
|
||||
if (e.code === "Enter" && !isActive) {
|
||||
setIsActive(true)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{isActive ?
|
||||
<Input
|
||||
|
|
|
@ -22,21 +22,9 @@ export default function FormContextMenu({ table, row }: ComponentProps<"div"> &
|
|||
</>
|
||||
: ""
|
||||
}
|
||||
|
||||
{
|
||||
selectedRows.length <= 1 ?
|
||||
<ContextMenuSub>
|
||||
<ContextMenuSubTrigger>Edit</ContextMenuSubTrigger>
|
||||
<ContextMenuSubContent>
|
||||
{Object.keys(row.original).map(e => {
|
||||
if (e !== "id") {
|
||||
return <ContextMenuItem>{letterCase(e)}</ContextMenuItem>
|
||||
}
|
||||
})}
|
||||
</ContextMenuSubContent>
|
||||
</ContextMenuSub> : ""
|
||||
}
|
||||
{
|
||||
selectedRows ?
|
||||
selectedRows.length > 0 ?
|
||||
<ContextMenuItem onClick={() => { table.resetRowSelection() }}>Deselect</ContextMenuItem>
|
||||
: ""
|
||||
}
|
||||
|
|
|
@ -22,7 +22,9 @@ export const selectCol = {
|
|||
<Checkbox
|
||||
checked={props.row.getIsSelected()}
|
||||
onCheckedChange={props.row.toggleSelected}
|
||||
aria-label="select/deselect row" />
|
||||
aria-label="select/deselect row"
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue