esa-cli/dist/components/mutiSelectTable.js

A CLI for operating Alibaba Cloud ESA Functions and Pages.

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { Box, render, Text, useInput } from 'ink';
import React, { useState } from 'react';
import t from '../i18n/index.js';
export const MultiSelectTable = ({ items, itemsPerRow, onSubmit, boxWidth = 25 }) => {
    const [selectedIndexes, setSelectedIndexes] = useState(new Set());
    const [cursorRow, setCursorRow] = useState(0);
    const [cursorCol, setCursorCol] = useState(0);
    const rows = [];
    for (let i = 0; i < items.length; i += itemsPerRow) {
        rows.push(items.slice(i, i + itemsPerRow));
    }
    const totalRows = Math.ceil(items.length / itemsPerRow);
    const toggleSelect = (row, col) => {
        const key = `${row}:${col}`;
        setSelectedIndexes((prevSelectedIndexes) => {
            const newSelectedIndexes = new Set(prevSelectedIndexes);
            if (newSelectedIndexes.has(key)) {
                newSelectedIndexes.delete(key);
            }
            else {
                newSelectedIndexes.add(key);
            }
            return newSelectedIndexes;
        });
    };
    const handleSubmission = () => {
        const selectedItems = Array.from(selectedIndexes).map((key) => {
            const [row, col] = key.split(':').map(Number);
            return rows[row][col];
        });
        onSubmit(selectedItems);
    };
    useInput((input, key) => {
        if (key.leftArrow) {
            setCursorCol((prev) => Math.max(prev - 1, 0));
        }
        else if (key.rightArrow) {
            setCursorCol((prev) => Math.min(prev + 1, itemsPerRow - 1));
        }
        else if (key.upArrow) {
            setCursorRow((prev) => Math.max(prev - 1, 0));
        }
        else if (key.downArrow) {
            setCursorRow((prev) => Math.min(prev + 1, totalRows - 1));
        }
        else if (input === ' ') {
            toggleSelect(cursorRow, cursorCol);
        }
        else if (key.tab) {
            setCursorCol((prevCol) => {
                let newCol = prevCol + 1;
                let newRow = cursorRow;
                if (newCol >= itemsPerRow) {
                    newCol = 0;
                    newRow = cursorRow + 1;
                    if (newRow >= totalRows) {
                        newRow = 0;
                    }
                    setCursorRow(newRow);
                }
                return newCol;
            });
        }
        else if (key.return) {
            handleSubmission();
        }
    });
    return (React.createElement(Box, { flexDirection: "column" },
        rows.map((rowItems, row) => (React.createElement(Box, { key: row, flexDirection: "row" }, rowItems.map((item, col) => (React.createElement(Box, { key: `${row}:${col}`, width: boxWidth },
            React.createElement(Text, { color: cursorRow === row && cursorCol === col ? 'green' : undefined },
                selectedIndexes.has(`${row}:${col}`) ? '✅' : '  ',
                item.label))))))),
        React.createElement(Box, { flexDirection: "column" },
            React.createElement(Text, null,
                "\uD83D\uDD14",
                ' ',
                t('deploy_select_table_tip').d('Use arrow keys to move, space to select, and enter to submit.')))));
};
export const displayMultiSelectTable = (items_1, ...args_1) => __awaiter(void 0, [items_1, ...args_1], void 0, function* (items, itemsPerRow = 7, boxWidth = 25) {
    return new Promise((resolve) => {
        const { unmount } = render(React.createElement(MultiSelectTable, { items: items, itemsPerRow: itemsPerRow, onSubmit: (selectedItems) => {
                unmount();
                resolve(selectedItems.map((item) => item.label));
            }, boxWidth: boxWidth }));
    });
});