@wix/design-system
Version:
@wix/design-system
101 lines (98 loc) • 3.91 kB
Markdown
### dataHook
- type: string
- description: Can be applied in the tests as a data-hook HTML attribute.
### withBottomBorder
- type: boolean
- description: Adds a bottom border (divider) to the last item.
### className
- type: string
- description: Specifies a CSS class name to be appended to the component’s root element.
- internal
### readOnly
- type: boolean
- description: Prevents the list from being reordered by removing the dragging grip icons.
### actions
- type: Action[]
- description: No description
### items
- type: NestableListItem[]
- description: Defines each Nestable List item individually, using the following props:
* __id__ - specifies an item’s ID.
* __addItemLabel__ - creates the “Add new ...” button with a given label at the bottom of the item.
* __isCollapsed__ - bool prop, defines whether to render the item’s children.
* __children__ - defines an item’s children.
* __draggable__ - bool prop, turns on / off dragging ability for an item.
* __hideDragHandle__ - bool prop, turns on / off drag handle for an item.
* All <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-lists-table--tablelistitem" target="_blank">`<TableListItem/>`</a> props can be used to format item’s style and content.
### preventChangeDepth
- type: boolean
- description: Allows dragging and dropping an item only on its own depth (inside the same level).
- default: false
### preventChangeParent
- type: boolean
- description: Allows dragging and dropping an item only on its own parent.
- default: false
### showDragHandleOnHover
- type: boolean
- description: Shows the drag handle only on hover.
- default: false
### dragHandleSize
- type: "small" | "large"
- description: Size of the drag handle
- default: 'large'
### enforcePinnedOrder
- type: boolean
- description: Allows dragging and dropping an item only on its pin section.
- default: false
### canDrop
- type: (dragItem: NestableListItem, hoverItem: NestableListItem) => boolean
- description: Returns `false` to reject a drop while the cursor hovers over `hoverItem`.
Runs after the built-in constraint flags. When it returns `false`, no placeholder is
shown and the drop is rejected at hover time — useful for arbitrary per-position rules
that the built-in flags can't express.
### maxDepth
- type: number
- description: Defines a maximum depth (number of levels) for the list.
- default: 10
### addItemLabel
- type: string
- description: Adds a button to create a new item (to the Root or a child to the existing item).
### onChange
- type: (data: { items: NestableListItem[]; item: NestableListItem; }) => void
- description: Triggers function when the item’s order or nesting position is changed.
### onAddItem
- type: (item: NestableListItem) => void
- description: Triggers function when the "Add new ..." button is clicked.
### zIndex
- type: number
- description: Defines the zIndex of the draggable layer
### dividers
- type: boolean
- description: Sets the divider visibility
### indentSize
- type: "small" | "medium" | "large"
- description: Sets the indent size
### hierarchyIndicator
- type: boolean
- description: Displays hierarchyIndicator from the parent to children
- default: true
### onDragStart
- type: () => void
- description: Triggers function when the drag of item starts.
### onDragEnd
- type: () => void
- description: Triggers function when the drag of item ends.
### virtualized
- type: boolean
- description: Opt into windowed rendering for large lists. Requires `itemHeight` and `viewportHeight`.
- default: false
### itemHeight
- type: number
- description: Fixed row height in px. Required when `virtualized` is true.
### viewportHeight
- type: number
- description: Scroll viewport height in px. Required when `virtualized` is true.
### offscreenRowCount
- type: number
- description: Extra rows to render above and below the visible window.
- default: 5