Skip to content

avocode/react-listview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React ListView

Create List components with keyboard support

Build Status

Usage

npm i react-listview-keys --save

Example

React ListView example

ListView = require 'react-listview'

ListView
  className: 'list-view'
  itemClassName: 'list-view__item'
  selectedItemClassName: 'list-view__item--selected'
  items: @state.listItems
  selectedItemId: @state.selectedListItemId
  collapsedItemIds: @state.collapsedListItemIds
  onCollapseItem: @_handleCollapseListItem
  onExpandItem: @_handleExpandListItem
  onSelectItem: @_handleSelectListItem
  renderItem: (itemId, parentItemIds = []) =>
    item = @_getItemById(itemId)
    if parentItemIds.length == 0
      if item.children?.size > 0
        SimpleListItem
          item: item
      else
        FoldableListItem
          item: item
    else
      SimpleListSubItem
        item: item

Props

  • className - CSS class of the whole ListView component

  • itemClassName - CSS class of non-selected ListItem

  • selectedItemClassName - CSS class of selected ListItem

  • items - immutable.List of items to render

  • selectedItemId - id of selected items

  • collapsedItemIds - immutable.List of ids of collapsed parent items

  • onCollapseItem - callback called when collapsing a parent item

  • onExpandItem - callback called when expanding a parent item

  • onSelectItem - callback called after click on an item

  • renderItem - function that renders the item (passed as callback so apps can handle the rendering of the main content itself)

Development

git clone [email protected]:avocode/react-listview.git
cd react-listview

npm install

Run tests:

npm test

TODOs

  • refactor logic - support deeper lists
  • add shouldcomponentupdates
  • improve tests
  • rethink tabIndices
  • add more examples
  • add prop for last item skipping

About

Create List components with keyboard support

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •