@wix/design-system
Version:
@wix/design-system
61 lines • 2.58 kB
JavaScript
import React from 'react';
import { withFocusable } from '../common/Focusable';
import { generateDataAttr } from '../utils/generateDataAttr';
import { SKIN, TYPE, SIZE } from './Badge.constants';
import { st, classes } from './Badge.st.css.js';
import Text from '../Text/Text';
const getProps = (props) => {
// that's what you pay for using HOCs...
const { focusableOnFocus, focusableOnBlur, ...rest } = props;
return rest;
};
const getFocusableProps = (props) => {
// add focusable hooks only when badge is clickable
const { onClick, focusableOnFocus, focusableOnBlur } = props;
return onClick
? {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: 0,
}
: {};
};
function Badge(props) {
const { type = TYPE.solid, skin = SKIN.general, size = SIZE.medium, uppercase = true, noPadding = false, showTooltip = true, display = 'inline', children, customContent, prefixIcon, suffixIcon, onClick, dataHook, className, ariaLabel, ...rest } = getProps(props);
return (React.createElement("div", { "aria-label": ariaLabel, role: onClick ? 'button' : undefined, "data-hook": dataHook, onClick: onClick, onKeyDown: onClick
? (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClick(event);
}
}
: undefined, ...getFocusableProps(props), className: st(classes.root, {
clickable: !!onClick,
display,
type,
skin,
size,
uppercase,
noPadding,
...rest,
}, className), ...generateDataAttr({ type, skin, size, uppercase }, [
'type',
'skin',
'size',
'uppercase',
]), "data-clickable": !!onClick, "data-is-inverted": rest['data-is-inverted'] },
prefixIcon &&
React.cloneElement(prefixIcon, {
className: classes.prefix,
'data-prefix-icon': true,
}),
customContent ? (customContent) : (React.createElement(Text, { className: classes.text, ellipsis: true, size: size === 'medium' ? 'small' : size, weight: "normal", showTooltip: showTooltip }, children)),
suffixIcon &&
React.cloneElement(suffixIcon, {
className: classes.suffix,
'data-suffix-icon': true,
})));
}
Badge.displayName = 'Badge';
export default withFocusable(Badge);
//# sourceMappingURL=Badge.js.map