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

Carbon for Cloud & Cognitive IBM Security UI components

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["addButtonDisabled", "addLabel", "className", "disable", "items", "itemToString", "label", "onAddButton", "onChange", "labels"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @file Tag wall.
 * @copyright IBM Security 2019 - 2021
 */

import classnames from 'classnames';
import { arrayOf, bool, func, shape, string, object } from 'prop-types';
import React from 'react';
import { getComponentNamespace } from '../../globals/namespace/index';
import * as defaultLabels from '../../globals/nls';
import defaultItemToString from '../__tools__/defaultItemToString';
import Button from '../Button';
import InteractiveTag from '../InteractiveTag';
var namespace = getComponentNamespace('tag-wall');
var noop = function noop() {};
export var type = 'UNSELECT_ITEM';

/**
 * Tag wall component.
 */
var TagWall = function TagWall(_ref) {
  var addButtonDisabled = _ref.addButtonDisabled,
    addLabel = _ref.addLabel,
    className = _ref.className,
    disable = _ref.disable,
    items = _ref.items,
    itemToString = _ref.itemToString,
    label = _ref.label,
    onAddButton = _ref.onAddButton,
    onChange = _ref.onChange,
    labels = _ref.labels,
    other = _objectWithoutProperties(_ref, _excluded);
  var _defaultLabels$labels = _objectSpread(_objectSpread(_objectSpread({}, defaultLabels.labels), defaultLabels.filterFalsey({
      TAG_WALL_ADD_BUTTON: addLabel,
      TAG_WALL_LABEL: label
    })), labels),
    TAG_WALL_ADD_BUTTON = _defaultLabels$labels.TAG_WALL_ADD_BUTTON,
    TAG_WALL_LABEL = _defaultLabels$labels.TAG_WALL_LABEL,
    TAG_WALL_REMOVE_BUTTON = _defaultLabels$labels.TAG_WALL_REMOVE_BUTTON;
  return /*#__PURE__*/React.createElement("section", _extends({
    className: classnames(namespace, className),
    "aria-label": TAG_WALL_LABEL
  }, other), TAG_WALL_LABEL && /*#__PURE__*/React.createElement("h2", {
    className: "".concat(namespace, "__label")
  }, TAG_WALL_LABEL), items.map(function (item, index) {
    var key = "tag__".concat(index);
    return /*#__PURE__*/React.createElement(InteractiveTag, _extends({
      id: item.id,
      key: key,
      isSelected: item.isSelected,
      onRemove: function onRemove(event) {
        event.stopPropagation();
        onChange({
          item: item,
          type: type
        });
      },
      removable: !disable,
      removeBtnLabel: TAG_WALL_REMOVE_BUTTON,
      type: "gray"
    }, item.props), itemToString(item));
  }), !addButtonDisabled && /*#__PURE__*/React.createElement(Button, {
    disabled: disable,
    kind: "ghost",
    onClick: onAddButton,
    size: "small"
  }, TAG_WALL_ADD_BUTTON));
};
TagWall.propTypes = {
  /** @type {boolean} Determines whether or not the 'add' button is disabled. */
  addButtonDisabled: bool,
  /** @type {string} Label for button that adds tag. */
  addLabel: string,
  /** @type {string} Extra classes to add. */
  className: string,
  /** @type {boolean} Determines whether or not tag management is enabled. */
  disable: bool,
  /** @type {Function} Function that converts object to string. */
  itemToString: func,
  /** @type {Array.<Record<string, boolean>>} List of tags to be consumed. */
  items: arrayOf(shape({
    id: string.isRequired,
    isSelected: bool,
    label: string.isRequired,
    props: object
  })).isRequired,
  /** @type {string} Description label. */
  label: string,
  /** @type {Record<string, any>} Default translation labels object. */
  labels: defaultLabels.propType,
  /** @type {Function} Handles `onClick` for the 'add' button. */
  onAddButton: func,
  /** @type {Function} Communicates to the consuming component any changes to the tags. */
  onChange: func
};
TagWall.defaultProps = {
  addButtonDisabled: false,
  addLabel: '',
  className: '',
  disable: false,
  itemToString: defaultItemToString,
  label: null,
  labels: {},
  onAddButton: noop,
  onChange: noop
};
export default TagWall;