mirror of
https://github.com/Qortal/qortal-mobile.git
synced 2025-03-14 20:02:33 +00:00
fix emoji
This commit is contained in:
parent
65d17b4080
commit
2638b24def
@ -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 */
|
||||
}
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user