listview-web

rmc-list-view

Screenshots

Development

npm install
npm start

Example

http://localhost:8999/examples/

online example: http://react-component.github.io/m-list-view/

install

Usage

see examples

API

same as React Native ListView (v0.26).

current not support:

In general, do not support platform-specific feature, like: android endFillColor, ios alwaysBounceHorizontal. And, use css style instead of react-native's style.

• onChangeVisibleRows
• stickyHeaderIndices
• ScrollView props:
  • keyboardDismissMode (not support control keyboard)
  • keyboardShouldPersistTaps (not support control keyboard)
  • onContentSizeChange (use onLayout instead)
  • removeClippedSubviews
  • showsHorizontalScrollIndicator (use css style instead)
  • showsVerticalScrollIndicator (use css style instead)
• View props

new

• useBodyScroll (boolean, false) - use html body's scroll
• stickyHeader (note: if set it, ScrollComponent will be render into the head of body element, auto enable useBodyScroll)
  • stickyProps / stickyContainerProps (see react-sticky)
• renderBodyComponent - render listview body wrapper component
• renderSectionBodyWrapper - render listview section body wrapper component
• useZscroller (boolean, false) - use zscroller to well support RefreshControl and pull up refresh.(useBodyScroll and sticky not work when enable useZscroller)
• scrollerOptions - zscroller options

Note: if you set renderScrollComponent, you need to write your own scroll logic like ScrollView component(see /examples/MyScroller.js).

ListView.IndexedList

• quickSearchBarTop (object{value:string, label:string}, default '#') - top button
• quickSearchBarStyle (object) - quickSearchBar's style
• onQuickSearch (function())
• showQuickSearchIndicator (boolean, false) - show quick search indicator
• delayTime (number) - default 100ms, delay render time (delay render these items of totalRowCount - initialListSize)
• delayActivityIndicator (react node) - delay render activity indicator

Note: should not enable useZscroller on IndexedList.

ListView.RefreshControl

• icon (any) - refresh indicator, include pull and release state
• loading (any) - loading indicator
• distanceToRefresh (number, default 50) - distance to refresh
• onRefresh (function, required) - onRefresh callback
• refreshing (boolean, false) - whether to show refreshing state

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-list-view is released under the MIT license.

changelog 0.7.9

padded equi-distant grids.

changelog 0.8.0

adds pageY and pageX offsets replacing scrollTop and scrollLeft as fallbacks for setting offset in bodyscroll