Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 075ba07

Browse files
RafaelGBRafaelGB
committed
Merge branch 'move_metadata_to_addRow'
2 parents f27ef8a + 1ddc5d1 commit 075ba07

File tree

15 files changed

+164
-28
lines changed

15 files changed

+164
-28
lines changed

‎src/components/Table.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import {
4545
import HeaderContextMenuWrapper from "components/contextMenu/HeaderContextMenuWrapper";
4646
import TableActions from "components/tableActions/TableActions";
4747
import PaginationTable from "components/navbar/PaginationTable";
48+
import onKeyDownArrowKeys from "./behavior/ArrowKeysNavigation";
4849

4950
const defaultColumn: Partial<ColumnDef<RowDataType>> = {
5051
minSize: DatabaseLimits.MIN_COLUMN_WIDTH,
@@ -221,6 +222,7 @@ export function Table(tableData: TableDataType) {
221222
onMouseOver={obsidianMdLinksOnMouseOverMenuCallback(view)}
222223
/** Obsidian to open an internal link in a new pane */
223224
onClick={obsidianMdLinksOnClickCallback(stateManager, view, filePath)}
225+
onKeyDown={onKeyDownArrowKeys}
224226
style={{
225227
width: table.getCenterTotalSize(),
226228
}}

‎src/components/behavior/ArrowKeysNavigation.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { c } from "helpers/StylesHelper";
2+
import { KeyboardEventHandler } from "react";
3+
4+
type TabIndexElement = HTMLDivElement | HTMLSpanElement;
5+
6+
const onKeyDownArrowKeys: KeyboardEventHandler<HTMLDivElement> = (event) => {
7+
const currentInput = activeDocument.activeElement;
8+
if (currentInput === null || !currentInput.classList.contains(c('tabIndex'))) return;
9+
10+
const currentTd = currentInput.parentElement;
11+
const currentTr = currentTd.parentElement;
12+
const index = Array.from(currentTr.children).indexOf(currentTd);
13+
14+
switch (event.key) {
15+
case "ArrowLeft":
16+
// Left pressed
17+
const TdLeft = currentTd.previousElementSibling;
18+
if (!TdLeft) break;
19+
const TdLeftTabIndex = TdLeft.getElementsByClassName(c('tabIndex'))[0] as TabIndexElement;
20+
if (!TdLeftTabIndex) break;
21+
TdLeftTabIndex.focus();
22+
break;
23+
case "ArrowRight":
24+
// Right pressed
25+
const TdRight = currentTd.nextElementSibling;
26+
if (!TdRight) break;
27+
const TdRightTabIndex = TdRight.getElementsByClassName(c('tabIndex'))[0] as TabIndexElement;
28+
if (!TdRightTabIndex) break;
29+
TdRightTabIndex.focus();
30+
break;
31+
case "ArrowUp":
32+
// Up pressed
33+
const TrUp = currentTr
34+
.previousElementSibling
35+
?.children;
36+
if (!TrUp) break;
37+
38+
const TdUp = (Array.from(TrUp)[index]
39+
.getElementsByClassName(c('tabIndex'))[0] as TabIndexElement);
40+
41+
if (!TdUp) break;
42+
TdUp.focus();
43+
break;
44+
case "ArrowDown":
45+
// Down pressed
46+
const TrDown = currentTr
47+
.nextElementSibling
48+
?.children;
49+
if (TrDown === undefined) break;
50+
51+
const TdDown = (Array.from(TrDown)[index]
52+
.getElementsByClassName(c('tabIndex'))[0] as TabIndexElement);
53+
54+
if (TdDown === undefined) break;
55+
TdDown.focus();
56+
break;
57+
}
58+
}
59+
60+
export default onKeyDownArrowKeys;

‎src/components/cellTypes/CalendarCell.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
3939
/** state of cell value */
4040
const [showDatePicker, setShowDatePicker] = useState(false);
4141

42-
function handleSpanOnClick(event: any) {
43-
event.preventDefault();
42+
function handleSpanOnClick() {
4443
setShowDatePicker(true);
4544
}
4645

@@ -101,9 +100,16 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
101100
/>
102101
) : (
103102
<span
104-
className={`${c("calendar")}`}
103+
className={`${c("calendar tabIndex")}`}
105104
onClick={handleSpanOnClick}
106105
style={{ width: column.getSize() }}
106+
onKeyDown={(e) => {
107+
if (e.key === "Enter") {
108+
e.preventDefault();
109+
handleSpanOnClick();
110+
}
111+
}}
112+
tabIndex={0}
107113
>
108114
{parseLuxonDateToString(
109115
calendarCell,

‎src/components/cellTypes/CalendarTimeCell.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
3939
/** state of cell value */
4040
const [showDatePicker, setShowDatePicker] = useState(false);
4141

42-
function handleSpanOnClick(event: any) {
43-
event.preventDefault();
42+
function handleSpanOnClick() {
4443
setShowDatePicker(true);
4544
}
4645

@@ -102,9 +101,16 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
102101
/>
103102
) : (
104103
<span
105-
className={`${c("calendar")}`}
104+
className={`${c("calendar tabIndex")}`}
106105
style={{ width: column.getSize() }}
107106
onClick={handleSpanOnClick}
107+
onKeyDown={(e) => {
108+
if (e.key === "Enter") {
109+
e.preventDefault();
110+
handleSpanOnClick();
111+
}
112+
}}
113+
tabIndex={0}
108114
>
109115
{parseLuxonDatetimeToString(
110116
calendarCell,

‎src/components/cellTypes/CheckboxCell.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,10 @@ function CheckboxCell(props: CellComponentProps) {
4444
};
4545

4646
return (
47-
<div key={`checkbox-div-${row.index}`} className={`${c("checkbox")}`}>
47+
<div
48+
key={`checkbox-div-${row.index}`}
49+
className={`${c("checkbox tabIndex")}`}
50+
>
4851
<input
4952
type="checkbox"
5053
checked={checkboxCell}

‎src/components/cellTypes/InOutLinksCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const InOutLinksCell = (mdProps: CellComponentProps) => {
2525
5
2626
);
2727
});
28-
return <span ref={mdRef} className={c("md_cell text-align-left")}></span>;
28+
return <span ref={mdRef} className={c("md_cell text-align-left")} />;
2929
};
3030

3131
export default InOutLinksCell;

‎src/components/cellTypes/NumberCell.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CellComponentProps } from "cdm/ComponentsModel";
22
import { TableColumn } from "cdm/FolderModel";
3-
import { InputType } from "helpers/Constants";
3+
import { InputType, SUGGESTER_REGEX } from "helpers/Constants";
44
import { c, getAlignmentClassname } from "helpers/StylesHelper";
55
import React, {
66
ChangeEventHandler,
@@ -93,10 +93,23 @@ const NumberCell = (props: CellComponentProps) => {
9393
) : (
9494
<span
9595
className={c(
96-
getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
96+
getAlignmentClassname(
97+
tableColumn.config,
98+
configInfo.getLocalSettings(),
99+
["tabIndex"]
100+
)
97101
)}
98-
onClick={handleEditableOnclick}
102+
onDoubleClick={handleEditableOnclick}
99103
style={{ width: column.getSize() }}
104+
onKeyDown={(e) => {
105+
if (SUGGESTER_REGEX.CELL_VALID_KEYDOWN.test(e.key)) {
106+
handleEditableOnclick();
107+
} else if (e.key === "Enter") {
108+
e.preventDefault();
109+
handleEditableOnclick();
110+
}
111+
}}
112+
tabIndex={0}
100113
>
101114
{(numberCell !== undefined && numberCell.toString()) || ""}
102115
</span>

‎src/components/cellTypes/RelationCell.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { InputType } from "helpers/Constants";
44
import { c, getAlignmentClassname } from "helpers/StylesHelper";
55
import { Notice } from "obsidian";
66
import { Link } from "obsidian-dataview";
7-
import React, { MouseEventHandler, useEffect, useRef, useState } from "react";
7+
import React, { useEffect, useRef, useState } from "react";
88
import { DataviewService } from "services/DataviewService";
99
import { ParseService } from "services/ParseService";
1010
import RelationEditor from "components/cellTypes/Editor/RelationEditor";
@@ -87,8 +87,7 @@ const RelationCell = (mdProps: CellComponentProps) => {
8787
setDirtyCell(false);
8888
};
8989

90-
const handleOnClick: MouseEventHandler<HTMLSpanElement> = (event) => {
91-
event.stopPropagation();
90+
const handleOnClick = () => {
9291
// Check if the column has a relation asotiated
9392
if (tableColumn.config.related_note_path) {
9493
setDirtyCell(true);
@@ -112,8 +111,19 @@ const RelationCell = (mdProps: CellComponentProps) => {
112111
onClick={handleOnClick}
113112
style={{ width: column.getSize() }}
114113
className={c(
115-
getAlignmentClassname(tableColumn.config, configInfo.getLocalSettings())
114+
getAlignmentClassname(
115+
tableColumn.config,
116+
configInfo.getLocalSettings(),
117+
["tabIndex"]
118+
)
116119
)}
120+
onKeyDown={(e) => {
121+
if (e.key === "Enter") {
122+
e.preventDefault();
123+
handleOnClick();
124+
}
125+
}}
126+
tabIndex={0}
117127
/>
118128
);
119129
};

‎src/components/cellTypes/SelectCell.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,11 +138,19 @@ const SelectCell = (popperProps: CellComponentProps) => {
138138
className={c(
139139
getAlignmentClassname(
140140
tableColumn.config,
141-
configInfo.getLocalSettings()
141+
configInfo.getLocalSettings(),
142+
["tabIndex"]
142143
)
143144
)}
144145
onClick={() => setShowSelect(true)}
145146
style={{ width: column.getSize() }}
147+
onKeyDown={(e) => {
148+
if (e.key === "Enter") {
149+
e.preventDefault();
150+
setShowSelect(true);
151+
}
152+
}}
153+
tabIndex={0}
146154
>
147155
{cellValue ? (
148156
<Relationship value={cellValue} backgroundColor={getColor()} />

‎src/components/cellTypes/TagsCell.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,12 +142,20 @@ const TagsCell = (tagsProps: CellComponentProps) => {
142142
className={c(
143143
getAlignmentClassname(
144144
tableColumn.config,
145-
configInfo.getLocalSettings()
146-
).concat(" tags-container")
145+
configInfo.getLocalSettings(),
146+
["tabIndex", "tags-container"]
147+
)
147148
)}
148149
onClick={() => setShowSelectTags(true)}
149150
style={{ width: column.getSize() }}
150151
key={`tags-${row.index}-${tableColumn.key}`}
152+
onKeyDown={(e) => {
153+
if (e.key === "Enter") {
154+
e.preventDefault();
155+
setShowSelectTags(true);
156+
}
157+
}}
158+
tabIndex={0}
151159
>
152160
{tagsCell ? (
153161
tagsCell

0 commit comments

Comments
 (0)