`<Sortable>`

A headless Sortable list component for ReactLynx. It provides list reordering primitives via main-thread animations.

Basic Usage

Drag Without a boundary

If no boundaryId is provided, the SortableItem can be dragged freely without restrictions.

Disable all dragging and sorting behavior

Structure

The whole SortableItem is draggable.

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

Only the SortableItemArea is draggable.

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

API

SortableRootProps

iOS

Android

Harmony

Type'ScrollView'

Specifies which container element SortableRoot should render and own as the scrollable boundary. - 'ScrollView': render an internal vertical scroll-view. - Omit (default): render a plain view without scrolling capability.

boundaryId

iOS

Android

Harmony

Typestring

The unique key of the item that acts as the boundary. If the item is dragged out of the boundary, the sorting will be canceled.

children

iOS

Android

Harmony

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

Children, which is a function that receives an item and returns a ReactNode.

data

iOS

Android

Harmony

TypeSortableData<T>[]

The data for the sortable list.

debugLog

iOS

Android

Harmony

Typeboolean·Defaultfalse

Display debug logs. Open it when you find a bug.

enableSorting

iOS

Android

Harmony

Typeboolean·Defaulttrue

Whether to enable sorting.

onSortEnd

iOS

Android

Harmony

Type(sortedData: SortableData<T>[]) => void

Callback function that is triggered when sorting ends. The parameter is the sorted data.

onSortStart

iOS

Android

Harmony

Type() => void

Callback function that is triggered when sorting starts.

scrollableBoundaryId

iOS

Android

Harmony

Typestring

The unique id of a scrollable boundary container. When the dragged item reaches the edge of this container, Sortable will call scrollBy on it so the list can continue moving with the drag direction.

scrollableClassName

iOS

Android

Harmony

Typestring

Class name applied to the owned scroll-view when as is 'ScrollView'.

scrollableContentClassName

iOS

Android

Harmony

Typestring

Class name applied to the owned content boundary view when as is 'ScrollView'.

scrollableEnableScroll

iOS

Android

Harmony

Typeboolean·Defaulttrue

Whether the owned scroll-view can be scrolled by user gestures.

scrollableStickyLowerOffset

iOS

Android

Harmony

Typenumber·Default0

Distance between the dragged item and the lower edge of the owned or configured scrollable boundary while auto-scrolling downward.

scrollableStickyUpperOffset

iOS

Android

Harmony

Typenumber·Default0

Distance between the dragged item and the upper edge of the owned or configured scrollable boundary while auto-scrolling upward.

SortableItemProps

iOS

Android

Harmony

TypeDraggable | DraggableRoot·Default'Draggable'

Specifies the underlying component to be used.

children

iOS

Android

Harmony

TypeReactNode

Children.

className

iOS

Android

Harmony

Typestring

className

disabled

iOS

Android

Harmony

Typeboolean·Defaultfalse

Whether this item is locked from sorting. A disabled item: - Cannot be dragged itself. Touch / long-press gestures are not bound on it, so interacting with it never starts a sort operation. - Cannot be displaced by other items being dragged. It always stays at its current position. - Always keeps its absolute position in the final sorted order. Other items can still freely cross over it; only the relative order of non-disabled items can change. Note that this only affects the disabled item itself. Other (non-disabled) items keep their full interactivity.

sortingKey

iOS

Android

Harmony

Typestring

The unique key for sorting.

SortableData

dataItem

iOS

Android

Harmony

TypeT

The original data item.

getSortingKey

iOS

Android

Harmony

Type() => string

A function that returns the unique key for sorting.

#<Sortable>

#Basic Usage

#Drag Without a boundary

#Disable all dragging and sorting behavior

#Structure

#API

#SortableRootProps

#SortableItemProps

#SortableData

`<Sortable>`

Basic Usage

Drag Without a boundary

Disable all dragging and sorting behavior

Structure

API

SortableRootProps

SortableItemProps

SortableData