office-ui-fabric-react/lib-amd/components/GroupedList/Group.d.ts

Reusable React components for building experiences for Office 365.

import * as React from 'react';
import { IGroup, IGroupFooterProps, IGroupHeaderProps } from './GroupedList.Props';
import { IDragDropContext, IDragDropEvents, IDragDropHelper } from '../../utilities/dragdrop/index';
import { ISelection, SelectionMode } from '../../utilities/selection/index';
import { GroupFooter } from './GroupFooter';
import { GroupHeader } from './GroupHeader';
import { List } from '../../List';
import { IViewport } from '../../utilities/decorators/withViewport';
export interface IGroupProps extends React.Props<Group> {
    /** Map of callback functions related to drag and drop functionality. */
    dragDropEvents?: IDragDropEvents;
    /** helper to manage drag/drop across item rows and groups */
    dragDropHelper?: IDragDropHelper;
    /** Event names and corresponding callbacks that will be registered to the group and the rendered elements */
    eventsToRegister?: [{
        eventName: string;
        callback: (context: IDragDropContext, event?: any) => void;
    }];
    /** Information to pass in to the group footer. */
    footerProps?: IGroupFooterProps;
    /** Grouping item limit. */
    getGroupItemLimit?: (group: IGroup) => number;
    /** Optional grouping instructions. */
    groupIndex?: number;
    /** Optional group nesting level. */
    groupNestingDepth?: number;
    /** Optional grouping instructions. */
    group?: IGroup;
    /** Information to pass in to the group header. */
    headerProps?: IGroupHeaderProps;
    /** List of items to render. */
    items: any[];
    /** Optional list props to pass to list renderer.  */
    listProps?: any;
    /** Rendering callback to render the group items. */
    onRenderCell: (nestingDepth?: number, item?: any, index?: number) => React.ReactNode;
    /** Optional selection model to track selection state.  */
    selection?: ISelection;
    /** Controls how/if the details list manages selection. */
    selectionMode?: SelectionMode;
    /** Optional Viewport, provided by the parent component. */
    viewport?: IViewport;
}
export interface IGroupState {
    isDropping?: boolean;
}
export declare class Group extends React.Component<IGroupProps, IGroupState> {
    refs: {
        [key: string]: React.ReactInstance;
        root: HTMLElement;
        footer: GroupFooter;
        header: GroupHeader;
        list: List;
    };
    private _events;
    private _dragDropKey;
    constructor(props: IGroupProps);
    componentDidMount(): void;
    componentWillUnmount(): void;
    render(): any;
    forceUpdate(): void;
    forceListUpdate(): void;
    private _onRenderGroup(renderCount);
    private _renderSubGroup(subGroup, subGroupIndex);
    private _getGroupKey(group, groupIndex);
    /**
     * collect all the data we need to enable drag/drop for a group
     */
    private _getGroupDragDropOptions();
    /**
     * update groupIsDropping state based on the input value, which is used to change style during drag and drop
     *
     * @private
     * @param {boolean} newValue (new isDropping state value)
     * @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
     */
    private _updateDroppingState(newIsDropping, event);
    /**
     * get the correct css class to reflect the dropping state for a given group
     *
     * If the group is the current drop target, return the default dropping class name
     * Otherwise, return '';
     *
     */
    private _getDroppingClassName();
}