From e06b7f5a2c09559a5ec716b50ca5d581ea4d91e1 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Thu, 7 Nov 2019 11:17:53 +0000
Subject: [PATCH] Row select action call

---
 .../designSystems/appsmith/TableComponent.tsx | 67 +++++++++++++++++++
 app/client/src/constants/DefaultTheme.tsx     | 10 +++
 app/client/src/utils/AppsmithUtils.tsx        |  2 +
 app/client/src/widgets/BaseWidget.tsx         | 10 +++
 app/client/src/widgets/TableWidget.tsx        | 29 +++++---
 5 files changed, 109 insertions(+), 9 deletions(-)
 create mode 100644 app/client/src/components/designSystems/appsmith/TableComponent.tsx

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent.tsx b/app/client/src/components/designSystems/appsmith/TableComponent.tsx
new file mode 100644
index 0000000000..67a94672e6
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/TableComponent.tsx
@@ -0,0 +1,67 @@
+import BaseTable, { Column } from "react-base-table";
+import styled from "styled-components";
+import React from "react";
+import { noop } from "../../../utils/AppsmithUtils";
+
+const StyledTable = styled(BaseTable)`
+  .row-selected {
+    background-color: ${props =>
+      props.theme.widgets.tableWidget.selectHighlightColor};
+  }
+`;
+
+export interface Column {
+  key: string;
+  dataKey: string;
+  title: string;
+  width: number;
+}
+
+export interface ReactBaseTableProps {
+  width: number;
+  height: number;
+  columns: Column[];
+  data: object[];
+  maxHeight: number;
+  selectedRowIndex?: number;
+}
+
+export interface SelectableTableProps extends ReactBaseTableProps {
+  onRowClick: (rowData: object, rowIndex: number) => void;
+}
+
+export default class SelectableTable extends React.PureComponent<
+  SelectableTableProps
+> {
+  static defaultProps = {};
+
+  _onClick = ({ rowData, rowIndex }: { rowData: object; rowIndex: number }) => {
+    if (this.props.selectedRowIndex !== rowIndex) {
+      this.props.onRowClick(rowData, rowIndex);
+    }
+  };
+
+  _rowClassName = ({ rowIndex }: { rowIndex: number }) => {
+    const { selectedRowIndex } = this.props;
+    return selectedRowIndex === rowIndex ? "row-selected" : "";
+  };
+
+  render() {
+    const { onRowClick, ...rest } = this.props;
+    return (
+      <StyledTable
+        {...rest}
+        rowClassName={this._rowClassName}
+        rowEventHandlers={{
+          onClick: this._onClick,
+        }}
+      />
+    );
+  }
+}
+
+SelectableTable.defaultProps = {
+  ...BaseTable.defaultProps,
+  onRowSelect: noop,
+  onSelectedRowsChange: noop,
+};
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 7bd30f7019..bf7cd64c0a 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -49,6 +49,11 @@ export type Theme = {
     minWidth: number;
     minHeight: number;
   };
+  widgets: {
+    tableWidget: {
+      selectHighlightColor: Color;
+    };
+  };
 };
 
 export const getColorWithOpacity = (color: Color, opacity: number) => {
@@ -142,6 +147,11 @@ export const theme: Theme = {
     minWidth: 300,
     minHeight: 300,
   },
+  widgets: {
+    tableWidget: {
+      selectHighlightColor: Colors.GEYSER_LIGHT,
+    },
+  },
 };
 
 export { css, createGlobalStyle, keyframes, ThemeProvider };
diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx
index 1500e8a957..35229b87cf 100644
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@@ -86,3 +86,5 @@ export const getNextWidgetName = (
 
   return prefix + (lastIndex + 1);
 };
+
+export const noop = () => {};
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index aa1157fbd4..4a3d201f68 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -40,6 +40,16 @@ abstract class BaseWidget<
     executeAction && executeAction(actionPayloads);
   }
 
+  updateWidgetProperty(
+    widgetId: string,
+    propertyName: string,
+    propertyValue: any,
+  ): void {
+    const { updateWidgetProperty } = this.context;
+    updateWidgetProperty &&
+      updateWidgetProperty(widgetId, propertyName, propertyValue);
+  }
+
   componentDidMount(): void {
     this.calculateWidgetBounds(
       this.props.rightColumn,
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index 48d65051c8..e27779ec17 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -2,16 +2,12 @@ import React from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "../constants/WidgetConstants";
 import { ActionPayload } from "../constants/ActionConstants";
-import BaseTable, { AutoResizer } from "react-base-table";
+import { AutoResizer } from "react-base-table";
 import "react-base-table/styles.css";
 import { forIn } from "lodash";
-
-interface Column {
-  key: string;
-  dataKey: string;
-  title: string;
-  width: number;
-}
+import SelectableTable, {
+  Column,
+} from "../components/designSystems/appsmith/TableComponent";
 
 function constructColumns(data: object[]): Column[] {
   const cols: Column[] = [];
@@ -54,12 +50,23 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return (
       <AutoResizer>
         {({ width, height }: { width: number; height: number }) => (
-          <BaseTable
+          <SelectableTable
             width={width}
             height={height}
             columns={columns}
             data={tableData}
             maxHeight={height}
+            selectedRowIndex={
+              this.props.selectedRow && this.props.selectedRow.index
+            }
+            onRowClick={(rowData: object, index: number) => {
+              const { widgetId, onRowSelected } = this.props;
+              super.updateWidgetProperty(widgetId, "selectedRow", {
+                data: rowData,
+                index: index,
+              });
+              super.executeAction(onRowSelected);
+            }}
           />
         )}
       </AutoResizer>
@@ -85,6 +92,10 @@ export interface TableWidgetProps extends WidgetProps {
   recordActions?: TableAction[];
   onPageChange?: ActionPayload[];
   onRowSelected?: ActionPayload[];
+  selectedRow?: {
+    data: object;
+    index: number;
+  };
 }
 
 export default TableWidget;