/** * Use this component when needed to select one / multiple items having complex descriptions. * E.g.: choosing products to promote via ShoutOuts */ export default class SelectorList extends React.PureComponent { static displayName: string; static propTypes: { /** Applies a data-hook HTML attribute to be used in the tests */ dataHook: PropTypes.Requireable; /** * Returns data source for the list described in a following structure: * * ```typescript * (searchQuery: string, offset: number, limit: number) => * Promise<{ * items: Array<{ * id: number | string, // sets the unique item ID (required) * title: node, defines // an item’s title (required) * subtitle?: string, // defines an item’s subtitle * extraText?: string, // contains any text at the end of an item * extraNode?: node, // contains any component at the end of an item * disabled?: boolean, // controls if an item is disabled for selection or not * selected?: boolean, // sets an item as selected * indeterminate?: boolean, // sets an item as indeterminate * image?: node, // contains or other component to illustrate an item * subtitleNode?: node, // contains any component below an item’s subtitle * belowNode?: node, // contains any component below the item, to be shown after an item is selected * showBelowNodeOnSelect?: boolean, // allows to show belowNode content when an item is selected * }>, * offset: number, // specifies the item index in the data source to start fetching from
* limit: number, // sets a max amount of items to load from the data source
* totalCount: number, // sets a max amount of items to load from the data source on user’s search query * }> * ``` * */ dataSource: PropTypes.Validator<(...args: any[]) => any>; /** Controls the size of component paddings and list items */ size: PropTypes.Requireable; /** Controls the size of item images. Note: `portrait` and `cinema` sizes are only compatible with `rectangular` image shape. */ imageSize: PropTypes.Requireable; /** * Controls the shape of item images * */ imageShape: PropTypes.Requireable; /** * Use to display a divider between items */ showDivider: PropTypes.Requireable; /** Defines placeholder value shown in the search input */ searchPlaceholder: PropTypes.Requireable; /** * Contains a component which is shown when there are no items to display in the selector list. * * i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`. Render `` component in `section` theme for this purpose. * */ emptyState: PropTypes.Requireable; /** * Defines a function that gets the current `searchQuery` and returns the component that is shown when no items are found. Render `` component in `section` theme for this purpose. * */ renderNoResults: PropTypes.Requireable<(...args: any[]) => any>; /** Sets the number of items to be loaded each time users scroll down to the end of the list */ itemsPerPage: PropTypes.Requireable; /** Controls whether to display the search input */ withSearch: PropTypes.Requireable; /** Sets search debounce in milliseconds */ searchDebounceMs: PropTypes.Requireable; /** Sets the height of the component in % or px */ height: PropTypes.Requireable; /** Sets the maximum height of the component in % or px */ maxHeight: PropTypes.Requireable; /** Renders checkboxes instead of radio buttons and allows users to select multiple items */ multiple: PropTypes.Requireable; /** Defines callback that triggers on select and return selected item object */ onSelect: PropTypes.Requireable<(...args: any[]) => any>; /** Sets the label for the checkbox which allows to select all items */ selectAllText: PropTypes.Requireable; /** Sets the label for the checkbox which allows to deselect all selected items */ deselectAllText: PropTypes.Requireable; /** Sets the number of items to load on initial render or after search. If not defined, it will be equal to `itemsPerPage` value. */ initialAmountToLoad: PropTypes.Requireable; /** Contains text or other component in a fixed position at the top of the list */ subtitle: PropTypes.Requireable; /** Displays a checkbox which allows to select and deselect all items at once */ renderToggleAllCheckbox: PropTypes.Requireable<(...args: any[]) => any>; }; static defaultProps: { searchPlaceholder: string; size: string; imageShape: string; showDivider: boolean; itemsPerPage: number; withSearch: boolean; height: string; maxHeight: string; deselectAllText: string; multiple: boolean; selectAllText: string; }; constructor(props: any); constructor(props: any, context: any); state: { isLoaded: boolean; isSearching: boolean; items: never[]; searchValue: string; selectedItems: never[]; indeterminateItems: never[]; noResultsFound: boolean; isEmpty: boolean; }; componentDidMount(): void; /** Resets list items and loads first page from dataSource while persisting searchValue */ reloadInitialItems(): void; _renderList: () => React.JSX.Element; _renderSubheader: () => React.JSX.Element; _renderToggleAllCheckbox: () => React.JSX.Element; render(): any; _updateSearchValue: (searchValue: any) => void; _onSearchChange: (event: any) => void; _onClear: () => void; _checkIsSelected: (item: any) => boolean; _checkIndeterminate: (item: any) => boolean; _toggleItem: (item: any) => void; _onToggle: (item: any) => void; _selectAll: () => void; _deselectAll: () => void; _updateItems: ({ resetItems, items: nextPageItems, totalCount, searchValue, }: { resetItems: any; items: any; totalCount: any; searchValue: any; }) => void; _loadInitialItems: (searchValue?: string, { resetItems }?: {}) => void; _getInitialData: (searchValue?: string) => any; _loadMore: () => void; _hasMore(): boolean; _getEnabledItems: (items: any) => any; } import React from 'react'; import PropTypes from 'prop-types'; //# sourceMappingURL=SelectorList.d.ts.map