office-ui-fabric-react/lib/components/DetailsList/DetailsHeader.base.d.ts

Reusable React components for building experiences for Office 365.

/// <reference types="react" />
import { BaseComponent } from '../../Utilities';
import { IDetailsHeaderBaseProps } from './DetailsList.types';
import { CollapseAllVisibility } from '../../GroupedList';
import { IColumnResizeDetails, SelectAllVisibility, IColumnReorderHeaderProps } from './DetailsHeader.types';
export interface IDetailsHeader {
    focus: () => boolean;
}
export interface IDetailsHeaderState {
    columnReorderProps?: IColumnReorderHeaderProps;
    columnResizeDetails?: IColumnResizeDetails;
    isAllSelected?: boolean;
    isSizing?: boolean;
    groupNestingDepth?: number;
    isAllCollapsed?: boolean;
}
export declare class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, IDetailsHeaderState> implements IDetailsHeader {
    static defaultProps: {
        selectAllVisibility: SelectAllVisibility;
        collapseAllVisibility: CollapseAllVisibility;
    };
    private _classNames;
    private _rootElement;
    private _rootComponent;
    private _id;
    private _draggedColumnIndex;
    private _dropHintDetails;
    private _dragDropHelper;
    private _currentDropHintIndex;
    private _subscriptionObject;
    private _onDropIndexInfo;
    constructor(props: IDetailsHeaderBaseProps);
    componentDidMount(): void;
    componentDidUpdate(prevProps: IDetailsHeaderBaseProps): void;
    componentWillReceiveProps(newProps: IDetailsHeaderBaseProps): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    /** Set focus to the active thing in the focus area. */
    focus(): boolean;
    private _getHeaderDragDropOptions();
    private _updateDroppingState(newValue, event);
    private _isValidCurrentDropHintIndex();
    private _onDragOver(item, event);
    private _onDrop(item?, event?);
    private _setDraggedItemIndex(itemIndex);
    private _updateDragInfo(props, event?);
    private _resetDropHints();
    private _updateDropHintElement(element, property);
    private _getDropHintPositions;
    /**
     * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible
     *
     */
    private _computeDropHintToBeShown;
    private _isEventOnHeader(event);
    private _renderColumnSizer;
    private _renderColumnDivider(columnIndex);
    private _renderDropHint(dropHintIndex);
    private _onRenderColumnHeaderTooltip;
    /**
     * 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;
    private _onRootMouseMove;
    private _onRootRef;
    private _onRootKeyDown;
    /**
     * 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;
    private _onSizerBlur;
    /**
     * 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;
    private _onSelectionChanged();
    private _onToggleCollapseAll();
}