refactor: clean up FilterableSelectList per code review
- Remove dead input handlers (onSubmit/onEscape never triggered) - Store maxVisible as instance property instead of bracket access - Remove unused filterInput theme property
This commit is contained in:
committed by
Peter Steinberger
parent
95f0befd65
commit
262e35c219
@@ -15,7 +15,6 @@ export interface FilterableSelectItem extends SelectItem {
|
|||||||
|
|
||||||
export interface FilterableSelectListTheme extends SelectListTheme {
|
export interface FilterableSelectListTheme extends SelectListTheme {
|
||||||
filterLabel: (text: string) => string;
|
filterLabel: (text: string) => string;
|
||||||
filterInput: (text: string) => string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -26,6 +25,7 @@ export class FilterableSelectList implements Component {
|
|||||||
private input: Input;
|
private input: Input;
|
||||||
private selectList: SelectList;
|
private selectList: SelectList;
|
||||||
private allItems: FilterableSelectItem[];
|
private allItems: FilterableSelectItem[];
|
||||||
|
private maxVisible: number;
|
||||||
private theme: FilterableSelectListTheme;
|
private theme: FilterableSelectListTheme;
|
||||||
private filterText = "";
|
private filterText = "";
|
||||||
|
|
||||||
@@ -38,31 +38,11 @@ export class FilterableSelectList implements Component {
|
|||||||
theme: FilterableSelectListTheme,
|
theme: FilterableSelectListTheme,
|
||||||
) {
|
) {
|
||||||
this.allItems = items;
|
this.allItems = items;
|
||||||
|
this.maxVisible = maxVisible;
|
||||||
this.theme = theme;
|
this.theme = theme;
|
||||||
|
|
||||||
this.input = new Input();
|
this.input = new Input();
|
||||||
this.selectList = new SelectList(items, maxVisible, theme);
|
this.selectList = new SelectList(items, maxVisible, theme);
|
||||||
|
|
||||||
// Wire up input to filter the list
|
|
||||||
this.input.onSubmit = () => {
|
|
||||||
const selected = this.selectList.getSelectedItem();
|
|
||||||
if (selected) {
|
|
||||||
this.onSelect?.(selected);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.input.onEscape = () => {
|
|
||||||
if (this.filterText) {
|
|
||||||
// First escape clears filter
|
|
||||||
this.filterText = "";
|
|
||||||
this.input.setValue("");
|
|
||||||
this.selectList.setFilter("");
|
|
||||||
this.selectList.setSelectedIndex(0);
|
|
||||||
} else {
|
|
||||||
// Second escape cancels
|
|
||||||
this.onCancel?.();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private getSearchText(item: FilterableSelectItem): string {
|
private getSearchText(item: FilterableSelectItem): string {
|
||||||
@@ -75,29 +55,14 @@ export class FilterableSelectList implements Component {
|
|||||||
private applyFilter(): void {
|
private applyFilter(): void {
|
||||||
const query = this.filterText.toLowerCase().trim();
|
const query = this.filterText.toLowerCase().trim();
|
||||||
if (!query) {
|
if (!query) {
|
||||||
// Reset to all items
|
this.selectList = new SelectList(this.allItems, this.maxVisible, this.theme);
|
||||||
this.selectList = new SelectList(
|
|
||||||
this.allItems,
|
|
||||||
this.selectList["maxVisible"],
|
|
||||||
this.theme,
|
|
||||||
);
|
|
||||||
this.selectList.onSelect = this.onSelect;
|
|
||||||
this.selectList.onCancel = this.onCancel;
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Use fuzzy filter from pi-tui
|
|
||||||
const filtered = fuzzyFilter(this.allItems, query, (item) =>
|
const filtered = fuzzyFilter(this.allItems, query, (item) =>
|
||||||
this.getSearchText(item),
|
this.getSearchText(item),
|
||||||
);
|
);
|
||||||
|
this.selectList = new SelectList(filtered, this.maxVisible, this.theme);
|
||||||
this.selectList = new SelectList(
|
|
||||||
filtered,
|
|
||||||
this.selectList["maxVisible"],
|
|
||||||
this.theme,
|
|
||||||
);
|
|
||||||
this.selectList.onSelect = this.onSelect;
|
|
||||||
this.selectList.onCancel = this.onCancel;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
invalidate(): void {
|
invalidate(): void {
|
||||||
|
|||||||
@@ -109,7 +109,6 @@ export const selectListTheme: SelectListTheme = {
|
|||||||
export const filterableSelectListTheme = {
|
export const filterableSelectListTheme = {
|
||||||
...selectListTheme,
|
...selectListTheme,
|
||||||
filterLabel: (text: string) => fg(palette.dim)(text),
|
filterLabel: (text: string) => fg(palette.dim)(text),
|
||||||
filterInput: (text: string) => fg(palette.text)(text),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const settingsListTheme: SettingsListTheme = {
|
export const settingsListTheme: SettingsListTheme = {
|
||||||
|
|||||||
Reference in New Issue
Block a user