forked from rDrama/rDrama
Confirm before deleting
parent
bf9c2b1a9b
commit
6016af54e5
|
@ -40,6 +40,10 @@
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ChatMessage-button__confirmed i {
|
||||||
|
color: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
.ChatMessage-delete {
|
.ChatMessage-delete {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useCallback, useState } from "react";
|
||||||
|
import cx from "classnames";
|
||||||
|
import key from "weak-key";
|
||||||
import { Username } from "./Username";
|
import { Username } from "./Username";
|
||||||
import { useChat, useRootContext } from "../../hooks";
|
import { useChat, useRootContext } from "../../hooks";
|
||||||
import "./ChatMessage.css";
|
import "./ChatMessage.css";
|
||||||
import key from "weak-key";
|
|
||||||
|
|
||||||
interface ChatMessageProps extends ChatSpeakResponse {
|
interface ChatMessageProps extends ChatSpeakResponse {
|
||||||
showUser?: boolean;
|
showUser?: boolean;
|
||||||
|
@ -48,6 +49,14 @@ export function ChatMessage({
|
||||||
? { borderLeft: `2px solid #${themeColor}` }
|
? { borderLeft: `2px solid #${themeColor}` }
|
||||||
: {};
|
: {};
|
||||||
const style = { ...mentionStyle, ...quoteStyle };
|
const style = { ...mentionStyle, ...quoteStyle };
|
||||||
|
const [confirmedDelete, setConfirmedDelete] = useState(false);
|
||||||
|
const handleDeleteMessage = useCallback(() => {
|
||||||
|
if (confirmedDelete) {
|
||||||
|
deleteMessage(text);
|
||||||
|
} else {
|
||||||
|
setConfirmedDelete(true);
|
||||||
|
}
|
||||||
|
}, [text, confirmedDelete]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={"ChatMessage"} style={style}>
|
<div className={"ChatMessage"} style={style}>
|
||||||
|
@ -80,8 +89,10 @@ export function ChatMessage({
|
||||||
</div>
|
</div>
|
||||||
{admin && (
|
{admin && (
|
||||||
<button
|
<button
|
||||||
className="ChatMessage-button ChatMessage-delete quote btn del"
|
className={cx("ChatMessage-button ChatMessage-delete btn", {
|
||||||
onClick={() => deleteMessage(text)}
|
"ChatMessage-button__confirmed": confirmedDelete,
|
||||||
|
})}
|
||||||
|
onClick={handleDeleteMessage}
|
||||||
>
|
>
|
||||||
<i className="fas fa-trash-alt"></i>
|
<i className="fas fa-trash-alt"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue