fix emoji

This commit is contained in:
PhilReact 2024-11-12 00:32:45 +02:00
parent 65d17b4080
commit 2638b24def
2 changed files with 96 additions and 58 deletions

View File

@ -1,14 +1,27 @@
.reaction-container {
position: relative; /* Parent must be positioned relatively */
}
.emoji-picker {
position: absolute; /* Picker positioned absolutely relative to the parent */
right: 0;
z-index: 1000; /* Ensure picker appears above other content */
}
.message-container {
overflow: visible; /* Ensure the message container doesn't cut off the picker */
}
position: relative; /* Parent must be positioned relatively */
}
.emoji-picker {
position: absolute; /* Picker positioned absolutely relative to the parent */
right: 0;
z-index: 9000000000; /* Ensure picker appears above other content */
}
.message-container {
overflow: visible; /* Ensure the message container doesn't cut off the picker */
}
.reaction-container {
position: relative;
}
.emoji-picker {
overflow: hidden;
width: auto
}
.EmojiPickerReact.epr-dark-theme {
--epr-emoji-size: 18px; /* Adjust emoji size for dark mode */
}

View File

@ -1,39 +1,65 @@
import React, { useState, useRef, useEffect } from 'react';
import Picker, { Theme } from 'emoji-picker-react';
import './ReactionPicker.css'; // CSS for proper positioning
import ReactDOM from 'react-dom';
import Picker, { EmojiStyle, Theme } from 'emoji-picker-react';
import './ReactionPicker.css';
import { ButtonBase } from '@mui/material';
import { isMobile } from '../App';
export const ReactionPicker = ({ onReaction }) => {
const [showPicker, setShowPicker] = useState(false); // Manage picker visibility
const pickerRef = useRef(null); // Reference to the picker
const [showPicker, setShowPicker] = useState(false);
const [pickerPosition, setPickerPosition] = useState({ top: 0, left: 0 });
const pickerRef = useRef(null);
const buttonRef = useRef(null);
const handleReaction = (emojiObject) => {
onReaction(emojiObject.emoji); // Handle the selected emoji reaction
setShowPicker(false); // Close picker after selection
onReaction(emojiObject.emoji);
setShowPicker(false);
};
const handlePicker = (emojiObject) => {
onReaction(emojiObject.emoji); // Handle the selected emoji reaction
setShowPicker(false); // Close picker after selection
onReaction(emojiObject.emoji);
setShowPicker(false);
};
const togglePicker = (e) => {
e.preventDefault();
e.stopPropagation();
if (showPicker) {
setShowPicker(false);
} else {
// Get the button's position
const buttonRect = buttonRef.current.getBoundingClientRect();
const pickerWidth = isMobile ? 300 : 350; // Adjust based on picker width
// Calculate position to align the right edge of the picker with the button's right edge
setPickerPosition({
top: buttonRect.bottom + window.scrollY, // Position below the button
left: buttonRect.right + window.scrollX - pickerWidth, // Align right edges
});
setShowPicker(true);
}
};
// Close picker if clicked outside
useEffect(() => {
const handleClickOutside = (event) => {
if (pickerRef.current && !pickerRef.current.contains(event.target)) {
setShowPicker(false); // Close picker
if (
pickerRef.current &&
!pickerRef.current.contains(event.target) &&
buttonRef.current &&
!buttonRef.current.contains(event.target)
) {
setShowPicker(false);
}
};
// Add event listener when picker is shown
if (showPicker) {
document.addEventListener('mousedown', handleClickOutside);
} else {
document.removeEventListener('mousedown', handleClickOutside);
}
// Clean up the event listener on unmount
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
@ -42,42 +68,41 @@ export const ReactionPicker = ({ onReaction }) => {
return (
<div className="reaction-container">
{/* Emoji CTA */}
<ButtonBase sx={{
fontSize: '22px'
}}
// onTouchStart={(e) => {
// e.preventDefault(); // Prevent mobile keyboard
// e.stopPropagation();
// if(!isMobile) return
// setShowPicker(!showPicker);
// }}
onClick={(e) => {
e.preventDefault(); // Prevents any focus issues
e.stopPropagation();
// if(isMobile) return
setShowPicker(!showPicker);
}}
<ButtonBase
sx={{ fontSize: '22px' }}
ref={buttonRef}
onClick={togglePicker}
>
😃
</ButtonBase>
{/* Emoji Picker with dark theme */}
{showPicker && (
<div className="emoji-picker" ref={pickerRef} onClick={(e) => e.preventDefault()}>
<Picker
height={isMobile ? 350 : 450}
width={isMobile ? 300 : 350 }
reactionsDefaultOpen={true}
onReactionClick={handleReaction}
onEmojiClick={handlePicker}
allowExpandReactions={true}
autoFocusSearch={false}
theme={Theme.DARK}
/>
</div>
)}
{/* Emoji Picker rendered in a portal with calculated position */}
{showPicker &&
ReactDOM.createPortal(
<div
className="emoji-picker"
ref={pickerRef}
style={{
position: 'absolute',
top: pickerPosition.top,
left: pickerPosition.left,
zIndex: 1000,
}}
>
<Picker
height={isMobile ? 350 : 450}
width={isMobile ? 300 : 350}
reactionsDefaultOpen={true}
onReactionClick={handleReaction}
onEmojiClick={handlePicker}
allowExpandReactions={true}
autoFocusSearch={false}
theme={Theme.DARK}
emojiStyle={EmojiStyle.NATIVE}
/>
</div>,
document.body
)}
</div>
);
};