Skip to content

Commit

Permalink
Typescript adjustments for React 18
Browse files Browse the repository at this point in the history 
Because of React 18 stricter typescript rules, it was necessary to apply
a few type adjustments.

Signed-off-by: Rodrigo Pinto <rodrigo.pinto@calian.ca>
  • Loading branch information
@Rodrigoplp-work @bhufmann
Rodrigoplp-work authored and bhufmann committed Oct 12, 2022
1 parent 14ed8b2 commit 05086c9
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 35 deletions.
4 changes: 2 additions & 2 deletions packages/react-components/src/components/abstract-dialog-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,6 @@ export abstract class AbstractDialogComponent<P extends DialogComponentProps, S>
</ReactModal>;
}

protected abstract renderDialogBody(): React.ReactFragment;
protected abstract renderFooter(): React.ReactFragment;
protected abstract renderDialogBody(): React.ReactElement;
protected abstract renderFooter(): React.ReactElement;
}
13 changes: 7 additions & 6 deletions packages/react-components/src/components/abstract-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface AbstractOutputProps {
pinned?: boolean
// eslint-disable-next-line @typescript-eslint/no-explicit-any
persistChartState?: any;
children?: string;
}

export interface AbstractOutputState {
Expand Down Expand Up @@ -212,22 +213,22 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
}
}

