office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
97 lines (96 loc) • 3.98 kB
TypeScript
/// <reference types="react" />
import * as React from 'react';
import { BaseComponent } from '../../Utilities';
import { IColumn, CheckboxVisibility } from './DetailsList.types';
import { IDetailsRowCheckProps } from './DetailsRowCheck';
import { ISelection, SelectionMode } from '../../utilities/selection/interfaces';
import { CollapseAllVisibility } from '../../GroupedList';
import { IDragDropHelper, IDragDropEvents } from './../../utilities/dragdrop/interfaces';
import { IViewport } from '../../utilities/decorators/withViewport';
export interface IDetailsRowProps extends React.Props<DetailsRow> {
componentRef?: () => void;
item: any;
itemIndex: number;
columns: IColumn[];
compact?: boolean;
selectionMode: SelectionMode;
selection: ISelection;
eventsToRegister?: {
eventName: string;
callback: (item?: any, index?: number, event?: any) => void;
}[];
onDidMount?: (row?: DetailsRow) => void;
onWillUnmount?: (row?: DetailsRow) => void;
onRenderCheck?: (props: IDetailsRowCheckProps) => JSX.Element;
onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => any;
dragDropEvents?: IDragDropEvents;
dragDropHelper?: IDragDropHelper;
groupNestingDepth?: number;
viewport?: IViewport;
checkboxVisibility?: CheckboxVisibility;
collapseAllVisibility?: CollapseAllVisibility;
getRowAriaLabel?: (item: any) => string;
getRowAriaDescribedBy?: (item: any) => string;
checkButtonAriaLabel?: string;
checkboxCellClassName?: string;
className?: string;
}
export interface IDetailsRowSelectionState {
isSelected: boolean;
isSelectionModal: boolean;
}
export interface IDetailsRowState {
selectionState?: IDetailsRowSelectionState;
columnMeasureInfo?: {
index: number;
column: IColumn;
onMeasureDone: (measuredWidth: number) => void;
};
isDropping?: boolean;
groupNestingDepth?: number;
}
export declare class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState> {
refs: {
[key: string]: React.ReactInstance;
cellMeasurer: HTMLElement;
};
private _root;
private _focusZone;
private _hasSetFocus;
private _droppingClassNames;
private _hasMounted;
private _dragDropSubscription;
constructor(props: IDetailsRowProps);
componentDidMount(): void;
componentDidUpdate(previousProps: IDetailsRowProps): void;
componentWillUnmount(): void;
componentWillReceiveProps(newProps: IDetailsRowProps): void;
render(): JSX.Element;
/**
* measure cell at index. and call the call back with the measured cell width when finish measure
*
* @param {number} index (the cell index)
* @param {(width: number) => void} onMeasureDone (the call back function when finish measure)
*/
measureCell(index: number, onMeasureDone: (width: number) => void): void;
focus(): boolean;
protected _onRenderCheck(props: IDetailsRowCheckProps): JSX.Element;
private _getSelectionState(props);
private _onSelectionChanged();
private _onToggleSelection();
private _onRootRef(focusZone);
private _getRowDragDropOptions();
/**
* update isDropping state based on the input value, which is used to change style during drag and drop
*
* when change to true, that means drag enter. we will add default dropping class name
* or the custom dropping class name (return result from onDragEnter) to the root elemet.
*
* when change to false, that means drag leave. we will remove the dropping class name from root element.
*
* @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(newValue, event);
}