ink task list

Lista de tarefas de tinta

Componentes da lista de tarefas para tinta

_{Apoie este projeto de iquudando e compartilhando -o. Siga -me para ver em que outros projetos legais estou trabalhando! ❤️}

Instalar

npm i ink-task-list

? Uso rápido

 import React from 'react' ;
import { render } from 'ink' ;
import { TaskList , Task } from 'ink-task-list' ;
import spinners from 'cli-spinners' ;

render (
    < TaskList >
        { /* Pending state */ }
        < Task
            label = "Pending"
            state = "pending"
        />

        { /* Loading state */ }
        < Task
            label = "Loading"
            state = "loading"
            spinner = { spinners . dots }
        />

        { /* Success state */ }
        < Task
            label = "Success"
            state = "success"
        />

        { /* Warning state */ }
        < Task
            label = "Warning"
            state = "warning"
        />

        { /* Error state */ }
        < Task
            label = "Error"
            state = "error"
        />

        { /* Item with children */ }
        < Task
            label = "Item with children"
            isExpanded
        >
            < Task
                label = "Loading"
                state = "loading"
                spinner = { spinners . dots }
            />
        </ Task >
    </ TaskList > ,
) ; 

? API

Lista de tarefas

Wrapper opcional para conter uma lista de Tasks .

Basicamente, apenas um <Box flexDirection="column"> ; apenas para propósitos de estilo e semântico.

crianças

Tipo: ReactNode | ReactNode[]

Obrigatório

Passar na lista de tarefas

Tarefa

Representa cada tarefa.

rótulo

Tipo: string

Obrigatório

estado

Tipo: 'pending'|'loading'|'success'|'warning'|'error'

Padrão: pending

status

Tipo: string

Status da tarefa para mostrar à direita do label

saída

Tipo: string

Saída de linha única prefixada por → para mostrar abaixo do label

Spinner

Tipo:

 type Spinner = {
    interval : number
    frames : string [ ]
}

Necessário se o estado estiver loading

Dados do girador usados para o estado de carregamento. Passe um girador da CLI-Spinners por conveniência.

isExpand

Tipo: boolean

Padrão: false

Se deve ou não mostrar as crianças.

crianças

Tipo: ReactNode | ReactNode[]

Passe em um ou mais componentes <Task>

Créditos

A interface do usuário do componente foi inspirada no listr e listr2 ❤️