142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
import { createContext, use, useState, type ReactNode } from "react";
|
|
import { View, Text } from "react-native";
|
|
import { useKeyboard } from "../src/useKeyboard";
|
|
import type { KeyEvent } from "@opentui/core";
|
|
|
|
const HEADER_COLOR = '#7158e2';
|
|
const TABLE_COLORS = [
|
|
'#ddd',
|
|
'#eee'
|
|
];
|
|
const SELECTED_COLOR = '#f7b730';
|
|
|
|
|
|
const EXTRA = 5;
|
|
|
|
export type ValidRecord = Record<string, string | number | null>;
|
|
|
|
interface TableState {
|
|
data: unknown[];
|
|
columns: Column[];
|
|
columnMap: Map<string, number>;
|
|
idx: number;
|
|
selectedFrom: number | undefined;
|
|
};
|
|
|
|
|
|
const INITAL_STATE = {
|
|
data: [],
|
|
columns: [],
|
|
columnMap: new Map(),
|
|
idx: 0,
|
|
selectedFrom: undefined,
|
|
} satisfies TableState;
|
|
|
|
export const Context = createContext<TableState>(INITAL_STATE);
|
|
|
|
export type Column = { name: string, label: string, render?: (i: number | string) => string };
|
|
|
|
|
|
function renderCell(row: ValidRecord, column: Column): string {
|
|
const cell = row[column.name];
|
|
if (cell == undefined) return 'n/a';
|
|
if (cell == null) return 'null';
|
|
if (column.render) return column.render(cell);
|
|
return cell.toString();
|
|
}
|
|
|
|
|
|
export interface ProviderProps<T> {
|
|
data: T[];
|
|
columns: Column[];
|
|
children: ReactNode;
|
|
onKey?: (event: KeyEvent, selected: T[]) => void;
|
|
};
|
|
export function Provider<T extends ValidRecord>({ data, columns, children, onKey }: ProviderProps<T>) {
|
|
const [idx, setIdx] = useState(0);
|
|
const [selectedFrom, setSelectedFrom] = useState<number>();
|
|
|
|
useKeyboard((key) => {
|
|
if (key.name == 'j' || key.name == 'down') {
|
|
if (key.shift && selectedFrom == undefined) {
|
|
setSelectedFrom(idx);
|
|
}
|
|
setIdx((prev) => Math.min(prev + 1, data.length - 1));
|
|
} else if (key.name == 'k' || key.name == 'up') {
|
|
if (key.shift && selectedFrom == undefined) {
|
|
setSelectedFrom(idx);
|
|
}
|
|
setIdx((prev) => Math.max(prev - 1, 0));
|
|
} else if (key.name == 'g' && key.shift) {
|
|
setIdx(data.length - 1);
|
|
} else if (key.name == 'v') {
|
|
setSelectedFrom(idx);
|
|
} else if (key.name == 'escape') {
|
|
setSelectedFrom(undefined);
|
|
} else {
|
|
const from = selectedFrom ? Math.min(idx, selectedFrom) : idx;
|
|
const to = selectedFrom ? Math.max(idx, selectedFrom) : idx;
|
|
const selected = data.slice(from, to + 1);
|
|
if (onKey) onKey(key, selected);
|
|
}
|
|
}, [data, idx, selectedFrom]);
|
|
|
|
|
|
const columnMap = new Map(columns.map(col => {
|
|
return [col.name, Math.max(col.label.length, ...data.map(row => renderCell(row, col).length))]
|
|
}));
|
|
|
|
|
|
return (
|
|
<Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
|
|
{children}
|
|
</Context.Provider>
|
|
);
|
|
}
|
|
|
|
export function Body() {
|
|
const { columns, data, columnMap, idx, selectedFrom } = use(Context);
|
|
return (
|
|
<View>
|
|
<View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
|
|
{columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
|
|
</View>
|
|
{data.map((row, index) => {
|
|
const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
|
|
|
|
return (
|
|
<View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
|
|
<TableRow key={index} row={row as ValidRecord} index={index} isSelected={isSelected} />
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
)
|
|
|
|
}
|
|
|
|
interface RowProps<T> {
|
|
row: T;
|
|
index: number;
|
|
isSelected: boolean;
|
|
}
|
|
function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
|
|
const { columns, columnMap } = use(Context);
|
|
|
|
|
|
return <View style={{ flexDirection: 'row' }}>
|
|
{columns.map(column => {
|
|
const rendered = renderCell(row, column);
|
|
return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'black' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
|
|
})}
|
|
</View>
|
|
}
|
|
|
|
function rpad(input: string, length: number): string {
|
|
return input + Array.from({ length })
|
|
.map(_ => " ")
|
|
.join("");
|
|
}
|
|
|
|
|