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

Commit dbb9bf2

Browse files
RafaelGBRafaelGB
committed
removing react-color in favor of native Obsidian API colorPicker
1 parent 93f8807 commit dbb9bf2

File tree

6 files changed

+88
-113
lines changed

6 files changed

+88
-113
lines changed

‎package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
"@types/luxon": "3.0.1",
3131
"@types/node": "18.8.4",
3232
"@types/react": "18.0.21",
33-
"@types/react-color": "3.0.6",
3433
"@types/react-csv": "1.1.3",
3534
"@types/react-datepicker": "4.4.2",
3635
"@types/react-dom": "18.0.6",
@@ -50,8 +49,8 @@
5049
},
5150
"dependencies": {
5251
"@emotion/styled": "11.10.4",
53-
"@mui/icons-material": "5.10.6",
54-
"@mui/material": "5.10.8",
52+
"@mui/icons-material": "5.10.9",
53+
"@mui/material": "5.10.9",
5554
"@popperjs/core": "2.11.6",
5655
"@tanstack/match-sorter-utils": "8.5.14",
5756
"@tanstack/react-table": "8.5.15",
@@ -61,12 +60,11 @@
6160
"monkey-around": "2.3.0",
6261
"obsidian-dataview": "0.5.47",
6362
"react": "18.2.0",
64-
"react-color": "2.19.3",
6563
"react-csv": "2.2.2",
6664
"react-datepicker": "4.8.0",
6765
"react-dom": "18.2.0",
6866
"react-popper": "2.3.0",
69-
"react-select": "5.4.0",
67+
"react-select": "5.5.0",
7068
"react-window": "1.8.7",
7169
"zustand": "4.1.2"
7270
}

‎src/cdm/StyleModel.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,6 @@ type BaseStyleProps = {
66
columnId: string;
77
};
88

9-
export type ColorPickerProps = {
10-
options: RowSelectOption[];
11-
option: RowSelectOption;
12-
} & BaseStyleProps;
13-
149
export type TextAlignmentProps = {
1510
currentAlignment: string;
1611
} & BaseStyleProps;

‎src/components/modals/columnSettings/handlers/SelectedColumnOptionsHandler.tsx‎

Lines changed: 58 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
2-
import { ColorPickerProps } from "cdm/StyleModel";
3-
import { ColorPicker } from "components/styles/ColorPicker";
4-
import { randomColor } from "helpers/Colors";
2+
import { randomColor, castStringtoHsl, castHslToString } from "helpers/Colors";
53
import { ButtonComponent, Notice, Setting } from "obsidian";
64
import { AbstractHandlerClass } from "patterns/AbstractHandler";
75
import React from "react";
@@ -63,51 +61,65 @@ export class SelectedColumnOptionsHandler extends AbstractHandlerClass<ColumnSet
6361
});
6462

