@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
233 lines (232 loc) • 8.9 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _react = _interopRequireWildcard(require("react"));
var _useCombinedRef = _interopRequireDefault(require("../../shared/helpers/useCombinedRef.js"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus.js"));
var _Anchor = _interopRequireWildcard(require("../anchor/Anchor.js"));
var _index = require("../../icons/index.js");
var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip.js"));
var _ButtonContent = _interopRequireDefault(require("./internal/ButtonContent.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 (0, _componentHelper.processChildren)(props);
}
function Button({
ref,
...restProps
}) {
var _context$theme;
const context = (0, _react.useContext)(_Context.default);
const elementRef = (0, _react.useRef)(null);
const combinedRef = (0, _useCombinedRef.default)(ref, elementRef);
const generatedId = (0, _useId.default)(restProps.id);
const resolvedId = restProps.id || restProps.status || restProps.tooltip ? generatedId : undefined;
const [afterContent, setAfterContent] = (0, _react.useState)(null);
const props = (0, _componentHelper.extendExistingPropsWithContext)({
...buttonDefaultProps,
...(0, _componentHelper.removeUndefinedProps)({
...restProps
})
}, buttonDefaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, (0, _filterValidProps.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 = (0, _componentHelper.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) {
(0, _componentHelper.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']) {
(0, _componentHelper.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.default : 'button';
if (Element === _Anchor.default) {
if ((0, _Anchor.opensNewTab)(props.target, props.href) && !usedIcon) {
usedIcon = _index.launch;
}
}
const params = (0, _SpacingUtils.applySpacing)(props, {
className: (0, _clsx.default)(`dnb-button dnb-button--${usedVariant || 'primary'}`, (text || content || customContent) && 'dnb-button--has-text', (0, _SkeletonHelper.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.default && '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.default && {
omitClass: true
})
});
const handleClick = event => {
const result = (0, _componentHelper.dispatchCustomElementEvent)(props, 'onClick', {
event
});
if (result && _react.default.isValidElement(result)) {
setAfterContent(result);
}
};
if (props.onClick) {
params.onClick = handleClick;
}
if (Element === _Anchor.default && 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.default && !params.type) {
params.type = params.type === '' ? undefined : 'button';
}
if (isIconOnly) {
params['aria-label'] = params['aria-label'] || title;
}
(0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, context);
(0, _componentHelper.validateDOMAttributes)(restProps, params);
return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [(0, _jsxRuntime.jsx)(Element, {
ref: combinedRef,
...params,
children: (0, _jsxRuntime.jsx)(_ButtonContent.default, {
...restProps,
icon: usedIcon,
iconSize: usedIconSize,
content: text || content,
customContent: customContent,
isIconOnly: isIconOnly,
skeleton: skeleton,
iconElement: (0, _Anchor.pickIcon)(usedIcon, 'dnb-button__icon')
})
}), afterContent, (0, _jsxRuntime.jsx)(_FormStatus.default, {
show: showStatus,
id: resolvedId + '-form-status',
globalStatus: globalStatus,
label: text,
text: status,
state: statusState,
textId: resolvedId + '-status',
noAnimation: statusNoAnimation,
skeleton: skeleton,
...statusProps
}), tooltip && elementRef && (0, _jsxRuntime.jsx)(_Tooltip.default, {
id: resolvedId + '-tooltip',
targetElement: elementRef,
tooltip: tooltip
})]
});
}
Button.getContent = getContent;
(0, _withComponentMarkers.default)(Button, {
_formElement: true,
_supportsSpacingProps: true
});
var _default = exports.default = Button;
//# sourceMappingURL=Button.js.map