Merge branch 'feature/table-row-select' into 'release'

Row select action call

See merge request theappsmith/internal-tools-client!119

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,
+};

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 };

app/client/src/utils/AppsmithUtils.tsx

@@ -86,3 +86,5 @@ export const getNextWidgetName = (
 
   return prefix + (lastIndex + 1);
 };
+
+export const noop = () => {};

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,

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;