JSPM – react-virtual-drag-list@1.0.1

Package Exports

react-virtual-drag-list
react-virtual-drag-list/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-virtual-drag-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

可拖拽排序的虚拟滚动列表组件

Simple usage

npm i react-virtual-draglist -D

or

yarn add react-virtual-draglist -D

Root component:

import virtualList from 'react-virtual-draglist'

function Virtual() {

  const list = [{id: '1', text: 'asd'}, {id: '2', text: 'fgh'}, ...]


  const handleToTop = () => {
    console.log('istop')
  }
  const handleToBottom = () => {
    console.log('isbottom')
  }
  const handleDragEnd = (arr) => {
    console.log(arr, 'new arr after deag end')
  }

  return (
    <virtualList
      dataKey="id"
      dataSource={ list }
      header={ <div class="loading">top loading...</div> }
      footer={ <div class="loading">bottom loading...</div> }
      v-top={ handleToTop }
      v-bottom={ handleToBottom }
      v-dragend={ handleDragEnd }
    >
      {
        (record, index, dataKey) => {
          return (
            <div>
              <span>{ index }</span>
              { record.text }
            </div>
          )
        }
      }
    </virtualList>
  )
}

Props

Prop	Type	Required?	Description	Default
`dataKey`	String	✓	每一条数据的唯一标识`'a.b.c'`形式	-
`dataSource`	Array	✓	数据源	`[]`
`size`	Number	✓	每一行的预估高度	50
`keeps`	Number		虚拟滚动渲染的行数	30
`header`	JSX.Element		列表顶部	-
`footer`	JSX.Element		列表底部	-
`v-top`	Function		滚动到顶部时触发的回调函数	-
`v-bottom`	Function		滚动到底部时触发的回调函数	-
`v-dragend`	Function		拖拽完成时的事件	-