@kadconsulting/dry
Version:
KAD Reusable Component Library
34 lines • 3.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, forwardRef } from 'react';
import './DropdownItem.scss';
import classnames from 'classnames';
import { v4 as uuidv4 } from 'uuid';
// import * as Utils from "./DropdownItem.utils.js";
import './DropdownItem.scss';
const DropdownItem = forwardRef(({ id, className, label, items, icon, notificationAmount, note, handleClick, }, ref) => {
const [isClosed, setIsClosed] = useState(true);
const displayDropdownItems = () => {
if (!items)
return;
return items.map((item) => {
const { disabled, path, note, label, handleClick } = item;
return (_jsx("div", { onClick: () => {
// TODO-p2: Fix this implementation, find a better way to stop the event from bubbling up
if (disabled)
return;
setIsClosed(isClosed);
handleClick();
}, className: classnames({
'dropdown-item__sub-list': true,
'dropdown-item__sub-list--active': path ===
window.location.pathname.split('/')[window.location.pathname.split('/').length - 1],
}), children: _jsxs("div", { className: 'dropdown-item__sub-list-icon-wrapper', children: [_jsx("span", { className: 'dropdown-item__label', children: label }), note && (_jsx("div", { className: 'dropdown-item__sub-list__note', children: note }))] }) }, uuidv4()));
});
};
// TODO-p2: Fix this implementation
const currentItems = displayDropdownItems();
return (_jsx("div", { id: id, ref: ref, className: classnames(className, 'dry-dropdown-item', 'dry-dropdown-item__dropdown'), onClick: () => setIsClosed(!isClosed), children: _jsxs("div", { className: 'dropdown-item__content-wrapper', children: [note && (_jsx("div", { className: 'dropdown-item__content-wrapper__note', children: note })), _jsxs("div", { className: 'dropdown-item__content', children: [icon, _jsx("span", { onClick: handleClick, className: 'dropdown-item__label', children: label }), _jsx("div", { className: 'dropdown-item__notification-amount-wrapper', children: _jsx("span", { className: 'dropdown-item__notification-amount', children: notificationAmount }) }), items &&
(isClosed ? (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: _jsx("path", { d: 'M15 12.5L10 7.5L5 12.5', stroke: '#D0D5DD', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) })) : (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', onClick: () => setIsClosed(!isClosed), children: _jsx("path", { d: 'M5 7.5L10 12.5L15 7.5', stroke: '#D0D5DD', strokeWidth: '1.66667', strokeLinecap: 'round', strokeLinejoin: 'round' }) })))] }), !isClosed && _jsx(_Fragment, { children: currentItems })] }) }));
});
export default DropdownItem;
//# sourceMappingURL=DropdownItem.js.map