wix-style-react
Version:
wix-style-react
30 lines • 1.62 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Tooltip from '../../Tooltip';
import Heading from '../../Heading';
import { withFocusable } from '../../common/Focusable';
import { st, classes } from './FunnelBadge.st.css';
import { dataHooks } from '../constants';
class Badge extends PureComponent {
render() {
const { value, className, focusableOnBlur, focusableOnFocus, dataHook } = this.props;
return (React.createElement("div", { className: st(classes.badge, className), "data-hook": dataHook, tabIndex: 0, onBlur: focusableOnBlur, onFocus: focusableOnFocus },
React.createElement("span", { className: classes.badgeContent },
React.createElement(Heading, { className: classes.badgeText, size: "extraTiny", dataHook: dataHooks.badgeValue }, value))));
}
}
const FocusedBadge = withFocusable(Badge);
export const FunnelBadge = props => {
const { tooltipContent, onTooltipShow, value } = props;
return (React.createElement(Tooltip, { dataHook: dataHooks.badgeTooltip, disabled: !tooltipContent, content: tooltipContent, onShow: onTooltipShow, moveBy: { y: 2 }, textAlign: "start", size: "small" },
React.createElement(FocusedBadge, { value: value, dataHook: dataHooks.badge })));
};
FunnelBadge.propTypes = {
/** Badge's value */
value: PropTypes.string.isRequired,
/** Tooltip content. Can be either string or renderable node */
tooltipContent: PropTypes.node,
/** Callback on tooltip content show event */
onTooltipShow: PropTypes.func,
};
//# sourceMappingURL=FunnelBadge.js.map