@carbon/ibm-products
Version:
Carbon for IBM Products
76 lines (74 loc) • 4.1 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 { pkg } from "../../settings.js";
import { NoDataEmptyState } from "../EmptyStates/NoDataEmptyState/NoDataEmptyState.js";
import { AddSelectMetaPanel } from "./AddSelectMetaPanel.js";
import React from "react";
import PropTypes from "prop-types";
import { Accordion, AccordionItem, Tag } from "@carbon/react";
//#region src/components/AddSelect/AddSelectSidebar.jsx
const blockClass = `${pkg.prefix}--add-select__sidebar`;
const componentName = "AddSelectSidebar";
let AddSelectSidebar = ({ appliedModifiers, closeIconDescription, displayMetalPanel, illustrationTheme, influencerTitle, items, metaPanelTitle, modifiers, multiSelection, noSelectionDescription, noSelectionTitle, setDisplayMetaPanel }) => {
const hasModifiers = modifiers?.options?.length > 0;
const hasSelections = multiSelection.length > 0;
const getNewItem = (item) => {
const { meta, icon, avatar, ...newItem } = item;
return newItem;
};
const sidebarItems = multiSelection.map((selectionId) => {
if (Array.isArray(items)) return getNewItem(items.find((item) => item.id === selectionId));
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, {
closeIconDescription,
meta: displayMetalPanel.meta,
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(Tag, {
type: "gray",
size: "sm"
}, multiSelection.length)), hasSelections ? /* @__PURE__ */ React.createElement(Accordion, { align: "start" }, sidebarItems.map((item) => /* @__PURE__ */ React.createElement(AccordionItem, {
title: getTitle(item),
key: item.id
}, Object.keys(item).map((key) => /* @__PURE__ */ React.createElement("div", {
className: `${blockClass}-item`,
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, {
subtitle: noSelectionDescription,
title: noSelectionTitle,
size: "sm",
illustrationTheme
})));
};
AddSelectSidebar.propTypes = {
appliedModifiers: PropTypes.array,
closeIconDescription: PropTypes.string,
displayMetalPanel: PropTypes.object,
illustrationTheme: PropTypes.oneOf(["light", "dark"]),
influencerTitle: PropTypes.string,
items: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
metaPanelTitle: PropTypes.string,
modifiers: PropTypes.object,
multiSelection: PropTypes.array,
noSelectionDescription: PropTypes.string,
noSelectionTitle: PropTypes.string,
setDisplayMetaPanel: PropTypes.func
};
AddSelectSidebar.displayName = componentName;
//#endregion
export { AddSelectSidebar };