zerosoul
75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
import styled from "styled-components";
|
|
import { useSelector } from "react-redux";
|
|
|
|
import { useReactMessageMutation } from "../../../app/services/message";
|
|
import { Emojis } from "../../../app/config";
|
|
import Emoji from "../ReactionItem";
|
|
const StyledPicker = styled.div`
|
|
background: none;
|
|
z-index: 999;
|
|
.emojis {
|
|
padding: 4px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
background: #fff;
|
|
filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
|
|
border-radius: 12px;
|
|
&.reacting {
|
|
opacity: 0.6;
|
|
}
|
|
.wrapper {
|
|
display: flex;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
&:hover,
|
|
&.reacted {
|
|
background-color: #f5f6f7;
|
|
}
|
|
> .emoji {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default function ReactionPicker({ mid, hidePicker }) {
|
|
// const wrapperRef = useRef(null);
|
|
const [reactMessage, { isLoading }] = useReactMessageMutation();
|
|
const { reactionData, currUid } = useSelector((store) => {
|
|
return {
|
|
reactionData: store.reactionMessage[mid] || {},
|
|
currUid: store.authData.uid,
|
|
};
|
|
});
|
|
// useOutsideClick(wrapperRef, hidePicker);
|
|
const handleReact = (emoji) => {
|
|
console.log("react", emoji);
|
|
reactMessage({ mid, action: emoji });
|
|
hidePicker();
|
|
};
|
|
return (
|
|
<StyledPicker>
|
|
<ul className={`emojis ${isLoading ? "reacting" : ""}`}>
|
|
{Emojis.map((emoji) => {
|
|
let reacted =
|
|
reactionData[emoji] &&
|
|
reactionData[emoji].findIndex((id) => id == currUid) > -1;
|
|
|
|
return (
|
|
<li
|
|
className={`wrapper ${reacted ? "reacted" : ""}`}
|
|
key={emoji}
|
|
onClick={handleReact.bind(null, emoji)}
|
|
>
|
|
<Emoji native={emoji} />
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</StyledPicker>
|
|
);
|
|
}
|