Introduction

fs-reorder-list is used for adjusting the order of list-type content. V1 provides list rendering, search filtering, restore-default-order, top/bottom shortcut operations, drag handles and reserved drag events. It is suitable for scenarios such as navigation order configuration and module sorting.

Usage

When importing locally, configure it in the page or component's index.json:

"usingComponents": {
  "fs-reorder-list": "/avaui-sub/fs-reorder-list/index"
}

PWC (custom component/plugin) usage: only the usingComponents registration follows the format below (the avaComponent:// protocol); other usage is identical to local registration.

"usingComponents": {
  "fs-reorder-list": "avaComponent://avaui-sub/fs-reorder-list/index"
}

Code Demos

Basic Usage

API

Attributes

Attribute	Description	Type	Default
items	Data source for sorting	Array	[]
searchable	Whether to show the search bar	Boolean	false
keyword	Search keyword passed in from outside	String	''
keywordPlaceholder	Search placeholder text	String	Enter a keyword
showReset	Whether to show the restore-default entry	Boolean	false
resetText	Restore-default text	String	Restore default settings
showMoveButtons	Whether to show the top/bottom operations	Boolean	true
showDragHandle	Whether to show the drag handle	Boolean	true
disabled	Whether to disable interaction	Boolean	false
maxHeight	Maximum height of the list	String	''
emptyText	Empty-state text	String	No data yet
extStyle	Extra styles for the component root node	String	''

items Data Structure

items is an array of objects. The component expects each item to use fixed fields:

• id: Unique identifier
• name: List display text, also used for search matching

Example:

[
  {
    "id": "lifecycle",
    "name": "Customer Full Lifecycle Dashboard Page"
  },
  {
    "id": "insight",
    "name": "Customer Satisfaction Survey Result Page"
  }
]

Constraints:

• The id field should be unique; internal sorting and dragging both depend on it.
• The name field is used for list display and search matching.
• Fields other than id and name are preserved as-is and returned via change, reset, and getValue().

Events

Event Name	Description	Callback Parameters
change	Triggered after order changes or reset	{ type, items, keyword, detail }
search	Triggered when the search keyword changes	{ keyword, items }
reset	Triggered when restoring the default order	{ items }
dragstart	Triggered when a long-press on the handle starts dragging	{ id, item }
dragmove	Triggered during drag movement	{ id, touch }
dragend	Triggered when dragging ends	{ id, item }

Parameter Usage

• items: Component input data source; reads id and name from each item
• id: Unique identifier, used for sort positioning, drag positioning, and event callbacks
• name: Display text, used for list display and search matching
• keyword: Externally controlled search keyword
• keywordPlaceholder: Search box placeholder text
• showReset: Whether to show the restore-default entry
• resetText: Restore-default entry text
• showMoveButtons: Whether to show the top/bottom icon buttons
• showDragHandle: Whether to show the drag handle
• disabled: Whether to disable sorting interaction
• maxHeight: Maximum height of the list scroll area
• emptyText: Empty-data prompt text, forwarded to Imageholder
• extStyle: Extra styles for the component root node

Internal derived fields are not part of the public API:

• listItems: Normalized internal list, structured as { id, name, item }
• visibleItems: Currently visible list, carrying drag state and button-disabled state

Methods

Method Name	Description	Return Value
getValue	Get the current sort result	Array
reset	Restore the default order	-

Notes

• V1 only implements list-type sorting capability.
• The current drag capability is in the skeleton stage; handles and events are reserved, and a complete drag-reorder kernel will be added later.

Preview

打开预览