c9a3d14aa5
* feat(tui): make select list layout configurable * feat(tui): tune select list column sizing * test(tui): fix select list alignment assertions
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { Container, type SelectItem, SelectList, type SelectListLayoutOptions } from "@mariozechner/pi-tui";
|
|
import { getSelectListTheme } from "../theme/theme.js";
|
|
import { DynamicBorder } from "./dynamic-border.js";
|
|
|
|
const SHOW_IMAGES_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
|
|
minPrimaryColumnWidth: 12,
|
|
maxPrimaryColumnWidth: 32,
|
|
};
|
|
|
|
/**
|
|
* Component that renders a show images selector with borders
|
|
*/
|
|
export class ShowImagesSelectorComponent extends Container {
|
|
private selectList: SelectList;
|
|
|
|
constructor(currentValue: boolean, onSelect: (show: boolean) => void, onCancel: () => void) {
|
|
super();
|
|
|
|
const items: SelectItem[] = [
|
|
{ value: "yes", label: "Yes", description: "Show images inline in terminal" },
|
|
{ value: "no", label: "No", description: "Show text placeholder instead" },
|
|
];
|
|
|
|
// Add top border
|
|
this.addChild(new DynamicBorder());
|
|
|
|
// Create selector
|
|
this.selectList = new SelectList(items, 5, getSelectListTheme(), SHOW_IMAGES_SELECT_LIST_LAYOUT);
|
|
|
|
// Preselect current value
|
|
this.selectList.setSelectedIndex(currentValue ? 0 : 1);
|
|
|
|
this.selectList.onSelect = (item) => {
|
|
onSelect(item.value === "yes");
|
|
};
|
|
|
|
this.selectList.onCancel = () => {
|
|
onCancel();
|
|
};
|
|
|
|
this.addChild(this.selectList);
|
|
|
|
// Add bottom border
|
|
this.addChild(new DynamicBorder());
|
|
}
|
|
|
|
getSelectList(): SelectList {
|
|
return this.selectList;
|
|
}
|
|
}
|