@jakubmazanec/cli 0.1.0-2d1145f → 0.1.0-5f6d70c
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.
|
@@ -25,5 +25,5 @@ type SelectInputProps = BoxProps & {
|
|
|
25
25
|
/**
|
|
26
26
|
* Select input component.
|
|
27
27
|
*/
|
|
28
|
-
export declare function SelectInput({ label, items, focus, initialIndex, limit: customLimit, onSelect, onHighlight,
|
|
28
|
+
export declare function SelectInput({ label, items, focus, initialIndex, limit: customLimit, onSelect, onHighlight, isComplete, ...boxProps }: SelectInputProps): JSX.Element;
|
|
29
29
|
export {};
|
|
@@ -7,7 +7,7 @@ import * as icons from '../icons.js';
|
|
|
7
7
|
import { rotate } from '../internals.js';
|
|
8
8
|
/**
|
|
9
9
|
* Select input component.
|
|
10
|
-
*/ export function SelectInput({ label, items = [], focus = true, initialIndex = 0, limit: customLimit, onSelect, onHighlight,
|
|
10
|
+
*/ export function SelectInput({ label, items = [], focus = true, initialIndex = 0, limit: customLimit, onSelect, onHighlight, isComplete, ...boxProps }) {
|
|
11
11
|
var _items_selectedIndex, _items_selectedIndex1;
|
|
12
12
|
let [rotateIndex, setRotateIndex] = useState(0);
|
|
13
13
|
let [selectedIndex, setSelectedIndex] = useState(initialIndex);
|
|
@@ -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, useCallback} 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 * Select input 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 Listen to user's input? Useful in case there are multiple input components at the same time and input must be \"routed\" to 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: customLimit,\n onSelect,\n onHighlight,\n
|
|
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, useCallback} 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 * Select input 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 Listen to user's input? Useful in case there are multiple input components at the same time and input must be \"routed\" to 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: customLimit,\n onSelect,\n onHighlight,\n isComplete,\n ...boxProps\n}: SelectInputProps): JSX.Element {\n let [rotateIndex, setRotateIndex] = useState(0);\n let [selectedIndex, setSelectedIndex] = useState(initialIndex);\n let hasLimit = typeof customLimit === 'number' && items.length > customLimit;\n let limit = hasLimit ? Math.min(customLimit 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 setRotateIndex(0);\n setSelectedIndex(0);\n }\n\n previousItems.current = items;\n }, [items]);\n\n let inputHandler = useCallback(\n (input: string, key: Key) => {\n if (input === 'k' || key.upArrow) {\n let lastIndex = (hasLimit ? limit : items.length) - 1;\n let atFirstIndex = selectedIndex === 0;\n let nextIndex = hasLimit ? selectedIndex : lastIndex;\n let nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;\n let nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;\n\n setRotateIndex(nextRotateIndex);\n setSelectedIndex(nextSelectedIndex);\n\n let slicedItems = hasLimit ? rotate(items, nextRotateIndex).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 nextRotateIndex = isAtLastIndex ? rotateIndex - 1 : rotateIndex;\n let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;\n\n setRotateIndex(nextRotateIndex);\n setSelectedIndex(nextSelectedIndex);\n\n let slicedItems = hasLimit ? rotate(items, nextRotateIndex).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, rotateIndex).slice(0, limit) : items;\n\n if (typeof onSelect === 'function') {\n onSelect(slicedItems[selectedIndex] as SelectInputItem);\n }\n }\n },\n [hasLimit, limit, rotateIndex, selectedIndex, items, onSelect, onHighlight],\n );\n\n useInput(inputHandler, {isActive: focus});\n\n let visibleItem: SelectInputItem[] = hasLimit\n ? rotate(items, rotateIndex).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 {visibleItem.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","useCallback","colors","icons","rotate","SelectInput","label","items","focus","initialIndex","limit","customLimit","onSelect","onHighlight","isComplete","boxProps","rotateIndex","setRotateIndex","selectedIndex","setSelectedIndex","hasLimit","length","Math","min","previousItems","isEqual","current","map","item","value","inputHandler","input","key","upArrow","lastIndex","atFirstIndex","nextIndex","nextRotateIndex","nextSelectedIndex","slicedItems","slice","downArrow","isAtLastIndex","return","isActive","visibleItem","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.0-
|
|
3
|
+
"version": "0.1.0-5f6d70c",
|
|
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": "1.0.1-
|
|
31
|
-
"@jakubmazanec/error": "2.0.1-
|
|
32
|
-
"@jakubmazanec/ts-utils": "2.1.0-
|
|
33
|
-
"@jakubmazanec/zod-utils": "1.0.0-
|
|
30
|
+
"@jakubmazanec/args": "1.0.1-5f6d70c",
|
|
31
|
+
"@jakubmazanec/error": "2.0.1-5f6d70c",
|
|
32
|
+
"@jakubmazanec/ts-utils": "2.1.0-5f6d70c",
|
|
33
|
+
"@jakubmazanec/zod-utils": "1.0.0-5f6d70c",
|
|
34
34
|
"chalk": "^5.2.0",
|
|
35
35
|
"lodash": "^4.17.21",
|
|
36
36
|
"react-error-boundary": "^4.0.7",
|