95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import BaseTable, { Column } from "react-base-table";
|
|
import styled from "styled-components";
|
|
import React from "react";
|
|
import { noop } from "utils/AppsmithUtils";
|
|
|
|
const RowLoader = styled.div`
|
|
height: 16px !important;
|
|
width: 100%;
|
|
margin: 0 15px;
|
|
`;
|
|
|
|
const Row = (props: any) => (
|
|
<div {...props}>
|
|
<RowLoader className={"bp3-skeleton"} />
|
|
</div>
|
|
);
|
|
|
|
const rowProps = ({ rowData }: { rowData: { isLoading: boolean } }) => {
|
|
return rowData.isLoading ? { tagName: Row } : undefined;
|
|
};
|
|
|
|
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;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
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;
|
|
const className = selectedRowIndex === rowIndex ? "row-selected" : "";
|
|
return className;
|
|
};
|
|
|
|
render() {
|
|
const { data, isLoading, onRowClick, ...rest } = this.props;
|
|
const dataWithLoadingState = data.map(rowData => {
|
|
return {
|
|
...rowData,
|
|
isLoading: this.props.isLoading,
|
|
};
|
|
});
|
|
return (
|
|
<StyledTable
|
|
{...rest}
|
|
data={dataWithLoadingState}
|
|
rowClassName={this._rowClassName}
|
|
rowEventHandlers={{
|
|
onClick: this._onClick,
|
|
}}
|
|
rowProps={rowProps}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
SelectableTable.defaultProps = {
|
|
...BaseTable.defaultProps,
|
|
onRowSelect: noop,
|
|
isLoading: false,
|
|
onSelectedRowsChange: noop,
|
|
};
|