mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Enable React with any Emoji

Browse source
This commit is contained in:
Ken Powers 2020-06-03 14:36:17 -04:00 • committed by Scott Nonnenberg
parent d4ee1d4133
commit 480e1808ba
3 changed files with 26 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
preload.js
View file

@ -15,8 +15,6 @@ try {
// Derive profile key versions, then use those to fetch versioned profiles from server // Derive profile key versions, then use those to fetch versioned profiles from server
window.VERSIONED_PROFILE_FETCH = false; window.VERSIONED_PROFILE_FETCH = false;
// Enable full emoji picker for reactions
window.REACT_ANY_EMOJI = false;
window.PROTO_ROOT = 'protos'; window.PROTO_ROOT = 'protos';
const config = require('url').parse(window.location.toString(), true).query; const config = require('url').parse(window.location.toString(), true).query;

57
ts/components/conversation/ReactionPicker.tsx
View file

@ -21,10 +21,7 @@ export type OwnProps = {
export type Props = OwnProps & Pick<React.HTMLProps<HTMLDivElement>, 'style'>; export type Props = OwnProps & Pick<React.HTMLProps<HTMLDivElement>, 'style'>;
const emojis = ['❤️', '👍', '👎', '😂', '😮', '😢', '😡']; const emojis = ['❤️', '👍', '👎', '😂', '😮', '😢'];
const getEmojis = () =>
emojis.slice(0, window.REACT_ANY_EMOJI ? emojis.length - 1 : emojis.length);
export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>( export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
({ i18n, selected, onClose, onPick, renderEmojiPicker, style }, ref) => { ({ i18n, selected, onClose, onPick, renderEmojiPicker, style }, ref) => {
@ -57,13 +54,13 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
// Focus first button and restore focus on unmount // Focus first button and restore focus on unmount
useRestoreFocus(focusRef); useRestoreFocus(focusRef);
const otherSelected = selected && !getEmojis().includes(selected); const otherSelected = selected && !emojis.includes(selected);
return pickingOther ? ( return pickingOther ? (
renderEmojiPicker({ onPickEmoji, onClose, style, ref }) renderEmojiPicker({ onPickEmoji, onClose, style, ref })
) : ( ) : (
<div ref={ref} style={style} className="module-reaction-picker"> <div ref={ref} style={style} className="module-reaction-picker">
{getEmojis().map((emoji, index) => { {emojis.map((emoji, index) => {
const maybeFocusRef = index === 0 ? focusRef : undefined; const maybeFocusRef = index === 0 ? focusRef : undefined;
return ( return (
@ -89,31 +86,29 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
</button> </button>
); );
})} })}
{window.REACT_ANY_EMOJI ? ( <button
<button className={classNames(
className={classNames( 'module-reaction-picker__emoji-btn',
'module-reaction-picker__emoji-btn', otherSelected
otherSelected ? 'module-reaction-picker__emoji-btn--selected'
? 'module-reaction-picker__emoji-btn--selected' : 'module-reaction-picker__emoji-btn--more'
: 'module-reaction-picker__emoji-btn--more' )}
)} onClick={e => {
onClick={e => { e.stopPropagation();
e.stopPropagation(); if (otherSelected && selected) {
if (otherSelected && selected) { onPick(selected);
onPick(selected); } else {
} else { setPickingOther(true);
setPickingOther(true); }
} }}
}} title={i18n('ReactionsViewer--more')}
title={i18n('ReactionsViewer--more')} >
> {otherSelected ? (
{otherSelected ? ( <div className="module-reaction-picker__emoji-btn__emoji">
<div className="module-reaction-picker__emoji-btn__emoji"> <Emoji size={48} emoji={selected} />
<Emoji size={48} emoji={selected} /> </div>
</div> ) : null}
) : null} </button>
</button>
) : null}
</div> </div>
); );
} }

3
ts/window.d.ts vendored
View file

@ -47,9 +47,6 @@ declare global {
ConversationController: ConversationControllerType; ConversationController: ConversationControllerType;
WebAPI: WebAPIConnectType; WebAPI: WebAPIConnectType;
Whisper: WhisperType; Whisper: WhisperType;
// Flags
REACT_ANY_EMOJI: boolean;
} }
} }