@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
116 lines (115 loc) • 3.87 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
var _ChevronIcon, _ChevronIcon2, _div;
import classnames from 'classnames';
import { ListContext } from "./ListContext.js";
import ItemContent from "./ItemContent.js";
import React, { useCallback, useContext, useRef } from 'react';
import IconPrimary from "../IconPrimary.js";
import Anchor from "../Anchor.js";
import ItemIcon from "./ItemIcon.js";
import ItemTitle from "./ItemTitle.js";
function ItemAction(props) {
const {
className,
onClick,
children,
variant,
selected,
pending,
disabled,
skeleton,
chevronPosition = 'right',
icon,
title,
href,
to,
element,
elementProps,
target,
rel,
...rest
} = props;
const inheritedDisabled = useContext(ListContext)?.disabled;
const appliedDisabled = disabled !== null && disabled !== void 0 ? disabled : inheritedDisabled;
const isInactive = pending || appliedDisabled;
const handleClick = useCallback(event => {
if (!isInactive) {
onClick && onClick(event);
}
}, [onClick, isInactive]);
const handleKeyDown = useCallback(event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
handleClick(event);
}
}, [handleClick]);
const anchorRef = useRef(null);
const handleLinkClick = useCallback(event => {
if (!isInactive) {
onClick?.(event);
}
}, [onClick, isInactive]);
const handleLinkKeyDown = useCallback(event => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
if (!isInactive) {
anchorRef.current?.click();
onClick?.(event);
}
}
}, [onClick, isInactive]);
const actionClassName = classnames('dnb-list__item__action', (href || to) && 'dnb-list__item__action--href', className, chevronPosition === 'left' && 'dnb-list__item--chevron-left');
const content = React.createElement(React.Fragment, null, chevronPosition === 'left' && (_ChevronIcon || (_ChevronIcon = React.createElement(ChevronIcon, null))), icon !== undefined && React.createElement(ItemIcon, null, icon), title !== undefined && React.createElement(ItemTitle, null, title), children, chevronPosition === 'right' && (_ChevronIcon2 || (_ChevronIcon2 = React.createElement(ChevronIcon, null))));
if (href || to) {
return React.createElement(ItemContent, _extends({
className: actionClassName,
role: "link",
tabIndex: isInactive ? -1 : 0,
"aria-disabled": isInactive ? true : undefined,
onClick: handleLinkClick,
onKeyDown: handleLinkKeyDown,
variant: variant,
selected: selected,
skeleton: skeleton,
pending: pending,
disabled: appliedDisabled
}, rest), React.createElement(Anchor, _extends({
noStyle: true,
ref: anchorRef
}, href != null ? {
href: isInactive ? undefined : href
} : {}, {
to: isInactive ? undefined : to,
element: element,
target: target,
rel: rel,
tabIndex: -1,
"aria-disabled": isInactive ? true : undefined
}, elementProps), content));
}
return React.createElement(ItemContent, _extends({
className: actionClassName,
role: "button",
tabIndex: isInactive ? -1 : 0,
"aria-disabled": isInactive ? true : undefined,
onClick: handleClick,
onKeyDown: handleKeyDown,
variant: variant,
selected: selected,
skeleton: skeleton,
pending: pending,
disabled: appliedDisabled
}, rest), content);
}
ItemAction._supportsSpacingProps = true;
export default ItemAction;
export function ChevronIcon() {
return _div || (_div = React.createElement("div", {
className: "dnb-list__item__chevron"
}, React.createElement(IconPrimary, {
icon: "chevron_right"
})));
}
ChevronIcon._supportsSpacingProps = true;
//# sourceMappingURL=ItemAction.js.map