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

Reusable React components for building experiences for Office 365.

/// <reference types="react" />
import * as React from 'react';
import { IGroup, IGroupDividerProps, IGroupRenderProps, IGroupedListStyles } from './GroupedList.types';
import { IDragDropContext, IDragDropEvents, IDragDropHelper } from '../../utilities/dragdrop/index';
import { BaseComponent, IRenderFunction, IClassNames } from '../../Utilities';
import { ISelection, SelectionMode } from '../../utilities/selection/index';
import { IViewport } from '../../utilities/decorators/withViewport';
import { IListProps } from '../List/index';
export interface IGroupedListSectionProps extends React.Props<GroupedListSection> {
    /** GroupedList resolved class names */
    groupedListClassNames?: IClassNames<IGroupedListStyles>;
    /**
     * Gets the component ref.
     */
    componentRef?: () => void;
    /** 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?: IGroupDividerProps;
    /** Grouping item limit. */
    getGroupItemLimit?: (group: IGroup) => number;
    /** Optional grouping instructions. */
    groupIndex?: number;
    /** Optional group nesting level. */
    groupNestingDepth?: number;
    /** Optional grouping instructions. */
    group?: IGroup;
    /** Optional override properties to render groups. */
    groupProps?: IGroupRenderProps;
    /** Information to pass in to the group header. */
    headerProps?: IGroupDividerProps;
    /** 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;
    /** Information to pass in to the group Show All footer. */
    showAllProps?: IGroupDividerProps;
    /** Optional Viewport, provided by the parent component. */
    viewport?: IViewport;
    /** Override for rendering the group header. */
    onRenderGroupHeader?: IRenderFunction<IGroupDividerProps>;
    /** Override for rendering the group Show All link. */
    onRenderGroupShowAll?: IRenderFunction<IGroupDividerProps>;
    /** Override for rendering the group footer. */
    onRenderGroupFooter?: IRenderFunction<IGroupDividerProps>;
    /**
     * Optional callback to determine whether the list should be rendered in full, or virtualized.
     * Virtualization will add and remove pages of items as the user scrolls them into the visible range.
     * This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists.
     * The default implementation will virtualize when this callback is not provided.
     */
    onShouldVirtualize?: (props: IListProps) => boolean;
}
export interface IGroupedListSectionState {
    isDropping?: boolean;
    isSelected?: boolean;
}
export declare class GroupedListSection extends BaseComponent<IGroupedListSectionProps, IGroupedListSectionState> {
    private _root;
    private _list;
    private _dragDropSubscription;
    constructor(props: IGroupedListSectionProps);
    componentDidMount(): void;
    componentWillUnmount(): void;
    componentDidUpdate(previousProps: IGroupedListSectionProps): void;
    render(): JSX.Element;
    forceUpdate(): void;
    forceListUpdate(): void;
    private _onRenderGroupHeader;
    private _onRenderGroupShowAll;
    private _onRenderGroupFooter;
    private _onSelectionChange();
    private _onRenderGroupCell(onRenderCell, groupNestingDepth);
    private _onRenderGroup(renderCount);
    private _renderSubGroup;
    private _returnOne();
    private _getGroupKey(group, index);
    /**
     * 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;
    /**
     * 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();
}