ray-hoc-sortable

ray-hoc-sortable (HOC)

install

npm install ray-hoc-sortable --save

Usage

// Using an ES6 transpiler like Babel
import { withSortableView, withSortableItem, withSortableBar, exchangeData } from 'ray-hoc-sortable';

// Not using an ES6 transpiler
const Sortable = require('ray-hoc-sortable');
const withSortableView = Sortable.withSortableView;
const withSortableItem = Sortable.withSortableItem;
const withSortableBar = Sortable.withSortableBar;
const exchangeData = Sortable.exchangeData;

Basic Example

import React, { Component } from 'react';
import { render } from 'react-dom';
import { withSortableView, withSortableItem, exchangeData } from 'ray-hoc-sortable';

const SortableItem = withSortableItem(({value}) =>
  <li>{value}</li>
);

const SortableList = withSortableView(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  };

  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState({
      items: exchangeData(this.state.items, oldIndex, newIndex),
    });
  };

  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

render(<SortableComponent/>, document.getElementById('root'));

Prop Types

withSortableView HOC

Property	Type	Default	Description
axis	String	y	在网格中的排序方式，可以是 x, y or xy
lockAxis	String	-	锁定排序移动的轴，可选值为 x、y. 这是 HTML5 Drag & Drop 不具备的功能。
helperClass	String	-	自定义样式名
transitionDuration	Number	300	元素移动位置时持续时间。设置为 0 则禁用缓动时间
pressDelay	Number	0	按下一定时间后执行排序，移动设备设置 200 最佳，不能与“distance”属性一起使用。
pressThreshold	Number	5	忽略移动的像素值，默认为 5px .
distance	Number	0	移动一定距离之后进行排序，不能与 pressDelay 一同使用.
shouldCancelStart	Function	Function	执行排序之前调用，常用作取消排序，例如，默认情况下当事件目标是 input, textarea, select or option 时，将取消排序.
onSortStart	Function		开始排序时的回调函数. function({node, index, collection}, event)
onSortMove	Function	-	移动过程中的回调. function(event)
onSortEnd	Function		排序结束时回调. function({oldIndex, newIndex, collection}, e)
useDragHandle	Boolean	false	使用 headerBar 进行拖拽。当使用 withSortableBar 时，需要设置为 true
useWindowAsScrollContainer	Boolean	false	将 window 设置为滚动容器
hideSortableGhost	Boolean	true	是否隐藏重影元素，默认情况自动隐藏当前正在排序的元素，使用自定义样式时，设置为 false
lockToContainerEdges	Boolean	false	将排序区域锁定为父元素，父元需要使用 withSortableView 进行包裹
lockOffset	OffsetValue or [OffsetValue, OffsetValue]	"50%"	当 lockToContainerEdges 为 true 时，可以设置与父元素上下编边距，百分比值相对于当前正在排序项的高度，如果顶部与底部不同，则传入数组 ["0%", "100%"] 实现。
getContainer	Function	-	指定自定义容器对象，需要返回滚动容器元素（DOM Element），默认为 withSortableView 元素自身，如果 useWindowAsScrollContainer 为 true，则为 window。
getHelperDimensions	Function	Function	function({node, index, collection}) 返回计算维度
helperContainer	HTMLElement or Function	document.body	默认情况下，克隆的可排序 helper 附加到页面中。该 props 为 helper 指定一个不同的容器。可以是一个 HTMLElement 或一个返回 HTMLElement 的函数，该函数将在排序开始之前调用
disableAutoscroll	Boolean	false	拖动时是否禁用自动滚动

OffsetValue String类型或者 Number类型，单位为： (px or %). Examples: 10 同 "10px", "50%" 等。

withSortableItem HOC

Property	Type	Default	Required?	Description
index	Number		✓	元素集合的 index 值
collection	Number or String	0	-	元素所属集合. 同一个 withSortableView 中有多组可排序元素时使用。
disabled	Boolean	false	-	禁用元素排序
getNode	func: (tarNode: HTMLElement) => HTMLElement	-	-	调整指定的排序 node 节点

changlog

2022-2-21 v1.0.9

修改 onSortStart 回调中，collection 为 undefined bug

2020-6-22 v1.0.6

添加 zindex 值，以防外部容器设置 zindex 时，导致无法显示 item