improve tab nav
This commit is contained in:
parent
5ea7a61915
commit
8c4b9d27f2
|
@ -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 }) => {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
: ""
|
: ""
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue