decentraland-ui/dist/components/RarityBadge/RarityBadge.js

Decentraland's UI components and styles

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var schemas_1 = require("@dcl/schemas");
var colors_1 = require("../../lib/colors");
var Popup_1 = require("../Popup/Popup");
require("./RarityBadge.css");
var RarityBadge = function (_a) {
    var rarity = _a.rarity, className = _a.className, size = _a.size, withTooltip = _a.withTooltip, i18n = _a.i18n, onClick = _a.onClick;
    var _b = schemas_1.Rarity.getGradient(rarity), lightColor = _b[0], regularColor = _b[1];
    var hexColor = (0, colors_1.hex2rgb)(regularColor);
    var trigger = (react_1.default.createElement("div", { className: (0, classnames_1.default)('dui-rarity-badge', className), style: {
            cursor: onClick ? 'pointer' : 'default'
        }, title: !withTooltip ? i18n.rarities_description[rarity] : '', onClick: onClick },
        react_1.default.createElement("div", { className: (0, classnames_1.default)('wrapper', size), style: {
                backgroundColor: "rgb(".concat(hexColor.r, " ").concat(hexColor.g, " ").concat(hexColor.b, " / 20%)")
            } },
            react_1.default.createElement("span", { className: "text", style: { color: lightColor } }, i18n.rarities[rarity]))));
    return withTooltip ? (react_1.default.createElement(Popup_1.Popup, { position: "top center", content: i18n.rarities_description[rarity], trigger: trigger })) : (trigger);
};
RarityBadge.defaultProps = {
    size: 'medium',
    withTooltip: true
};
/**
 * @deprecated Should start using the same component migrated to UI2.
 */
exports.default = react_1.default.memo(RarityBadge);