ink task list

Tintenaufgabenliste

Aufgabenlistenkomponenten für Tinte

_{Unterstützen Sie dieses Projekt von ️ Darstellung und Teilen. Folgen Sie mir, um zu sehen, an welchen anderen coolen Projekten ich arbeite! ❤️}

Installieren

npm i ink-task-list

? Schnelle Verwendung

 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

Taskliste

Optionale Wrapper, um eine Liste von Tasks zu enthalten.

Grundsätzlich nur eine <Box flexDirection="column"> ; Nur für Styling und semantische Zwecke.

Kinder

Typ: ReactNode | ReactNode[]

Erforderlich

Aufgabenliste übergeben

Aufgabe

Repräsentiert jede Aufgabe.

Etikett

Typ: string

Erforderlich

Zustand

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

Standard: pending

Status

Typ: string

Status der Aufgabe, die rechts vom label angezeigt wird

Ausgabe

Typ: string

Einleitungsausgangsvorsorge durch → unter dem label angezeigt

Spinner

Typ:

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

Erforderlich, wenn der Zustand loading wird

Spinnerdaten, die zum Ladezustand verwendet werden. Geben Sie einen Spinner aus CLI-Spinnern aus, um sich zu bequem.

iSexpanded

Typ: boolean

Standard: false

Ob die Kinder zeigen oder nicht.

Kinder

Typ: ReactNode | ReactNode[]

Geben Sie eine oder mehrere <Task> -Komponenten ein

Credits

Die Komponenten -UI wurde inspiriert LISTR und LISTR2 ❤️