Overflow List

Introduction

OverflowList takes a generic list of items and renders as many items as can fit inside itself. Overflowed items that do not fit are collapsed into a single element. The visible items will be recomputed when a resize is detected.

OverflowList is used by the

Breadcrumbs
component to render a collapsible path to the current resource.

Examples

folder-closeAll filesfolder-closeUsersfolder-closeJanetfolder-closePhotosfolder-closeWednesdaydocumentimage.jpg

Usage

OverflowList

To use the OverflowList component, you must pass a list of items, as well as two rendering functions: overflowRenderer and visibleItemRenderer. The component will call these functions with the appropriate items to determine the appearance of the visible and hidden items.

import React from "react";
import { OverflowList, Popover, Menu, MenuItem, Button, Icon } from "@commure/components-foundation";
function MyOverflowList() {
return (
<OverflowList
items={[
{ icon: "folder-close", text: "All files" },
{ icon: "folder-close", text: "Users" },
{ icon: "folder-close", text: "Janet" },
{ icon: "folder-close", text: "Photos" },
{ icon: "folder-close", text: "Wednesday" },
{ icon: "document", text: "image.jpg", current: true },
]}
overflowRenderer={items => (
<Popover
content={(
<Menu>
{(items.map(({icon, text}, i) => (<MenuItem key={i} icon={icon} text={text} />)))}
</Menu>
)}
>
<Button style={{ marginRight: 10 }}>...</Button>
</Popover>
)}
visibleItemRenderer={({icon, text, current}, index) => (
<span style={{marginRight: 10}} key={index}><Icon icon={icon} />{text}</span>
)}
/>
);
}
export default MyOverflowList;

API Reference

OverflowList

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
collapseFromfalseBoundaryWhich direction the items should collapse from: start or end of the children. This also determines whether `overflowRenderer` appears before (`START`) or after (`END`) the visible items.
itemstrueT[]All items to display in the list. Items that do not fit in the container will be rendered in the overflow instead.
minVisibleItemsfalsenumberThe minimum number of visible items that should never collapse into the overflow menu, regardless of DOM dimensions.
observeParentsfalsebooleanIf `true`, all parent DOM elements of the container will also be observed. If changes to a parent's size is detected, the overflow will be recalculated. Only enable this prop if the overflow should be recalculated when a parent element resizes in a way that does not also cause the `OverflowList` to resize.
onOverflowfalse(overflowItems: T[]) => voidCallback invoked when the overflowed items change. This is called once after the DOM has settled, rather that on every intermediate change. It is not invoked if resizing produces an unchanged overflow state.
overflowRenderertrue(overflowItems: T[]) => React.ReactNodeCallback invoked to render the overflowed items. Unlike `visibleItemRenderer`, this prop is invoked once with all items that do not fit in the container. Typical use cases for this prop will put overflowed items in a dropdown menu or display a "+X items" label.
stylefalseCSSPropertiesCSS properties to apply to the root element.
tagNamefalsekeyof IntrinsicElementsHTML tag name for the container element.
visibleItemRenderertrue(item: T, index: number) => React.ReactChildCallback invoked to render each visible item. Remember to set a `key` on the rendered element!

Related Reading

Blueprint Reference
Breadcrumbs Documentation