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 للراحة.

Isexpanded

النوع: boolean

الافتراضي: false

سواء أكان لإظهار الأطفال أم لا.

أطفال

النوع: ReactNode | ReactNode[]

تمرير في مكونات واحدة أو <Task>

الاعتمادات

تم إلهام واجهة المستخدم للمكون Lister و Listr2 ❤