106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import _ from "lodash";
|
|
import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
|
|
import { WidgetType } from "constants/WidgetConstants";
|
|
import { ActionPayload, TableAction } from "constants/ActionConstants";
|
|
import { AutoResizer } from "react-base-table";
|
|
import "react-base-table/styles.css";
|
|
import { forIn } from "lodash";
|
|
import SelectableTable, {
|
|
Column,
|
|
} from "components/designSystems/appsmith/TableComponent";
|
|
import { VALIDATION_TYPES } from "constants/WidgetValidation";
|
|
import { WidgetPropertyValidationType } from "utils/ValidationFactory";
|
|
import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
|
|
|
|
function constructColumns(data: object[]): Column[] {
|
|
const cols: Column[] = [];
|
|
const listItemWithAllProperties = {};
|
|
data.forEach(dataItem => {
|
|
Object.assign(listItemWithAllProperties, dataItem);
|
|
});
|
|
forIn(listItemWithAllProperties, (value, key) => {
|
|
cols.push({
|
|
key: key,
|
|
dataKey: key,
|
|
width: 200,
|
|
title: key,
|
|
});
|
|
});
|
|
return cols;
|
|
}
|
|
|
|
class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
|
|
static getPropertyValidationMap(): WidgetPropertyValidationType {
|
|
return {
|
|
tableData: VALIDATION_TYPES.TABLE_DATA,
|
|
nextPageKey: VALIDATION_TYPES.TEXT,
|
|
prevPageKey: VALIDATION_TYPES.TEXT,
|
|
label: VALIDATION_TYPES.TEXT,
|
|
selectedRowIndex: VALIDATION_TYPES.NUMBER,
|
|
};
|
|
}
|
|
|
|
static getDerivedPropertiesMap() {
|
|
return {
|
|
selectedRow: (widgetData: FlattenedWidgetProps) => {
|
|
return widgetData.tableData[widgetData.selectedRowIndex];
|
|
},
|
|
};
|
|
}
|
|
|
|
getPageView() {
|
|
const { tableData } = this.props;
|
|
const columns = constructColumns(tableData);
|
|
return (
|
|
<AutoResizer>
|
|
{({ width, height }: { width: number; height: number }) => (
|
|
<SelectableTable
|
|
width={width}
|
|
height={height}
|
|
columns={columns}
|
|
data={tableData}
|
|
maxHeight={height}
|
|
isLoading={this.props.isLoading}
|
|
selectedRowIndex={this.props.selectedRowIndex}
|
|
onRowClick={(rowData: object, index: number) => {
|
|
const { onRowSelected } = this.props;
|
|
this.updateSelectedRowProperty(index);
|
|
super.executeAction(onRowSelected);
|
|
}}
|
|
/>
|
|
)}
|
|
</AutoResizer>
|
|
);
|
|
}
|
|
|
|
updateSelectedRowProperty(index: number) {
|
|
const { widgetId } = this.props;
|
|
this.updateWidgetProperty(widgetId, "selectedRowIndex", index);
|
|
}
|
|
|
|
getWidgetType(): WidgetType {
|
|
return "TABLE_WIDGET";
|
|
}
|
|
}
|
|
|
|
export type PaginationType = "PAGES" | "INFINITE_SCROLL";
|
|
|
|
type RowData = {
|
|
rowIndex: number;
|
|
};
|
|
type SelectedRow = object & RowData;
|
|
|
|
export interface TableWidgetProps extends WidgetProps {
|
|
nextPageKey?: string;
|
|
prevPageKey?: string;
|
|
label: string;
|
|
tableData: object[];
|
|
recordActions?: TableAction[];
|
|
onPageChange?: ActionPayload[];
|
|
onRowSelected?: ActionPayload[];
|
|
selectedRowIndex?: number;
|
|
}
|
|
|
|
export default TableWidget;
|