react color

Author: RafaelGB

package.json

@@ -28,6 +28,7 @@
 		"@types/node": "17.0.31",
 		"@types/react": "17.0.43",
 		"@types/react-dom": "17.0.14",
+		"@types/react-color": "3.0.6",
 		"@types/react-table": "7.7.11",
 		"@types/react-window": "1.8.5",
 		"@types/react-datepicker": "4.4.1",
@@ -60,7 +61,8 @@
 		"react-dom": "17.0.2",
 		"react-csv": "2.2.2",
 		"react-popper": "2.3.0",
-		"react-table": "7.7.0",
+		"react-table": "7.8.0",
+		"react-color": "2.19.3",
 		"react-window": "1.8.7",
 		"react-datepicker": "4.8.0",
 		"regenerator-runtime": "0.13.9",

src/cdm/StyleModel.ts

@@ -1,8 +1,19 @@
+import { DatabaseView } from "DatabaseView";
+import { ColorResult } from "react-color";
+import { RowSelectOption } from "./RowSelectModel";
+
 export type ColumnWidthState = {
     widthRecord: Record<string, number>
 }
 
 export type HeaderContextType = {
     columnWidthState: ColumnWidthState,
     setColumnWidthState: (a: ColumnWidthState) => void
-}
+}
+
+export type ColorPickerProps = {
+    view: DatabaseView;
+    options: RowSelectOption[];
+    option: RowSelectOption;
+    columnKey: string;
+};

src/components/ColorPicker.tsx

@@ -0,0 +1,39 @@
+import { ColorPickerProps } from "cdm/StyleModel";
+import React from "react";
+import { ColorResult, SketchPicker } from "react-color";
+import { castHslToString } from "./styles/ColumnWidthStyle";
+
+export function ColorPicker(colorPickerProps: ColorPickerProps) {
+  const { view, options, option, columnKey } = colorPickerProps;
+  const [colorState, setColorState] = React.useState(option.backgroundColor);
+  const [labelState, setLabelState] = React.useState(option.label);
+  const [showColorPicker, setShowColorPicker] = React.useState(false);
+  /**
+   * Manage color picker
+   */
+  async function handleChange(color: ColorResult, event: any) {
+    setColorState(castHslToString(color.hsl));
+    setShowColorPicker(false);
+    option.backgroundColor = castHslToString(color.hsl);
+
+    // Persist changes
+    await view.diskConfig.updateColumnConfig(columnKey, {
+      options: options,
+    });
+  }
+
+  return (
+    <>
+      <span
+        className="colorPicker"
+        onClick={() => setShowColorPicker(!showColorPicker)}
+        style={{ backgroundColor: colorState, padding: "5px" }}
+      >
+        {labelState}
+      </span>
+      {showColorPicker && (
+        <SketchPicker color={colorState} onChange={handleChange} />
+      )}
+    </>
+  );
+}

src/components/modals/ColumnSections.ts

@@ -3,6 +3,9 @@ import { add_setting_header } from "settings/SettingsComponents";
 import { MediaDimensionsHandler } from "components/modals/handlers/MediaDimensionsHandler";
 import { MediaToggleHandler } from "components/modals/handlers/MediaToggleHandler";
 import { InlineToggleHandler } from "components/modals/handlers/InlineToggleHandler";
