zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

handle swipe to right to close notification

Browse Source
This commit is contained in:
MathieuG-P
2022-12-28 21:40:55 +01:00
parent 46687e5068
commit f7fd662fef
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/notification/notification-item.component.tsx
+26 -16
View File
@@ -1,5 +1,5 @@
import { NotificationResult, NotificationType, Notification } from "renderer/services/notification.service"
import { motion } from "framer-motion"
import { motion, PanInfo } from "framer-motion"
import { BsmImage } from "../shared/bsm-image.component";
import BeatRunningImg from "../../../../assets/images/apngs/beat-running.png";
import BeatConflictImg from "../../../../assets/images/apngs/beat-conflict.png";
@@ -10,27 +10,37 @@ import { useTranslation } from "renderer/hooks/use-translation.hook";
export function NotificationItem({resolver, notification}: {resolver?: (value: NotificationResult|string) => void, notification: Notification}) {
const t = useTranslation();
const t = useTranslation();
const renderImage = (() => {
if(notification.type === NotificationType.SUCCESS){ return BeatRunningImg; }
if(notification.type === NotificationType.WARNING){ return BeatWaitingImg; }
if(notification.type === NotificationType.ERROR){ return BeatConflictImg; }
return BeatImpatientImg;
})()
const renderImage = (() => {
if(notification.type === NotificationType.SUCCESS){ return BeatRunningImg; }
if(notification.type === NotificationType.WARNING){ return BeatWaitingImg; }
if(notification.type === NotificationType.ERROR){ return BeatConflictImg; }
return BeatImpatientImg;
})();
const renderNeonColors = (() => {
if(notification.type === NotificationType.SUCCESS){ return "bg-green-400 shadow-green-400"; }
if(notification.type === NotificationType.WARNING){ return "bg-yellow-400 shadow-yellow-400"; }
if(notification.type === NotificationType.ERROR){ return "bg-red-500 shadow-red-500"; }
return "bg-gray-800 shadow-gray-800 dark:bg-white dark:shadow-white";
})()
const renderNeonColors = (() => {
if(notification.type === NotificationType.SUCCESS){ return "bg-green-400 shadow-green-400"; }
if(notification.type === NotificationType.WARNING){ return "bg-yellow-400 shadow-yellow-400"; }
if(notification.type === NotificationType.ERROR){ return "bg-red-500 shadow-red-500"; }
return "bg-gray-800 shadow-gray-800 dark:bg-white dark:shadow-white";
})();
const handleDragEnd = (e: MouseEvent, info: PanInfo) => {
const offset = info.offset.x;
const velocity = info.velocity.x;
if(offset > 30 && velocity > 300){
resolver(NotificationResult.CLOSE);
}
}
return (
<motion.li layout initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
<motion.li layout drag="x" dragConstraints={{left: 0, right: 0}} dragElastic={{left: 0, right: .3}} onDragEnd={handleDragEnd} initial={{x: "110%"}} animate={{x: "0%"}} exit={{x:"110%"}} className="relative w-[270px] rounded-md overflow-hidden -left-[285px] mb-4 cursor-grab active:cursor-grabbing shadow-md shadow-black bg-gradient-to-br from-light-main-color-2 to-light-main-color-2 dark:from-main-color-2 dark:to-main-color-2 text-gray-800 dark:text-white">
<div className="w-full flex flex-col">
<div className="flex items-center justify-start pl-1">
<BsmImage className="h-14 mr-1" image={renderImage}/>
<BsmImage className="h-14 mr-1 pointer-events-none" image={renderImage}/>
<div className="flex flex-col py-2">
<h1 className="font-bold leading-4 tracking-wide pr-5 my-1">{t(notification.title)}</h1>
{notification.desc && <p className="text-xs pr-1">{t(notification.desc)}</p>}