@carbon/ibm-products/lib/components/AddSelect/AddSelectSidebar.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 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.
 */

'use strict';

var React = require('react');
var react = require('@carbon/react');
var index = require('../../_virtual/index.js');
var NoDataEmptyState = require('../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
var settings = require('../../settings.js');
var AddSelectMetaPanel = require('./AddSelectMetaPanel.js');

// Copyright IBM Corp. 2022, 2022
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

const blockClass = `${settings.pkg.prefix}--add-select__sidebar`;
const componentName = 'AddSelectSidebar';
let AddSelectSidebar = _ref => {
  let {
    appliedModifiers,
    closeIconDescription,
    displayMetalPanel,
    illustrationTheme,
    influencerTitle,
    items,
    metaPanelTitle,
    modifiers,
    multiSelection,
    noSelectionDescription,
    noSelectionTitle,
    setDisplayMetaPanel
  } = _ref;
  const hasModifiers = modifiers?.options?.length > 0;
  const hasSelections = multiSelection.length > 0;
  const getNewItem = item => {
    // certain properties should not be displayed in the sidebar
    // eslint-disable-next-line no-unused-vars
    const {
      meta,
      icon,
      avatar,
      ...newItem
    } = item;
    return newItem;
  };
  const sidebarItems = multiSelection.map(selectionId => {
    if (Array.isArray(items)) {
      const selectedItem = items.find(item => item.id === selectionId);
      return getNewItem(selectedItem);
    }
    return getNewItem(items[selectionId]);
  });
  const getTitle = item => {
    let modifierEl;
    if (hasModifiers) {
      const _modifiers = appliedModifiers?.find(modifier => modifier?.id === item?.id)[modifiers?.id];
      modifierEl = _modifiers;
      if (Array.isArray(_modifiers)) {
        modifierEl = _modifiers?.map((_modifier, index) => `${_modifier}${index + 1 !== _modifiers.length ? ', ' : ''}`);
      }
    }
    return /*#__PURE__*/React.createElement("div", {
      className: `${blockClass}-accordion-title`
    }, /*#__PURE__*/React.createElement("div", {
      className: `${blockClass}-selected-item`
    }, /*#__PURE__*/React.createElement("p", {
      className: `${blockClass}-selected-item-title`
    }, item.title), /*#__PURE__*/React.createElement("p", {
      className: `${blockClass}-selected-item-subtitle`
    }, item.subtitle)), hasModifiers && /*#__PURE__*/React.createElement("div", null, modifierEl));
  };
  if (Object.keys(displayMetalPanel).length !== 0) {
    return /*#__PURE__*/React.createElement(AddSelectMetaPanel.AddSelectMetaPanel, {
      closeIconDescription: closeIconDescription,
      meta: displayMetalPanel.meta,
      setDisplayMetaPanel: setDisplayMetaPanel,
      title: metaPanelTitle
    });
  }
  return /*#__PURE__*/React.createElement("div", {
    className: blockClass
  }, /*#__PURE__*/React.createElement("div", {
    className: `${blockClass}-header`
  }, /*#__PURE__*/React.createElement("p", {
    className: `${blockClass}-title`
  }, influencerTitle), /*#__PURE__*/React.createElement(react.Tag, {
    type: "gray",
    size: "sm"
  }, multiSelection.length)), hasSelections ? /*#__PURE__*/React.createElement(react.Accordion, {
    align: "start"
  }, sidebarItems.map(item => /*#__PURE__*/React.createElement(react.AccordionItem, {
    title: getTitle(item),
    key: item.id
  }, Object.keys(item).map(key => /*#__PURE__*/React.createElement("div", {
    className: `${blockClass}-item`,
    key: key
  }, /*#__PURE__*/React.createElement("p", {
    className: `${blockClass}-item-header`
  }, key), /*#__PURE__*/React.createElement("p", {
    className: `${blockClass}-item-body`
  }, item[key])))))) : /*#__PURE__*/React.createElement("div", {
    className: `${blockClass}-body`
  }, /*#__PURE__*/React.createElement(NoDataEmptyState.NoDataEmptyState, {
    subtitle: noSelectionDescription,
    title: noSelectionTitle,
    size: "sm",
    illustrationTheme: illustrationTheme
  })));
};
AddSelectSidebar.propTypes = {
  appliedModifiers: index.default.array,
  closeIconDescription: index.default.string,
  displayMetalPanel: index.default.object,
  illustrationTheme: index.default.oneOf(['light', 'dark']),
  influencerTitle: index.default.string,
  items: index.default.oneOfType([index.default.object, index.default.array]),
  metaPanelTitle: index.default.string,
  modifiers: index.default.object,
  multiSelection: index.default.array,
  noSelectionDescription: index.default.string,
  noSelectionTitle: index.default.string,
  setDisplayMetaPanel: index.default.func
};
AddSelectSidebar.displayName = componentName;

exports.AddSelectSidebar = AddSelectSidebar;