hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Adding TableDataColumn and TableDataRow types

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2023-06-06 13:40:20 +03:00
parent 3b17490269
commit ddc104899b
1 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/core/src/renderer/components/table/table-state.injectable.tsx
View File

@ -15,7 +15,27 @@ import type { TableDataContextValue } from "./table-data-context";
import type { CreateTableState } from "@k8slens/table"; import type { CreateTableState } from "@k8slens/table";
import { createTableStateInjectionToken } from "@k8slens/table"; import { createTableStateInjectionToken } from "@k8slens/table";
type TableDataColumn<DataItem = any> = object; interface TableDataRow<DataItem = any> {
id: string;
data: DataItem;
index?: number;
className?: string;
}
interface TableDataColumn<DataItem = any> {
id: string;
title: React.ReactNode;
className?: string;
style?: React.CSSProperties;
size?: string;
minSize?: number;
resizable?: boolean;
draggable?: boolean;
sortable?: boolean;
renderValue?: (row: TableDataRow<DataItem>) => React.ReactNode;
sortValue?: (row: TableDataRow<DataItem>, col: TableDataColumn<DataItem>) => string | number;
searchValue?: (row: TableDataRow<DataItem>) => string;
}
export function createLensTableState<K extends KubeObject>({ export function createLensTableState<K extends KubeObject>({
tableId, tableId,
@ -33,8 +53,7 @@ export function createLensTableState<K extends KubeObject>({
}: TableDataContextValue<K>, createState: CreateTableState) { }: TableDataContextValue<K>, createState: CreateTableState) {
const headers = renderTableHeader as Required<TableCellProps>[]; const headers = renderTableHeader as Required<TableCellProps>[];
let headingColumns: TableDataColumn[] = headers.map(
let headingColumns: TableDataColumn<K>[] = headers.map(
({ id: columnId, className, title }, index) => ({ ({ id: columnId, className, title }, index) => ({
id: columnId ?? className, id: columnId ?? className,
className, className,
@ -42,7 +61,7 @@ export function createLensTableState<K extends KubeObject>({
sortable: !!columnId, sortable: !!columnId,
draggable: !!columnId, // e.g. warning-icon column in pods draggable: !!columnId, // e.g. warning-icon column in pods
title, title,
renderValue(row: any, col: any) { renderValue(row: TableDataRow) {
const content = const content =
renderTableContents?.(row.data)[index] ?? renderTableContents?.(row.data)[index] ??
contextColumns contextColumns
@ -57,13 +76,13 @@ export function createLensTableState<K extends KubeObject>({
return <div className={className}>{title}</div>; return <div className={className}>{title}</div>;
} }
}, },
sortValue(row: any, col: any) { sortValue(row: TableDataRow, col: any) {
return sortingCallbacks?.[col.id]?.(row.data) as string; return sortingCallbacks?.[col.id]?.(row.data) as string;
}, },
}), }),
); );
const checkboxColumn: TableDataColumn<K> = { const checkboxColumn: TableDataColumn = {
id: "checkbox", id: "checkbox",
className: "checkbox", className: "checkbox",
draggable: false, draggable: false,
@ -84,7 +103,7 @@ export function createLensTableState<K extends KubeObject>({
<div onClick={stopPropagation}> <div onClick={stopPropagation}>
<Checkbox <Checkbox
value={tableState.selectedRowsId.has(rowId)} value={tableState.selectedRowsId.has(rowId)}
onChange={action((val, evt) => { onChange={action(() => {
if (tableState.selectedRowsId.has(rowId)) { if (tableState.selectedRowsId.has(rowId)) {
tableState.selectedRowsId.delete(rowId); tableState.selectedRowsId.delete(rowId);
} else { } else {
@ -97,7 +116,7 @@ export function createLensTableState<K extends KubeObject>({
}, },
}; };
const menuColumn: TableDataColumn<K> = { const menuColumn: TableDataColumn = {
id: "menu", id: "menu",
className: "menu", className: "menu",
resizable: false, resizable: false,
@ -118,7 +137,7 @@ export function createLensTableState<K extends KubeObject>({
<Checkbox <Checkbox
label={title ?? className} label={title ?? className}
value={!tableState.hiddenColumns.has(columnId)} value={!tableState.hiddenColumns.has(columnId)}
onChange={action((value, evt) => { onChange={action(() => {
if (tableState.hiddenColumns.has(columnId)) { if (tableState.hiddenColumns.has(columnId)) {
tableState.hiddenColumns.delete(columnId); tableState.hiddenColumns.delete(columnId);
} else { } else {
@ -131,7 +150,7 @@ export function createLensTableState<K extends KubeObject>({
</MenuActions> </MenuActions>
); );
}, },
renderValue(row: any, col: any) { renderValue(row: any) {
return ( return (
<div onClick={stopPropagation}>{renderItemMenu?.(row.data, store)}</div> <div onClick={stopPropagation}>{renderItemMenu?.(row.data, store)}</div>
); );