From 6cd75fab4774c55e146e751c5df26efb2b1e1ac5 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Mon, 27 Sep 2021 09:12:22 +0530
Subject: [PATCH] Table cell color do not change according to theme nor color
 is enforced from the table color picker (#831)

* Table widget: data on inspector is readable in dark mode

* table body colors

* removed repeated properties in the widget ispector or table widget
---
 frontend/src/Editor/Components/Table/Table.jsx | 15 +++++++++++----
 frontend/src/Editor/Components/components.js   |  2 +-
 .../src/Editor/Inspector/Components/Table.jsx  | 18 +++---------------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index e95dad3004..0d8cd97a99 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import {
   useTable,
   useFilters,
@@ -260,6 +260,14 @@ export function Table({
 
   const changeSet = componentState ? componentState.changeSet : {};
 
+  const computeFontColor = useCallback(() => {
+    if (color !== undefined) {
+      return color;
+    } else {
+      return darkMode ? '#ffffff' : '#000000';
+    }
+  }, [color, darkMode]);
+
   const columnData = component.definition.properties.columns.value.map((column) => {
     const columnSize = columnSizes[column.id] || columnSizes[column.name];
     const columnType = column.columnType;
@@ -304,7 +312,7 @@ export function Table({
           const textColor = resolveReferences(column.textColor, currentState, { cellValue });
 
           const cellStyles = {
-            color: textColor === undefined ? (darkMode === true ? '#fff' : 'black') : textColor,
+            color: textColor ?? '',
           };
 
           if (column.isEditable) {
@@ -598,7 +606,6 @@ export function Table({
   const data = useMemo(() => tableData, [tableData.length, componentState.changeSet]);
 
   const computedStyles = {
-    color,
     width: `${width}px`,
   };
 
@@ -729,7 +736,7 @@ export function Table({
           )}
 
           {!loadingState && (
-            <tbody {...getTableBodyProps()}>
+            <tbody {...getTableBodyProps()} style={{ color: computeFontColor() }}>
               {console.log('page', page)}
               {page.map((row, index) => {
                 prepareRow(row);
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 2c7cc29af9..936e7a3aa5 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -85,7 +85,7 @@ export const componentTypes = [
       },
       events: [],
       styles: {
-        textColor: { value: '' },
+        textColor: { value: undefined },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index a1f1931443..d640facb43 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -671,18 +671,6 @@ class Table extends React.Component {
             currentState
           )}
 
-          {Object.keys(componentMeta.styles).map((style) =>
-            renderElement(
-              component,
-              componentMeta,
-              paramUpdated,
-              dataQueries,
-              style,
-              'styles',
-              currentState,
-              components
-            )
-          )}
           <div className="hr-text">Events</div>
 
           <EventManager
@@ -699,9 +687,9 @@ class Table extends React.Component {
         </div>
 
         {renderElement(component, componentMeta, paramUpdated, dataQueries, 'loadingState', 'properties', currentState)}
-        {renderElement(component, componentMeta, paramUpdated, dataQueries, 'disabledState', 'styles', currentState)}
-        {renderElement(component, componentMeta, paramUpdated, dataQueries, 'textColor', 'styles', currentState)}
-        {renderElement(component, componentMeta, paramUpdated, dataQueries, 'tableType', 'styles', currentState)}
+        {Object.keys(componentMeta.styles).map((style) =>
+          renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components)
+        )}
       </div>
     );
   }