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

Disable skin tones for reaction emoji

Browse source
This commit is contained in:
Ken Powers 2020-05-11 19:14:02 -04:00 • committed by GitHub
parent a7e8b9e655
commit 5c6a474ec9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

56
ts/components/emoji/EmojiPicker.tsx
View file

@ -24,10 +24,11 @@ export type EmojiPickDataType = { skinTone?: number; shortName: string };
export type OwnProps = { export type OwnProps = {
readonly i18n: LocalizerType; readonly i18n: LocalizerType;
readonly disableSkinTones?: boolean;
readonly onPickEmoji: (o: EmojiPickDataType) => unknown; readonly onPickEmoji: (o: EmojiPickDataType) => unknown;
readonly doSend?: () => unknown; readonly doSend?: () => unknown;
readonly skinTone: number; readonly skinTone?: number;
readonly onSetSkinTone: (tone: number) => unknown; readonly onSetSkinTone?: (tone: number) => unknown;
readonly recentEmojis?: Array<string>; readonly recentEmojis?: Array<string>;
readonly onClose?: () => unknown; readonly onClose?: () => unknown;
}; };
@ -63,6 +64,7 @@ export const EmojiPicker = React.memo(
doSend, doSend,
onPickEmoji, onPickEmoji,
skinTone = 0, skinTone = 0,
disableSkinTones = false,
onSetSkinTone, onSetSkinTone,
recentEmojis = [], recentEmojis = [],
style, style,
@ -81,7 +83,9 @@ export const EmojiPicker = React.memo(
const [searchMode, setSearchMode] = React.useState(false); const [searchMode, setSearchMode] = React.useState(false);
const [searchText, setSearchText] = React.useState(''); const [searchText, setSearchText] = React.useState('');
const [scrollToRow, setScrollToRow] = React.useState(0); const [scrollToRow, setScrollToRow] = React.useState(0);
const [selectedTone, setSelectedTone] = React.useState(skinTone); const [selectedTone, setSelectedTone] = React.useState(
disableSkinTones ? 0 : skinTone
);
const handleToggleSearch = React.useCallback( const handleToggleSearch = React.useCallback(
(e: React.MouseEvent) => { (e: React.MouseEvent) => {
@ -114,9 +118,11 @@ export const EmojiPicker = React.memo(
const { tone = '0' } = e.currentTarget.dataset; const { tone = '0' } = e.currentTarget.dataset;
const parsedTone = parseInt(tone, 10); const parsedTone = parseInt(tone, 10);
setSelectedTone(parsedTone); setSelectedTone(parsedTone);
onSetSkinTone(parsedTone); if (onSetSkinTone) {
onSetSkinTone(parsedTone);
}
}, },
[] [onSetSkinTone]
); );
const handlePickEmoji = React.useCallback( const handlePickEmoji = React.useCallback(
@ -376,25 +382,27 @@ export const EmojiPicker = React.memo(
/> />
</div> </div>
)} )}
<footer className="module-emoji-picker__footer"> {!disableSkinTones ? (
{[0, 1, 2, 3, 4, 5].map(tone => ( <footer className="module-emoji-picker__footer">
<button {[0, 1, 2, 3, 4, 5].map(tone => (
key={tone} <button
data-tone={tone} key={tone}
onClick={handlePickTone} data-tone={tone}
title={i18n('EmojiPicker--skin-tone', [`${tone}`])} onClick={handlePickTone}
className={classNames( title={i18n('EmojiPicker--skin-tone', [`${tone}`])}
'module-emoji-picker__button', className={classNames(
'module-emoji-picker__button--footer', 'module-emoji-picker__button',
selectedTone === tone 'module-emoji-picker__button--footer',
? 'module-emoji-picker__button--selected' selectedTone === tone
: null ? 'module-emoji-picker__button--selected'
)} : null
> )}
<Emoji shortName="hand" skinTone={tone} size={20} /> >
</button> <Emoji shortName="hand" skinTone={tone} size={20} />
))} </button>
</footer> ))}
</footer>
) : null}
</div> </div>
); );
} }

8
ts/state/smart/EmojiPicker.tsx
View file

@ -14,8 +14,11 @@ import { LocalizerType } from '../../types/Util';
export const SmartEmojiPicker = React.forwardRef< export const SmartEmojiPicker = React.forwardRef<
HTMLDivElement, HTMLDivElement,
Pick<EmojiPickerProps, 'onPickEmoji' | 'onClose' | 'style'> Pick<
>(({ onPickEmoji, onClose, style }, ref) => { EmojiPickerProps,
'onPickEmoji' | 'onClose' | 'style' | 'disableSkinTones'
>
>(({ onPickEmoji, onClose, style, disableSkinTones }, ref) => {
const i18n = useSelector<StateType, LocalizerType>(getIntl); const i18n = useSelector<StateType, LocalizerType>(getIntl);
const skinTone = useSelector<StateType, number>(state => const skinTone = useSelector<StateType, number>(state =>
get(state, ['items', 'skinTone'], 0) get(state, ['items', 'skinTone'], 0)
@ -52,6 +55,7 @@ export const SmartEmojiPicker = React.forwardRef<
recentEmojis={recentEmojis} recentEmojis={recentEmojis}
onClose={onClose} onClose={onClose}
style={style} style={style}
disableSkinTones={disableSkinTones}
/> />
); );
}); });

1
ts/state/smart/Timeline.tsx
View file

@ -59,6 +59,7 @@ function renderEmojiPicker({
onPickEmoji={onPickEmoji} onPickEmoji={onPickEmoji}
onClose={onClose} onClose={onClose}
style={style} style={style}
disableSkinTones={true}
/> />
); );
} }