office-ui-fabric-react/lib-amd/components/DetailsList/DetailsList.Props.ts.js

Reusable React components for building experiences for Office 365.

define([], function() { return "import * as React from 'react';\r\nimport { DetailsList } from './DetailsList';\r\nimport {\r\n  ISelection,\r\n  SelectionMode\r\n} from '../../utilities/selection/index';\r\nimport {\r\n  IDragDropEvents,\r\n  IDragDropContext,\r\n} from './../../utilities/dragdrop/index';\r\nimport {\r\n  IGroup,\r\n  IGroupRenderProps\r\n} from '../GroupedList/index';\r\nimport { IDetailsRowProps } from '../DetailsList/DetailsRow';\r\nimport { IViewport } from '../../utilities/decorators/withViewport';\r\n\r\nexport interface IDetailsList {\r\n  /**\r\n   * Ensures that the list content is updated. Call this in cases where the list prop updates don't change, but the list\r\n   * still needs to be re-evaluated. For example, if a sizer bar is adjusted and causes the list width to change, you can\r\n   * call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.\r\n   */\r\n  forceUpdate: () => void;\r\n}\r\n\r\nexport interface IDetailsListProps extends React.Props<DetailsList> {\r\n  /** A key that uniquely identifies the given items. If provided, the selection will be reset when the key changes. */\r\n  setKey?: string;\r\n\r\n  /** The items to render. */\r\n  items: any[];\r\n\r\n  /**\r\n   * Optional default focused index to set focus to once the items have rendered and the index exists.\r\n   */\r\n  initialFocusedIndex?: number;\r\n\r\n  /** Optional class name to add to the root element. */\r\n  className?: string;\r\n\r\n  /** Optional grouping instructions. The definition for IGroup can be found under the GroupedList component. */\r\n  groups?: IGroup[];\r\n\r\n  /** Optional override properties to render groups. The definition for IGroupRenderProps can be found under the GroupedList component. */\r\n  groupProps?: IGroupRenderProps;\r\n\r\n  /** Optional selection model to track selection state.  */\r\n  selection?: ISelection;\r\n\r\n  /** Controls how/if the details list manages selection. */\r\n  selectionMode?: SelectionMode;\r\n\r\n  /** Controls how the columns are adjusted. */\r\n  layoutMode?: DetailsListLayoutMode;\r\n\r\n  /**\r\n   * Controls the visibility of selection check box.\r\n   * @default CheckboxVisibility.onHover\r\n   */\r\n  checkboxVisibility?: CheckboxVisibility;\r\n\r\n  /**\r\n   * Controls the visibility of the details header.\r\n   * @default true\r\n   */\r\n  isHeaderVisible?: boolean;\r\n\r\n  /** Given column defitions. If none are provided, default columns will be created based on the item's properties. */\r\n  columns?: IColumn[];\r\n\r\n  /** Controls how the list contrains overflow. */\r\n  constrainMode?: ConstrainMode;\r\n\r\n  /** Event names and corresponding callbacks that will be registered to rendered row elements. */\r\n  rowElementEventMap?: [{ eventName: string, callback: (context: IDragDropContext, event?: any) => void }];\r\n\r\n  /** Callback for when the details list has been updated. Useful for telemetry tracking externally. */\r\n  onDidUpdate?: (detailsList?: DetailsList) => any;\r\n\r\n  /** Callback for when a given row has been mounted. Useful for identifying when a row has been rendered on the page. */\r\n  onRowDidMount?: (item?: any, index?: number) => void;\r\n\r\n  /** Callback for when a given row has been mounted. Useful for identifying when a row has been removed from the page. */\r\n  onRowWillUnmount?: (item?: any, index?: number) => void;\r\n\r\n  /** Callback for when the user clicks on the column header. */\r\n  onColumnHeaderClick?: (ev?: React.MouseEvent<HTMLElement>, column?: IColumn) => void;\r\n\r\n  /** Callback for when the user asks for a contextual menu (usually via right click) from a column header. */\r\n  onColumnHeaderContextMenu?: (column?: IColumn, ev?: Event) => void;\r\n\r\n  /** Callback for when a given row has been invoked (by pressing enter while it is selected.) */\r\n  onItemInvoked?: (item?: any, index?: number, ev?: Event) => void;\r\n\r\n  /** Callback for when the context menu of an item has been accessed. */\r\n  onItemContextMenu?: (item?: any, index?: number, ev?: Event) => void;\r\n\r\n  /**\r\n   *  If provided, will allow the caller to override the default row rendering.\r\n   */\r\n  onRenderRow?: (props: IDetailsRowProps, defaultRender?: (props: IDetailsRowProps) => JSX.Element) => JSX.Element;\r\n\r\n  /**\r\n   * If provided, will be the \"default\" item column renderer method. This affects cells within the rows; not the rows themselves.\r\n   * If a column definition provides its own onRender method, that will be used instead of this.\r\n   */\r\n  onRenderItemColumn?: (item?: any, index?: number, column?: IColumn) => any;\r\n\r\n  /** Map of callback functions related to drag and drop functionality. */\r\n  dragDropEvents?: IDragDropEvents;\r\n\r\n  /** Callback for what to render when the item is missing. */\r\n  onRenderMissingItem?: (index?: number) => React.ReactNode;\r\n\r\n  /** Viewport, provided by the withViewport decorator. */\r\n  viewport?: IViewport;\r\n\r\n  /** Callback for when an item in the list becomes active by clicking anywhere inside the row or navigating to it with keyboard. */\r\n  onActiveItemChanged?: (item?: any, index?: number, ev?: React.FocusEvent<HTMLElement>) => void;\r\n\r\n  /** The aria-label attribute to stamp out on the list header */\r\n  ariaLabelForListHeader?: string;\r\n\r\n  /** The aria-label attribute to stamp out on select all checkbox for the list */\r\n  ariaLabelForSelectAllCheckbox?: string;\r\n\r\n  /** Optional callback to get the aria-label string for a given item. */\r\n  getRowAriaLabel?: (item: any) => string;\r\n\r\n  /** Optional callback to get the item key that will be used in the selection. */\r\n  getKey?: (item: any, index?: number) => string;\r\n\r\n  /** A text summary of the table set via aria-label. */\r\n  ariaLabel?: string;\r\n\r\n  /** Check button aria label for details list. */\r\n  checkButtonAriaLabel?: string;\r\n\r\n  /** Aria label for grid in details list. */\r\n  ariaLabelForGrid?: string;\r\n\r\n  /** Boolean value to indicate if the role application should be applied on details list. Set to false by default */\r\n  shouldApplyApplicationRole?: boolean;\r\n}\r\n\r\nexport interface IColumn {\r\n  /**\r\n   * A unique key for identifying the column.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Name to render on the column header.\r\n   */\r\n  name: string;\r\n\r\n  /**\r\n   * The field to pull the text value from for the column. This can be null if a custom\r\n   * onRender method is provided.\r\n   */\r\n  fieldName: string;\r\n\r\n  /**\r\n   * An optional class name to stick on the column cell within each row.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Minimum width for the column.\r\n   */\r\n  minWidth: number;\r\n\r\n  /**\r\n   * Optional accessibility label (aria-label) attribute that will be stamped on to the element.\r\n   * If none is specified, the arai-label attribute will contain the column name\r\n   */\r\n  ariaLabel?: string;\r\n\r\n  /**\r\n   * Optional flag on whether the column is a header for the given row. There should be only one column with\r\n   * row header set to true.\r\n   * @default false\r\n   */\r\n  isRowHeader?: boolean;\r\n\r\n  /**\r\n   * Maximum width for the column, if stretching is allowed in justified scenarios.\r\n   */\r\n  maxWidth?: number;\r\n\r\n  /**\r\n   * Defines how the column's header should render.\r\n   * @default ColumnActionsMode.clickable */\r\n  columnActionsMode?: ColumnActionsMode;\r\n\r\n  /**\r\n   * Icon name to show in addition to the text.\r\n   */\r\n  iconClassName?: string;\r\n\r\n  /**\r\n   * If specified will allow the column to be collapsed when rendered in justified layout.\r\n   */\r\n  isCollapsable?: boolean;\r\n\r\n  /**\r\n   * Determines if the column is currently sorted. Renders a sort arrow in the column header.\r\n   */\r\n  isSorted?: boolean;\r\n\r\n  /**\r\n   * Determines if the arrow is pointed down (descending) or up.\r\n   */\r\n  isSortedDescending?: boolean;\r\n\r\n  /**\r\n   * Determines if the column can be resized.\r\n   */\r\n  isResizable?: boolean;\r\n\r\n  /**\r\n   * Determines if the column can render multi-line text.\r\n   */\r\n  isMultiline?: boolean;\r\n\r\n  /**\r\n   * If provided uses this method to render custom cell content, rather than the default text rendering.\r\n   */\r\n  onRender?: (item?: any, index?: number, column?: IColumn) => any;\r\n\r\n  /**\r\n   * Determines if the column is filtered, and if so shows a filter icon.\r\n   */\r\n  isFiltered?: boolean;\r\n\r\n  /**\r\n   * If provided, will be executed when the user clicks on the column header.\r\n   */\r\n  onColumnClick?: (ev?: React.MouseEvent<HTMLElement>, column?: IColumn) => any;\r\n\r\n  /**\r\n   * If provided, will be executed when the user accesses the contextmenu on a column header.\r\n   */\r\n  onColumnContextMenu?: (column?: IColumn, ev?: React.MouseEvent<HTMLElement>) => any;\r\n\r\n  /**\r\n   * If set will show a grouped icon next to the column header name.\r\n   */\r\n  isGrouped?: boolean;\r\n\r\n  /**\r\n   * Arbitrary data passthrough which can be used by the caller.\r\n   */\r\n  data?: any;\r\n\r\n  /**\r\n   * Internal only value.\r\n   */\r\n  calculatedWidth?: number;\r\n\r\n  /**\r\n   * An optional class name to stick on the column cell within each header.\r\n   */\r\n  headerClassName?: string;\r\n}\r\n\r\n/**\r\n * Enum to describe how a particular column header behaves.... This enum is used to\r\n * to specify the property IColumn:columnActionsMode.\r\n * If IColumn:columnActionsMode is undefined, then it's equivalent to ColumnActionsMode.clickable\r\n */\r\nexport enum ColumnActionsMode {\r\n  /**\r\n   * Renders the column header as disabled.\r\n   */\r\n  disabled,\r\n\r\n  /**\r\n   * Renders the column header is clickable.\r\n   */\r\n  clickable,\r\n\r\n  /**\r\n   * Renders the column header ias clickable and displays the dropdown cheveron.\r\n   */\r\n  hasDropdown\r\n}\r\n\r\nexport enum ConstrainMode {\r\n  /** If specified, lets the content grow which allows the page to manage scrolling. */\r\n  unconstrained,\r\n\r\n  /**\r\n   * If specified, constrains the list to the given layout space.\r\n   */\r\n  horizontalConstrained\r\n}\r\n\r\nexport enum DetailsListLayoutMode {\r\n  /**\r\n   * Lets the user resize columns and makes not attempt to fit them.\r\n   */\r\n  fixedColumns,\r\n\r\n  /**\r\n   * Manages which columns are visible, tries to size them according to their min/max rules and drops\r\n   * off columns that can't fit and have isCollapsable set.\r\n   */\r\n  justified\r\n}\r\n\r\nexport enum CheckboxVisibility {\r\n  /**\r\n   * Visible on hover.\r\n   */\r\n  onHover,\r\n\r\n  /**\r\n   * Visible always.\r\n   */\r\n  always,\r\n\r\n  /**\r\n   * Hide checkboxes.\r\n   */\r\n  hidden\r\n}\r\n"; });