Custom filtering logic, custom option data rendering
Disabled
Drag and drop sort
Drag and drop + custom selected rendering
Custom rendering header information in panel
Fully custom rendering
Fully custom rendering, drag and drop sorting
Tree Transfer
Tree Transfer with Custom Header Showing Leaf Node Count
Accessibility
API Reference
Methods
Design Tokens
Related materials
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
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.
When type is treeList, if you need to customize search logic, you need to set filter to true and set a custom search function through filterTreeNode of treeProps.
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.
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
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:
type SourceHeaderProps = {
num: number; // The total number of data or the number of filtered results
showButton: boolean; // Whether to show select all/unselect all buttons
allChecked: boolean; // Whether the current data has been selected
onAllClick: () => void; // Function that should be called after clicking the select/unselect all button
leafOnlyNum?: number; // Only valid when type is treeList, represents the number of leaf nodes >=2.94.0
}
type SelectedHeaderProps = {
num: number; // The total number of selected data
showButton: boolean; // Whether to show the clear button
onClear: () => void // Function that should be called after clicking the clear button
}
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) => ReactNodeSourcePanelProps contains the following parameters, from which you can get data to render your Panel structure
interface SourcePanelProps {
value: Array<string|number>; // key of all selected items
loading: boolean; // Whether loading
noMatch: boolean; // Whether there is no matching item that matches the current search value
filterData: Array<Item> // items that match the current search value
sourceData: Array<Item>; // All items
allChecked: boolean; // Whether to select all
showNumber: number; // Filter the number of results
inputValue: string; // the value of the input search box
onSearch: (searchString: string) => any; // The function that should be called when the search box changes, the input parameter is the search value
onAllClick: () => void; // The function that should be called when all the buttons on the left are clicked
onSelectOrRemove: (item: Item) => any; //The function that should be called when selecting or deleting a single option, the input should be the current operation item
onSelect: (value:Array<string|number>)=>void; // controlled batch selection key
selectedItem: Map, // collection of all selected items
}
renderSelectedPanel: (selectedPanelProps: SelectedPanelProps) => ReactNodeSelectedPanelProps contains the following parameters
interface SelectedPanelProps {
length: number; // number of selected options
onClear: () => void; // The callback function that should be called when clicking to clear
onRemove: (item: Item) => void; // The function that should be called when deleting a single option
onSortEnd: (( oldIndex, newIndex)) => void; // The function that should be called when reordering the results
selectedData: Array<Item>; // All selected items collection
}
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 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
1. Function: Obtain the necessary information during the drag and drop process through the unique id
2. Core input parameters:
- id: unique identifier, which can be a number or a string, but cannot be a number 0
3. Core return value description:
- setNodeRef: Associate the dom node to make it a draggable item
- listeners: Contains onKeyDown, onPointerDown and other methods, mainly to allow nodes to be dragged
- transform: the movement change value when the node is dragged
- transition: transition effect
- active: information about the dragged node, including id
Tree Transfer with Custom Header Showing Leaf Node Count
When type is treeList, the SourceHeaderProps parameter of renderSourceHeader provides an additional leafOnlyNum field, which represents the number of leaf nodes. This is useful in scenarios like file selection, where you can display only the file count instead of the total including folders.
Add rolelist to the selected list on the right, add rolelistitem to the selected item
API Reference
Transfer Props
props
description
data type
default
version
className
Style class name
string
dataSource
Data Source
Array<Item>|Array<GroupItem>|Array<TreeItem>
[]
defaultValue
Default selected value
Array<string|number>
disabled
Whether to disable
boolean
false
draggable
Whether to enable drag sorting
boolean
false
emptyContent
Custom 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
Custom filter logic, when false, the search box is not displayed. When type is treeList, if you need to customize search logic, you need to set filter to true and set a custom search function through filterTreeNode of treeProps.
boolean | (input:string, item: Item) => boolean
true
inputProps
Can 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 Transfer
Called when the input content of the search box changes
(inputValue: string) => void
onSelect
Callback when checked
(item: Item) => void
renderSelectedHeader
Customize the rendering of the header information on the right panel
(props: SelectedHeaderProps) => ReactNode
2.29.0
renderSelectedItem
Customize the rendering of a single selected item on the right. When type="treeList" and showPath is true, the complete path is available through item.fullPath