wix-style-react
Version:
wix-style-react
63 lines • 3.09 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './CounterBadge.st.css';
import Caption from '../Text/Caption';
import Text from '../Text';
import { dataHooks } from './constants';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import { WixStyleReactEnvironmentContext } from '../WixStyleReactEnvironmentProvider/context';
import { SupportedWixLocales } from 'wix-design-systems-locale-utils';
const MAX_NUMBER = 100;
/** CounterBadge */
class CounterBadge extends PureComponent {
constructor() {
super(...arguments);
this._renderNumberContent = (n, truncate) => n < MAX_NUMBER || !truncate ? (Intl.NumberFormat(this._getLocale()).format(n)) : (React.createElement("div", { className: classes.numberContent },
MAX_NUMBER - 1,
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "5", height: "5", viewBox: "0 0 5 5" },
React.createElement("path", { fill: "currentColor", d: "M3,0 L3,2 L5,2 L5,3 L3,3 L3,5 L2,5 L2,3 L0,3 L0,2 L2,2 L2,0 L3,0 Z" }))));
this._renderCounterBadgeContent = (size, content) => size === 'small' ? (React.createElement(Caption, { tagName: "span", caption: "c1", light: true, dataHook: dataHooks.content, className: classes.caption }, content)) : (React.createElement(Text, { dataHook: dataHooks.content, size: "tiny", weight: "bold", light: true, className: classes.text }, content));
}
_getLocale() {
// @ts-ignore
return this.props.locale || this.context.locale || 'en';
}
render() {
const { dataHook, size, skin, children, className, showShadow, truncate } = this.props;
const custom = isNaN(Number(children));
const longNumber = !custom && truncate && Number(children) >= MAX_NUMBER;
const content = custom
? children
: this._renderNumberContent(Number(children), truncate);
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root, { skin, custom, size, longNumber, showShadow, newColorsBranding }, className), "data-hook": dataHook, "data-locale": this._getLocale() }, this._renderCounterBadgeContent(size, content)))));
}
}
CounterBadge.displayName = 'CounterBadge';
CounterBadge.contextType = WixStyleReactEnvironmentContext;
CounterBadge.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
children: PropTypes.node,
locale: PropTypes.oneOf(SupportedWixLocales),
skin: PropTypes.oneOf([
'general',
'standard',
'neutralStandard',
'danger',
'warning',
'urgent',
'success',
'light',
]),
size: PropTypes.oneOf(['small', 'medium']),
showShadow: PropTypes.bool,
truncate: PropTypes.bool,
};
CounterBadge.defaultProps = {
skin: 'general',
size: 'small',
showShadow: false,
truncate: true,
};
export default CounterBadge;
//# sourceMappingURL=CounterBadge.js.map