@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
66 lines (65 loc) • 2.53 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
import { ITilesListProps, TilesGridMode } from './TilesList.types';
export interface ITilesListState<TItem> {
cells: ITileCell<TItem>[];
}
export interface ITileGrid {
minRowHeight: number;
mode: TilesGridMode;
spacing: number;
maxScaleFactor: number;
marginTop: number;
marginBottom: number;
key: string;
isPlaceholder?: boolean;
}
export interface ITileCell<TItem> {
key: string;
content: TItem;
aspectRatio: number;
grid: ITileGrid;
isPlaceholder?: boolean;
onRender(content: TItem, finalSize: {
width: number;
height: number;
}): React.ReactNode;
}
/**
* Component which renders a virtualized flexbox list of 'tiles', which have arbitrary width and height
* and which support scaling to fill rows when needed.
*/
export declare class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, ITilesListState<TItem>> {
private _pageSpecificationCache;
constructor(props: ITilesListProps<TItem>, context: any);
componentWillReceiveProps(nextProps: ITilesListProps<TItem>): void;
componentWillUpdate(nextProps: ITilesListProps<TItem>, nextState: ITilesListState<TItem>): void;
render(): JSX.Element;
private _onRenderCell(item, finalSize);
/**
* Renders a single list page using a flexbox layout.
* By defualt, List provides no special formatting for a list page. For Tiles, the parent element
* needs flexbox metadata and padding to support the alignment rules.
*/
private _onRenderPage;
/**
* Gets the specification for the list page, which requires pre-calculating the flexbox layout
* to determine the set of tiles which fit neatly within a rectangle. Any tiles left dangling
* at the end of a page are overflowed into the next page unless they are just before a grid
* boundary.
*/
private _getPageSpecification;
private _onGetCellClassName;
private _onGetPageClassName;
/**
* Get the style to be applied to a single list cell, which will specify the flex behavior
* within the flexbox layout.
*/
private _onGetCellStyle;
/**
* Flattens the grid and item specifications into a cell list. List will partition the cells into
* pages use `getPageSpecification`, so each cell is marked up with metadata to assist the flexbox
* algorithm.
*/
private _getCells(items);
}