@carbon/ibm-products
Version:
Carbon for IBM Products
135 lines (133 loc) • 5.06 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { useIsomorphicEffect } from "../../global/js/hooks/useIsomorphicEffect.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import React, { Children, useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { Button, usePrefix } from "@carbon/react";
//#region src/components/TruncatedList/TruncatedList.tsx
/**
* Copyright IBM Corp. 2024, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const blockClass = `${pkg.prefix}--truncated-list`;
const componentName = "TruncatedList";
const defaults = {
as: "ul",
collapsedItemsLimit: 5,
expandedItemsLimit: 10,
onClick: () => {},
viewLessLabel: "View less",
viewMoreLabel: (value) => `View more (${value})`
};
/**
* The `TruncatedList` allows consumers to control how many items are
* revealed to the user while giving the user the ability to expand
* and see the entire list.
*/
const TruncatedList = React.forwardRef(({ children, className, as: List = defaults.as, buttonClassName, collapsedItemsLimit = defaults.collapsedItemsLimit, expandedItemsLimit = defaults.expandedItemsLimit, onClick = defaults.onClick, viewLessLabel = defaults.viewLessLabel, viewMoreLabel = defaults.viewMoreLabel, ...rest }, ref) => {
const childrenArray = Children.toArray(children);
const minItems = Math.max(collapsedItemsLimit, 1);
const maxItems = Math.min(expandedItemsLimit, childrenArray.length);
const [isCollapsed, setIsCollapsed] = useState(true);
const [listHeight, setListHeight] = useState(minItems * 16);
const listRef = useRef(void 0);
const carbonPrefix = usePrefix();
const handleToggle = () => {
setIsCollapsed((prev) => !prev);
};
useEffect(() => {
onClick(isCollapsed);
}, [isCollapsed, onClick]);
useEffect(() => {
if (listRef && childrenArray.length > 0) {
const numItemsToShow = isCollapsed ? minItems : maxItems;
const items = listRef.current?.childNodes;
let listHeight = 0;
for (let index = 0; index < numItemsToShow; index++) if (items && items[index]) {
const itemElement = items[index];
const height = window?.getComputedStyle(itemElement)?.height || "16";
listHeight += parseInt(height);
}
setListHeight(listHeight);
}
}, [
childrenArray,
minItems,
maxItems,
isCollapsed,
listRef
]);
useIsomorphicEffect(() => {
if (listRef.current) listRef.current.style.height = `${listHeight}px`;
}, [listHeight]);
return /* @__PURE__ */ React.createElement("div", {
...rest,
className: (0, import_classnames.default)(blockClass, className, isCollapsed ? `${blockClass}--collapsed` : `${blockClass}--expanded`, !isCollapsed && childrenArray.length <= maxItems && `${blockClass}--expanded-all`),
ref,
...getDevtoolsProps(componentName)
}, /* @__PURE__ */ React.createElement(List, {
className: `${blockClass}__list`,
ref: listRef
}, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /* @__PURE__ */ React.createElement(Button, {
className: (0, import_classnames.default)(`${blockClass}__button`, `${carbonPrefix}--link`, buttonClassName),
kind: "ghost",
size: "sm",
onClick: handleToggle
}, isCollapsed ? viewMoreLabel(childrenArray.length - minItems) : viewLessLabel));
});
TruncatedList.displayName = componentName;
TruncatedList.propTypes = {
/**
* The type of list element to render.
* This could be a `ul`, `ol`, or a custom React component.
*/
as: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
/**
* Optional class name for expand/collapse button.
*/
buttonClassName: PropTypes.string,
/**
* The contents of the TruncatedList.
*/
children: PropTypes.node.isRequired,
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* Number of items to render and display when the list is truncated and collapsed.
* Scrolling is not enabled when collapsed. The smallest number is 1.
*/
collapsedItemsLimit: PropTypes.number,
/**
* Maximum number of items to show when the list is expanded. All
* items are rendered when the list is expanded. Scrolling is enabled
* if there are more items to display than this number.
*/
expandedItemsLimit: PropTypes.number,
/**
* Optional callback reports the collapsed state of the list.
*/
onClick: PropTypes.func,
/**
* Text label for when the list is expanded.
*/
viewLessLabel: PropTypes.string,
/**
* Callback function for building the label when the list is collapsed.
*/
viewMoreLabel: PropTypes.func
};
//#endregion
export { TruncatedList };