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

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.type = exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = require("prop-types");
var _react = _interopRequireDefault(require("react"));
var _index = require("../../globals/namespace/index");
var defaultLabels = _interopRequireWildcard(require("../../globals/nls"));
var _defaultItemToString = _interopRequireDefault(require("../__tools__/defaultItemToString"));
var _Button = _interopRequireDefault(require("../Button"));
var _InteractiveTag = _interopRequireDefault(require("../InteractiveTag"));
var _excluded = ["addButtonDisabled", "addLabel", "className", "disable", "items", "itemToString", "label", "onAddButton", "onChange", "labels"];
/**
 * @file Tag wall.
 * @copyright IBM Security 2019 - 2021
 */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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) { (0, _defineProperty2.default)(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; }
var namespace = (0, _index.getComponentNamespace)('tag-wall');
var noop = function noop() {};
var type = exports.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 = (0, _objectWithoutProperties2.default)(_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.default.createElement("section", (0, _extends2.default)({
    className: (0, _classnames.default)(namespace, className),
    "aria-label": TAG_WALL_LABEL
  }, other), TAG_WALL_LABEL && /*#__PURE__*/_react.default.createElement("h2", {
    className: "".concat(namespace, "__label")
  }, TAG_WALL_LABEL), items.map(function (item, index) {
    var key = "tag__".concat(index);
    return /*#__PURE__*/_react.default.createElement(_InteractiveTag.default, (0, _extends2.default)({
      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.default.createElement(_Button.default, {
    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: _propTypes.bool,
  /** @type {string} Label for button that adds tag. */
  addLabel: _propTypes.string,
  /** @type {string} Extra classes to add. */
  className: _propTypes.string,
  /** @type {boolean} Determines whether or not tag management is enabled. */
  disable: _propTypes.bool,
  /** @type {Function} Function that converts object to string. */
  itemToString: _propTypes.func,
  /** @type {Array.<Record<string, boolean>>} List of tags to be consumed. */
  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
    id: _propTypes.string.isRequired,
    isSelected: _propTypes.bool,
    label: _propTypes.string.isRequired,
    props: _propTypes.object
  })).isRequired,
  /** @type {string} Description label. */
  label: _propTypes.string,
  /** @type {Record<string, any>} Default translation labels object. */
  labels: defaultLabels.propType,
  /** @type {Function} Handles `onClick` for the 'add' button. */
  onAddButton: _propTypes.func,
  /** @type {Function} Communicates to the consuming component any changes to the tags. */
  onChange: _propTypes.func
};
TagWall.defaultProps = {
  addButtonDisabled: false,
  addLabel: '',
  className: '',
  disable: false,
  itemToString: _defaultItemToString.default,
  label: null,
  labels: {},
  onAddButton: noop,
  onChange: noop
};
var _default = exports.default = TagWall;