JSPM – react-virtual-drag-list@2.1.0

Package Exports

react-virtual-drag-list
react-virtual-drag-list/dist/draglist.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

A virtual scrolling list component that can be sorted by dragging

Simple usage

npm i react-virtual-drag-list -D

or

yarn add react-virtual-drag-list -D

Root component:

import virtualList from 'react-virtual-drag-list'

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 drag end')
  }

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

Props

Prop	Type	Required?	Description	Default
`dataKey`	String	✓	the unique identifier of each piece of data, in the form of `'a.b.c'`	-
`dataSource`	Array	✓	data list	`[]`
`size`	Number	✓	estimated height of each row	50
`keeps`	Number		the number of lines rendered by the virtual scroll	30
`delay`	Number		Delay time of debounce function	10
`draggable`	Boolean		whether to support drag and drop. You need to specify a draggable element and set the `draggable` attribute for it	`true`
`draggableOnly`	Boolean		Whether to drag and drop only elements with the draggable attribute set. When true, selecting the parent element will not produce a dragging effect
`dragElement`	Function		The function that selects the dragged element, must have a return value with a dom node, has two parameters: e(the currently selected element), parent(the parent node of the list)	-
`header`	JSX.Element		top of list	-
`footer`	JSX.Element		bottom of list	-
`v-top`	Function		callback function that fires when scrolling to the top	-
`v-bottom`	Function		callback function that fires when scrolling to the bottom	-
`v-dragend`	Function		event when drag is complete	-
`dragStyle`	Object		mask style while dragging	-
`itemStyle`	Object		style for each line	-
`itemClass`	String		class for each line	-

Methods

Use the methods exposed in the component by setting ref, like this:

...

const virtualRef = useRef()

const scrollToBottom = () => {
  virtualRef.current.scrollToBottom()
}

return (
  <button onClick={ scrollToBottom }></button>
  <virtualList
    ref={ virtualRef }
    ...
  >
    {
      (record) => <div>{ record.text }</div>
    }
  </virtualList>
)

Prop	Description
`reset()`	reset to initial
`getSize(key)`	get the height of the specified item by key value
`getScrollTop()`	get the current scroll height
`scrollToBottom()`	scroll to the bottom of the list
`scrollToTop()`	scroll to the top of the list
`scrollToOffset(offset)`	scroll to the specified height
`scrollToIndex(index)`	scroll to the specified index value