@wix/design-system
Version:
@wix/design-system
109 lines (104 loc) • 3.35 kB
Markdown
### dataHook
- type: string
- description: No description
### usePortal
- type: boolean
- description: in case of wrong position of item during drag you can force SortableListBase to use portals
### dragPreview
- type: boolean
- description: if you are having nested SortableListBases,
list that you are currently dragging need to be marked as dragPreview
inside of renderItem callback
### items
- type: object[]
- description: list of items with {id: any}
### className
- type: string
- description: Specifies a CSS class name to be appended to the component’s root element.
- internal
### contentClassName
- type: string
- description: className of the first items parent container
### insertPosition
- type: "start" | "end" | "any"
- description: Specifies where the item can be inserted
### startFixedElement
- type: ReactNode
- description: Node which will be rendered before draggable items and this element won't be draggable
### endFixedElement
- type: ReactNode
- description: Node which will be rendered after draggable items and this element won't be draggable
### droppable
- type: boolean
- description: indicates if element can be drop at this place
- default: true
### withHandle
- type: boolean
- description: decide whether to render a handle using `connectHandle` (see below)
### containerId
- type: string
- description: uniq id of container that contain current draggable item
### groupName
- type: string
- description: No description
### renderItem
- type: (data: object) => ReactNode
- description: No description
### index
- type: number
- description: No description
### id
- type: string | number
- description: No description
### item
- type: object
- description: No description
### onMoveOut
- type: (id: any) => void
- description: callback when item was moved out from current container to another container
### onDrop
- type: DropEventFn
- description: callback when item was dropped in a new location
### onHover
- type: HoverEventFn
- description: callback when item is hovered
### onDragStart
- type: DragEventFn
- description: callback for drag start
### onDragEnd
- type: DragEventFn
- description: callback for drag end
### shift
- type: number[]
- description: visual positioning shifting for an element (transform: translate) without moving it from its real position at DOM (left, top)
### hasDragged
- type: boolean
- description: flag that indicates that there's an item being dragged
### setWrapperNode
- type: (node: HTMLElement, index: number, item: object) => void
- description: sets draggable item node & additional info for animation positions calculations
### animationDuration
- type: number
- description: animation duration in ms, default = 0 - disabled
### animationTiming
- type: string
- description: animation timing function, default = linear
### canDrag
- type: DragEventFn
- description: callback that could prevent item from dragging
### delay
- type: number
- description: No description
### listOfPropsThatAffectItems
- type: any[]
- description: In case that you are using some external props inside of renderItems method,
you need to define them here.
renderItem = ({ item }) => <div key={item.id}>{this.props.myAwesomeProp}</div>
render() {
return (
<SortableListBase
...
listOfPropsThatAffectItems={[this.props.myAwesomeProp]}
/>
)
}