wix-style-react
Version:
wix-style-react
141 lines • 7.03 kB
TypeScript
/**
* 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<any, any, any> {
static displayName: string;
static propTypes: {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.Requireable<string>;
/**
* 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 <Image/> 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<br>
* limit: number, // sets a max amount of items to load from the data source<br>
* 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<string>;
/** Controls the size of item images. Note: `portrait` and `cinema` sizes are only compatible with `rectangular` image shape. */
imageSize: PropTypes.Requireable<string>;
/**
* Controls the shape of item images
* */
imageShape: PropTypes.Requireable<string>;
/**
* Use to display a divider between items
*/
showDivider: PropTypes.Requireable<boolean>;
/** Defines placeholder value shown in the search input */
searchPlaceholder: PropTypes.Requireable<string>;
/**
* 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 `<EmptyState/>` component in `section` theme for this purpose.
* */
emptyState: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Defines a function that gets the current `searchQuery` and returns the component that is shown when no items are found. Render `<EmptyState />` 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<number>;
/** Controls whether to display the search input */
withSearch: PropTypes.Requireable<boolean>;
/** Sets search debounce in milliseconds */
searchDebounceMs: PropTypes.Requireable<number>;
/** Sets the height of the component in % or px */
height: PropTypes.Requireable<string>;
/** Sets the maximum height of the component in % or px */
maxHeight: PropTypes.Requireable<string>;
/** Renders checkboxes instead of radio buttons and allows users to select multiple items */
multiple: PropTypes.Requireable<boolean>;
/** 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<string>;
/** Sets the label for the checkbox which allows to deselect all selected items */
deselectAllText: PropTypes.Requireable<string>;
/** 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<number>;
/** Contains text or other component in a fixed position at the top of the list */
subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/** 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