ink task list

чернил-лист

Компоненты списка задач для чернил

_{Поддержите этот проект ️ с участием и обменом. Следуйте за мной, чтобы посмотреть, над какими другими крутыми проектами я работаю! ❤}

Установить

npm i ink-task-list

? Быстрое использование

 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

Задача

Дополнительная обертка, чтобы содержать список Tasks .

В основном просто <Box flexDirection="column"> ; только для стиля и семантических целей.

дети

Тип: ReactNode | ReactNode[]

Необходимый

Пройти в список задач

Задача

Представляет каждую задачу.

этикетка

Тип: string

Необходимый

состояние

Тип: 'pending'|'loading'|'success'|'warning'|'error'

По умолчанию: pending

статус

Тип: string

Статус задачи, чтобы показать справа от label

выход

Тип: string

Однолинейный вывод префикс с помощью → показать ниже label

спиннер

Тип:

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

Требуется, если состояние loading

Спиннерные данные, используемые для состояния загрузки. Пропустите прядильщик от CLI-Spinners для удобства.

IseSped

Тип: boolean

По умолчанию: false

Чтобы показать детям.

дети

Тип: ReactNode | ReactNode[]

Пройти один или несколько компонентов <Task>

Кредиты

Пользовательский интерфейс компонента был вдохновлен Listr и Listr2 ❤