@wix/design-system
Version:
@wix/design-system
33 lines • 2.36 kB
JavaScript
import React, { PureComponent } from 'react';
import Tooltip from '../../Tooltip';
import Heading from '../../Heading';
import Badge from '../../Badge';
import { withFocusable } from '../../common/Focusable';
import { st, classes } from './FunnelBadge.st.css.js';
import { dataHooks } from '../constants';
class StandardBadge extends PureComponent {
render() {
const { value, skin, prefixIcon, className, focusableOnBlur, focusableOnFocus, dataHook, } = this.props;
return (React.createElement("div", { className: st(classes.badge, { skin }, className), "data-hook": dataHook, tabIndex: 0, onBlur: focusableOnBlur, onFocus: focusableOnFocus, "data-skin": skin },
React.createElement("div", { className: classes.badgeContent },
!!prefixIcon &&
React.cloneElement(prefixIcon, {
'data-prefix-icon': true,
}),
React.createElement(Heading, { className: classes.badgeText, size: "extraTiny", dataHook: dataHooks.badgeValue }, value))));
}
}
class DarkBadge extends PureComponent {
render() {
const { value, className, focusableOnBlur, focusableOnFocus, dataHook, prefixIcon, } = this.props;
return (React.createElement("div", { className: st(classes.darkBadge, className), "data-hook": dataHook, tabIndex: 0, onBlur: focusableOnBlur, onFocus: focusableOnFocus, "data-skin": "dark" },
React.createElement(Badge, { type: "transparent", dataHook: dataHooks.badgeValue, prefixIcon: prefixIcon }, value)));
}
}
const FocusedStandardBadge = withFocusable(StandardBadge);
const FocusedDarkBadge = withFocusable(DarkBadge);
export const FunnelBadge = props => {
const { tooltipContent, tooltipProps, onTooltipShow, value, differenceBadgeSkin, ...otherProps } = props;
return (React.createElement(Tooltip, { dataHook: dataHooks.badgeTooltip, disabled: !tooltipContent, content: tooltipContent, onShow: onTooltipShow, moveBy: { y: 2 }, textAlign: "start", size: "small", ...tooltipProps }, differenceBadgeSkin === 'dark' ? (React.createElement(FocusedDarkBadge, { value: value, dataHook: dataHooks.badge, ...otherProps })) : (React.createElement(FocusedStandardBadge, { value: value, dataHook: dataHooks.badge, skin: differenceBadgeSkin, ...otherProps }))));
};
//# sourceMappingURL=FunnelBadge.js.map