decentraland-ui
Version:
Decentraland's UI components and styles
149 lines (148 loc) • 7.83 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserMenu = void 0;
var react_1 = __importStar(require("react"));
var uuid_1 = require("uuid");
var classnames_1 = __importDefault(require("classnames"));
var UserMenuSignedIn_1 = require("./UserMenuSignedIn/UserMenuSignedIn");
var UserMenu_i18n_1 = require("./UserMenu.i18n");
var UserMenu_types_1 = require("./UserMenu.types");
var Button_1 = require("../Button/Button");
var Column_1 = require("../Column/Column");
var Loader_1 = require("../Loader/Loader");
var config_1 = require("../../config");
var Row_1 = require("../Row/Row");
require("./UserMenu.css");
var Media_1 = require("../Media");
var DownloadIcon_1 = __importDefault(require("../Icons/DownloadIcon"));
/**
* @deprecated Should start using the same component migrated to UI2.
*/
exports.UserMenu = react_1.default.memo(function (props) {
var isSignedIn = props.isSignedIn, isSigningIn = props.isSigningIn, isDisconnecting = props.isDisconnecting, manaBalances = props.manaBalances, _a = props.i18n, i18n = _a === void 0 ? UserMenu_i18n_1.i18n : _a, onClickSignIn = props.onClickSignIn, onClickBalance = props.onClickBalance, onClickOpen = props.onClickOpen, onClickDownload = props.onClickDownload, onClickUserMenuItem = props.onClickUserMenuItem, signInProps = __rest(props, ["isSignedIn", "isSigningIn", "isDisconnecting", "manaBalances", "i18n", "onClickSignIn", "onClickBalance", "onClickOpen", "onClickDownload", "onClickUserMenuItem"]);
var isTabletAndBelow = (0, Media_1.useTabletAndBelowMediaQuery)();
var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
var _c = (0, react_1.useState)(null), trackingId = _c[0], setTrackingId = _c[1];
var handleToggle = (0, react_1.useCallback)(function (event) {
var trackId = (0, uuid_1.v4)();
setIsOpen(function (prev) {
if (!prev) {
setTrackingId(trackId);
}
if (!prev && onClickOpen) {
onClickOpen(event, trackId);
}
if (isTabletAndBelow) {
if (!prev) {
window.addEventListener('scroll', noScroll);
}
else {
window.removeEventListener('scroll', noScroll);
}
}
return !prev;
});
}, [setIsOpen, onClickOpen]);
var handleClose = (0, react_1.useCallback)(function () {
setIsOpen(false);
if (isTabletAndBelow) {
window.removeEventListener('scroll', noScroll);
}
}, [setIsOpen]);
var handleDownload = (0, react_1.useCallback)(function (event) {
event.preventDefault();
onClickUserMenuItem &&
onClickUserMenuItem(event, {
type: UserMenu_types_1.UserMenuEventId.DOWNLOAD,
track_uuid: trackingId,
url: config_1.config.get('DOWNLOAD_URL')
});
setTimeout(function () {
onClickDownload
? onClickDownload(event)
: window.open(config_1.config.get('DOWNLOAD_URL'), '_blank', 'noopener');
}, onClickUserMenuItem ? 300 : 0);
}, [onClickDownload, onClickUserMenuItem, trackingId]);
var handleClickSignIn = (0, react_1.useCallback)(function (event) {
event.preventDefault();
onClickUserMenuItem &&
onClickUserMenuItem(event, {
type: UserMenu_types_1.UserMenuEventId.SIGN_IN,
track_uuid: trackingId,
url: config_1.config.get('MARKETPLACE_URL')
});
onClickSignIn(event);
}, [onClickSignIn, onClickUserMenuItem, trackingId]);
var handleClickBalance = (0, react_1.useCallback)(function (event, network) {
event.preventDefault();
onClickUserMenuItem &&
onClickUserMenuItem(event, {
type: UserMenu_types_1.UserMenuEventId.BALANCE
});
setTimeout(function () {
onClickBalance
? onClickBalance(event, network)
: window.open(config_1.config.get('ACCOUNT_URL'), '_blank', 'noopener');
}, onClickUserMenuItem ? 300 : 0);
}, [onClickBalance, onClickUserMenuItem, trackingId]);
return (react_1.default.createElement(Column_1.Column, { align: "right" },
react_1.default.createElement(Row_1.Row, { className: (0, classnames_1.default)('dcl', 'user-menu-wrapper') },
react_1.default.createElement("div", { className: (0, classnames_1.default)('dcl', 'user-menu'), onBlur: handleClose, tabIndex: 0 }, isDisconnecting ? (react_1.default.createElement("div", { className: "dcl user-menu-loader" },
react_1.default.createElement(Loader_1.Loader, { inline: true, active: true, size: "medium" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
isSignedIn && (react_1.default.createElement(UserMenuSignedIn_1.UserMenuSignedIn, __assign({}, signInProps, { manaBalances: manaBalances, trackingId: trackingId, isOpen: isOpen, i18n: i18n, onClickToggle: handleToggle, onClickClose: handleClose, onClickUserMenuItem: onClickUserMenuItem, onClickBalance: handleClickBalance }))),
!isSignedIn ? (react_1.default.createElement(Button_1.Button, { inverted: true, disabled: isSigningIn, loading: isSigningIn, onClick: handleClickSignIn }, i18n.signIn)) : null,
react_1.default.createElement(Button_1.Button, { className: "user-menu__download", primary: true, onClick: handleDownload, as: 'a', href: config_1.config.get('DOWNLOAD_URL') },
react_1.default.createElement(DownloadIcon_1.default, null),
i18n.download)))))));
});
function noScroll() {
window.scrollTo(0, 0);
}