Input · Transfer
Transfer
A more intuitive and efficient multiple-selection selector, which can reveal more information about options, and supports search functions. The disadvantage is that it takes up more space

Demos

How to import

Basic Usage

dataSource should have value、label、key.

Grouped

Set type to groupList
For grouped dataSource, the first-level child elements must have title and children attributes, structure reference <GroupItem>
Does not support multi-level nesting

Custom filtering logic, custom option data rendering

Use filter to customize the search logic. When it returns true, it means that the current item meets the filter rules and keeps the display of the current item in the list. If it returns false, it means it does not match, and the current item will be hidden. Using renderSourceItem, you can customize the rendering structure of each source data on the left Using renderSelectedItem you can customize the rendering structure of each selected item on the right

Disabled

Drag and drop sort

Set draggable to true to enable the drag sort function. Support after v1.11.0

Drag and drop + custom selected rendering

Set draggable to true to enable the drag and drop sorting function; use renderSelectedItem to customize the rendering of the selected items on the right; You can define the trigger as any ReactNode you want and add styles. Drag the trigger and use sortableHandle to wrap it (sortableHandle is provided after v 1.22.0)

Custom rendering header information in panel

Semi has provided renderSourceHeader and renderSelectedHeader parameter allows users to customize the header information of the left and right panels since version 2.29.0.
renderSourceHeader: (props: SourceHeaderProps) => ReactNode
renderSelectedHeader: (props: SelectedHeaderProps) => ReactNode
The parameter types are as follows:
The example is as follows:

Fully custom rendering

Semi provides renderSourcePanel and renderSelectedPanel input parameters, allowing you to completely customize the rendering structure of the left and right panels With this function, you can directly reuse the logic capabilities inside the Transfer to implement the Transfer component with a highly customized style structure renderSourcePanel: (sourcePanelProps: SourcePanelProps) => ReactNode SourcePanelProps contains the following parameters, from which you can get data to render your Panel structure
renderSelectedPanel: (selectedPanelProps: SelectedPanelProps) => ReactNode SelectedPanelProps contains the following parameters

Fully custom rendering, drag and drop sorting

In a completely custom rendering scene, since the rendering of the drag area has also been completely taken over by you, you do not need to declare draggable. But you need to implement the drag and drop logic yourself, You can use the drag-and-drop tool library dnd-kit or react-sortable-hoc, quickly realize the function. Regarding the selection of the two, here are some of our suggestions.
  • Both are maintained by the same author, dnd-kit is the successor of react-sortable-hoc
  • The API design of react-sortable-hoc is more cohesive, and the code is more concise in simple scenarios. But it strongly relies on the findDOMNode API, which will be deprecated in future React versions. At the same time, the library has not been maintained for the past two years.
  • Relatively speaking, dnd-kit has a certain threshold for getting started, but it has a higher degree of freedom, stronger scalability, and is still under maintenance. we recommend it.
Besides, To support drag sorting, you need to call onSortEnd with oldIndex and newIndex as the input parameters after the drag sorting is over
Example using react-sortable-hoc:
Example using dnd-kit,The core dependencies that need to be used are @dnd-kit/sortable, @dnd-kit/core. The core hooks are useSortable, and the usage instructions of useSortable are as follows

Tree Transfer

The input type is treeList, and the Tree component is used as a custom rendering list. v1.20.0 available
The properties of the default tree can be overridden by treeProps(TreeProps). The default properties of the tree on the left are

Accessibility

ARIA

  • Add role search to the search box
  • Add role list to the selected list on the right, add role listitem to the selected item

API Reference

Transfer Props

propsdescriptiondata typedefaultversion
classNameStyle class namestring
dataSourceData SourceArray<Item>|Array<GroupItem>|Array<TreeItem>[]
defaultValueDefault selected valueArray<string|number>
disabledWhether to disablebooleanfalse
draggableWhether to enable drag sortingbooleanfalse
emptyContentCustom empty state prompt text, search is the text displayed when there are no search results, left is the text when there is no source data on the left, and right is the prompt text when no data is checked{left: ReactNode; right: ReactNode; search: ReactNode;}
filterCustom filter logic, when false, the search box is not displayedboolean | (input:string, item: Item) => booleantrue
inputPropsCan be used to customize the search box Input, the configurable properties refer to the Input component, the value and onChange parameters will be used inside Transfer, users should not use them. If you want to search through external data, you can call the search method of TransferInputProps
loadingWhether the left option is being loadedboolean-
onChangeThe callback that is triggered when the selected value changes, and the callback is also triggered after the drag sort changes(values: Array<string|number>, items: Array<Item>) => void
onDeselectCallback when unchecking(item: Item) => void
onSearchCalled when the input content of the search box changes(inputValue: string) => void
onSelectCallback when checked(item: Item) => void
renderSelectedHeaderCustomize the rendering of the header information on the right panel(props: SelectedHeaderProps) => ReactNode2.29.0
renderSelectedItemCustomize the rendering of a single selected item on the right(item: {onRemove, sortableHandle} & Item) => ReactNode
renderSelectedPanelCustomize the rendering of the selected panel on the right(selectedPanelProps) => ReactNode1.11.0
renderSourceHeaderCustomize the rendering of the header information on the left panel(props: SourceHeaderProps) => ReactNode2.29.0
renderSourceItemCustomize the rendering of a single candidate item on the left(item: {onChange, checked} & Item) => ReactNode
renderSourcePanelCustomize the rendering of the left candidate panel(sourcePanelProps) => ReactNode1.11.0
showPathWhen the type is treeList, control whether the selected item on the right shows the selection pathbooleanfalse1.20.0
styleInline styleCSSProperties
treePropsWhen the type is treeList, it can be passed as TreeProps to the Tree component on the leftTreeProps1.20.0
typeTransfer type, optional list, groupList, treeListstring'list'1.20.0
valueThe selected value, when the item is passed in, it will be used as a controlled componentArray<string|number>

Item Interface

propsdescriptiondata typedefaultversion
classNameStyle class namestring
disabledWhether to disablebooleanfalse
keyRequired, unique identification of each option, no repetition is allowedstring | number
labelOptions display contentReactNode
styleInline styleCSSProperties
valueThe value represented by the optionstring | number

GroupItem Interface

GroupItem inherits all the properties of Item
propsdescriptiondata typedefaultversion
childrenElements of the grouparray<Item>
titleGroup Namestring

TreeItem Interface

TreeItem inherits all the properties of Item
propsdescriptiondata typedefault
childrenChildren Itemsarray<TreeItem>

Methods

Some internal methods provided by Transfer can be accessed through ref:
NameDescription
search(value: string)You can call this method through ref to search, and the search value will be set to Input.

Design Tokens