office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 6.8 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n GroupedList\r\n} from './GroupedList';\r\nimport {\r\n IListProps\r\n} from '../../List';\r\nimport { IRenderFunction } from '../../common/IRenderFunction';\r\nimport {\r\n IDragDropContext,\r\n IDragDropEvents,\r\n IDragDropHelper\r\n} from '../../utilities/dragdrop/index';\r\nimport {\r\n ISelection,\r\n SelectionMode\r\n} from '../../utilities/selection/index';\r\nimport { IViewport } from '../../utilities/decorators/withViewport';\r\n\r\nexport interface IGroupedList {\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\n * Toggles the collapsed state of all the groups in the list.\r\n */\r\n toggleCollapseAll: (allCollapsed: boolean) => void;\r\n}\r\n\r\nexport interface IGroupedListProps extends React.Props<GroupedList> {\r\n /** Optional class name to add to the root element. */\r\n className?: string;\r\n\r\n /** Map of callback functions related to drag and drop functionality. */\r\n dragDropEvents?: IDragDropEvents;\r\n\r\n /** helper to manage drag/drop across item and groups */\r\n dragDropHelper?: IDragDropHelper;\r\n\r\n /** Event names and corresponding callbacks that will be registered to groups and rendered elements */\r\n eventsToRegister?: [{ eventName: string, callback: (context: IDragDropContext, event?: any) => void }];\r\n\r\n /** Optional override properties to render groups. */\r\n groupProps?: IGroupRenderProps;\r\n\r\n /** Optional grouping instructions. */\r\n groups?: IGroup[];\r\n\r\n /** List of items to render. */\r\n items: any[];\r\n\r\n /** Optional properties to pass through to the list components being rendered. */\r\n listProps?: IListProps;\r\n\r\n /** Rendering callback to render the group items. */\r\n onRenderCell: (\r\n nestingDepth?: number,\r\n item?: any,\r\n index?: number\r\n ) => React.ReactNode;\r\n\r\n /** Optional selection model to track selection state. */\r\n selection?: ISelection;\r\n\r\n /** Controls how/if the list manages selection. */\r\n selectionMode?: SelectionMode;\r\n\r\n /** Optional Viewport, provided by the parent component. */\r\n viewport?: IViewport;\r\n\r\n /** Optional callback when the group expand state changes between all collapsed and at least one group is expanded. */\r\n onGroupExpandStateChanged?: (isSomeGroupExpanded: boolean) => void;\r\n}\r\n\r\nexport interface IGroup {\r\n /**\r\n * Unique identifier for the group.\r\n */\r\n key: string;\r\n\r\n /**\r\n * Display name for the group, rendered on the header.\r\n */\r\n name: string;\r\n\r\n /**\r\n * Start index for the group within the given items.\r\n */\r\n startIndex: number;\r\n\r\n /**\r\n * How many items should be rendered within the group.\r\n */\r\n count: number;\r\n\r\n /**\r\n * Nested groups, if any.\r\n */\r\n children?: IGroup[];\r\n\r\n /**\r\n * Number indicating the level of nested groups.\r\n */\r\n level?: number;\r\n\r\n /**\r\n * @deprecated\r\n * This is no longer supported. Selection state will be controled by the selection store only. Will be removed in 1.0.0.\r\n */\r\n isSelected?: boolean;\r\n\r\n /**\r\n * If all the items in the group are collapsed.\r\n */\r\n isCollapsed?: boolean;\r\n\r\n /**\r\n * If the items within the group are summarized or showing all.\r\n */\r\n isShowingAll?: boolean;\r\n\r\n /**\r\n * If drag/drop is enabled for the group header.\r\n */\r\n isDropEnabled?: boolean;\r\n\r\n /**\r\n * Arbitrary data required to be preserved by the caller.\r\n */\r\n data?: any;\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 group name\r\n */\r\n ariaLabel?: string;\r\n}\r\n\r\nexport interface IGroupRenderProps {\r\n /** Boolean indicating if all groups are in collapsed state. */\r\n isAllGroupsCollapsed?: boolean;\r\n\r\n /** Grouping item limit. */\r\n getGroupItemLimit?: (group: IGroup) => number;\r\n\r\n /** Callback for when all groups are expanded or collapsed. */\r\n onToggleCollapseAll?: (isAllCollapsed: boolean) => void;\r\n\r\n /** Information to pass in to the group header. */\r\n headerProps?: IGroupDividerProps;\r\n\r\n /** Information to pass in to the group footer. */\r\n footerProps?: IGroupDividerProps;\r\n\r\n /**\r\n * Override which allows the caller to provide a custom header.\r\n */\r\n onRenderHeader?: IRenderFunction<IGroupDividerProps>;\r\n\r\n /**\r\n * Override which allows the caller to provider a customer footer.\r\n */\r\n onRenderFooter?: IRenderFunction<IGroupDividerProps>;\r\n}\r\n\r\nexport interface IGroupDividerProps {\r\n /** Callback to determine if a group has missing items and needs to load them from the server. */\r\n isGroupLoading?: (group: IGroup) => boolean;\r\n\r\n /** Text shown on group headers to indicate the group is being loaded. */\r\n loadingText?: string;\r\n\r\n /** The group to be rendered by the header. */\r\n group?: IGroup;\r\n\r\n /** The index of the group. */\r\n groupIndex?: number;\r\n\r\n /** The indent level of the group. */\r\n groupLevel?: number;\r\n\r\n /** If all items in the group are selected. */\r\n selected?: boolean;\r\n\r\n /**\r\n * @deprecated\r\n * Deprecated at v.65.1 and will be removed by v 1.0. Use 'selected' instead.\r\n */\r\n isSelected?: boolean;\r\n\r\n /** A reference to the viewport in which the header is rendered. */\r\n viewport?: IViewport;\r\n\r\n /** The selection mode of the list the group lives within. */\r\n selectionMode?: SelectionMode;\r\n\r\n /** Text to display for the group footer show all link. */\r\n showAllLinkText?: string;\r\n\r\n /** Callback for when the \"Show All\" link in group footer is clicked */\r\n onToggleSummarize?: (group: IGroup) => void;\r\n\r\n /** Callback for when the group header is clicked. */\r\n onGroupHeaderClick?: (group: IGroup) => void;\r\n\r\n /** Callback for when the group is expanded or collapsed. */\r\n onToggleCollapse?: (group: IGroup) => void;\r\n\r\n /** Callback for when the group is selected. */\r\n onToggleSelectGroup?: (group: IGroup) => void;\r\n\r\n /** Determines if the group selection check box is shown for collapsed groups. */\r\n isCollapsedGroupSelectVisible?: boolean;\r\n}\r\n"; });