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

Commit 4d79169

Browse files
decaf-devdecaf-dev
authored
Merge pull request #528 from trey-wallis/dev
6.15.1
2 parents 74dbaf1 + 33dd53e commit 4d79169

File tree

30 files changed

+324
-158
lines changed

30 files changed

+324
-158
lines changed

‎manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@
77
"authorUrl": "https://github.com/trey-wallis",
88
"isDesktopOnly": false,
99
"fundingUrl": "https://www.buymeacoffee.com/treywallis",
10-
"version": "6.15.0"
10+
"version": "6.15.1"
1111
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "obsidian-notion-like-tables",
3-
"version": "6.15.0",
3+
"version": "6.15.1",
44
"description": "Notion-like tables for Obsidian.md",
55
"main": "main.js",
66
"scripts": {

‎src/data/constants.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const CURRENT_PLUGIN_VERSION = "6.15.0";
1+
export const CURRENT_PLUGIN_VERSION = "6.15.1";
22

33
export const DEFAULT_TABLE_NAME = "Untitled";
44

‎src/react/export-app/export-type-select.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Stack from "src/react/shared/stack";
22
import { ExportType } from "../../shared/export/types";
3+
import { css } from "@emotion/react";
34

45
interface Props {
56
value: ExportType;
@@ -12,6 +13,11 @@ export default function ExportTypeSelect({ value, onChange }: Props) {
1213
<label htmlFor="type-select">File Type</label>
1314
<select
1415
id="type-select"
16+
css={css`
17+
background-color: var(
18+
--background-secondary-alt
19+
) !important;
20+
`}
1521
value={value}
1622
onChange={(e) => onChange(e.target.value as ExportType)}
1723
>

‎src/react/export-app/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function ExportApp({ tableState, filePath }: Props) {
4545

4646
return (
4747
<div className="NLT__export-app">
48-
<Padding pb="xl">
48+
<Padding p="xl">
4949
<h5
5050
css={css`
5151
margin-top: 0px;
@@ -75,6 +75,11 @@ export function ExportApp({ tableState, filePath }: Props) {
7575
Download
7676
</button>
7777
<button
78+
css={css`
79+
background-color: var(
80+
--background-secondary-alt
81+
) !important;
82+
`}
7883
onClick={() => handleCopyClick(content)}
7984
>
8085
Copy to clipboard

‎src/react/shared/menu-trigger/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const MenuTrigger = ({
2323
onBackspaceDown,
2424
}: Props) => {
2525
const id = useUUID();
26+
2627
React.useEffect(() => {
2728
function handleClick(e: MouseEvent) {
2829
const target = e.target as HTMLElement;

‎src/react/table-app/body-cell/index.tsx

+20-8
Original file line numberDiff line numberDiff line change
@@ -114,26 +114,32 @@ export default function BodyCell({
114114
onDateTimeChange,
115115
onTagAdd,
116116
}: Props) {
117+
//All of these cells have local values
118+
const shouldRequestOnClose =
119+
columnType === CellType.TEXT ||
120+
columnType === CellType.NUMBER ||
121+
columnType === CellType.CURRENCY ||
122+
columnType === CellType.TAG ||
123+
columnType === CellType.MULTI_TAG ||
124+
columnType === CellType.DATE;
125+
117126
const {
118127
menu,
119128
isMenuOpen,
120-
menuCloseRequestTime,
129+
menuCloseRequest,
121130
menuRef,
122131
openMenu,
123132
closeTopMenu,
124133
} = useMenu(MenuLevel.ONE, {
125-
shouldRequestOnClose:
126-
columnType === CellType.DATE ||
127-
columnType === CellType.TAG ||
128-
columnType === CellType.MULTI_TAG,
134+
shouldRequestOnClose,
129135
});
130136
const { triggerPosition, triggerRef } = useMenuTriggerPosition();
131137
useShiftMenu(triggerRef, menuRef, isMenuOpen);
132138

133139
const { doCommand } = useTableState();
134140

135141
//Once the menu is closed, we want to sort all rows
136-
const didIsMenuOpenChange = useCompare(isMenuOpen);
142+
const didIsMenuOpenChange = useCompare(isMenuOpen, false);
137143
React.useEffect(() => {
138144
if (didIsMenuOpenChange) {
139145
if (!isMenuOpen) {
@@ -386,9 +392,11 @@ export default function BodyCell({
386392
>
387393
{columnType === CellType.TEXT && (
388394
<TextCellEdit
395+
menuCloseRequest={menuCloseRequest}
389396
shouldWrapOverflow={shouldWrapOverflow}
390397
value={markdown}
391398
onChange={handleTextInputChange}
399+
onMenuClose={handleMenuClose}
392400
/>
393401
)}
394402
{columnType === CellType.FILE && (
@@ -399,14 +407,16 @@ export default function BodyCell({
399407
)}
400408
{columnType === CellType.NUMBER && (
401409
<NumberCellEdit
410+
menuCloseRequest={menuCloseRequest}
402411
value={markdown}
403412
onChange={handleNumberInputChange}
413+
onMenuClose={handleMenuClose}
404414
/>
405415
)}
406416
{(columnType === CellType.TAG ||
407417
columnType === CellType.MULTI_TAG) && (
408418
<TagCellEdit
409-
menuCloseRequestTime={menuCloseRequestTime}
419+
menuCloseRequest={menuCloseRequest}
410420
columnTags={columnTags}
411421
cellTags={cellTags}
412422
onTagColorChange={handleTagColorChange}
@@ -420,7 +430,7 @@ export default function BodyCell({
420430
{columnType === CellType.DATE && (
421431
<DateCellEdit
422432
value={dateTime}
423-
menuCloseRequestTime={menuCloseRequestTime}
433+
menuCloseRequest={menuCloseRequest}
424434
dateFormat={dateFormat}
425435
onDateTimeChange={handleDateTimeChange}
426436
onDateFormatChange={handleDateFormatChange}
@@ -429,8 +439,10 @@ export default function BodyCell({
429439
)}
430440
{columnType === CellType.CURRENCY && (
431441
<CurrencyCellEdit
442+
menuCloseRequest={menuCloseRequest}
432443
value={markdown}
433444
onChange={handleCurrencyChange}
445+
onMenuClose={handleMenuClose}
434446
/>
435447
)}
436448
</Menu>

‎src/react/table-app/currency-cell-edit/index.tsx

+28-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,39 @@
1-
import { useInputSelection } from "src/shared/hooks";
1+
import { useCompare, useInputSelection } from "src/shared/hooks";
22
import { isValidNumberInput } from "src/shared/validators";
33

44
import "./styles.css";
55
import React from "react";
6+
import { MenuCloseRequest } from "src/shared/menu/types";
67
interface Props {
8+
menuCloseRequest: MenuCloseRequest | null;
79
value: string;
810
onChange: (value: string) => void;
11+
onMenuClose: () => void;
912
}
1013

11-
export default function CurrencyCellEdit({ value, onChange }: Props) {
14+
export default function CurrencyCellEdit({
15+
value,
16+
menuCloseRequest,
17+
onChange,
18+
onMenuClose,
19+
}: Props) {
20+
const [localValue, setLocalValue] = React.useState(value);
1221
const inputRef = React.useRef<HTMLInputElement | null>(null);
13-
const { setPreviousSelectionStart } = useInputSelection(inputRef, value);
22+
const { setPreviousSelectionStart } = useInputSelection(
23+
inputRef,
24+
localValue
25+
);
26+
27+
const hasCloseRequestTimeChanged = useCompare(
28+
menuCloseRequest?.requestTime
29+
);
30+
31+
React.useEffect(() => {
32+
if (hasCloseRequestTimeChanged && menuCloseRequest !== null) {
33+
onChange(localValue);
34+
onMenuClose();
35+
}
36+
}, [localValue, hasCloseRequestTimeChanged, menuCloseRequest, onMenuClose]);
1437

1538
function handleChange(inputValue: string, setSelectionToLength = false) {
1639
if (!isValidNumberInput(inputValue)) return;
@@ -25,7 +48,7 @@ export default function CurrencyCellEdit({ value, onChange }: Props) {
2548
setPreviousSelectionStart(inputRef.current.selectionStart);
2649
}
2750
}
28-
onChange(inputValue);
51+
setLocalValue(inputValue);
2952
}
3053

3154
return (
@@ -35,7 +58,7 @@ export default function CurrencyCellEdit({ value, onChange }: Props) {
3558
ref={inputRef}
3659
type="text" //We use an input of type text so that the selection is available
3760
inputMode="numeric"
38-
value={value}
61+
value={localValue}
3962
onChange={(e) => handleChange(e.target.value)}
4063
/>
4164
</div>

‎src/react/table-app/date-cell-edit/index.tsx

+26-25
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from "react";
1+
import React from "react";
22

33
import MenuItem from "src/react/shared/menu-item";
44
import Stack from "src/react/shared/stack";
@@ -13,7 +13,7 @@ import { DateFormat } from "src/shared/types/types";
1313
import { useCompare } from "src/shared/hooks";
1414
import DateFormatMenu from "./components/DateFormatMenu";
1515
import { useMenu } from "src/shared/menu/hooks";
16-
import { MenuLevel } from "src/shared/menu/types";
16+
import { MenuCloseRequest, MenuLevel } from "src/shared/menu/types";
1717

1818
import MenuTrigger from "src/react/shared/menu-trigger";
1919
import { getDisplayNameForDateFormat } from "src/shared/table-state/display-name";
@@ -25,7 +25,7 @@ import { useMenuTriggerPosition, useShiftMenu } from "src/shared/menu/utils";
2525

2626
interface Props {
2727
value: number | null;
28-
menuCloseRequestTime: number | null;
28+
menuCloseRequest: MenuCloseRequest | null;
2929
dateFormat: DateFormat;
3030
onDateTimeChange: (value: number | null) => void;
3131
onDateFormatChange: (value: DateFormat) => void;
@@ -34,7 +34,7 @@ interface Props {
3434

3535
export default function DateCellEdit({
3636
value,
37-
menuCloseRequestTime,
37+
menuCloseRequest,
3838
dateFormat,
3939
onDateTimeChange,
4040
onMenuClose,
@@ -50,53 +50,54 @@ export default function DateCellEdit({
5050
leftOffset: -50,
5151
});
5252

53-
const [localValue, setLocalValue] = useState(
53+
const [localValue, setLocalValue] = React.useState(
5454
value === null ? "" : unixTimeToDateString(value, dateFormat)
5555
);
5656

57-
const [isInputInvalid, setInputInvalid] = useState(false);
58-
const [closeTime, setCloseTime] = useState(0);
57+
const [isInputInvalid, setInputInvalid] = React.useState(false);
58+
const [closeTime, setCloseTime] = React.useState(0);
5959
const inputRef = React.useRef<HTMLInputElement | null>(null);
6060

61-
useEffect(() => {
61+
React.useEffect(() => {
6262
setLocalValue(
6363
value === null ? "" : unixTimeToDateString(value, dateFormat)
6464
);
6565
}, [value, dateFormat]);
6666

67-
const hasCloseRequestTimeChange = useCompare(menuCloseRequestTime);
68-
useEffect(() => {
67+
const hasCloseRequestTimeChanged = useCompare(
68+
menuCloseRequest?.requestTime
69+
);
70+
React.useEffect(() => {
6971
function validateInput() {
70-
let value: number | null = null;
72+
let newValue: number | null = null;
7173
//If the user has not entered a value, we don't need to validate the date format
7274
if (localValue !== "") {
73-
if (!isValidDateFormat(localValue, dateFormat)) {
74-
setInputInvalid(true);
75-
return;
75+
if (isValidDateFormat(localValue, dateFormat)) {
76+
//Convert local value to unix time
77+
newValue = dateStringToUnixTime(localValue, dateFormat);
78+
} else {
79+
if (menuCloseRequest?.type === "enter") {
80+
setInputInvalid(true);
81+
return;
82+
}
83+
newValue = value;
7684
}
77-
//Convert local value to unix time
78-
value = dateStringToUnixTime(localValue, dateFormat);
7985
}
8086

8187
setInputInvalid(false);
82-
onDateTimeChange(value);
88+
onDateTimeChange(newValue);
8389
setCloseTime(Date.now());
8490
}
8591

86-
if (hasCloseRequestTimeChange && menuCloseRequestTime !== null)
92+
if (hasCloseRequestTimeChanged && menuCloseRequest !== null)
8793
validateInput();
88-
}, [
89-
hasCloseRequestTimeChange,
90-
localValue,
91-
menuCloseRequestTime,
92-
dateFormat,
93-
]);
94+
}, [hasCloseRequestTimeChanged, localValue, menuCloseRequest, dateFormat]);
9495

9596
//If we call onMenuClose directly in the validateInput function, we can see the cell markdown
9697
//change to the new value as the menu closes
9798
//If we call onMenuClose in a useEffect, we wait an entire render cycle before closing the menu
9899
//This allows us to see the cell markdown change to the new value before the menu closes
99-
useEffect(() => {
100+
React.useEffect(() => {
100101
if (closeTime !== 0) {
101102
onMenuClose();
102103
}

‎src/react/table-app/header-cell/components/HeaderMenu/components/BaseMenu/index.tsx renamed to ‎src/react/table-app/header-cell-edit/base-menu.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import MenuItem from "src/react/shared/menu-item";
33
import Padding from "src/react/shared/padding";
44
import Stack from "src/react/shared/stack";
55
import { CellType, SortDir } from "src/shared/types/types";
6-
import { SubmenuType } from "../../types";
7-
import { useInputSelection } from "src/shared/hooks";
6+
import { SubmenuType } from "./types";
7+
import { useCompare, useInputSelection } from "src/shared/hooks";
88
import { getDisplayNameForCellType } from "src/shared/table-state/display-name";
99
import { css } from "@emotion/react";
1010
import { getTableBackgroundColor, getTableBorderColor } from "src/shared/color";
1111
import React from "react";
1212
import Flex from "src/react/shared/flex";
1313
import Switch from "src/react/shared/switch";
1414
import Text from "src/react/shared/text";
15+
import { MenuCloseRequest } from "src/shared/menu/types";
1516

1617
interface Props {
1718
canDeleteColumn: boolean;
@@ -21,26 +22,26 @@ interface Props {
2122
cellId: string;
2223
columnType: CellType;
2324
columnSortDir: SortDir;
24-
onColumnNameChange: (cellId: string, value: string) => void;
25+
menuCloseRequest: MenuCloseRequest | null;
26+
onColumnNameChange: (value: string) => void;
2527
onSortClick: (value: SortDir) => void;
2628
onSubmenuChange: (value: SubmenuType) => void;
2729
onWrapOverflowToggle: (columnId: string, value: boolean) => void;
2830
onDeleteClick: () => void;
2931
}
3032

3133
export default function BaseMenu({
32-
cellId,
3334
shouldWrapOverflow,
3435
columnName,
3536
columnId,
3637
columnType,
3738
columnSortDir,
3839
canDeleteColumn,
39-
onColumnNameChange,
4040
onSortClick,
4141
onSubmenuChange,
4242
onWrapOverflowToggle,
4343
onDeleteClick,
44+
onColumnNameChange,
4445
}: Props) {
4546
const inputRef = React.useRef<HTMLInputElement | null>(null);
4647
const { setPreviousSelectionStart } = useInputSelection(
@@ -62,7 +63,7 @@ export default function BaseMenu({
6263
setPreviousSelectionStart(inputRef.current.selectionStart);
6364
}
6465
}
65-
onColumnNameChange(cellId, inputValue);
66+
onColumnNameChange(inputValue);
6667
}
6768

6869
const tableBackgroundColor = getTableBackgroundColor();

‎src/react/table-app/header-cell/components/HeaderMenu/components/CurrencySubmenu/index.tsx renamed to ‎src/react/table-app/header-cell-edit/currency-submenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import MenuItem from "src/react/shared/menu-item";
2-
import Submenu from "../Submenu";
2+
import Submenu from "./submenu";
33
import { CurrencyType } from "src/shared/types/types";
44
import { getDisplayNameForCurrencyType } from "src/shared/table-state/display-name";
55

‎src/react/table-app/header-cell/components/HeaderMenu/components/DateFormatSubmenu/index.tsx renamed to ‎src/react/table-app/header-cell-edit/date-format-submenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import MenuItem from "src/react/shared/menu-item";
2-
import Submenu from "../Submenu";
2+
import Submenu from "./submenu";
33
import { DateFormat } from "src/shared/types/types";
44
import { getDisplayNameForDateFormat } from "src/shared/table-state/display-name";
55

0 commit comments

Comments
 (0)