@enact/ui/VirtualList/VirtualList.d.ts

A collection of simplified unstyled cross-platform UI components for Enact

// Type definitions for ui/VirtualList

import * as React from "react";

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

/**
 * The shape for the grid list item size
in a list for   .
 */
export interface gridListItemSizeShape {
  /**
   * The minimum width of the grid list item.
   */
  minWidth: number /**
   * The minimum height of the grid list item.
   */;
  minHeight: number;
}
/**
 * The shape for the list different item size
in a list for   .
 */
export interface itemSizesShape {
  /**
   * The minimum size of the list item.
   */
  minSize: number /**
   * An array of the list item size. If it is not defined, the list items will render with the  `minSize`  size.
   */;
  size: number[];
}
export interface VirtualListProps extends VirtualListBasicProps {
  /**
 * A callback function that receives a reference to the  `scrollTo`  feature.
 * 
 * Once received, the  `scrollTo`  method can be called as an imperative interface.
 * 
 * The  `scrollTo`  function accepts the following parameters:
 * *  {position: {x, y}} - Pixel value for x and/or y position
 * *  {align} - Where the scroll area should be aligned. Values are:
 `'left'` ,  `'right'` ,  `'top'` ,  `'bottom'` ,
 `'topleft'` ,  `'topright'` ,  `'bottomleft'` , and  `'bottomright'` .
 * *  {index} - Index of specific item. ( `0`  or positive integer)
This option is available for only  `VirtualList`  kind.
 * *  {node} - Node to scroll into view
 * *  {animate} - When  `true` , scroll occurs with animation. When  `false` , no
animation occurs.
 * *  {focus} - When  `true` , attempts to focus item after scroll. Only valid when scrolling
by  `index`  or  `node` .
 * 
 * Note: Only specify one of:  `position` ,  `align` ,  `index`  or  `node`
 * 
 * Example:
 * ```
// If you set cbScrollTo prop like below;
cbScrollTo: (fn) => {this.scrollTo = fn;}
// You can simply call like below;
this.scrollTo({align: 'top'}); // scroll to the top
```
 */
  cbScrollTo?: Function;
  /**
   * The layout direction of the list.
   *
   * Valid values are:
   * *  `'horizontal'` , and
   * *  `'vertical'` .
   */
  direction?: string;
  /**
   * Specifies how to show horizontal scrollbar.
   *
   * Valid values are:
   * *  `'auto'` ,
   * *  `'visible'` , and
   * *  `'hidden'` .
   */
  horizontalScrollbar?: string;
  /**
   * Prevents scroll by wheeling on the list.
   */
  noScrollByWheel?: boolean;
  /**
 * Called when scrolling.
 * 
 * Passes  `scrollLeft` ,  `scrollTop` , and  `moreInfo` .
It is not recommended to set this prop since it can cause performance degradation.
Use  `onScrollStart`  or  `onScrollStop`  instead.
 */
  onScroll?: Function;
  /**
 * Called when scroll starts.
 * 
 * Passes  `scrollLeft` ,  `scrollTop` , and  `moreInfo` .
You can get firstVisibleIndex and lastVisibleIndex from VirtualList with  `moreInfo` .
 * 
 * Example:
 * ```
onScrollStart = ({scrollLeft, scrollTop, moreInfo}) => {
    const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
    // do something with firstVisibleIndex and lastVisibleIndex
}

render = () => (
    <VirtualList
        ...
        onScrollStart={this.onScrollStart}
        ...
    />
)
```
 */
  onScrollStart?: Function;
  /**
 * Called when scroll stops.
 * 
 * Passes  `scrollLeft` ,  `scrollTop` , and  `moreInfo` .
You can get firstVisibleIndex and lastVisibleIndex from VirtualList with  `moreInfo` .
 * 
 * Example:
 * ```
onScrollStop = ({scrollLeft, scrollTop, moreInfo}) => {
    const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
    // do something with firstVisibleIndex and lastVisibleIndex
}

render = () => (
    <VirtualList
        ...
        onScrollStop={this.onScrollStop}
        ...
    />
)
```
 */
  onScrollStop?: Function;
  /**
   * The ARIA role for the list.
   */
  role?: string;
  /**
   * Specifies how to scroll.
   *
   * Valid values are:
   * *  `'translate'` ,
   * *  `'native'` .
   */
  scrollMode?: string;
  /**
   * Specifies how to show vertical scrollbar.
   *
   * Valid values are:
   * *  `'auto'` ,
   * *  `'visible'` , and
   * *  `'hidden'` .
   */
  verticalScrollbar?: string;
}
/**
 * An unstyled scrollable virtual list component with touch support.
 */

export class VirtualList extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, VirtualListProps>
> {}

