esa-cli
Version:
A CLI for operating Alibaba Cloud ESA Functions and Pages.
133 lines (132 loc) • 6.42 kB
JavaScript
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 TextInput from 'ink-text-input';
import React, { useState, useEffect } from 'react';
import t from '../i18n/index.js';
export const FilterSelector = ({ data, onSubmit, hideCount = 20 }) => {
const [inputValue, setInputValue] = useState('');
const [filteredData, setFilteredData] = useState(data);
const [isShowFilteredData, setIsShowFilteredData] = useState(false);
const [isSelectionMode, setIsSelectionMode] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(-1);
const [tabPressCount, setTabPressCount] = useState(0);
const [showAll, setShowAll] = useState(false);
useEffect(() => {
if (showAll && !isSelectionMode) {
setFilteredData(data.filter((site) => site.label.includes(inputValue)));
}
}, [inputValue, data]);
const handleSubmit = () => {
onSubmit(inputValue);
};
useInput((input, key) => {
if (key.return && isSelectionMode && filteredData[selectedIndex]) {
setInputValue(filteredData[selectedIndex].label);
setIsSelectionMode(false);
setIsShowFilteredData(false);
setSelectedIndex(-1);
setTabPressCount(0);
}
else if (key.tab) {
if (tabPressCount === 0) {
const filteredDataInner = data.filter((site) => site.label.includes(inputValue));
setFilteredData(filteredDataInner);
if (filteredData.length === 1) {
setIsShowFilteredData(false);
setInputValue(filteredDataInner[0].label);
setSelectedIndex(0);
}
else {
setIsShowFilteredData(true);
}
}
else if (tabPressCount === 1) {
const filteredDataInner = data.filter((site) => site.label.includes(inputValue));
setFilteredData(filteredDataInner);
// Enter selection mode when match results >= 1
if ((filteredDataInner.length >= 1 &&
showAll &&
filteredDataInner.length > hideCount) ||
(filteredDataInner.length >= 1 &&
filteredDataInner.length <= hideCount)) {
setIsSelectionMode(true);
setSelectedIndex(0);
setInputValue(filteredDataInner[0].label);
}
}
else if (tabPressCount >= 2 &&
isSelectionMode &&
(showAll || filteredData.length <= hideCount) &&
filteredData.length > 1) {
setSelectedIndex((prevIndex) => (prevIndex + 1) % filteredData.length);
setInputValue(filteredData[(selectedIndex + 1) % filteredData.length].label);
}
setTabPressCount((prevCount) => prevCount + 1);
}
else if (key.downArrow && isSelectionMode) {
setSelectedIndex((prevIndex) => (prevIndex + 1) % filteredData.length);
setInputValue(filteredData[(selectedIndex + 1) % filteredData.length].label);
}
else if (key.upArrow && isSelectionMode) {
setSelectedIndex((prevIndex) => (prevIndex - 1 + filteredData.length) % filteredData.length);
setInputValue(filteredData[(selectedIndex - 1 + filteredData.length) % filteredData.length].label);
}
else if (key.leftArrow || key.rightArrow) {
}
else if (key.return) {
handleSubmit();
setTabPressCount(0);
}
else if (input === 'y' &&
!showAll &&
isShowFilteredData &&
(filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > hideCount) {
setShowAll(true);
setIsSelectionMode(true);
}
else {
setIsSelectionMode(false);
setIsShowFilteredData(false);
setSelectedIndex(-1);
setTabPressCount(0);
setShowAll(false);
}
});
const renderFilterData = () => {
return ((showAll || filteredData.length <= hideCount) &&
filteredData.length > 1 && (React.createElement(React.Fragment, null,
React.createElement(Text, null, `👉 ${t('route_add_tab_tip').d('Press Tab to select')}`),
filteredData.map((item, index) => (React.createElement(Text, { key: index, inverse: index === selectedIndex }, item.label))))));
};
return (React.createElement(Box, { flexDirection: "column" },
React.createElement(TextInput, { value: inputValue, highlightPastedText: true, onChange: (value) => {
if (!showAll &&
value[value.length - 1] === 'y' &&
tabPressCount === 1) {
return;
}
setInputValue(value);
} }),
isShowFilteredData && (React.createElement(React.Fragment, null,
filteredData.length > hideCount && !showAll && (React.createElement(Text, null, t('route_add_see_more').d(`Do you wish to see all ${filteredData.length} possibilities? (y/n)`))),
renderFilterData()))));
};
export const promptFilterSelector = (siteList) => __awaiter(void 0, void 0, void 0, function* () {
return new Promise((resolve) => {
const { unmount } = render(React.createElement(FilterSelector, { onSubmit: (input) => {
unmount();
resolve(siteList.find((site) => site.label === input) || {
label: '',
value: ''
});
}, data: siteList }));
});
});