office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
105 lines (104 loc) • 4.5 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
import { IGroup, IGroupDividerProps } from './GroupedList.types';
import { IDragDropContext, IDragDropEvents, IDragDropHelper } from '../../utilities/dragdrop/index';
import { BaseComponent, IRenderFunction } from '../../Utilities';
import { ISelection, SelectionMode } from '../../utilities/selection/index';
import { List } from '../../List';
import { IViewport } from '../../utilities/decorators/withViewport';
export interface IGroupedListSectionProps extends React.Props<GroupedListSection> {
/**
* 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;
/** 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>;
}
export interface IGroupedListSectionState {
isDropping?: boolean;
isSelected?: boolean;
}
export declare class GroupedListSection extends BaseComponent<IGroupedListSectionProps, IGroupedListSectionState> {
refs: {
[key: string]: React.ReactInstance;
root: HTMLElement;
list: List;
};
private _subGroups;
private _dragDropSubscription;
constructor(props: IGroupedListSectionProps);
componentDidMount(): void;
componentWillUnmount(): void;
componentDidUpdate(previousProps: IGroupedListSectionProps): void;
render(): JSX.Element;
forceUpdate(): void;
forceListUpdate(): void;
private _onRenderGroupHeader(props);
private _onRenderGroupShowAll(props);
private _onRenderGroupFooter(props);
private _onSelectionChange();
private _onRenderGroupCell(onRenderCell, groupNestingDepth);
private _onRenderGroup(renderCount);
private _renderSubGroup(subGroup, subGroupIndex);
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(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();
}