@wix/design-system
Version:
@wix/design-system
117 lines (114 loc) • 3.85 kB
Markdown
### dataHook
- type: string
- description: applied as data-hook HTML attribute that can be used to create driver in testing
### title
- type: ReactNode
- description: Title of the modal
- default: 'Choose Your Items'
### subtitle
- type: ReactNode
- description: Fixed text displayed above the list
### onClose
- type: MouseEventHandler
- description: X button callback
### onCancel
- type: MouseEventHandler
- description: Cancel button callback
### dataSource
- type: ModalSelectorLayoutDatasourceFn
- description: paging function that should have a signature of
```typescript
(searchQuery: string, offset: number, limit: number) =>
Promise<{
items: Array<{
id: number | string,
title: node,
subtitle?: string,
extraText?: string,
extraNode?: node,
disabled?: boolean // show item as disabled, dont count it in "select all", exclude from `onOk`
selected?: boolean // force item as selected
image?: node
subtitleNode?: node,
belowNode?: node,
showBelowNodeOnSelect?: boolean,
}>,
totalCount: number
}>
```
`offset` - next requested item's index<br>
`limit` - number of items requested<br>
`totalCount` - total number of items that suffice the current search query
### cancelButtonText
- type: string
- description: Cancel button's text
- default: 'Cancel'
### okButtonText
- type: string
- description: OK button's text
- default: 'Select'
### imageSize
- type: "tiny" | "small" | "large" | "portrait" | "cinema"
- description: Image icon size
- default: 'large'
### imageShape
- type: "circle" | "rectangular"
- description: Image icon shape, `rectangular` or `circle`.<br>
NOTE: `circle` is not compatible with `imageSize` of `portrait` or `cinema`
- default: 'rectangular'
### searchPlaceholder
- type: string
- description: Placeholder text of the search input
- default: 'Search...'
### emptyState
- type: ReactNode
- description: Component/element that will be rendered when there is nothing to display,
i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`
### noResultsFoundStateFactory
- type: (searchValue: string) => ReactNode
- description: Function that will get the current `searchQuery` and should return the component/element
that will be rendered when there are no items that suffice the entered search query
### itemsPerPage
- type: number
- description: Number of items loaded each time the user scrolls down
- default: 50
### withSearch
- type: boolean
- description: Whether to display the search input or not
- default: true
### searchDebounceMs
- type: number
- description: Search debounce in milliseconds
### height
- type: string
- description: Height CSS property, sets the height of the modal
- default: '100%'
### maxHeight
- type: string
- description: Max-height CSS property, sets the maximum height of the modal.
- default: '100%'
### selectAllText
- type: string
- description: string to be displayed in footer when `multiple` prop is used and no items are selected
- default: 'Select All'
### deselectAllText
- type: string
- description: string to be displayed in footer when `multiple` prop is used and some or all items ar selected
- default: 'Deselect All'
### disableConfirmation
- type: boolean
- description: to disable confirm button
- default: false
### onSelect
- type: (item: ModalSelectorLayoutItem) => void
- description: callback that triggers on select and return selected item object
### sideActions
- type: ReactNode
- description: Used to display some side component in the footer.
Will override element select all in the footer when multiple=true
### onOk
- type: (selectedItem: ModalSelectorLayoutItem) => void | (selectedItems: ModalSelectorLayoutItem[]) => void
- description: OK button callback, called with the currently selected item
### multiple
- type: boolean
- description: display checkbox and allow multi selection