@ied/task

Task

Install

yarn add '@ied/task'

Use

import Task from '@ied/task'

Add this to your index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Group task

Use

<Task
  type="group"
  label="Group task todo"
  tags={tags}
  locale="fr"
  completed={completed}
  actions={actions}
>
  Use an other component here !
</Task>

Types

type Props = {
  label: string,
  tags?: Array<{ label: string, action: Event => void }>,
  actions?: Array<{ label: string, action: Event => void }>,
  completed: { total: number, completed: number },
  className?: string,
  style?: {},
  children?: React$Node,
  locale?: 'en' | 'fr' | 'da' | 'de',
}

Todo task

Use

<Task
  type="todo"
  label="Todo task (due)"
  tags={tags}
  actions={actions}
  onChangeState={console.log}
  state="due"
  assignees={assignees}
  date={new Date()}
  locale="fr"
  description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae hic nulla tempora, modi assumenda, exercitationem laudantium autem atque vitae repellat totam iusto facere porro repudiandae. Voluptate accusamus, autem dolor ipsum."
/>

Types

type Props = {
  label: string,
  tags?: Array<{ label: string, action: Event => void }>,
  actions?: Array<{ label: string, action: Event => void }>,
  assignees: {
    firstName: string,
    lastName: string,
    email?: string,
    action?: Event => void,
  }[],
  description?: string,
  confidential?: boolean,
  className?: string,
  state: string,
  isLate?: boolean,
  comments?: number,
  date?: Date | string,
  locale?: 'en' | 'fr' | 'da' | 'de',
  onChangeState: (value: string) => void,
  customStateList?: any[],
  style?: {},
}

Other task

Use

<Task
  type="default"
  icon={{ name: 'date_range', color: '#012169' }}
  label="Todo task (locked) (comments)"
  tags={tags}
  actions={actions}
  date={new Date()}
  locale="fr"
  comments={3}
  confidential
  isLate
  description="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae hic nulla tempora, modi assumenda, exercitationem laudantium autem atque vitae repellat totam iusto facere porro repudiandae. Voluptate accusamus, autem dolor ipsum."
/>

Types

type Props = {
  label: string,
  tags?: Array<{ label: string, action: Event => void }>,
  actions?: Array<{ label: string, action: Event => void }>,
  icon: { name: string, color?: string },
  assignees?: {
    firstName: string,
    lastName: string,
    email?: string,
    action?: Event => void,
  }[],
  description?: string,
  confidential?: boolean,
  className?: string,
  isLate?: boolean,
  comments?: number,
  date?: Date | string,
  locale?: 'en' | 'fr' | 'da' | 'de',
  style?: {},
  children?: React$Node,
}

All types

type Props = {
  type: string,
  label: string,
  tags?: { label: string, action: Event => void }[],
  icon?: { name: string, color?: string },
  assignees?: {
    firstName: string,
    lastName: string,
    email?: string,
    action?: Event => void,
  }[],
  comments?: number,
  completed?: {
    total: number,
    completed: number,
  },
  description?: string,
  actions?: { label: string, action: Event => void }[],
  style?: {},
  onChangeState?: (value: string) => void,
  state?: string,
  customStateList?: any[],
  date?: Date | string,
  confidential?: boolean,
  locale?: 'en' | 'fr' | 'da' | 'de',
  className?: string,
  isLate?: boolean,
  children?: React$Node,
}