@carbon/ibm-products
Version:
Carbon for IBM Products
79 lines (77 loc) • 4.67 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_settings = require("../../settings.js");
const require_NoDataEmptyState = require("../EmptyStates/NoDataEmptyState/NoDataEmptyState.js");
const require_AddSelectMetaPanel = require("./AddSelectMetaPanel.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/AddSelect/AddSelectSidebar.jsx
const blockClass = `${require_settings.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.default.createElement("div", { className: `${blockClass}-accordion-title` }, /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}-selected-item` }, /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}-selected-item-title` }, item.title), /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}-selected-item-subtitle` }, item.subtitle)), hasModifiers && /* @__PURE__ */ react.default.createElement("div", null, modifierEl));
};
if (Object.keys(displayMetalPanel).length !== 0) return /* @__PURE__ */ react.default.createElement(require_AddSelectMetaPanel.AddSelectMetaPanel, {
closeIconDescription,
meta: displayMetalPanel.meta,
setDisplayMetaPanel,
title: metaPanelTitle
});
return /* @__PURE__ */ react.default.createElement("div", { className: blockClass }, /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}-header` }, /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}-title` }, influencerTitle), /* @__PURE__ */ react.default.createElement(_carbon_react.Tag, {
type: "gray",
size: "sm"
}, multiSelection.length)), hasSelections ? /* @__PURE__ */ react.default.createElement(_carbon_react.Accordion, { align: "start" }, sidebarItems.map((item) => /* @__PURE__ */ react.default.createElement(_carbon_react.AccordionItem, {
title: getTitle(item),
key: item.id
}, Object.keys(item).map((key) => /* @__PURE__ */ react.default.createElement("div", {
className: `${blockClass}-item`,
key
}, /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}-item-header` }, key), /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}-item-body` }, item[key])))))) : /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}-body` }, /* @__PURE__ */ react.default.createElement(require_NoDataEmptyState.NoDataEmptyState, {
subtitle: noSelectionDescription,
title: noSelectionTitle,
size: "sm",
illustrationTheme
})));
};
AddSelectSidebar.propTypes = {
appliedModifiers: prop_types.default.array,
closeIconDescription: prop_types.default.string,
displayMetalPanel: prop_types.default.object,
illustrationTheme: prop_types.default.oneOf(["light", "dark"]),
influencerTitle: prop_types.default.string,
items: prop_types.default.oneOfType([prop_types.default.object, prop_types.default.array]),
metaPanelTitle: prop_types.default.string,
modifiers: prop_types.default.object,
multiSelection: prop_types.default.array,
noSelectionDescription: prop_types.default.string,
noSelectionTitle: prop_types.default.string,
setDisplayMetaPanel: prop_types.default.func
};
AddSelectSidebar.displayName = componentName;
//#endregion
exports.AddSelectSidebar = AddSelectSidebar;