design-react-kit
Version:
Componenti React per Bootstrap 5
45 lines • 2.72 kB
JavaScript
import React, { useContext } from 'react';
import classNames from 'classnames';
import { Icon } from '../Icon/Icon';
import { SizeContext } from './Toolbar';
import { Dropdown, DropdownToggle } from 'reactstrap';
function ToolbarItemLabel({ label, size, disabled, badge }) {
const showSrText = size && size !== 'large';
if (disabled) {
if (!label || showSrText) {
return React.createElement("span", null);
}
return (React.createElement(React.Fragment, null,
React.createElement("span", { className: 'toolbar-label' }, label)));
}
if (!label) {
return null;
}
return showSrText ? (React.createElement("span", { className: 'visually-hidden' }, label)) : (React.createElement("span", { className: 'toolbar-label' },
label,
badge?.label ? React.createElement("span", { className: 'visually-hidden' }, badge.label) : null));
}
export const ToolbarItem = ({ active = false, badge, url, iconName, label, tag = 'a', disabled, testId, srText, dropdown, dropdownProps, children, showMore, onClick, isDropdownOpen, ...attributes }) => {
const Tag = tag;
const size = useContext(SizeContext);
const activeClass = classNames({ active, disabled });
const ariaAttributes = {
...(disabled && { 'aria-disabled': true })
};
const badgeObject = typeof badge === 'number' ? { value: badge, label: srText || '', srText: srText || '' } : badge;
const toolbarItemContent = (React.createElement(React.Fragment, null,
badgeObject ? (React.createElement("div", { className: 'badge-wrapper' },
React.createElement("span", { className: 'toolbar-badge' }, size !== 'large' ? null : badgeObject.value),
size !== 'large' && React.createElement("span", { className: 'visually-hidden' }, badgeObject.srText))) : null,
React.createElement(Icon, { icon: iconName, size: size === 'small' ? 'sm' : '' }),
React.createElement(ToolbarItemLabel, { label: label, size: size, disabled: disabled, badge: badgeObject })));
if (dropdown) {
return (React.createElement("li", null,
React.createElement(Dropdown, { ...dropdownProps, toggle: onClick, isOpen: isDropdownOpen },
React.createElement(DropdownToggle, { disabled: disabled, caret: true, className: classNames('btn-dropdown', { 'toolbar-more': showMore }), color: '' }, toolbarItemContent),
children)));
}
return (React.createElement("li", null,
React.createElement(Tag, { href: url || '#', className: activeClass, "data-testid": testId, ...attributes, ...ariaAttributes, onClick: onClick }, toolbarItemContent)));
};
//# sourceMappingURL=ToolbarItem.js.map