packages/create-astro/src/components/Select.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import SelectInput from 'ink-select-input';
import React, { FC } from 'react';
import { Text, Box } from 'ink';
// @ts-expect-error
const { default: Select } = SelectInput;

interface Props {
  isSelected?: boolean;
  label: string;
  description?: string;
}
const Indicator: FC<Props> = ({ isSelected }) => (isSelected ? <Text color="#3894FF">[ </Text> : <Text>{'  '}</Text>);
const Item: FC<Props> = ({ isSelected = false, label, description }) => (
  <Box display="flex">
    <Text color={isSelected ? '#3894FF' : 'white'} dimColor={!isSelected}>
      {label}
    </Text>
    {isSelected && description && typeof description === 'string' && <Text> {description}</Text>}
    {isSelected && description && typeof description !== 'string' && <Box marginLeft={1}>{description}</Box>}
  </Box>
);

interface SelectProps {
  items: { value: string | number | boolean; label: string; description?: any }[];
  onSelect(value: string | number | boolean): void;
}
const CustomSelect: FC<SelectProps> = ({ items, onSelect }) => {
  const handleSelect = ({ value }) => onSelect(value);
  return <Select indicatorComponent={Indicator} itemComponent={Item} items={items} onSelect={handleSelect} />;
};

export default CustomSelect;