@basictech/cli
Version:
Basic CLI for creating & managing your projects
69 lines • 4.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { Box, Text, useInput } from 'ink';
export function Table({ columns, rows, onSelect, onCopy, onOpen, onNew, onExit, helpText }) {
const [selectedIndex, setSelectedIndex] = useState(0);
const [notification, setNotification] = useState('');
// Default help text for backward compatibility
const defaultHelpText = {
copyAction: "'c' to copy project ID",
openAction: "'o' to open in browser",
newAction: undefined
};
const currentHelpText = helpText || defaultHelpText;
useInput((input, key) => {
if (key.upArrow && rows.length > 0) {
setSelectedIndex(prev => Math.max(0, prev - 1));
}
else if (key.downArrow && rows.length > 0) {
setSelectedIndex(prev => Math.min(rows.length - 1, prev + 1));
}
else if (key.return && rows[selectedIndex] && onSelect) {
onSelect(rows[selectedIndex], selectedIndex);
}
else if (input === 'c' && rows[selectedIndex] && onCopy) {
onCopy(rows[selectedIndex], selectedIndex);
const itemType = helpText?.copyAction.includes('team') ? 'Team ID' : 'Project ID';
setNotification(`${itemType} copied to clipboard!`);
setTimeout(() => setNotification(''), 3000);
}
else if (input === 'o' && rows[selectedIndex] && onOpen) {
onOpen(rows[selectedIndex], selectedIndex);
}
else if (input === 'n' && onNew) {
onNew();
}
else if (key.escape || (key.ctrl && input === 'c')) {
if (onExit) {
onExit();
}
else {
process.exit(0);
}
}
});
// Reset selected index if rows change
useEffect(() => {
if (selectedIndex >= rows.length) {
setSelectedIndex(Math.max(0, rows.length - 1));
}
}, [rows.length, selectedIndex]);
const renderHeader = () => (_jsx(Box, { borderStyle: "single", borderBottom: true, paddingX: 1, children: _jsx(Box, { children: columns.map((column, index) => (_jsx(Box, { width: column.width, marginRight: index < columns.length - 1 ? 1 : 0, children: _jsx(Text, { bold: true, children: column.title }) }, column.key))) }) }));
const renderRow = (row, index) => {
const isSelected = index === selectedIndex;
return (_jsx(Box, { children: _jsx(Box, { paddingX: 1, children: columns.map((column, colIndex) => (_jsx(Box, { width: column.width, marginRight: colIndex < columns.length - 1 ? 1 : 0, children: _jsx(Text, { color: isSelected ? 'black' : undefined, backgroundColor: isSelected ? 'magenta' : undefined, children: (row[column.key] || '').substring(0, column.width - 1) }) }, column.key))) }) }, index));
};
const renderHelp = () => {
const mainActionsText = [
currentHelpText.copyAction,
currentHelpText.openAction
].filter(Boolean).join(' • ');
return (_jsxs(Box, { marginTop: 2, children: [notification && (_jsx(Box, { marginBottom: 2, children: _jsx(Text, { color: "blue", children: notification }) })), _jsxs(Box, { flexDirection: "column", children: [currentHelpText.newAction && (_jsx(Text, { color: "gray", children: currentHelpText.newAction })), _jsx(Text, { color: "gray", children: mainActionsText }), _jsx(Text, { color: "gray", children: "\u2191/\u2193 to navigate \u2022 esc to quit" })] })] }));
};
if (rows.length === 0) {
const itemType = helpText?.copyAction.includes('team') ? 'teams' : 'projects';
return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["No ", itemType, " found."] }), _jsxs(Box, { marginTop: 2, flexDirection: "column", children: [currentHelpText.newAction && (_jsx(Text, { color: "gray", children: currentHelpText.newAction })), _jsx(Text, { color: "gray", children: "Press esc to quit" })] })] }));
}
return (_jsxs(Box, { flexDirection: "column", children: [renderHeader(), _jsx(Box, { flexDirection: "column", children: rows.map((row, index) => renderRow(row, index)) }), renderHelp()] }));
}
//# sourceMappingURL=Table.js.map