Skip to content

Latest commit

 

History

History
130 lines (101 loc) · 3.18 KB

TODO-LIST.md

File metadata and controls

130 lines (101 loc) · 3.18 KB
Raw

Todo List

./src/js/components/todo-list/todo-list.jsx

Purpose

If you want to display a todo-styled list for displaying todos.

Props

theme

  • Required - false
  • Data Type - STRING
  • Functionality - The Bootstrap style class name to apply to the container of the component.
  • Default - 'box-default'

headline

  • Required - false
  • Data Type - STRING || ELEMENT
  • Functionality - Text to place in the component's header area.
  • Default - ''

addText

  • Required - false
  • Data Type - STRING
  • Functionality - The text you want to display on your add button.
  • Default - ''

todos

  • Required - false

  • Data Type - ARRAY

  • Functionality - A list of todo data to display in the todo list

  • Expected Data -

      const todos = [
    {
      complete: false,  //  Marks item as completed
      check: 'fa-check',  //  Gives a styled icon to the completd item
      checkColor: 'text-green'  // Colors the completed icon
      value: 'done' //  Gives an optional value to the item's checkbox
      content: 'Adopt the dog', //  The "to do"
      theme: 'label-success', //  The theme of the due-time label
      due: '8:00 am'  //  The due date/time of the item.
    }
  ];

  • Default - []

canAdd

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Can the user add data to the todo list? It displays or hides an add button
  • Default - false

canEdit

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Can the user edit data from the todo list? It displays or hides an edit button on a list item
  • Default - false

canDelete

  • Required - false
  • Data Type - BOOLEAN
  • Functionality - Can the user delete data from the todo list? It displays or hides a deletion button on a list item
  • Default - false

onAdd

  • Required - false
  • Data Type - FUNCTION
  • Functionality - This function is activated when clicking the add button on the component. It can optionally receive event data.
  • Default - () => {}

onEdit

  • Required - false
  • Data Type - FUNCTION
  • Functionality - This function is activated when clicking an edit button on the component. It can optionally receive event data.
  • Default - () => {}

onDelete

  • Required - false
  • Data Type - FUNCTION
  • Functionality - This function is activated when clicking a delete button on the component. It can optionally receive event data.
  • Default - () => {}

onUpdate

  • Required - false
  • Data Type - FUNCTION
  • Functionality - This function is activated when checking off a todo item. It can optionally receive event data.
  • Default - () => {}

Example

import TodoList from './src/js/components/todo-list/todo-list.jsx';

<TodoList
  theme="box-primary"
  headline="My Todo List"
  addText="Add Text"
  todos={[
    {
      complete: false,
      content: 'Walk the dog',
      due: '3:45 pm'
    },
    {
      complete: false,
      content: 'Feed the dog',
      theme: 'label-danger',
      due: '12:30 pm'
    },
    {
      complete: true,
      content: 'Adopt the dog',
      checkColor: 'text-green',
      theme: 'label-success',
      due: '8:00 am'
    }
  ]}
/>