office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
105 lines (104 loc) • 4.12 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
import { BaseComponent, IRenderFunction } from '../../Utilities';
import { IColumn, DetailsListLayoutMode } from './DetailsList.types';
import { CollapseAllVisibility } from '../../GroupedList';
import { ITooltipHostProps } from '../../Tooltip';
import { ISelection, SelectionMode } from '../../utilities/selection/interfaces';
export interface IDetailsHeader {
focus(): boolean;
}
export interface IDetailsHeaderProps extends React.Props<DetailsHeader> {
componentRef?: (component: IDetailsHeader) => void;
columns: IColumn[];
selection: ISelection;
selectionMode: SelectionMode;
layoutMode: DetailsListLayoutMode;
onColumnIsSizingChanged?: (column: IColumn, isSizing: boolean) => void;
onColumnResized?: (column: IColumn, newWidth: number, columnIndex: number) => void;
onColumnAutoResized?: (column: IColumn, columnIndex: number) => void;
onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => void;
onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent<HTMLElement>) => void;
onRenderColumnHeaderTooltip?: IRenderFunction<ITooltipHostProps>;
groupNestingDepth?: number;
collapseAllVisibility?: CollapseAllVisibility;
isAllCollapsed?: boolean;
onToggleCollapseAll?: (isAllCollapsed: boolean) => void;
/** ariaLabel for the entire header */
ariaLabel?: string;
/** ariaLabel for the header checkbox that selects or deselects everything */
ariaLabelForSelectAllCheckbox?: string;
ariaLabelForSelectionColumn?: string;
selectAllVisibility?: SelectAllVisibility;
}
export declare enum SelectAllVisibility {
none = 0,
hidden = 1,
visible = 2,
}
export interface IDetailsHeaderState {
columnResizeDetails?: IColumnResizeDetails;
isAllSelected?: boolean;
isSizing?: boolean;
groupNestingDepth?: number;
isAllCollapsed?: boolean;
}
export interface IColumnResizeDetails {
columnIndex: number;
originX?: number;
columnMinWidth: number;
}
export declare class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHeaderState> implements IDetailsHeader {
static defaultProps: {
selectAllVisibility: SelectAllVisibility;
collapseAllVisibility: CollapseAllVisibility;
};
private _root;
private _id;
constructor(props: IDetailsHeaderProps);
componentDidMount(): void;
componentWillReceiveProps(newProps: IDetailsHeaderProps): void;
render(): JSX.Element;
/** Set focus to the active thing in the focus area. */
focus(): boolean;
private _renderColumnSizer(columnIndex);
private _onRenderColumnHeaderTooltip(tooltipHostProps, defaultRender?);
/**
* double click on the column sizer will auto ajust column width
* to fit the longest content among current rendered rows.
*
* @private
* @param {number} columnIndex (index of the column user double clicked)
* @param {React.MouseEvent} ev (mouse double click event)
*/
private _onSizerDoubleClick(columnIndex, ev);
/**
* Called when the select all toggle is clicked.
*/
private _onSelectAllClicked();
private _onRootMouseDown(ev);
private _onRootMouseMove(ev);
private _onRootKeyDown(ev);
/**
* mouse move event handler in the header
* it will set isSizing state to true when user clicked on the sizer and move the mouse.
*
* @private
* @param {React.MouseEvent} ev (mouse move event)
*/
private _onSizerMouseMove(ev);
private _onSizerBlur(ev);
/**
* mouse up event handler in the header
* clear the resize related state.
* This is to ensure we can catch double click event
*
* @private
* @param {React.MouseEvent} ev (mouse up event)
*/
private _onSizerMouseUp(ev);
private _onSelectionChanged();
private _onColumnClick(column, ev);
private _onColumnContextMenu(column, ev);
private _onToggleCollapseAll();
}