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.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

All filesUsersJanetPhotosWednesdayimage.jpg
Edit code

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.

1import React from "react";
2import {
3  OverflowList,
4  Popover,
5  Menu,
6  MenuItem,
7  Button,
8  Icon
9} from "@commure/components-foundation";
10
11function MyOverflowList() {
12  return (
13    <OverflowList
14      items={[
15        { icon: "folder-close", text: "All files" },
16        { icon: "folder-close", text: "Users" },
17        { icon: "folder-close", text: "Janet" },
18        { icon: "folder-close", text: "Photos" },
19        { icon: "folder-close", text: "Wednesday" },
20        { icon: "document", text: "image.jpg", current: true }
21      ]}
22      overflowRenderer={items => (
23        <Popover
24          content={
25            <Menu>
26              {items.map(({ icon, text }, i) => (
27                <MenuItem key={i} icon={icon} text={text} />
28              ))}
29            </Menu>
30          }
31        >
32          <Button style={{ marginRight: 10 }}>...</Button>
33        </Popover>
34      )}
35      visibleItemRenderer={({ icon, text, current }, index) => (
36        <span style={{ marginRight: 10 }} key={index}>
37          <Icon icon={icon} />
38          {text}
39        </span>
40      )}
41    />
42  );
43}
44
45export default MyOverflowList;

API Reference

OverflowList

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
collapseFrom	false	Boundary	Which 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.
items	true	T[]	All items to display in the list. Items that do not fit in the container will be rendered in the overflow instead.
minVisibleItems	false	number	The minimum number of visible items that should never collapse into the overflow menu, regardless of DOM dimensions.
observeParents	false	boolean	If `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.
onOverflow	false	(overflowItems: T[]) => void	Callback 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.
overflowRenderer	true	(overflowItems: T[]) => React.ReactNode	Callback 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.
style	false	CSSProperties	CSS properties to apply to the root element.
tagName	false	keyof IntrinsicElements	HTML tag name for the container element.
visibleItemRenderer	true	(item: T, index: number) => React.ReactChild	Callback invoked to render each visible item. Remember to set a `key` on the rendered element!

Related Reading

Blueprint Reference

Breadcrumbs Documentation