@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
264 lines (263 loc) • 9.8 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Context from "../../shared/Context.js";
import { warn, makeUniqueId, isTrue, extendPropsWithContextInClassComponent, validateDOMAttributes, processChildren, getStatusState, dispatchCustomElementEvent } from "../../shared/component-helper.js";
import { spacingPropTypes, createSpacingClasses } from "../space/SpacingHelper.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";
export const buttonVariantPropType = {
variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'signal', 'unstyled'])
};
export default class Button extends React.PureComponent {
static contextType = Context;
static getContent(props) {
return processChildren(props);
}
constructor(props) {
super(props);
this._id = props.id || (props.status || props.tooltip) && makeUniqueId();
this._ref = React.createRef();
this.state = {
afterContent: null
};
}
componentDidMount() {
if (this.props.innerRef) {
typeof this.props.innerRef === 'function' ? this.props.innerRef(this._ref.current) : this.props.innerRef.current = this._ref.current;
}
if (this.props.inner_ref) {
typeof this.props.innerRef === 'function' ? this.props.inner_ref(this._ref.current) : this.props.inner_ref.current = this._ref.current;
}
}
getOnClickHandler = src => event => {
const afterContent = dispatchCustomElementEvent(src, 'on_click', {
event
});
if (afterContent && React.isValidElement(afterContent)) {
this.setState({
afterContent
});
}
};
render() {
const props = extendPropsWithContextInClassComponent(this.props, Button.defaultProps, {
skeleton: this.context?.skeleton
}, pickFormElementProps(this.context?.FormRow), pickFormElementProps(this.context?.formElement), this.context.Button);
const {
class: classProp,
className,
variant,
size,
title,
custom_content,
tooltip,
status,
status_state,
status_props,
status_no_animation,
globalStatus,
id,
disabled,
text: _text,
icon: _icon,
icon_position,
icon_size,
wrap,
bounding,
stretch,
skeleton,
element,
inner_ref,
innerRef,
...attributes
} = props;
const showStatus = getStatusState(status);
let {
text,
icon
} = props;
let usedVariant = variant;
let usedSize = size;
let iconSize = icon_size;
const content = Button.getContent(this.props);
if (variant === 'tertiary' && (text || content) && !icon && icon !== 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 && icon);
if (isIconOnly) {
if (!usedVariant) {
usedVariant = 'secondary';
}
if (!iconSize && (usedSize === 'default' || usedSize === 'large')) {
iconSize = '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 (!iconSize && variant === 'tertiary' && icon_position === 'top') {
iconSize = 'medium';
}
const Element = element ? element : props.href || props.to ? Anchor : 'button';
if (Element === Anchor) {
attributes.omitClass = true;
if (opensNewTab(props.target, props.href) && !icon) {
icon = launch;
}
}
const classes = classnames(`dnb-button dnb-button--${usedVariant || 'primary'}`, (text || content || custom_content) && 'dnb-button--has-text', createSkeletonClass(variant === 'tertiary' ? 'font' : 'shape', skeleton, this.context), createSpacingClasses(props), classProp, className, (props.href || props.to) && '', icon && `dnb-button--icon-position-${icon_position} dnb-button--has-icon` + (iconSize ? ` dnb-button--icon-size-${iconSize}` : ""), usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`, this.context?.theme?.darkBackground && `dnb-button--on-dark-background`, isTrue(stretch) && 'dnb-button--stretch', wrap && 'dnb-button--wrap', status && `dnb-button__status--${status_state}`, Element === Anchor && 'dnb-anchor--no-style');
const params = {
className: classes,
title,
id: this._id,
disabled: isTrue(disabled),
...attributes
};
if (props.on_click || props.onClick) {
params.onClick = this.getOnClickHandler(props);
}
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, this.context);
validateDOMAttributes(this.props, params);
return React.createElement(React.Fragment, null, React.createElement(Element, _extends({
ref: this._ref
}, params), React.createElement(ButtonContent, _extends({}, this.props, {
icon: icon,
icon_size: iconSize,
content: text || content,
custom_content: custom_content,
isIconOnly: isIconOnly,
skeleton: isTrue(skeleton),
iconElement: pickIcon(icon, 'dnb-button__icon')
}))), this.state.afterContent, React.createElement(FormStatus, _extends({
show: showStatus,
id: this._id + '-form-status',
globalStatus: globalStatus,
label: text,
text: status,
state: status_state,
text_id: this._id + '-status',
no_animation: status_no_animation,
skeleton: skeleton
}, status_props)), tooltip && this._ref && React.createElement(Tooltip, {
id: this._id + '-tooltip',
targetElement: this._ref,
tooltip: tooltip
}));
}
}
process.env.NODE_ENV !== "production" ? Button.propTypes = {
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
type: PropTypes.string,
title: PropTypes.string,
variant: buttonVariantPropType.variant,
size: PropTypes.oneOf(['default', 'small', 'medium', 'large']),
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
icon_position: PropTypes.oneOf(['left', 'right', 'top']),
icon_size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
status: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func, PropTypes.node]),
status_state: PropTypes.string,
status_props: PropTypes.object,
status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
globalStatus: PropTypes.shape({
id: PropTypes.string,
message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
}),
id: PropTypes.string,
href: PropTypes.string,
target: PropTypes.string,
rel: PropTypes.string,
to: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
custom_content: PropTypes.node,
wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
bounding: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
inner_ref: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
className: PropTypes.string,
class: PropTypes.string,
innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
element: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.node]),
...spacingPropTypes,
on_click: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
} : void 0;
Button.defaultProps = {
type: null,
text: null,
variant: null,
size: null,
title: null,
icon: null,
icon_position: 'right',
icon_size: null,
href: null,
target: null,
rel: null,
to: null,
id: null,
custom_content: null,
wrap: null,
bounding: null,
stretch: null,
skeleton: null,
disabled: null,
tooltip: null,
status: null,
status_state: 'error',
status_props: null,
status_no_animation: null,
globalStatus: null,
inner_ref: null,
className: null,
class: null,
innerRef: null,
children: null,
element: null,
on_click: null,
onClick: null
};
Button._formElement = true;
Button._supportsSpacingProps = true;
//# sourceMappingURL=Button.js.map