office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
104 lines (103 loc) • 5.06 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
import { BaseComponent } from '../../Utilities';
import { CheckboxVisibility, ConstrainMode, DetailsListLayoutMode, IColumn, IDetailsList, IDetailsListProps } from '../DetailsList/DetailsList.types';
import { IDetailsRowProps } from '../DetailsList/DetailsRow.types';
import { SelectionMode } from '../../utilities/selection/index';
import { ScrollToMode } from '../../List';
export interface IDetailsListState {
focusedItemIndex: number;
lastWidth?: number;
lastSelectionMode?: SelectionMode;
adjustedColumns: IColumn[];
isCollapsed?: boolean;
isSizing?: boolean;
isDropping?: boolean;
isSomeGroupExpanded?: boolean;
}
export declare class DetailsListBase extends BaseComponent<IDetailsListProps, IDetailsListState> implements IDetailsList {
static defaultProps: {
layoutMode: DetailsListLayoutMode;
selectionMode: SelectionMode;
constrainMode: ConstrainMode;
checkboxVisibility: CheckboxVisibility;
isHeaderVisible: boolean;
enableShimmer: boolean;
};
private _root;
private _header;
private _groupedList;
private _list;
private _focusZone;
private _selectionZone;
private _selection;
private _activeRows;
private _dragDropHelper;
private _initialFocusedIndex;
private _pendingForceUpdate;
private _columnOverrides;
constructor(props: IDetailsListProps);
scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
focusIndex(index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
getStartItemIndexInView(): number;
componentWillUnmount(): void;
componentDidUpdate(prevProps: any, prevState: any): void;
componentWillReceiveProps(newProps: IDetailsListProps): void;
componentWillUpdate(): void;
render(): JSX.Element;
forceUpdate(): void;
protected _onRenderRow: (props: IDetailsRowProps, defaultRender?: any) => JSX.Element;
private _onRenderDetailsHeader;
private _onRenderDetailsFooter;
private _onRenderListCell;
private _onRenderCell(nestingDepth, item, index);
private _onGroupExpandStateChanged(isSomeGroupExpanded);
private _onColumnIsSizingChanged(column, isSizing);
private _onHeaderKeyDown(ev);
private _onContentKeyDown(ev);
private _getGroupNestingDepth();
private _onRowDidMount(row);
private _setFocusToRowIfPending(row);
private _setFocusToRow(row, forceIntoFirstElement?);
private _onRowWillUnmount(row);
private _onToggleCollapse(collapsed);
private _onColumnDragEnd(props, event);
private _forceListUpdates();
private _adjustColumns(newProps, forceUpdate?, resizingColumnIndex?);
/** Returns adjusted columns, given the viewport size and layout mode. */
private _getAdjustedColumns(newProps, forceUpdate?, resizingColumnIndex?);
/** Builds a set of columns based on the given columns mixed with the current overrides. */
private _getFixedColumns(newColumns);
private _getJustifiedColumnsAfterResize(newColumns, viewportWidth, props, resizingColumnIndex);
/** Builds a set of columns to fix within the viewport width. */
private _getJustifiedColumns(newColumns, viewportWidth, props, firstIndex);
private _onColumnResized(resizingColumn, newWidth, resizingColumnIndex);
private _rememberCalculatedWidth(column, newCalculatedWidth);
private _getColumnOverride(key);
/**
* Callback function when double clicked on the details header column resizer
* which will measure the column cells of all the active rows and resize the
* column to the max cell width.
*
* @private
* @param {IColumn} column (double clicked column definition)
* @param {number} columnIndex (double clicked column index)
* @todo min width 100 should be changed to const value and should be consistent with the value used on _onSizerMove method in DetailsHeader
*/
private _onColumnAutoResized(column, columnIndex);
/**
* Call back function when an element in FocusZone becomes active. It will translate it into item
* and call onActiveItemChanged callback if specified.
*
* @private
* @param {el} row element that became active in Focus Zone
* @param {ev} focus event from Focus Zone
*/
private _onActiveRowChanged(el?, ev?);
private _onBlur(event);
private _getItemKey(item, itemIndex);
private _getDetailsFooterProps();
private _getColumnReorderProps();
private _getGroupProps(detailsGroupProps);
}
export declare function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => any, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean): IColumn[];