protected renderAnalysisFailed(): React.ReactFragment {
return <React.Fragment>
protected renderAnalysisFailed(): React.ReactElement {
return <>
<div className='message-main-area'>
Trace analysis failed.
</div>
</React.Fragment>;
</>;
}

protected renderEmptyResults(): React.ReactFragment {
return <React.Fragment>
protected renderEmptyResults(): React.ReactElement {
return <>
<div className='message-main-area'>
Trace analysis complete.
<br />
No results: Trace missing required events.
</div>
</React.Fragment>;
</>;
}

private openOptionsMenu(): void {
Expand Down
52 changes: 30 additions & 22 deletions packages/react-components/src/components/table-output-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
const data = event.data;
const mouseEvent = event.event as MouseEvent;
const gridApi = event.api;
const rowIndex = event.rowIndex;
const rowIndex = event.rowIndex ?? 0;
const itemPropsObj: { [key: string]: string } | undefined = this.fetchItemProperties(columns, data);

const currTimestamp = (this.timestampCol && data) ? data[this.timestampCol] : undefined;
Expand Down Expand Up @@ -202,9 +202,9 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
signalManager().fireTooltipSignal(itemPropsObj);
}

private fetchItemProperties(columns: Column[], data: any) {
private fetchItemProperties(columns: Column[] | null, data: any) {
const itemPropsObj: { [key: string]: string } = {};
columns.forEach(column => {
columns?.forEach(column => {
const headerName = column.getColDef().headerName;
const colField = column.getColDef().field;
if (headerName && colField && data && data[colField]) {
Expand All @@ -217,7 +217,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
private onKeyDown(event: CellKeyDownEvent) {
const gridApi = event.api;
const keyEvent = event.event as KeyboardEvent;
const rowIndex = event.rowIndex;
const rowIndex = event.rowIndex ?? 0;
this.enableIndexSelection = true;
const currTimestamp = (this.timestampCol && event.data) ? event.data[this.timestampCol] : undefined;

Expand All @@ -228,19 +228,21 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
let isContiguous = true;
if (keyEvent.shiftKey) {
if (keyEvent.code === 'ArrowDown') {
if (!currentRow.isSelected()) {
if (currentRow && !currentRow.isSelected()) {
gridApi.deselectAll();
isContiguous = false;
}

nextRow = gridApi.getRowNode(String(rowIndex + 1));
if (isContiguous === false) {
if (this.timestampCol && nextRow.data) {
if (this.timestampCol && nextRow?.data) {
this.startTimestamp = this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
}
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
if (nextRow && nextRow.rowIndex) {
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
}
} else {
if (this.selectEndIndex < this.selectStartIndex) {
if (this.selectStartIndex !== null && this.selectEndIndex < this.selectStartIndex) {
if (currentRow && currentRow.id) {
currentRow.setSelected(false);
}
Expand All @@ -250,22 +252,24 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
}
}
this.selectEndIndex += 1;
if (this.timestampCol && nextRow.data) {
if (this.timestampCol && nextRow?.data) {
this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
}
}
} else if (keyEvent.code === 'ArrowUp') {
if (!currentRow.isSelected()) {
if (currentRow && !currentRow.isSelected()) {
gridApi.deselectAll();
isContiguous = false;
}
nextRow = gridApi.getRowNode(String(rowIndex - 1));

if (isContiguous === false) {
if (this.timestampCol && nextRow.data) {
if (this.timestampCol && nextRow && nextRow.data) {
this.startTimestamp = this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
}
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
if (nextRow && nextRow.rowIndex) {
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
}
} else {
if (this.selectStartIndex < this.selectEndIndex) {
if (currentRow && currentRow.id) {
Expand All @@ -277,7 +281,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
}
}
this.selectEndIndex -= 1;
if (this.timestampCol && nextRow.data) {
if (this.timestampCol && nextRow?.data) {
this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
}
}
Expand All @@ -300,16 +304,20 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
gridApi.deselectAll();
if (keyEvent.code === 'ArrowDown') {
nextRow = gridApi.getRowNode(String(rowIndex + 1));
if (this.timestampCol && nextRow.data) {
if (this.timestampCol && nextRow?.data) {
this.startTimestamp = this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
}
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
if (nextRow && nextRow.rowIndex) {
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
}
} else if (keyEvent.code === 'ArrowUp') {
nextRow = gridApi.getRowNode(String(rowIndex - 1));
if (this.timestampCol && nextRow.data) {
if (this.timestampCol && nextRow?.data) {
this.startTimestamp = this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
}
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
if (nextRow && nextRow.rowIndex) {
this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
}
}
if (nextRow && nextRow.id) {
nextRow.setSelected(true);
Expand Down Expand Up @@ -409,7 +417,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro

if (this.columnApi) {
const columns = this.columnApi.getAllColumns();
const timestampHeader = columns.find(column => column.getColDef().headerName === 'Timestamp ns');
const timestampHeader = columns?.find(column => column.getColDef().headerName === 'Timestamp ns');
if (timestampHeader) {
this.timestampCol = timestampHeader.getColDef().field;
}
Expand Down Expand Up @@ -653,7 +661,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
// non-contiguous row found, stop searching in cache
currRowIndexFound = false;
}
if (currRowIndexFound && !isFound && rowNode.data && rowNode.data['isMatched']) {
if (currRowIndexFound && !isFound && rowNode.rowIndex && rowNode.data && rowNode.data['isMatched']) {
this.gridApi?.ensureIndexVisible(rowNode.rowIndex);
this.selectStartIndex = this.selectEndIndex = rowNode.rowIndex;
if (this.timestampCol) {
Expand Down Expand Up @@ -707,7 +715,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
}

private isValidRowSelection(rowNode: RowNode): boolean {
if ((this.enableIndexSelection && this.selectStartIndex !== -1 && this.selectEndIndex !== -1 && rowNode.rowIndex >= Math.min(this.selectStartIndex, this.selectEndIndex)
if ((this.enableIndexSelection && this.selectStartIndex !== -1 && this.selectEndIndex !== -1 && rowNode.rowIndex && rowNode.rowIndex >= Math.min(this.selectStartIndex, this.selectEndIndex)
&& rowNode.rowIndex <= Math.max(this.selectStartIndex, this.selectEndIndex)) || (!this.enableIndexSelection
&& this.timestampCol && BigInt(rowNode.data[this.timestampCol]) >= (this.startTimestamp <= this.endTimestamp ? this.startTimestamp : this.endTimestamp)
&& BigInt(rowNode.data[this.timestampCol]) <= (this.startTimestamp <= this.endTimestamp ? this.endTimestamp : this.startTimestamp))) {
Expand All @@ -731,12 +739,12 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
return;
}

columnApi.setColumnsVisible([column.field], !columnApi.getColumn(column).isVisible());
columnApi.setColumnsVisible([column.field], !columnApi.getColumn(column)?.isVisible());
const allCols = cloneDeep(this.state.tableColumns);

allCols.map(item => {
if (item.field === column.field) {
item.hide = columnApi.getColumn(column).isVisible();
item.hide = columnApi.getColumn(column)?.isVisible();
}
});

Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/src/components/trace-overview-selection-dialog-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export class TraceOverviewSelectionDialogComponent extends AbstractDialogCompone
this.getAvailableOutputDescriptors();
}

protected renderDialogBody(): React.ReactFragment{
protected renderDialogBody(): React.ReactElement {
if (!this.state.outputDescriptors) {
return (<div>
Loading available outputs...
Expand All @@ -45,7 +45,7 @@ export class TraceOverviewSelectionDialogComponent extends AbstractDialogCompone
);
}

protected renderFooter(): React.ReactFragment {
protected renderFooter(): React.ReactElement {
return (
<button className="theia-button secondary" onClick={this.props.onCloseDialog}>Close</button>
);
Expand Down
4 changes: 1 addition & 3 deletions packages/react-components/src/components/utils/filter-tree/table-row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ interface TableRowProps {
onToggleCollapse: (id: number) => void;
onClose: (id: number) => void;
onToggleCheck: (id: number) => void;
onRowClick: (id: number) => void;
}

export class TableRow extends React.Component<TableRowProps> {
Expand Down Expand Up @@ -61,13 +60,12 @@ export class TableRow extends React.Component<TableRowProps> {
: undefined;

renderRow = (): React.ReactNode => {
const { node, onRowClick, selectedRow } = this.props;
const { node, selectedRow } = this.props;
const row = node.labels.map((_label: string, index) =>
<TableCell
key={node.id + '-' + index}
index={index}
node={node}
onRowClick={onRowClick}
selectedRow={selectedRow}
>
{ (index === 0) ? this.renderToggleCollapse() : undefined }
Expand Down
1 change: 1 addition & 0 deletions packages/react-components/src/components/utils/timegraph-container-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export namespace ReactTimeGraphContainer {
options: TimeGraphContainerOptions,
unitController: TimeGraphUnitController,
layers: TimeGraphLayer[],
children?: never[],
addWidgetResizeHandler: (handler: () => void) => void
removeWidgetResizeHandler: (handler: () => void) => void
}
Expand Down

0 comments on commit 05086c9

Please sign in to comment.