wix-style-react
Version:
wix-style-react
102 lines • 4.08 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { generateDataAttr } from '../utils/generateDataAttr';
import { SKIN, TYPE, SIZE } from './constants';
import { st, classes } from './Badge.st.css';
import Caption from '../Text/Caption';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
class Badge extends React.PureComponent {
constructor() {
super(...arguments);
this.getProps = () => {
// that's what you pay for using HOCs...
const { focusableOnFocus, focusableOnBlur, ...rest } = this.props;
return rest;
};
this._getFocusableProps = () => {
// add focusable hooks only when badge is clickable
const { onClick, focusableOnFocus, focusableOnBlur } = this.props;
return onClick
? {
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
tabIndex: 0,
}
: {};
};
}
render() {
const { children, prefixIcon, suffixIcon, onClick, dataHook, className, showTooltip, ...rest } = this.getProps();
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { "data-hook": dataHook, onClick: onClick, ...this._getFocusableProps(), className: st(classes.root, { clickable: !!onClick, newColorsBranding, ...rest }, className), ...generateDataAttr(this.props, [
'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,
}),
React.createElement(Caption, { className: classes.text, caption: this.getProps().size === 'tiny' ? 'c2' : 'c1', ellipsis: true, showTooltip: showTooltip }, children),
suffixIcon &&
React.cloneElement(suffixIcon, {
className: classes.suffix,
'data-suffix-icon': true,
})))));
}
}
Badge.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Applies a CSS class to the component’s root element */
className: PropTypes.string,
/** Controls the appearance of a notification */
type: PropTypes.oneOf(['solid', 'outlined', 'transparent']),
/** Controls the appearance of a notification */
skin: PropTypes.oneOf([
'general',
'standard',
'danger',
'success',
'neutral',
'warning',
'urgent',
'neutralLight',
'neutralStandard',
'neutralSuccess',
'neutralDanger',
'premium',
'warningLight',
]),
/** Controls the size of the component */
size: PropTypes.oneOf(['medium', 'small', 'tiny']),
/** Pass an icon or a component to display in front of the content */
prefixIcon: PropTypes.node,
/** Pass an icon or a component to display at the end of the content */
suffixIcon: PropTypes.node,
/** Defines a click handler */
onClick: PropTypes.func,
/** Forces uppercase letters */
uppercase: PropTypes.bool,
/** Removes paddings from the component */
noPadding: PropTypes.bool,
/** Controls whether ellipsis tooltip is enabled. */
showTooltip: PropTypes.bool,
focusableOnFocus: PropTypes.func,
focusableOnBlur: PropTypes.func,
/** Accepts any component as a child item. Usually it is a text string. */
children: PropTypes.node,
};
Badge.displayName = 'Badge';
Badge.defaultProps = {
type: TYPE.solid,
skin: SKIN.general,
size: SIZE.medium,
uppercase: true,
noPadding: false,
showTooltip: true,
};
export default withFocusable(Badge);
//# sourceMappingURL=Badge.js.map