@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
226 lines (225 loc) • 7.48 kB
JavaScript
"use client";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import React, { useContext, useRef, useState } from 'react';
import useCombinedRef from "../../shared/helpers/useCombinedRef.js";
import clsx from 'clsx';
import Context from "../../shared/Context.js";
import { warn, extendExistingPropsWithContext, removeUndefinedProps, validateDOMAttributes, processChildren, getStatusState, dispatchCustomElementEvent } from "../../shared/component-helper.js";
import useId from "../../shared/helpers/useId.js";
import { applySpacing } from "../space/SpacingUtils.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import { pickFormElementProps } from "../../shared/helpers/filterValidProps.js";
import FormStatus from "../form-status/FormStatus.js";
import Anchor, { pickIcon, opensNewTab } from "../anchor/Anchor.js";
import { launch } from "../../icons/index.js";
import Tooltip from "../tooltip/Tooltip.js";
import ButtonContent from "./internal/ButtonContent.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const buttonDefaultProps = {
type: null,
text: null,
variant: null,
size: null,
title: null,
icon: null,
iconPosition: 'right',
iconSize: null,
href: null,
target: null,
rel: null,
to: null,
id: null,
customContent: null,
wrap: null,
bounding: null,
stretch: null,
skeleton: null,
disabled: null,
tooltip: null,
status: null,
statusState: 'error',
statusProps: null,
statusNoAnimation: null,
globalStatus: null,
className: null,
ref: null,
children: null,
element: null,
onClick: null
};
function getContent(props) {
return processChildren(props);
}
function Button({
ref,
...restProps
}) {
var _context$theme;
const context = useContext(Context);
const elementRef = useRef(null);
const combinedRef = useCombinedRef(ref, elementRef);
const generatedId = useId(restProps.id);
const resolvedId = restProps.id || restProps.status || restProps.tooltip ? generatedId : undefined;
const [afterContent, setAfterContent] = useState(null);
const props = extendExistingPropsWithContext({
...buttonDefaultProps,
...removeUndefinedProps({
...restProps
})
}, buttonDefaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, pickFormElementProps(context === null || context === void 0 ? void 0 : context.formElement), context.Button);
const {
className,
variant,
size,
title,
customContent,
tooltip,
status,
statusState,
statusProps,
statusNoAnimation,
globalStatus,
disabled,
text: _text,
icon: _icon,
iconPosition,
iconSize,
wrap,
bounding,
stretch,
skeleton,
element,
selected,
...attributes
} = props;
const showStatus = getStatusState(status);
const {
text
} = props;
let {
icon: usedIcon
} = props;
let usedVariant = variant;
let usedSize = size;
let usedIconSize = iconSize;
const content = getContent(restProps);
if (variant === 'tertiary' && (text || content) && !usedIcon && usedIcon !== false) {
warn(`Icon required: A Tertiary Button requires an icon to be WCAG compliant in most cases, because variant tertiary has no underline.
(Override this warning using icon={false}, or consider using one of the other variants)`);
}
const isIconOnly = Boolean(!text && !content && usedIcon);
if (isIconOnly) {
if (!usedVariant) {
usedVariant = 'secondary';
}
if (!usedIconSize && (usedSize === 'default' || usedSize === 'large')) {
usedIconSize = 'medium';
}
if (!usedSize) {
usedSize = 'medium';
}
if (process.env.NODE_ENV === 'development' && !title && !attributes['aria-label']) {
warn('Icon-only Button requires either a "title" or "aria-label" prop for accessibility.');
}
} else if (content) {
if (!usedVariant) {
usedVariant = 'primary';
}
if (!usedSize) {
usedSize = 'default';
}
}
if (!usedIconSize && variant === 'tertiary' && iconPosition === 'top') {
usedIconSize = 'medium';
}
const Element = element ? element : props.href || props.to ? Anchor : 'button';
if (Element === Anchor) {
if (opensNewTab(props.target, props.href) && !usedIcon) {
usedIcon = launch;
}
}
const params = applySpacing(props, {
className: clsx(`dnb-button dnb-button--${usedVariant || 'primary'}`, (text || content || customContent) && 'dnb-button--has-text', createSkeletonClass(variant === 'tertiary' ? 'font' : 'shape', skeleton, context), className, (props.href || props.to) && '', usedIcon && `dnb-button--icon-position-${iconPosition} dnb-button--has-icon` + (usedIconSize ? ` dnb-button--icon-size-${usedIconSize}` : ""), usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`, stretch && 'dnb-button--stretch', isIconOnly && 'dnb-button--icon-only', selected && 'dnb-button--selected', wrap && 'dnb-button--wrap', status && `dnb-button__status--${statusState}`, Element === Anchor && 'dnb-anchor--no-style', (context === null || context === void 0 || (_context$theme = context.theme) === null || _context$theme === void 0 ? void 0 : _context$theme.surface) === 'dark' && `dnb-button--surface-dark`),
title,
id: resolvedId,
disabled,
...attributes,
...(Element === Anchor && {
omitClass: true
})
});
const handleClick = event => {
const result = dispatchCustomElementEvent(props, 'onClick', {
event
});
if (result && React.isValidElement(result)) {
setAfterContent(result);
}
};
if (props.onClick) {
params.onClick = handleClick;
}
if (Element === Anchor && params.disabled) {
const originalOnClick = params.onClick;
params.onClick = e => {
e.preventDefault();
e.stopPropagation();
if (typeof originalOnClick === 'function') {
originalOnClick(e);
}
};
params.tabIndex = -1;
params['aria-disabled'] = true;
if (params.href) {
delete params.href;
}
}
if (Element !== Anchor && !params.type) {
params.type = params.type === '' ? undefined : 'button';
}
if (isIconOnly) {
params['aria-label'] = params['aria-label'] || title;
}
skeletonDOMAttributes(params, skeleton, context);
validateDOMAttributes(restProps, params);
return _jsxs(_Fragment, {
children: [_jsx(Element, {
ref: combinedRef,
...params,
children: _jsx(ButtonContent, {
...restProps,
icon: usedIcon,
iconSize: usedIconSize,
content: text || content,
customContent: customContent,
isIconOnly: isIconOnly,
skeleton: skeleton,
iconElement: pickIcon(usedIcon, 'dnb-button__icon')
})
}), afterContent, _jsx(FormStatus, {
show: showStatus,
id: resolvedId + '-form-status',
globalStatus: globalStatus,
label: text,
text: status,
state: statusState,
textId: resolvedId + '-status',
noAnimation: statusNoAnimation,
skeleton: skeleton,
...statusProps
}), tooltip && elementRef && _jsx(Tooltip, {
id: resolvedId + '-tooltip',
targetElement: elementRef,
tooltip: tooltip
})]
});
}
Button.getContent = getContent;
withComponentMarkers(Button, {
_formElement: true,
_supportsSpacingProps: true
});
export default Button;
//# sourceMappingURL=Button.js.map