Merge branch 'style-compact'

Author: RafaelGB

src/cdm/DatabaseModel.ts

@@ -1,7 +1,7 @@
 import { RowType } from "cdm/RowTypeModel"
 import { LocalSettings } from "cdm/SettingsModel";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
-import { TableOptions } from "@tanstack/react-table";
+import { Column, TableOptions } from "@tanstack/react-table";
 import { BaseColumn, RowDataType, TableColumn, TableDataType } from "cdm/FolderModel";
 import { RowSelectOption } from "cdm/ComponentsModel";
 
@@ -41,7 +41,7 @@ export type OptionSelect = {
 }
 export type BaseComponentProps = {
     intialState: TableDataType;
-    column: TableColumn;
+    column: Column<RowDataType, unknown>;
 }
 
 export type SortedType = {

src/components/DefaultCell.tsx

@@ -173,7 +173,11 @@ export default function DefaultCell(cellProperties: CellProps) {
             ref={editableMdRef}
           />
         ) : (
-          <span ref={containerCellRef} onClick={handleEditableOnclick} />
+          <span
+            ref={containerCellRef}
+            onClick={handleEditableOnclick}
+            style={{ width: column.getSize() }}
+          />
         );
 
       /** Number option */
@@ -187,7 +191,11 @@ export default function DefaultCell(cellProperties: CellProps) {
             className="text-align-right"
           />
         ) : (
-          <span className="text-align-right" onClick={handleEditableOnclick}>
+          <span
+            className="text-align-right"
+            onClick={handleEditableOnclick}
+            style={{ width: column.getSize() }}
+          >
             {(contextValue.value && contextValue.value.toString()) || ""}
           </span>
         );
@@ -209,7 +217,7 @@ export default function DefaultCell(cellProperties: CellProps) {
         return (
           <CalendarPortal
             intialState={tableData}
-            column={column.columnDef as TableColumn}
+            column={column}
             cellProperties={cellProperties}
           />
         );
@@ -219,7 +227,7 @@ export default function DefaultCell(cellProperties: CellProps) {
         return (
           <CalendarTimePortal
             intialState={tableData}
-            column={column.columnDef as TableColumn}
+            column={column}
             cellProperties={cellProperties}
           />
         );
@@ -231,7 +239,7 @@ export default function DefaultCell(cellProperties: CellProps) {
             <PopperSelectPortal
               dispatch={dataDispatch}
               row={row}
-              column={column.columnDef as TableColumn}
+              column={column}
               columns={columns}
               note={note}
               intialState={tableData}
@@ -244,7 +252,7 @@ export default function DefaultCell(cellProperties: CellProps) {
           <CellContext.Provider value={{ contextValue, setContextValue }}>
             <TagsPortal
               intialState={tableData}
-              column={column.columnDef as TableColumn}
+              column={column}
               columns={columns}
               dispatch={dataDispatch}
               cellProperties={cellProperties}

src/components/HeaderMenu.tsx

@@ -8,7 +8,7 @@ import { HeaderMenuProps } from "cdm/HeaderModel";
 import header_action_button_section from "components/headerActions/HeaderActionButtonSection";
 import { HeaderActionResponse } from "cdm/HeaderActionModel";
 import header_action_types_section from "components/headerActions/HeaderActiontypesSection";
-import { TableColumn } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   const { table, header, column } = headerMenuProps.headerProps;
@@ -54,14 +54,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     setLabelState(labelState);
   }, [labelState]);
 
-  useEffect(() => {
-    // Throw event if inputRef changed to focus on when it exists
-    if (inputRef) {
-      inputRef.focus();
-      inputRef.select();
-    }
-  }, [inputRef]);
-
   /**
    * Array of action buttons asociated to the header
    */
@@ -291,7 +283,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                     className="menu-item sort-button"
                     onClick={() => {
                       new ColumnModal(
-                        (table.options.meta as any).view,
+                        (table.options.meta as TableDataType).view,
                         headerMenuProps
                       ).open();
                       setExpanded(false);

src/components/modals/handlers/SelectedColumnOptionsHandler.tsx

@@ -6,6 +6,7 @@ import { randomColor } from "helpers/Colors";
 import { ButtonComponent, Notice, Setting } from "obsidian";
 import React from "react";
 import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 export class SelectedColumnOptionsHandler extends AbstractColumnHandler {
   settingTitle: string = "Column Options";
@@ -78,10 +79,8 @@ export class SelectedColumnOptionsHandler extends AbstractColumnHandler {
             columnSettingsManager.reset(columnHandlerResponse);
           });
       });
-
-      ReactDOM.render(
-        <ColorPicker {...colorPickerProps} />,
-        optionContainer.settingEl.createDiv()
+      createRoot(optionContainer.settingEl.createDiv()).render(
+        <ColorPicker {...colorPickerProps} />
       );
     });
 

src/components/portals/CalendarPortal.tsx

@@ -6,18 +6,19 @@ import NoteInfo from "services/NoteInfo";
 import { Portal } from "@mui/material";
 import { c } from "helpers/StylesHelper";
 import { CalendarProps } from "cdm/ComponentsModel";
-import { TableDataType } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const CalendarPortal = (calendarProps: CalendarProps) => {
   const { column, cellProperties, intialState } = calendarProps;
   const { row, table } = cellProperties;
+  const tableColumn = column.columnDef as TableColumn;
   const dataDispatch = (table.options.meta as TableDataType).dispatch;
   /** state of cell value */
   const [showDatePicker, setShowDatePicker] = useState(false);
   /** Note info of current Cell */
   const note: NoteInfo = row.original.__note__;
   const [calendarState, setCalendarState] = useState(
-    intialState.view.rows[row.index][column.key]
+    intialState.view.rows[row.index][tableColumn.key]
   );
 
   function handleSpanOnClick(event: any) {
@@ -31,7 +32,7 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
     dataDispatch({
       type: ActionTypes.UPDATE_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: newValue.toFormat("yyyy-MM-dd"),
       row: row,
       columnId: column.id,
@@ -59,7 +60,11 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
       placeholderText="Pick a date..."
     />
   ) : (
-    <span className={`${c("calendar")}`} onClick={handleSpanOnClick}>
+    <span
+      className={`${c("calendar")}`}
+      onClick={handleSpanOnClick}
+      style={{ width: column.getSize() }}
+    >
       {DateTime.isDateTime(calendarState)
         ? (calendarState as unknown as DateTime).toFormat("yyyy-MM-dd")
         : null}

src/components/portals/CalendarTimePortal.tsx

@@ -5,15 +5,16 @@ import DatePicker from "react-datepicker";
 import NoteInfo from "services/NoteInfo";
 import { Portal } from "@mui/material";
 import { CalendarProps } from "cdm/ComponentsModel";
-import { TableDataType } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
   const { column, cellProperties, intialState } = calendarTimeProps;
   const { row, table } = cellProperties;
+  const tableColumn = column.columnDef as TableColumn;
   const dataDispatch = (table.options.meta as TableDataType).dispatch;
   // Calendar state
   const [calendarTimeState, setCalendarTimeState] = useState(
-    intialState.view.rows[row.index][column.key]
+    intialState.view.rows[row.index][tableColumn.key]
   );
   /** state of cell value */
   const [showDatePicker, setShowDatePicker] = useState(false);
@@ -32,7 +33,7 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
     dataDispatch({
       type: ActionTypes.UPDATE_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: DateTime.fromJSDate(date).toISO(),
       row: row,
       columnId: column.id,
@@ -47,7 +48,7 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
     return <Portal container={el}>{containerProps.children}</Portal>;
   };
 
-  return showDatePicker && !column.isMetadata ? (
+  return showDatePicker && !tableColumn.isMetadata ? (
     <div className="calendar-time">
       <DatePicker
         dateFormat="yyyy-MM-dd h:mm aa"
@@ -66,7 +67,11 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
       />
     </div>
   ) : (
-    <span className="calendar-time" onClick={handleSpanOnClick}>
+    <span
+      className="calendar-time"
+      onClick={handleSpanOnClick}
+      style={{ width: column.getSize() }}
+    >
       {DateTime.isDateTime(calendarTimeState)
         ? (calendarTimeState as DateTime).toFormat("yyyy-MM-dd h:mm a")
         : null}

src/components/portals/PopperSelectPortal.tsx

@@ -8,6 +8,7 @@ import { usePopper } from "react-popper";
 import { PopperProps } from "cdm/ComponentsModel";
 import { CellContext } from "components/contexts/CellContext";
 import CrossIcon from "components/img/CrossIcon";
+import { TableColumn } from "cdm/FolderModel";
 
 const PopperSelectPortal = (popperProps: PopperProps) => {
   const { dispatch, row, column, columns, note, intialState } = popperProps;
@@ -24,6 +25,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   // Selector popper state
   const [domReady, setDomReady] = useState(false);
 
+  const tableColumn = column.columnDef as TableColumn;
   React.useEffect(() => {
     setDomReady(true);
   });
@@ -32,7 +34,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
     dispatch({
       type: ActionTypes.UPDATE_OPTION_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: "",
       row: row,
       columnId: column.id,
@@ -50,7 +52,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
     dispatch({
       type: ActionTypes.UPDATE_OPTION_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: option.label,
       row: row,
       columnId: column.id,
@@ -78,10 +80,12 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   }
   function addNewOption(e: any) {
     // check if option already exists
-    const alreadyExist = column.options.find((option: { label: string }) => {
-      if (option.label === e.target.value) {
+    const alreadyExist = tableColumn.options.find(
+      (option: { label: string }) => {
+        if (option.label === e.target.value) {
+        }
       }
-    });
+    );
     if (!alreadyExist) {
       dispatch({
         type: ActionTypes.ADD_OPTION_TO_COLUMN,
@@ -93,7 +97,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   }
 
   function getColor() {
-    const match = column.options.find(
+    const match = tableColumn.options.find(
       (option: { label: string }) => option.label === contextValue.value
     );
     return (match && match.backgroundColor) || grey(200);
@@ -125,7 +129,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
               className="d-flex flex-wrap-wrap"
               style={{ marginTop: "-0.5rem" }}
             >
-              {column.options.map((option: any) => (
+              {tableColumn.options.map((option: any) => (
                 <div
                   key={option.label}
                   className="cursor-pointer"
@@ -198,6 +202,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
         ref={setSelectRef}
         className="cell-padding d-flex cursor-default align-items-center flex-1"
         onClick={() => setShowSelect(true)}
+        style={{ width: column.getSize() }}
       >
         {contextValue.value && (
           <Relationship

src/components/portals/TagsPortal.tsx

@@ -9,48 +9,56 @@ import { c } from "helpers/StylesHelper";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { ActionTypes } from "helpers/Constants";
 import NoteInfo from "services/NoteInfo";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const TagsPortal = (tagsProps: TagsProps) => {
   const { intialState, column, dispatch, cellProperties, columns } = tagsProps;
-  const { row } = cellProperties;
+  const { row, table } = cellProperties;
+  const tableColumn = column.columnDef as TableColumn;
+  const state = table.options.meta as TableDataType;
   // Tags reference state
   const [showSelectTags, setShowSelectTags] = useState(false);
   // tags values state
   const [tagsState, setTagsState] = useState(
-    Array.isArray(intialState.view.rows[row.index][column.key])
-      ? (intialState.view.rows[row.index][column.key] as Literal[])
+    Array.isArray(intialState.view.rows[row.index][tableColumn.key])
+      ? (intialState.view.rows[row.index][tableColumn.key] as Literal[])
       : []
   );
 
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).__note__;
 
   function getColor(tag: string) {
-    const match = column.options.find(
+    const match = tableColumn.options.find(
       (option: { label: string }) => option.label === tag
     );
     if (match) {
       return match.backgroundColor;
     } else {
       // In case of new tag, generate random color
       const color = randomColor();
-      dispatch({
-        columns: columns,
-        option: tag,
+      const newOption: RowSelectOption = {
+        label: tag,
         backgroundColor: color,
-        columnId: column.id,
-        type: ActionTypes.ADD_OPTION_TO_COLUMN,
+      };
+      const currentColumn = state.columns.find(
+        (col: TableColumn) => col.key === tableColumn.key
+      );
+      currentColumn.options.push(newOption);
+      state.view.diskConfig.updateColumnProperties(column.id, {
+        options: currentColumn.options,
       });
       return color;
     }
   }
+
   const defaultValue = tagsState.map((tag: string) => ({
     label: tag,
     value: tag,
     color: getColor(tag),
   }));
 
-  const multiOptions = column.options.map((option: RowSelectOption) => ({
+  const multiOptions = tableColumn.options.map((option: RowSelectOption) => ({
     value: option.label,
     label: option.label,
     color: option.backgroundColor,
@@ -63,7 +71,7 @@ const TagsPortal = (tagsProps: TagsProps) => {
     dispatch({
       type: ActionTypes.UPDATE_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: arrayTags,
       row: cellProperties.row,
       columnId: column.id,
@@ -72,7 +80,7 @@ const TagsPortal = (tagsProps: TagsProps) => {
     newValue
       .filter(
         (tag: any) =>
-          !column.options.find((option: any) => option.label === tag.value)
+          !tableColumn.options.find((option: any) => option.label === tag.value)
       )
       .forEach((tag: any) => {
         dispatch({
@@ -118,6 +126,7 @@ const TagsPortal = (tagsProps: TagsProps) => {
                 c("tags-container") + " cell-padding d-flex flex-wrap-wrap"
               }
               onClick={() => setShowSelectTags(true)}
+              style={{ width: column.getSize() }}
             >
               {tagsState.map((tag: string) => (
                 <div key={`key-${tag}`}>