- Fix colors property passed down

- Typescript error fixes
wamra · Sep 27, 2024 · e5e1bbc · e5e1bbc
1 parent b09efd0
commit e5e1bbc
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 84 deletions.
diff --git a/src/components/task-list/TaskListHeaderActions.tsx b/src/components/task-list/TaskListHeaderActions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { UnfoldLess, UnfoldMore, UnfoldMoreDouble } from "@mui/icons-material";
-import { createTheme, IconButton, ThemeProvider, Tooltip } from "@mui/material";
+import { createTheme, IconButton, Theme, ThemeOptions, ThemeProvider, Tooltip } from "@mui/material";
 import style from "./TaskListHeaderActions.module.css";
 import { ColorStyles } from "../../types/public-types";
 
@@ -19,7 +19,7 @@ export const TaskListHeaderActions: React.FC<TaskListHeaderActionsProps> =
      colors
    }) => {
 
-    const materialLightTheme = createTheme({
+    let themeOptions: ThemeOptions = {
       palette: {
         primary: {
           main: colors.barLabelColor // Maps to a primary color (e.g., task bar background)
@@ -35,22 +35,6 @@ export const TaskListHeaderActions: React.FC<TaskListHeaderActionsProps> =
           primary: colors.barLabelColor, // Main text color (bar labels, etc.)
           secondary: colors.barLabelColor // Context menu text color
         },
-        error: {
-          main: colors.arrowCriticalColor // Critical task color
-        },
-        warning: {
-          main: colors.arrowWarningColor // Warning color (e.g., for dependencies)
-        },
-        success: {
-          main: colors.projectProgressColor // Progress color for successful project completion
-        },
-        info: {
-          main: colors.todayColor // Info color used for today's highlight
-        },
-        icon: {
-          primary: colors.barLabelColor, // Color for primary icons
-          secondary: colors.barLabelColor, // Color for secondary icons
-        },
       },
       components: {
         MuiButton: {
@@ -79,7 +63,8 @@ export const TaskListHeaderActions: React.FC<TaskListHeaderActionsProps> =
           },
         },
       }
-    });
+    };
+    const materialLightTheme: Theme = createTheme(themeOptions);
 
     return (
       <ThemeProvider theme={materialLightTheme}>

diff --git a/src/components/task-list/columns/add-column.tsx b/src/components/task-list/columns/add-column.tsx
@@ -6,7 +6,7 @@ import styles from "./add-column.module.css";
 
 export const AddColumn: React.FC<ColumnProps> = (props) => {
   const {
-    data: { handleAddTask, icons, style, task }
+    data: { handleAddTask, icons, colors, task }
   } = props;
   const onClick = useCallback(() => {
     if (task.type === "empty") {
@@ -22,7 +22,7 @@ export const AddColumn: React.FC<ColumnProps> = (props) => {
 
   return (
     <button type="button" onClick={onClick} style={{
-      "color": style.barLabelColor
+      "color": colors.barLabelColor
     }} className={styles.button}>
       {icons?.renderAddIcon ? icons.renderAddIcon(task) : "+"}
     </button>

diff --git a/src/components/task-list/columns/date-end-column.tsx b/src/components/task-list/columns/date-end-column.tsx
@@ -10,7 +10,7 @@ export const DateEndColumn: React.FC<ColumnProps> = ({
       dateFormats,
       dateLocale,
     },
-    style,
+    colors,
     task,
   },
 }) => {
@@ -21,7 +21,7 @@ export const DateEndColumn: React.FC<ColumnProps> = ({
   try {
     return (
       <div style={{
-        "color": style.barLabelColor
+        "color": colors.barLabelColor
       }}>
         {format(task.end, dateFormats.dateColumnFormat, {
           locale: dateLocale,
@@ -31,7 +31,7 @@ export const DateEndColumn: React.FC<ColumnProps> = ({
   } catch (e) {
     return (
       <div style={{
-        "color": style.barLabelColor
+        "color": colors.barLabelColor
       }}>
         {task.end.toString()}
       </div>

diff --git a/src/components/task-list/columns/date-start-column.tsx b/src/components/task-list/columns/date-start-column.tsx
@@ -10,7 +10,7 @@ export const DateStartColumn: React.FC<ColumnProps> = ({
       dateFormats,
       dateLocale,
     },
-    style,
+    colors,
     task,
   },
 }) => {
@@ -21,7 +21,7 @@ export const DateStartColumn: React.FC<ColumnProps> = ({
   try {
     return (
       <div style={{
-        "color": style.barLabelColor
+        "color": colors.barLabelColor
       }}>
         {format(task.start, dateFormats.dateColumnFormat, {
           locale: dateLocale,
@@ -31,7 +31,7 @@ export const DateStartColumn: React.FC<ColumnProps> = ({
   } catch (e) {
     return (
       <div style={{
-        "color": style.barLabelColor
+        "color": colors.barLabelColor
       }}>
         {task.start.toString()}
       </div>

diff --git a/src/components/task-list/columns/delete-column.tsx b/src/components/task-list/columns/delete-column.tsx
@@ -6,15 +6,15 @@ import styles from "./delete-column.module.css";
 
 export const DeleteColumn: React.FC<ColumnProps> = (props) => {
   const {
-    data: { handleDeleteTasks, icons, style, task }
+    data: { handleDeleteTasks, icons, colors, task }
   } = props;
   const onClick = useCallback(() => {
     handleDeleteTasks([task]);
   }, [task, handleDeleteTasks]);
 
   return (
     <button type="button" onClick={onClick} style={{
-      "color": style.barLabelColor
+      "color": colors.barLabelColor
     }} className={styles.button}>
       {icons?.renderDeleteIcon ? icons.renderDeleteIcon(task) : "-"}
     </button>

diff --git a/src/components/task-list/columns/dependencies-column.tsx b/src/components/task-list/columns/dependencies-column.tsx
@@ -5,12 +5,12 @@ import { ColumnProps } from "../../../types/public-types";
 export const DependenciesColumn: React.FC<ColumnProps> = ({
   data: {
     dependencies,
-    style
+    colors
   },
 }) => {
   return (
     <div style={{
-      "color": style.barLabelColor
+      "color": colors.barLabelColor
     }}>
       {dependencies.map(({ name }) => name).join(', ')}
     </div>

diff --git a/src/components/task-list/columns/edit-column.tsx b/src/components/task-list/columns/edit-column.tsx
@@ -6,15 +6,15 @@ import styles from "./edit-column.module.css";
 
 export const EditColumn: React.FC<ColumnProps> = (props) => {
   const {
-    data: { handleEditTask, icons, style, task }
+    data: { handleEditTask, icons, colors, task }
   } = props;
   const onClick = useCallback(() => {
     handleEditTask(task);
   }, [task, handleEditTask]);
 
   return (
     <button type="button" onClick={onClick} style={{
-      "color": style.barLabelColor
+      "color": colors.barLabelColor
     }} className={styles.button}>
       {icons?.renderEditIcon ? icons.renderEditIcon(task) : "✎"}
     </button>

diff --git a/src/components/task-list/columns/title-column.tsx b/src/components/task-list/columns/title-column.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useCallback } from "react";
+import React, { useCallback } from "react";
 
 import { ColumnProps, Icons, TaskOrEmpty } from "../../../types/public-types";
 
@@ -24,6 +24,7 @@ const getExpanderSymbol = (
 export const TitleColumn: React.FC<ColumnProps> = (props) => {
   const {
     data: {
+      colors,
       distances: { expandIconWidth, nestedTaskNameOffset },
       icons,
       isShowTaskNumbers,
@@ -33,7 +34,6 @@ export const TitleColumn: React.FC<ColumnProps> = (props) => {
       indexStr,
       task,
       onExpanderClick,
-      style
     }
   } = props;
   const { name } = task;
@@ -69,7 +69,7 @@ export const TitleColumn: React.FC<ColumnProps> = (props) => {
         {expanderSymbol}
       </div>
       <div style={{
-        color: style.barLabelColor
+        color: colors.barLabelColor
       }} className={styles.taskName}>
         {isShowTaskNumbers && <b>{indexStr} </b>}
 

diff --git a/src/components/task-list/task-list-table-row.tsx b/src/components/task-list/task-list-table-row.tsx
@@ -162,7 +162,7 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> =
       isShowTaskNumbers,
       onExpanderClick,
       task, //: task.type === "empty" ? task : getTaskCurrentState(task),
-      style
+      colors
     }),
     [
       canMoveTasks,
@@ -181,7 +181,7 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> =
       isShowTaskNumbers,
       onExpanderClick,
       task,
-      style
+      colors
     ]
   );
   const dropPreviewOffset =
@@ -300,7 +300,7 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> =
 
   return (
     <div
-      className={`${styles.taskListTableRow} ${isCut ? styles.isCut : ""}`}
+      className={`${styles.taskListTableRow} ${isCut ? styles.cut : ""}`}
       onMouseDown={onRootMouseDown}
       style={{
         height: fullRowHeight,
@@ -315,6 +315,7 @@ const TaskListTableRowInner: React.FC<TaskListTableRowProps> =
     >
       {columns.map((column, index) => {
         const { Cell, width }= column;
+        // noinspection TypeScriptValidateTypes
         return (
           <div
             className={styles.taskListCell}

diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx
@@ -2,7 +2,7 @@ import React, { memo, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 
 import { checkHasChildren } from "../../helpers/check-has-children";
-import { Task, TaskListTableProps } from "../../types/public-types";
+import { Task, TaskListTableProps, TaskOrEmpty } from "../../types/public-types";
 import { TaskListTableRow } from "./task-list-table-row";
 
 import styles from "./task-list-table.module.css";
@@ -48,7 +48,7 @@ const TaskListTableDefaultInner: React.FC<TaskListTableProps> = ({
     [tasks]
   );
 
-  const [draggedTask, setDraggedTask] = useState(null);
+  const [draggedTask, setDraggedTask] = useState<TaskOrEmpty>(null);
 
   const renderedListWithOffset = useMemo(() => {
     if (!renderedIndexes) {
@@ -117,7 +117,6 @@ const TaskListTableDefaultInner: React.FC<TaskListTableProps> = ({
           tasks={tasks}
           draggedTask={draggedTask}
           setDraggedTask={setDraggedTask}
-          style={colors}
         />
       );
     }

diff --git a/src/types/public-types.ts b/src/types/public-types.ts
@@ -204,11 +204,11 @@ export type OnArrowDoubleClick = (
 
 export type OnRelationChange = (
   /**
-   * Task, targer, index
+   * Task, target, index
    */
   from: [Task, DateExtremity, number],
   /**
-   * Task, targer, index
+   * Task, target, index
    */
   to: [Task, DateExtremity, number],
   /**
@@ -819,7 +819,7 @@ export type ColumnData = {
   isShowTaskNumbers: boolean;
   onExpanderClick: (task: Task) => void;
   task: TaskOrEmpty;
-  style: Partial<ColorStyles>;
+  colors: Partial<ColorStyles>;
 };
 
 export type ColumnProps = {

diff --git a/stories/Comparison.tsx b/stories/Comparison.tsx
@@ -10,10 +10,11 @@ export const Comparison: React.FC = props => {
   const [tasks, setTasks] = useState<readonly TaskOrEmpty[]>(() => {
     const firstLevelTasks = initTasks();
 
-    const secondLevelTasks = firstLevelTasks.map<TaskOrEmpty>(task => ({
-      ...task,
-      comparisonLevel: 2,
-    }));
+    const secondLevelTasks = firstLevelTasks.map(
+      (task) => ({
+        ...task,
+        comparisonLevel: 2
+      } as TaskOrEmpty));
 
     return [...firstLevelTasks, ...secondLevelTasks];
   });