6563
options.forEach((option, index) => {
66-
const colorPickerProps: ColorPickerProps = {
67-
modal: columnSettingsManager.modal,
68-
options: options,
69-
option: option,
70-
columnId: column.id,
71-
};
72-
73-
const optionContainer = new Setting(containerEl).addExtraButton((cb) => {
74-
cb.setIcon("cross")
75-
.setTooltip("Delete")
76-
.onClick(async (): Promise<void> => {
77-
const removedOption = options[index];
78-
options.splice(index, 1);
79-
// Persist changes
80-
await view.diskConfig.updateColumnProperties(column.id, {
81-
options: options,
64+
new Setting(containerEl)
65+
// Show current label
66+
.addText((text) => {
67+
text.setValue(option.label).setDisabled(true);
68+
})
69+
// Color picker for background color
70+
.addColorPicker((colorPicker) => {
71+
colorPicker
72+
.setValueHsl(castStringtoHsl(option.backgroundColor))
73+
.onChange(async () => {
74+
const optionIndex = options.findIndex(
75+
(option) => option.label === option.label
76+
);
77+
options[optionIndex].backgroundColor = castHslToString(
78+
colorPicker.getValueHsl()
79+
);
80+
await view.diskConfig.updateColumnProperties(column.id, {
81+
options: options,
82+
});
83+
columnHandlerResponse.columnSettingsManager.modal.enableReset =
84+
true;
8285
});
83-
84-
dataState.actions
85-
.removeOptionForAllRows(
86-
column,
87-
removedOption.label,
88-
columnsState.info.getAllColumns(),
89-
configState.info.getLocalSettings()
90-
)
91-
.then(() => {
92-
new Notice(
93-
`Option ${removedOption.label} was removed from all rows`,
94-
1500
95-
);
96-
})
97-
.catch((err) => {
98-
const errMsg = `Error removing ${removedOption.label}`;
99-
LOGGER.error(errMsg, err);
100-
new Notice(errMsg, 3000);
86+
})
87+
// Delete button
88+
.addExtraButton((cb) => {
89+
cb.setIcon("cross")
90+
.setTooltip("Delete")
91+
.onClick(async (): Promise<void> => {
92+
const removedOption = options[index];
93+
options.splice(index, 1);
94+
// Persist changes
95+
await view.diskConfig.updateColumnProperties(column.id, {
96+
options: options,
10197
});
102-
columnHandlerResponse.columnSettingsManager.modal.enableReset =
103-
true;
104-
// Force refresh of settings
105-
columnSettingsManager.reset(columnHandlerResponse);
106-
});
107-
});
108-
createRoot(optionContainer.settingEl.createDiv()).render(
109-
<ColorPicker {...colorPickerProps} />
110-
);
98+
99+
dataState.actions
100+
.removeOptionForAllRows(
101+
column,
102+
removedOption.label,
103+
columnsState.info.getAllColumns(),
104+
configState.info.getLocalSettings()
105+
)
106+
.then(() => {
107+
new Notice(
108+
`Option ${removedOption.label} was removed from all rows`,
109+
1500
110+
);
111+
})
112+
.catch((err) => {
113+
const errMsg = `Error removing ${removedOption.label}`;
114+
LOGGER.error(errMsg, err);
115+
new Notice(errMsg, 3000);
116+
});
117+
columnHandlerResponse.columnSettingsManager.modal.enableReset =
118+
true;
119+
// Force refresh of settings
120+
columnSettingsManager.reset(columnHandlerResponse);
121+
});
122+
});
111123
});
112124

113125
return this.goNext(columnHandlerResponse);

‎src/components/styles/ColorPicker.tsx‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎src/helpers/Colors.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { HSLColor } from "react-color";
1+
import { HSL } from "obsidian";
22

33
export function randomColor() {
44
return `hsl(${Math.floor(Math.random() * 360)}, 95%, 90%)`;
@@ -21,6 +21,29 @@ export function grey(value: number) {
2121
return reference[value as keyof typeof reference];
2222
}
2323

24-
export function castHslToString(color: HSLColor): string {
25-
return `hsl(${color.h},${color.s * 100}%,${color.l * 100}%)`;
24+
/**
25+
* Transform a string to a valid HSL color or return a default color if the string is not valid
26+
* expected string format: `hsl(0-360, 0-100%, 0-100%)`
27+
* I.E.:
28+
* str `hsl(5, 60%, 20%)` returns {h: 5, s: 60, l: 20}
29+
* @param str
30+
* @returns @type {HSL} object
31+
*/
32+
export function castStringtoHsl(str: string): HSL {
33+
const hslRegex = /^hsl\((\d{1,15}),\s*(\d{1,15})%,\s*(\d{1,15})%\)$/;
34+
const match = str.match(hslRegex);
35+
if (match) {
36+
const [, h, s, l] = match;
37+
return { h: parseInt(h), s: parseInt(s), l: parseInt(l) };
38+
}
39+
return { h: 0, s: 0, l: 0 };
40+
}
41+
42+
/**
43+
* Transform a HSL object to a valid string
44+
* @param hsl
45+
* @returns
46+
*/
47+
export function castHslToString(hsl: HSL): string {
48+
return `hsl(${hsl.h},${hsl.s}%,${hsl.l}%)`;
2649
}

‎src/helpers/StylesHelper.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ConfigColumn } from "cdm/FolderModel";
22
import { LocalSettings } from "cdm/SettingsModel";
33
import { CellSizeOptions, COLUMN_ALIGNMENT_OPTIONS, DatabaseCore, MetadataLabels } from "helpers/Constants";
4+
import { HSL } from "obsidian";
45

56
/**
67
* Wrap the classname of css elements

0 commit comments

Comments
 (0)