+import { ColumnHandler } from "./handlers/AbstractColumnHandler";
+import { DataTypes } from "helpers/Constants";
+import { SelectedColumnOptionsHandler } from "./handlers/SelectedColumnOptionsHandler";
 
 export function behavior_settings_section(settingHandlerResponse: ColumnHandlerResponse) {
     const behavior_section = settingHandlerResponse.containerEl.createDiv("column-section-container-behavior");
@@ -33,6 +36,7 @@ export function media_settings_section(settingHandlerResponse: ColumnHandlerResp
     const handlers = [
         new MediaToggleHandler(),
         new MediaDimensionsHandler(),
+        ...addParticularInputSettings(settingHandlerResponse.column.dataType)
     ]
     let i = 1;
     while (i < handlers.length) {
@@ -42,4 +46,16 @@ export function media_settings_section(settingHandlerResponse: ColumnHandlerResp
 
     settingHandlerResponse.containerEl = folder_section;
     return handlers[0].handle(settingHandlerResponse);
+}
+
+function addParticularInputSettings(dataType: string): ColumnHandler[] {
+    const particularHandlers: ColumnHandler[] = [];
+    switch (dataType) {
+        case DataTypes.SELECT:
+            particularHandlers.push(new SelectedColumnOptionsHandler());
+            break;
+        default:
+            break;
+    }
+    return particularHandlers;
 }

src/components/modals/handlers/SelectedColumnOptionsHandler.tsx

@@ -0,0 +1,85 @@
+import { ColumnHandlerResponse } from "cdm/ModalSettingsModel";
+import { ColorPickerProps } from "cdm/StyleModel";
+import { ColorPicker } from "components/ColorPicker";
+import { AbstractColumnHandler } from "components/modals/handlers/AbstractColumnHandler";
+import { castHslToString } from "components/styles/ColumnWidthStyle";
+import { randomColor } from "helpers/Colors";
+import { ButtonComponent, Setting } from "obsidian";
+import React from "react";
+import { ColorResult } from "react-color";
+import ReactDOM from "react-dom";
+import { add_button } from "settings/SettingsComponents";
+
+export class SelectedColumnOptionsHandler extends AbstractColumnHandler {
+  settingTitle: string = "Column Options";
+  handle(columnHandlerResponse: ColumnHandlerResponse): ColumnHandlerResponse {
+    const { column, containerEl, view, columnSettingsManager } =
+      columnHandlerResponse;
+
+    let newLabel = "";
+    const options = column.options;
+    const onClickAddPromise = async (): Promise<void> => {
+      options.push({
+        label: newLabel,
+        backgroundColor: randomColor(),
+      });
+      // Persist changes
+      view.diskConfig.updateColumnConfig(column.key, {
+        options: options,
+      });
+      // Force refresh of settings
+      columnSettingsManager.reset(columnHandlerResponse);
+    };
+
+    new Setting(containerEl)
+      .setName("Add new label")
+      .setDesc(
+        "Adds a new filter to the dataview query when the database is initialized"
+      )
+      .addText((text) => {
+        text
+          .setPlaceholder("label of option")
+          .setValue("")
+          .onChange(async (value: string): Promise<void> => {
+            newLabel = value;
+          });
+      })
+      .addButton((button: ButtonComponent) => {
+        button
+          .setTooltip("Adds new option of Selected column")
+          .setButtonText("+")
+          .setCta()
+          .onClick(onClickAddPromise);
+      });
+
+    options.forEach((option, index) => {
+      const colorPickerProps: ColorPickerProps = {
+        view: view,
+        options: options,
+        option: option,
+        columnKey: column.key,
+      };
+
+      const optionContainer = new Setting(containerEl).addExtraButton((cb) => {
+        cb.setIcon("cross")
+          .setTooltip("Delete")
+          .onClick(async (): Promise<void> => {
+            options.splice(index, 1);
+            // Persist changes
+            await view.diskConfig.updateColumnConfig(column.key, {
+              options: options,
+            });
+            // Force refresh of settings
+            columnSettingsManager.reset(columnHandlerResponse);
+          });
+      });
+
+      ReactDOM.render(
+        <ColorPicker {...colorPickerProps} />,
+        optionContainer.settingEl.createDiv()
+      );
+    });
+
+    return this.goNext(columnHandlerResponse);
+  }
+}

src/components/styles/ColumnWidthStyle.ts

@@ -3,6 +3,7 @@ import { ColumnWidthState } from "cdm/StyleModel";
 import { DataTypes, MetadataColumns, WidthVariables } from "helpers/Constants";
 import { getNormalizedPath } from "helpers/VaultManagement";
 import { DateTime } from "luxon";
+import { HSLColor } from "react-color";
 import { Row } from "react-table";
 
 export const getColumnWidthStyle = (rows: Array<Row<object>>, column: TableColumn, customMaxWidth?: number): number => {
@@ -44,5 +45,9 @@ export const getColumnsWidthStyle = (rows: Array<Row<object>>, columns: TableCol
   columns.forEach((column: TableColumn) => {
     columnWidthStyle.widthRecord[column.id] = getColumnWidthStyle(rows, column);
   })
-  return columnWidthStyle
+  return columnWidthStyle;
+}
+
+export function castHslToString(color: HSLColor): string {
+  return `hsl(${color.h},${color.s * 100}%,${color.l * 100}%)`;
 }