decentraland-ui
Version:
Decentraland's UI components and styles
65 lines (64 loc) • 3.77 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RarityFilter = void 0;
var react_1 = __importStar(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var schemas_1 = require("@dcl/schemas");
var Box_1 = require("../Box");
var InfoTooltip_1 = require("../InfoTooltip");
var Media_1 = require("../../components/Media");
var ArrayFilter_1 = require("../ArrayFilter");
require("./RarityFilter.css");
var RarityFilter = function (props) {
var onChange = props.onChange, rarities = props.rarities, i18n = props.i18n, className = props.className, _a = props.defaultCollapsed, defaultCollapsed = _a === void 0 ? false : _a;
var isMobileOrTablet = (0, Media_1.useTabletAndBelowMediaQuery)();
var rarityOptions = (0, react_1.useMemo)(function () {
var options = Object.values(schemas_1.Rarity)
.filter(function (value) { return typeof value === 'string'; })
.reverse();
return options.map(function (rarity) { return ({
value: rarity,
text: i18n.rarities[rarity]
}); });
}, []);
var handleRaritiesChange = (0, react_1.useCallback)(function (newValue) {
onChange(newValue);
}, [onChange]);
var allRaritiesSelected = rarities.length === 0 || rarities.length === rarityOptions.length;
var header = (0, react_1.useMemo)(function () { return (react_1.default.createElement("div", { className: "dui-rarity-filter__header" }, !isMobileOrTablet ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "dui-rarity-filter__name" }, i18n.title),
react_1.default.createElement(InfoTooltip_1.InfoTooltip, { content: i18n.tooltip, position: "bottom left" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { className: "dui-rarity-filter__name" }, i18n.title),
react_1.default.createElement("span", { className: "dui-rarity-filter__value" }, allRaritiesSelected
? i18n.all_rarities
: i18n.count_rarities(rarities.length)))))); }, [rarities, isMobileOrTablet, allRaritiesSelected]);
return (react_1.default.createElement(Box_1.Box, { header: header, className: (0, classnames_1.default)('dui-rarity-filter', className), collapsible: true, defaultCollapsed: defaultCollapsed || isMobileOrTablet },
react_1.default.createElement(ArrayFilter_1.ArrayFilter, { options: rarityOptions, onChange: handleRaritiesChange, values: rarities })));
};
exports.RarityFilter = RarityFilter;