decentraland-ui
Version:
Decentraland's UI components and styles
224 lines (223 loc) • 13.7 kB
JavaScript
"use strict";
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 });
var react_1 = __importStar(require("react"));
var Loader_1 = require("../Loader/Loader");
var types_1 = require("./types");
var EmptyInbox_1 = __importDefault(require("../Icons/Notifications/EmptyInbox"));
var Tabs_1 = require("../Tabs/Tabs");
var Button_1 = require("../Button/Button");
var time_1 = __importDefault(require("../../lib/time"));
var Media_1 = require("../Media");
var Modal_1 = require("../Modal/Modal");
var Close_1 = require("../Close/Close");
var History_1 = __importDefault(require("../Icons/Notifications/History"));
require("./NotificationsFeed.css");
var utils_1 = require("./utils");
var i18N = {
en: {
onboarding: {
title: 'Welcome to Decentraland Notifications',
description: "Never miss a thing! Now, you'll receive a notification each time something relevant happens with your account.",
button: "Let's begin"
},
feed: {
title: 'Notifications',
tabs: {
newest: 'New',
read: 'Seen'
},
empty: {
title: "You're all caught up!",
description: 'No new notifications.'
},
history: {
title: 'Notifications History',
description: "You'll be able to access old notifications here."
}
}
},
es: {
onboarding: {
title: 'Tus Notificaciones de Decentraland',
description: '¡No te pierdas nada nunca más! Ahora recibirás una notificación cada vez que ocurra algo relevante en tu cuenta.',
button: 'Continuar'
},
feed: {
title: 'Notificaciones',
tabs: {
newest: 'Reciente',
read: 'Visto'
},
empty: {
title: '¡Ya estas al día!',
description: 'Te avisaremos si hay nuevas notificaciones para ti.'
},
history: {
title: 'Historial de Notificaciones',
description: 'Aquí aparecerá una lista detallada de las Notificaciones pasadas'
}
}
},
zh: {
onboarding: {
title: '欢迎访问 Decentraland 通知',
description: '不再错过任何信息！现在，每当您的账户发生相关事件，您都会收到通知。',
button: '讓我們開始'
},
feed: {
title: '通知',
tabs: {
newest: '新',
read: '看到的'
},
empty: {
title: '你们都赶上了！',
description: '没有新通知。'
},
history: {
title: '通知历史',
description: '您可以在这里访问旧通知。'
}
}
}
};
var NotificationHandler = function (_a) {
var locale = _a.locale, notification = _a.notification, renderProfile = _a.renderProfile;
var NotificationComponent = utils_1.NotificationComponentByType[notification.type];
if (!NotificationComponent) {
return null;
}
return (react_1.default.createElement(NotificationComponent, { notification: notification, locale: locale, renderProfile: renderProfile }));
};
/**
* @deprecated Should start using the same component migrated to UI2.
*/
function NotificationsFeed(_a) {
var items = _a.items, isLoading = _a.isLoading, locale = _a.locale, isOnboarding = _a.isOnboarding, activeTab = _a.activeTab, isOpen = _a.isOpen, renderProfile = _a.renderProfile, onChangeTab = _a.onChangeTab, onBegin = _a.onBegin, onClose = _a.onClose;
var unreadNotifications = (0, react_1.useMemo)(function () { return items.filter(function (notification) { return !notification.read; }); }, [items]);
var previousNotifications = (0, react_1.useMemo)(function () {
return items.filter(function (notification) {
if (!notification.read)
return false;
var diff = (0, time_1.default)(notification.timestamp).diff(new Date(), 'hour');
if (diff >= -48 && diff <= 0) {
return true;
}
});
}, [items]);
var readNotifications = (0, react_1.useMemo)(function () {
return items.filter(function (notification) {
return notification.read &&
!previousNotifications.find(function (_a) {
var id = _a.id;
return id === notification.id;
});
});
}, [items]);
(0, react_1.useEffect)(function () {
function handleClickOutside(event) {
var element = document.querySelector('.notifications-feed');
if (element && !element.contains(event.target)) {
event.preventDefault();
event.stopPropagation();
onClose(event);
}
}
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
}
else {
document.removeEventListener('mousedown', handleClickOutside);
}
return function () {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [isOpen]);
if (isOnboarding) {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Media_1.Mobile, null,
react_1.default.createElement(Modal_1.Modal, { open: isOpen, size: "fullscreen", closeIcon: react_1.default.createElement(Close_1.Close, null) },
react_1.default.createElement(Modal_1.Modal.Content, null,
react_1.default.createElement(Onboarding, { locale: locale, onBegin: onBegin })))),
react_1.default.createElement(Media_1.NotMobile, null,
react_1.default.createElement("div", { className: "dcl notifications-feed" },
react_1.default.createElement(Onboarding, { locale: locale, onBegin: onBegin })))));
}
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Media_1.Mobile, null,
react_1.default.createElement(Modal_1.Modal, { open: isOpen, size: "fullscreen", closeIcon: react_1.default.createElement(Close_1.Close, null), closeOnDocumentClick: true, closeOnTriggerClick: true, onClose: onClose },
react_1.default.createElement("div", { className: "dcl notifications-feed-modal" },
react_1.default.createElement(Feed, { locale: locale, previousNotifications: previousNotifications, readNotifications: readNotifications, unreadNotifications: unreadNotifications, onChangeTab: onChangeTab, activeTab: activeTab, isModal: true, renderProfile: renderProfile })))),
react_1.default.createElement(Media_1.NotMobile, null,
react_1.default.createElement("div", { className: "dcl notifications-feed" }, isLoading ? (react_1.default.createElement("div", { className: "dcl notifications-feed__loader" },
react_1.default.createElement(Loader_1.Loader, { active: true }))) : (react_1.default.createElement(Feed, { locale: locale, previousNotifications: previousNotifications, readNotifications: readNotifications, unreadNotifications: unreadNotifications, onChangeTab: onChangeTab, activeTab: activeTab, renderProfile: renderProfile }))))));
}
exports.default = NotificationsFeed;
var NoNotifications = function (_a) {
var locale = _a.locale;
return (react_1.default.createElement("div", { className: "dcl notifications-feed__emptyview" },
react_1.default.createElement(EmptyInbox_1.default, null),
react_1.default.createElement("p", { className: "dcl notifications-feed__emptyview-title" }, i18N[locale].feed.empty.title),
react_1.default.createElement("p", { className: "dcl notifications-feed__emptyview-description" }, i18N[locale].feed.empty.description)));
};
var NoReadNotifications = function (_a) {
var locale = _a.locale;
return (react_1.default.createElement("div", { className: "dcl notifications-feed__emptyview" },
react_1.default.createElement(History_1.default, null),
react_1.default.createElement("p", { className: "dcl notifications-feed__emptyview-title" }, i18N[locale].feed.history.title),
react_1.default.createElement("p", { className: "dcl notifications-feed__emptyview-description" }, i18N[locale].feed.history.description)));
};
var Onboarding = function (_a) {
var locale = _a.locale, onBegin = _a.onBegin;
return (react_1.default.createElement("div", { className: "dcl notifications-feed__content" },
react_1.default.createElement("div", { className: "dcl notifications-feed__onboarding" },
react_1.default.createElement("div", { className: "dcl notifications-feed__onboarding-bell" }),
react_1.default.createElement("p", { className: "dcl notifications-feed__emptyview-title" }, i18N[locale].onboarding.title),
react_1.default.createElement("p", { className: "dcl notifications-feed__emptyview-description" }, i18N[locale].onboarding.description),
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.Button, { inverted: true, size: "small", onClick: onBegin }, i18N[locale].onboarding.button)))));
};
var Feed = function (_a) {
var unreadNotifications = _a.unreadNotifications, locale = _a.locale, previousNotifications = _a.previousNotifications, readNotifications = _a.readNotifications, activeTab = _a.activeTab, isModal = _a.isModal, renderProfile = _a.renderProfile, onChangeTab = _a.onChangeTab;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "dcl notifications-feed__header" },
react_1.default.createElement("p", { className: "dcl notifications-feed__title" }, i18N[locale].feed.title)),
react_1.default.createElement("div", { className: "dcl notifications-feed__content" },
react_1.default.createElement(Tabs_1.Tabs, { className: "notifications-feed__tabs" },
react_1.default.createElement(Tabs_1.Tabs.Tab, { active: activeTab === types_1.NotificationActiveTab.NEWEST, onClick: function (e) { return onChangeTab(e, types_1.NotificationActiveTab.NEWEST); } }, i18N[locale].feed.tabs.newest),
react_1.default.createElement(Tabs_1.Tabs.Tab, { active: activeTab === types_1.NotificationActiveTab.READ, onClick: function (e) { return onChangeTab(e, types_1.NotificationActiveTab.READ); } }, i18N[locale].feed.tabs.read)),
react_1.default.createElement("div", { className: "dcl ".concat(isModal
? 'notifications-feed-modal__list-container'
: 'notifications-feed__list-container') },
react_1.default.createElement("div", { className: "dcl notifications-feed__list" }, activeTab == 'newest' ? (react_1.default.createElement(react_1.default.Fragment, null, !unreadNotifications.length && !previousNotifications.length ? (react_1.default.createElement(NoNotifications, { locale: locale })) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", null, unreadNotifications.map(function (notification) { return (react_1.default.createElement(NotificationHandler, { key: notification.id, notification: notification, locale: locale, renderProfile: renderProfile })); })),
previousNotifications.length > 0 && (react_1.default.createElement("div", null,
react_1.default.createElement("p", { className: "dcl notification-feed__list-previous-title" }, "Previous"),
previousNotifications.map(function (notification) { return (react_1.default.createElement(NotificationHandler, { key: notification.id, notification: notification, locale: locale, renderProfile: renderProfile })); }))))))) : (react_1.default.createElement(react_1.default.Fragment, null, readNotifications.length > 0 ? (readNotifications.map(function (notification) { return (react_1.default.createElement(NotificationHandler, { key: notification.id, notification: notification, locale: locale, renderProfile: renderProfile })); })) : (react_1.default.createElement(NoReadNotifications, { locale: locale })))))))));
};