From eb2ebb207efe18673190600f2429bb46dd0e5b39 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Sun, 29 Aug 2021 11:45:57 +0530
Subject: [PATCH] Chore: codehinter for table cell properties

---
 .../src/Editor/Components/Table/Radio.jsx     |  1 +
 .../src/Editor/Components/Table/Table.jsx     |  6 +++-
 .../src/Editor/Inspector/Components/Table.jsx | 31 +++++++++----------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Radio.jsx b/frontend/src/Editor/Components/Table/Radio.jsx
index 5e4b5c5a93..7786e7600d 100644
--- a/frontend/src/Editor/Components/Table/Radio.jsx
+++ b/frontend/src/Editor/Components/Table/Radio.jsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 export const Radio = ({ options, value, onChange, readOnly }) => {
 
   value = value === undefined ? [] : value;
+  options = Array.isArray(options) ? options : [];
 
   return (
     <div className="radio row">
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 60636ded37..c2e343116c 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -450,7 +450,11 @@ export function Table({
 
   const columns = useMemo(
     () => [...columnData, ...actionsCellData],
-    [JSON.stringify(columnData), actionsCellData.length, componentState.changeSet] // Hack: need to fix
+    [JSON.stringify(columnData), 
+      actionsCellData.length, 
+      componentState.changeSet,
+      JSON.stringify(component.definition.properties.columns)
+    ] // Hack: need to fix
   );
 
   const data = useMemo(() => tableData, [tableData.length]);
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 8c986af097..dc8b2f856c 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -9,6 +9,7 @@ import { Color } from '../Elements/Color';
 import SelectSearch, { fuzzySearch } from 'react-select-search';
 import { v4 as uuidv4 } from 'uuid'; 
 import { EventManager } from '../EventManager';
+import { CodeHinter } from '../../CodeBuilder/CodeHinter';
 
 class Table extends React.Component {
   constructor(props) {
@@ -169,28 +170,26 @@ class Table extends React.Component {
             <div>
               <div className="field mb-2">
                 <label className="form-label">Values</label>
-                <input
-                  type="text"
-                  className="form-control text-field"
-                  onChange={(e) => {
-                    e.stopPropagation();
-                    this.onColumnItemChange(index, 'values', e.target.value);
-                  }}
-                  value={column.values}
+                <CodeHinter
+                  currentState={this.props.currentState}
+                  initialValue={column.values}
+                  theme={this.props.darkMode ? 'monokai' : 'default'}
+                  mode= "javascript"
+                  lineNumbers={false}
                   placeholder={'{{[1, 2, 3]}}'}
+                  onChange={(value) => this.onColumnItemChange(index, 'values', value)}
                 />
               </div>
               <div className="field mb-2">
                 <label className="form-label">Labels</label>
-                <input
-                  type="text"
-                  className="form-control text-field"
-                  onChange={(e) => {
-                    e.stopPropagation();
-                    this.onColumnItemChange(index, 'labels', e.target.value);
-                  }}
-                  value={column.labels}
+                <CodeHinter
+                  currentState={this.props.currentState}
+                  initialValue={column.labels}
+                  theme={this.props.darkMode ? 'monokai' : 'default'}
+                  mode= "javascript"
+                  lineNumbers={false}
                   placeholder={'{{["one", "two", "three"]}}'}
+                  onChange={(value) => this.onColumnItemChange(index, 'labels', value)}
                 />
               </div>
             </div>