r3bl-ts-utils
Version:
The `r3bl-ts-utils` package is a set of useful TypeScript functions and classes that can be used in Node.js and browser environments. They are inspired by Kotlin stdlib, and Rust to write code as expressions rather than statements, colorized text, powerfu
163 lines • 8.73 kB
JavaScript
;
/*
* Copyright (c) 2022 R3BL LLC. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelectInput = void 0;
const ink_1 = require("ink");
const lodash_1 = require("lodash");
const react_1 = __importDefault(require("react"));
const index_1 = require("../../index");
const checkbox_1 = require("./checkbox");
const indicator_1 = require("./indicator");
const item_1 = require("./item");
const selection_model_1 = require("./selection-model");
const utils_1 = require("./utils");
const DEBUG = false;
const MultiSelectInput = ({ items, /* Only required prop. */ hasFocus = true, singleSelectionMode = false, maxRows = -1, initialHighlightedIndex = 0, initialSelected = new Array(), indicatorComponent = indicator_1.Indicator, itemComponent = item_1.Item, checkboxComponent = checkbox_1.CheckBox, onHighlight = lodash_1.noop, onSelect = lodash_1.noop, onUnselect = lodash_1.noop, onSubmit = lodash_1.noop, testing = undefined, }) => {
// Generate state from props.
const [rotateIndex, setRotateIndex] = (0, index_1.useStateSafely)(0).asArray();
const [selectionModel, setSelectionModel] = (0, index_1.useStateSafely)(new selection_model_1.SelectionModel(initialSelected, singleSelectionMode)).asArray();
const [highlightedIndex, setHighlightedIndex] = (0, index_1.useStateSafely)(initialHighlightedIndex).asArray();
// Check whether scrolling is active and item needs to be sliced based on "viewport".
const isScrollActive = isScrollable();
const slicedItemsToDisplay = sliceItemsIfScrollable();
// Handle keyboard inputs.
const onKeypress = (keypress) => {
(0, index_1._callIfSome)(keypress, keypress => {
if (keypress.matches("return"))
returnPressed();
if (keypress.matches("downarrow"))
downarrowPressed();
if (keypress.matches("uparrow"))
uparrowPressed();
if (keypress.matches("space"))
spacePressed();
if (keypress.matches("delete"))
deletePressed();
if (keypress.matches("backspace"))
deletePressed();
});
};
(0, index_1.useKeyboard)(onKeypress, { isActive: hasFocus }, testing);
return (react_1.default.createElement(ink_1.Box, { flexDirection: "column" },
slicedItemsToDisplay.map(renderListItem),
DEBUG && react_1.default.createElement(DebugRow, null)));
function DebugRow() {
return (react_1.default.createElement(ink_1.Box, { flexDirection: "column" },
react_1.default.createElement(ink_1.Text, null,
"hasFocus: ",
hasFocus ? "true" : "false"),
react_1.default.createElement(ink_1.Text, null,
"isScrollActive: ",
isScrollActive ? "true" : "false"),
react_1.default.createElement(ink_1.Text, null,
"slicedItemsToDisplay: ",
slicedItemsToDisplay.length),
react_1.default.createElement(ink_1.Text, null,
"getRowsToDisplay: ",
getRowsToDisplay()),
react_1.default.createElement(ink_1.Text, null,
"rotateIndex: ",
rotateIndex),
react_1.default.createElement(ink_1.Text, null,
"highlightedIndex: ",
index_1.TextColor.builder.red.bold.build()(`${highlightedIndex}`)),
react_1.default.createElement(ink_1.Text, null,
"selected: ",
selectionModel.toString())));
}
function renderListItem(item, index) {
const { key, label } = item;
const isHighlighted = index === highlightedIndex;
const isSelected = selectionModel.isItemSelected(item);
return (react_1.default.createElement(ink_1.Box, { key: key },
react_1.default.createElement(indicatorComponent, { isHighlighted }),
react_1.default.createElement(checkboxComponent, { isSelected, singleSelectionMode }),
react_1.default.createElement(itemComponent, { label, isHighlighted })));
}
function sliceItemsIfScrollable() {
return isScrollable() ? (0, utils_1.arrRotate)(items, rotateIndex).slice(0, getRowsToDisplay()) : items;
}
function isMaxRowsDefined() {
return maxRows !== -1;
}
function isScrollable() {
return isMaxRowsDefined() && items.length > maxRows;
}
function getRowsToDisplay() {
return isMaxRowsDefined() ? items.length : maxRows;
}
function uparrowPressed() {
DEBUG && console.log(index_1.TextColor.builder.magenta.build()("uparrowPressed"));
const lastIndex = (isScrollable() ? getRowsToDisplay() : items.length) - 1;
const atFirstIndex = highlightedIndex === 0;
const nextIndex = (isScrollable() ? highlightedIndex : lastIndex);
const nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
const nextHighlightedIndex = atFirstIndex ? nextIndex : highlightedIndex - 1;
setRotateIndex(nextRotateIndex);
setHighlightedIndex(nextHighlightedIndex);
(0, index_1._callIfTrue)(DEBUG, () => {
console.log("| highlightedIndex:", highlightedIndex, "| lastIndex:", lastIndex, "| atFirstIndex:", atFirstIndex, "| nextIndex:", nextIndex, "| nextRotateIndex:", nextRotateIndex, "| nextHighlightedIndex:", nextHighlightedIndex);
});
const slicedItems = isScrollable() ?
(0, utils_1.arrRotate)(items, nextRotateIndex).slice(0, getRowsToDisplay()) :
items;
const highlightedItem = slicedItems[nextHighlightedIndex];
(0, index_1._callIfTruthy)(highlightedItem, onHighlight);
}
function downarrowPressed() {
DEBUG && console.log(index_1.TextColor.builder.magenta.build()("downarrowPressed"));
const lastIndex = (isScrollable() ? getRowsToDisplay() : items.length) - 1;
const atLastIndex = highlightedIndex === lastIndex;
const nextIndex = (isScrollable() ? highlightedIndex : 0);
const nextRotateIndex = atLastIndex ? rotateIndex - 1 : rotateIndex;
const nextHighlightedIndex = atLastIndex ? nextIndex : highlightedIndex + 1;
setRotateIndex(nextRotateIndex);
setHighlightedIndex(nextHighlightedIndex);
(0, index_1._callIfTrue)(DEBUG, () => {
console.log("| highlightedIndex:", highlightedIndex, "| lastIndex:", lastIndex, "| atLastIndex:", atLastIndex, "| nextIndex:", nextIndex, "| nextRotateIndex:", nextRotateIndex, "| nextHighlightedIndex:", nextHighlightedIndex);
});
const slicedItems = isScrollable() ?
(0, utils_1.arrRotate)(items, nextRotateIndex).slice(0, getRowsToDisplay()) :
items;
const highlightedItem = slicedItems[nextHighlightedIndex];
(0, index_1._callIfTruthy)(highlightedItem, onHighlight);
}
function spacePressed() {
DEBUG && console.log(index_1.TextColor.builder.magenta.build()("spacePressed"));
const debugFn = (msg) => (0, index_1._callIfTrue)(DEBUG, () => {
console.log(index_1.TextColor.builder.yellow.build()(msg));
console.log("| highlightedItem:", highlightedItem ? highlightedItem.value : "n/a", "| selections:", selectionModel.getSelection().map(item => item.value));
});
const highlightedItem = slicedItemsToDisplay[highlightedIndex];
debugFn("before");
(0, index_1._callIfTruthy)(highlightedItem, item => setSelectionModel(selectionModel.toggleSelectionFor(item, onSelect, onUnselect)));
debugFn("after");
}
function returnPressed() {
DEBUG && console.log(index_1.TextColor.builder.magenta.build()("enterPressed"));
onSubmit(selectionModel.getSelection());
}
function deletePressed() {
setSelectionModel(selectionModel.clearAllSelections());
}
};
exports.MultiSelectInput = MultiSelectInput;
//# sourceMappingURL=multi-select-input.js.map