@jakubmazanec/cli 0.1.1-next.990a7af → 0.1.2-2487994
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,7 +8,6 @@ import { rotate } from '../internals.js';
|
|
|
8
8
|
/**
|
|
9
9
|
* Select input component.
|
|
10
10
|
*/ export function SelectInput({ label, items = [], focus = true, initialIndex = 0, limit: userDefinedLimit, onSelect, onHighlight, isComplete, ...boxProps }) {
|
|
11
|
-
var _items_selectedIndex, _items_selectedIndex1;
|
|
12
11
|
let [rotatedIndex, setRotatedIndex] = useState(0);
|
|
13
12
|
let [selectedIndex, setSelectedIndex] = useState(initialIndex);
|
|
14
13
|
let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;
|
|
@@ -80,7 +79,7 @@ import { rotate } from '../internals.js';
|
|
|
80
79
|
}),
|
|
81
80
|
isComplete ? /*#__PURE__*/ _jsx(Text, {
|
|
82
81
|
color: colors.body,
|
|
83
|
-
children:
|
|
82
|
+
children: items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)
|
|
84
83
|
}) : /*#__PURE__*/ _jsx(Box, {
|
|
85
84
|
flexDirection: "column",
|
|
86
85
|
children: visibleItems.map((item, index)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ui/form/SelectInput.tsx"],"sourcesContent":["import {Box, type BoxProps, Text, useInput, type Key} from 'ink';\nimport _ from 'lodash';\nimport {useState, useEffect, useRef} from 'react';\n\nimport {type SelectInputItem} from './SelectInputItem.js';\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\nimport {rotate} from '../internals.js';\n\n/**\n * {@linkcode SelectInput} component props.\n */\ntype SelectInputProps = BoxProps & {\n /** Text to display as a label. */\n label: string;\n\n /** Items to display in a list. */\n items: SelectInputItem[];\n\n /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n focus?: boolean | undefined;\n\n /** Index of initially selected item. */\n initialIndex?: number | undefined;\n\n /** Number of items to display. */\n limit?: number | undefined;\n\n /** Handler function that is called when item is selected. */\n onSelect?: ((item: SelectInputItem) => void) | undefined;\n\n /** Handler function that is called when item is highlighted. */\n onHighlight?: ((item: SelectInputItem) => void) | undefined;\n\n /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n isComplete?: boolean | undefined;\n};\n\n/**\n * Select input component.\n */\nexport function SelectInput({\n label,\n items = [],\n focus = true,\n initialIndex = 0,\n limit: userDefinedLimit,\n onSelect,\n onHighlight,\n isComplete,\n ...boxProps\n}: SelectInputProps): JSX.Element {\n let [rotatedIndex, setRotatedIndex] = useState(0);\n let [selectedIndex, setSelectedIndex] = useState(initialIndex);\n let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;\n let limit = hasLimit ? Math.min(userDefinedLimit as number, items.length) : items.length;\n let previousItems = useRef<SelectInputItem[]>(items);\n\n useEffect(() => {\n if (\n !_.isEqual(\n previousItems.current.map((item) => item.value),\n items.map((item) => item.value),\n )\n ) {\n setRotatedIndex(0);\n setSelectedIndex(0);\n }\n\n previousItems.current = items;\n }, [items]);\n\n useInput(\n (input: string, key: Key) => {\n if (input === 'k' || key.upArrow) {\n let lastIndex = (hasLimit ? limit : items.length) - 1;\n let isAtFirstIndex = selectedIndex === 0;\n let nextIndex = hasLimit ? selectedIndex : lastIndex;\n let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;\n let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;\n\n setRotatedIndex(nextRotatedIndex);\n setSelectedIndex(nextSelectedIndex);\n\n let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n if (typeof onHighlight === 'function') {\n onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n }\n }\n\n if (input === 'j' || key.downArrow) {\n let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;\n let nextIndex = hasLimit ? selectedIndex : 0;\n let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;\n let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;\n\n setRotatedIndex(nextRotatedIndex);\n setSelectedIndex(nextSelectedIndex);\n\n let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n if (typeof onHighlight === 'function') {\n onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n }\n }\n\n if (key.return) {\n let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;\n\n if (typeof onSelect === 'function') {\n onSelect(slicedItems[selectedIndex] as SelectInputItem);\n }\n }\n },\n {isActive: focus},\n );\n\n let visibleItems: SelectInputItem[] = hasLimit\n ? rotate(items, rotatedIndex).slice(0, limit)\n : items;\n\n return (\n <Box {...boxProps}>\n <Box marginRight={1}>\n <Text>{isComplete ? icons.success : icons.question}</Text>\n </Box>\n\n <Box flexDirection=\"column\">\n <Box marginRight={1}>\n <Text color={colors.highlighted}>{label}</Text>\n </Box>\n {isComplete ? (\n <Text color={colors.body}>\n {items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)}\n </Text>\n ) : (\n <Box flexDirection=\"column\">\n {visibleItems.map((item, index) => {\n let isSelected = index === selectedIndex;\n\n return (\n <Box key={item.value}>\n <Box marginRight={1}>\n {isSelected ? (\n <Text color={colors.selected}>{icons.selectedCircle}</Text>\n ) : (\n <Text color={colors.unselected}>{icons.unselectedCircle}</Text>\n )}\n </Box>\n <Text color={isSelected ? colors.highlighted : colors.muted}>{item.label}</Text>\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n </Box>\n );\n}\n"],"names":["Box","Text","useInput","_","useState","useEffect","useRef","colors","icons","rotate","SelectInput","label","items","focus","initialIndex","limit","userDefinedLimit","onSelect","onHighlight","isComplete","boxProps","rotatedIndex","setRotatedIndex","selectedIndex","setSelectedIndex","hasLimit","length","Math","min","previousItems","isEqual","current","map","item","value","input","key","upArrow","lastIndex","isAtFirstIndex","nextIndex","nextRotatedIndex","nextSelectedIndex","slicedItems","slice","downArrow","isAtLastIndex","return","isActive","visibleItems","marginRight","success","question","flexDirection","color","highlighted","body","String","index","isSelected","selected","selectedCircle","unselected","unselectedCircle","muted"],"mappings":";AAAA,SAAQA,GAAG,EAAiBC,IAAI,EAAEC,QAAQ,QAAiB,MAAM;AACjE,OAAOC,OAAO,SAAS;AACvB,SAAQC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAO,QAAQ;AAGlD,YAAYC,YAAY,eAAe;AACvC,YAAYC,WAAW,cAAc;AACrC,SAAQC,MAAM,QAAO,kBAAkB;AA+BvC;;CAEC,GACD,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,QAAQ,EAAE,EACVC,QAAQ,IAAI,EACZC,eAAe,CAAC,EAChBC,OAAOC,gBAAgB,EACvBC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACV,GAAGC,UACc;
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/form/SelectInput.tsx"],"sourcesContent":["import {Box, type BoxProps, Text, useInput, type Key} from 'ink';\nimport _ from 'lodash';\nimport {useState, useEffect, useRef} from 'react';\n\nimport {type SelectInputItem} from './SelectInputItem.js';\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\nimport {rotate} from '../internals.js';\n\n/**\n * {@linkcode SelectInput} component props.\n */\ntype SelectInputProps = BoxProps & {\n /** Text to display as a label. */\n label: string;\n\n /** Items to display in a list. */\n items: SelectInputItem[];\n\n /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n focus?: boolean | undefined;\n\n /** Index of initially selected item. */\n initialIndex?: number | undefined;\n\n /** Number of items to display. */\n limit?: number | undefined;\n\n /** Handler function that is called when item is selected. */\n onSelect?: ((item: SelectInputItem) => void) | undefined;\n\n /** Handler function that is called when item is highlighted. */\n onHighlight?: ((item: SelectInputItem) => void) | undefined;\n\n /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n isComplete?: boolean | undefined;\n};\n\n/**\n * Select input component.\n */\nexport function SelectInput({\n label,\n items = [],\n focus = true,\n initialIndex = 0,\n limit: userDefinedLimit,\n onSelect,\n onHighlight,\n isComplete,\n ...boxProps\n}: SelectInputProps): JSX.Element {\n let [rotatedIndex, setRotatedIndex] = useState(0);\n let [selectedIndex, setSelectedIndex] = useState(initialIndex);\n let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;\n let limit = hasLimit ? Math.min(userDefinedLimit as number, items.length) : items.length;\n let previousItems = useRef<SelectInputItem[]>(items);\n\n useEffect(() => {\n if (\n !_.isEqual(\n previousItems.current.map((item) => item.value),\n items.map((item) => item.value),\n )\n ) {\n setRotatedIndex(0);\n setSelectedIndex(0);\n }\n\n previousItems.current = items;\n }, [items]);\n\n useInput(\n (input: string, key: Key) => {\n if (input === 'k' || key.upArrow) {\n let lastIndex = (hasLimit ? limit : items.length) - 1;\n let isAtFirstIndex = selectedIndex === 0;\n let nextIndex = hasLimit ? selectedIndex : lastIndex;\n let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;\n let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;\n\n setRotatedIndex(nextRotatedIndex);\n setSelectedIndex(nextSelectedIndex);\n\n let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n if (typeof onHighlight === 'function') {\n onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n }\n }\n\n if (input === 'j' || key.downArrow) {\n let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;\n let nextIndex = hasLimit ? selectedIndex : 0;\n let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;\n let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;\n\n setRotatedIndex(nextRotatedIndex);\n setSelectedIndex(nextSelectedIndex);\n\n let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n if (typeof onHighlight === 'function') {\n onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n }\n }\n\n if (key.return) {\n let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;\n\n if (typeof onSelect === 'function') {\n onSelect(slicedItems[selectedIndex] as SelectInputItem);\n }\n }\n },\n {isActive: focus},\n );\n\n let visibleItems: SelectInputItem[] = hasLimit\n ? rotate(items, rotatedIndex).slice(0, limit)\n : items;\n\n return (\n <Box {...boxProps}>\n <Box marginRight={1}>\n <Text>{isComplete ? icons.success : icons.question}</Text>\n </Box>\n\n <Box flexDirection=\"column\">\n <Box marginRight={1}>\n <Text color={colors.highlighted}>{label}</Text>\n </Box>\n {isComplete ? (\n <Text color={colors.body}>\n {items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)}\n </Text>\n ) : (\n <Box flexDirection=\"column\">\n {visibleItems.map((item, index) => {\n let isSelected = index === selectedIndex;\n\n return (\n <Box key={item.value}>\n <Box marginRight={1}>\n {isSelected ? (\n <Text color={colors.selected}>{icons.selectedCircle}</Text>\n ) : (\n <Text color={colors.unselected}>{icons.unselectedCircle}</Text>\n )}\n </Box>\n <Text color={isSelected ? colors.highlighted : colors.muted}>{item.label}</Text>\n </Box>\n );\n })}\n </Box>\n )}\n </Box>\n </Box>\n );\n}\n"],"names":["Box","Text","useInput","_","useState","useEffect","useRef","colors","icons","rotate","SelectInput","label","items","focus","initialIndex","limit","userDefinedLimit","onSelect","onHighlight","isComplete","boxProps","rotatedIndex","setRotatedIndex","selectedIndex","setSelectedIndex","hasLimit","length","Math","min","previousItems","isEqual","current","map","item","value","input","key","upArrow","lastIndex","isAtFirstIndex","nextIndex","nextRotatedIndex","nextSelectedIndex","slicedItems","slice","downArrow","isAtLastIndex","return","isActive","visibleItems","marginRight","success","question","flexDirection","color","highlighted","body","String","index","isSelected","selected","selectedCircle","unselected","unselectedCircle","muted"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jakubmazanec/cli",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2-2487994",
|
|
4
4
|
"description": "TypeScript-first library for building CLIs.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"typecheck": "tsc --project tsconfig.typecheck.json"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@jakubmazanec/args": "
|
|
31
|
-
"@jakubmazanec/error": "2.0.
|
|
32
|
-
"@jakubmazanec/ts-utils": "2.1.
|
|
33
|
-
"@jakubmazanec/zod-utils": "1.0.
|
|
30
|
+
"@jakubmazanec/args": "1.0.2-2487994",
|
|
31
|
+
"@jakubmazanec/error": "2.0.3-2487994",
|
|
32
|
+
"@jakubmazanec/ts-utils": "2.1.2-2487994",
|
|
33
|
+
"@jakubmazanec/zod-utils": "1.0.2-2487994",
|
|
34
34
|
"chalk": "^5.2.0",
|
|
35
35
|
"lodash": "^4.17.21",
|
|
36
36
|
"react-error-boundary": "^4.0.7",
|