export interface VirtualListBasicProps {
  /**
 * The rendering function called for each item in the list.
 * 
 * Note : The list does  not  always render a component whenever its render function is called
due to performance optimization.
 * 
 * Example:
 * ```
renderItem = ({index, ...rest}) => {

	return (
		<MyComponent index={index} {...rest} />
	);
}
```
 */
  itemRenderer: Function;
  /**
   * Additional props included in the object passed to the  `itemRenderer`  callback.
   */
  childProps?: object;
  /**
   * Client size of the list; valid values are an object that has  `clientWidth`  and  `clientHeight` .
   */
  clientSize?: object;
  /**
   * The number of items of data the list contains.
   */
  dataSize?: number;
  /**
   * The layout direction of the list.
   *
   * Valid values are:
   * *  `'horizontal'` , and
   * *  `'vertical'` .
   */
  direction?: string;
  /**
   * The ARIA role for the list.
   */
  role?: string;
  /**
   * Specifies how to scroll.
   *
   * Valid values are:
   * *  `'translate'` ,
   * *  `'native'` .
   */
  scrollMode?: string;
  /**
   * The spacing between items.
   */
  spacing?: number;
}
/**
 * A basic base component for
   and   .
 */

export class VirtualListBasic extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, VirtualListBasicProps>
> {}

export interface VirtualGridListProps extends VirtualListBasicProps {
  /**
 * A callback function that receives a reference to the  `scrollTo`  feature.
 * 
 * Once received, the  `scrollTo`  method can be called as an imperative interface.
 * 
 * The  `scrollTo`  function accepts the following parameters:
 * *  {position: {x, y}} - Pixel value for x and/or y position
 * *  {align} - Where the scroll area should be aligned. Values are:
 `'left'` ,  `'right'` ,  `'top'` ,  `'bottom'` ,
 `'topleft'` ,  `'topright'` ,  `'bottomleft'` , and  `'bottomright'` .
 * *  {index} - Index of specific item. ( `0`  or positive integer)
This option is available for only  `VirtualList`  kind.
 * *  {node} - Node to scroll into view
 * *  {animate} - When  `true` , scroll occurs with animation. When  `false` , no
animation occurs.
 * *  {focus} - When  `true` , attempts to focus item after scroll. Only valid when scrolling
by  `index`  or  `node` .
 * 
 * Note: Only specify one of:  `position` ,  `align` ,  `index`  or  `node`
 * 
 * Example:
 * ```
// If you set cbScrollTo prop like below;
cbScrollTo: (fn) => {this.scrollTo = fn;}
// You can simply call like below;
this.scrollTo({align: 'top'}); // scroll to the top
```
 */
  cbScrollTo?: Function;
  /**
   * The layout direction of the list.
   *
   * Valid values are:
   * *  `'horizontal'` , and
   * *  `'vertical'` .
   */
  direction?: string;
  /**
   * Specifies how to show horizontal scrollbar.
   *
   * Valid values are:
   * *  `'auto'` ,
   * *  `'visible'` , and
   * *  `'hidden'` .
   */
  horizontalScrollbar?: string;
  /**
   * Prevents scroll by wheeling on the list.
   */
  noScrollByWheel?: boolean;
  /**
 * Called when scrolling.
 * 
 * Passes  `scrollLeft` ,  `scrollTop` , and  `moreInfo` .
It is not recommended to set this prop since it can cause performance degradation.
Use  `onScrollStart`  or  `onScrollStop`  instead.
 */
  onScroll?: Function;
  /**
 * Called when scroll starts.
 * 
 * Passes  `scrollLeft` ,  `scrollTop` , and  `moreInfo` .
You can get firstVisibleIndex and lastVisibleIndex from VirtualGridList with  `moreInfo` .
 * 
 * Example:
 * ```
onScrollStart = ({scrollLeft, scrollTop, moreInfo}) => {
    const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
    // do something with firstVisibleIndex and lastVisibleIndex
}

render = () => (
    <VirtualGridList
        ...
        onScrollStart={this.onScrollStart}
        ...
    />
)
```
 */
  onScrollStart?: Function;
  /**
 * Called when scroll stops.
 * 
 * Passes  `scrollLeft` ,  `scrollTop` , and  `moreInfo` .
You can get firstVisibleIndex and lastVisibleIndex from VirtualList with  `moreInfo` .
 * 
 * Example:
 * ```
onScrollStop = ({scrollLeft, scrollTop, moreInfo}) => {
    const {firstVisibleIndex, lastVisibleIndex} = moreInfo;
    // do something with firstVisibleIndex and lastVisibleIndex
}

render = () => (
    <VirtualGridList
        ...
        onScrollStop={this.onScrollStop}
        ...
    />
)
```
 */
  onScrollStop?: Function;
  /**
   * The ARIA role for the list.
   */
  role?: string;
  /**
   * Specifies how to scroll.
   *
   * Valid values are:
   * *  `'translate'` ,
   * *  `'native'` .
   */
  scrollMode?: string;
  /**
   * Specifies how to show vertical scrollbar.
   *
   * Valid values are:
   * *  `'auto'` ,
   * *  `'visible'` , and
   * *  `'hidden'` .
   */
  verticalScrollbar?: string;
}
/**
 * An unstyled scrollable virtual grid list component with touch support.
 */

export class VirtualGridList extends React.Component<
  Merge<React.HTMLProps<HTMLElement>, VirtualGridListProps>
> {}

export default VirtualList;