@carbon/ibm-products
Version:
Carbon for IBM Products
132 lines (127 loc) • 4.84 kB
JavaScript
/**
* 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.
*/
import React__default from 'react';
import { Tag, Accordion, AccordionItem } from '@carbon/react';
import PropTypes from '../../_virtual/index.js';
import { NoDataEmptyState } from '../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
import { pkg } from '../../settings.js';
import { AddSelectMetaPanel } from './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 = `${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__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(AddSelectMetaPanel, {
closeIconDescription: closeIconDescription,
meta: displayMetalPanel.meta,
setDisplayMetaPanel: 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(Tag, {
type: "gray",
size: "sm"
}, multiSelection.length)), hasSelections ? /*#__PURE__*/React__default.createElement(Accordion, {
align: "start"
}, sidebarItems.map(item => /*#__PURE__*/React__default.createElement(AccordionItem, {
title: getTitle(item),
key: item.id
}, Object.keys(item).map(key => /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}-item`,
key: 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(NoDataEmptyState, {
subtitle: noSelectionDescription,
title: noSelectionTitle,
size: "sm",
illustrationTheme: 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;
export { AddSelectSidebar };