@carbon/ibm-security/es/components/DelimitedList/DelimitedList.js

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "delimiter", "items", "truncate"];
/**
 * @file Delimited list.
 * @copyright IBM Security 2019 - 2021
 */

import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { useLayoutEffect, useRef, useState } from 'react';
import { getComponentNamespace } from '../../globals/namespace';
var namespace = getComponentNamespace('delimited-list');

/**
 * Delimited List component.
 */
function DelimitedList(_ref) {
  var className = _ref.className,
    delimiter = _ref.delimiter,
    items = _ref.items,
    truncate = _ref.truncate,
    other = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hasOverflow = _useState2[0],
    setHasOverflow = _useState2[1];
  var element = useRef(null);

  // Use ref to compare the element's `scrollWidth` (full width with overflow)
  // to its `clientWidth` (innner width, not including overflow).
  useLayoutEffect(function () {
    if (element && element.current && element.current.scrollWidth > element.current.clientWidth) {
      return setHasOverflow(true);
    }
    return setHasOverflow(false);
  }, [items]);
  var classes = classnames(namespace, className);
  var valueClasses = classnames("".concat(namespace, "__value"), _defineProperty({}, "".concat(namespace, "__value--truncated"), truncate));
  return /*#__PURE__*/React.createElement("div", _extends({
    className: classes,
    title: hasOverflow ? items.join(delimiter) : undefined
  }, other), /*#__PURE__*/React.createElement("div", {
    ref: element,
    className: valueClasses
  }, items.length > 0 ? items.join(delimiter) : '–'), hasOverflow && truncate && items.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "".concat(namespace, "__count")
  }, "[".concat(items.length, "]")));
}
DelimitedList.propTypes = {
  /** Provide an optional class to be applied to the containing node */
  className: PropTypes.string,
  /** Delimiter used when rendering the items */
  delimiter: PropTypes.string,
  /** Array of items to render */
  items: PropTypes.arrayOf(PropTypes.any),
  /** Specify whether the `DelimitedList` is truncated if it overflows */
  truncate: PropTypes.bool
};
DelimitedList.defaultProps = {
  className: undefined,
  delimiter: ', ',
  items: [],
  truncate: true
};
export default DelimitedList;