`<Sortable>`

一个适用于 ReactLynx 的无样式可排序列表组件，通过主线程动画提供列表重排基础能力。

基本用法

无边界拖拽

如果未提供 boundaryId，则 SortableItem 可以不受限制地自由拖拽。

禁用所有拖拽和排序行为

结构

整个 SortableItem 都可以被拖拽。

 <SortableRoot data={data}>
    {(item: SortableData<string>) => {
      return (
        <SortableItem />
      )
    }}
 </SortableRoot>

只有 SortableItemArea 可以被拖拽。

 <SortableRoot data={data}>
    {(item: SortableData<string>) => {
      return (
        <SortableItem as='DraggableRoot' >
          <SortableItemArea />
        </SortableItem>
      )
    }}
 </SortableRoot>

API

SortableRootProps

boundaryId

iOS

Android

Harmony

类型string

作为边界限制的项的唯一键。如果项被拖出边界，排序将被取消。

children

iOS

Android

Harmony

类型(item: {dataItem: T, getSortingKey: () => string}) => ReactNode

子节点，是一个接收 item 并返回 ReactNode 的函数。

data

iOS

Android

Harmony

类型SortableData[]

拖拽列表的数据。

debugLog

iOS

Android

Harmony

类型boolean·默认值false

显示调试日志，发现问题时开启。

enableSorting

iOS

Android

Harmony

类型boolean·默认值true

是否启用排序。

onSortEnd

iOS

Android

Harmony

类型(sortedData: SortableData[]) => void

排序结束时触发的回调函数。参数为排序后的data。

onSortStart

iOS

Android

Harmony

类型() => void

拖拽排序开始时触发的回调函数。

SortableItemProps

iOS

Android

Harmony

类型Draggable | DraggableRoot·默认值'Draggable'

指定底层组件。若整个子节点区域均可拖动，使用默认值 'Draggable'；否则使用 'DraggableRoot'，'DraggableRoot' 需与子节点 'DraggableArea' 一起使用。仅触摸其子节点 'DraggableArea' 时可拖动。

children

iOS

Android

Harmony

类型ReactNode

子节点。

className

iOS

Android

Harmony

类型string

类名

sortingKey

iOS

Android

Harmony

类型string

用于排序的唯一键。

SortableData

dataItem

iOS

Android

Harmony

类型T

原始数据项。

getSortingKey

iOS

Android

Harmony

类型() => string

返回子节点用于排序的唯一键的函数。

#<Sortable>

#基本用法

#无边界拖拽

#禁用所有拖拽和排序行为

#结构

#API

#SortableRootProps

#SortableItemProps

#SortableData

`<Sortable>`

基本用法

无边界拖拽

禁用所有拖拽和排序行为

结构

API

SortableRootProps

SortableItemProps

SortableData