mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Update en.json

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
environments/review-update-emo-25jnc5/deployments/2714
marcin mikołajczak 2 years ago
parent dfa5d3ec8e
commit e6d6ac6d44
4 changed files with 126 additions and 198 deletions
Show Stats Download Patch File Download Diff File

89
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
Unescape View File

@ -1,16 +1,11 @@
import { Placement } from '@popperjs/core';
import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { usePopper } from 'react-popper';
import { changeSetting } from 'soapbox/actions/settings';
import { Emoji, HStack, IconButton } from 'soapbox/components/ui';
import { getFrequentlyUsedEmojis, messages } from 'soapbox/features/emoji/components/emoji-picker-dropdown';
import { EmojiPicker as EmojiPickerAsync } from 'soapbox/features/ui/util/async-components';
import { useAppDispatch, useAppSelector, useSettings, useSoapboxConfig } from 'soapbox/hooks';
let EmojiPicker: any; // load asynchronously
import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
import { useSoapboxConfig } from 'soapbox/hooks';
interface IEmojiButton {
/** Unicode emoji character. */
@ -64,28 +59,15 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
offset = [-10, 0],
all = true,
}): JSX.Element => {
const intl = useIntl();
const dispatch = useAppDispatch();
const frequentlyUsedEmojis = useAppSelector(state => getFrequentlyUsedEmojis(state));
const settings = useSettings();
const userTheme = settings.get('themeMode');
const theme = (userTheme === 'dark' || userTheme === 'light') ? userTheme : 'auto';
const soapboxConfig = useSoapboxConfig();
const title = intl.formatMessage(messages.emoji);
const [expanded, setExpanded] = useState(false);
const [loading, setLoading] = useState(false);
// `useRef` won't trigger a re-render, while `useState` does.
// https://popper.js.org/react-popper/v2/
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const onSkinTone = (skinTone: string) => {
dispatch(changeSetting(['skinTone'], skinTone));
};
const handleClickOutside = (event: MouseEvent) => {
if ([referenceElement, popperElement].some(el => el?.contains(event.target as Node))) {
return;
@ -116,38 +98,6 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
setExpanded(true);
};
const getI18n = () => {
return {
search: intl.formatMessage(messages.emoji_search),
pick: intl.formatMessage(messages.emoji_pick),
search_no_results_1: intl.formatMessage(messages.emoji_oh_no),
search_no_results_2: intl.formatMessage(messages.emoji_not_found),
add_custom: intl.formatMessage(messages.emoji_add_custom),
categories: {
search: intl.formatMessage(messages.search_results),
frequent: intl.formatMessage(messages.recent),
people: intl.formatMessage(messages.people),
nature: intl.formatMessage(messages.nature),
foods: intl.formatMessage(messages.food),
activity: intl.formatMessage(messages.activity),
places: intl.formatMessage(messages.travel),
objects: intl.formatMessage(messages.objects),
symbols: intl.formatMessage(messages.symbols),
flags: intl.formatMessage(messages.flags),
custom: intl.formatMessage(messages.custom),
},
skins: {
choose: intl.formatMessage(messages.skins_choose),
1: intl.formatMessage(messages.skins_1),
2: intl.formatMessage(messages.skins_2),
3: intl.formatMessage(messages.skins_3),
4: intl.formatMessage(messages.skins_4),
5: intl.formatMessage(messages.skins_5),
6: intl.formatMessage(messages.skins_6),
},
};
};
useEffect(() => () => {
document.body.style.overflow = '';
}, []);
@ -176,26 +126,6 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
}
}, [expanded, update]);
useEffect(() => {
// fix scrolling focus issue
if (visible && expanded) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
if (!EmojiPicker) {
setLoading(true);
EmojiPickerAsync().then(EmojiMart => {
EmojiPicker = EmojiMart.Picker;
setLoading(false);
}).catch(() => {
setLoading(false);
});
}
}, [visible, expanded]);
return (
<div
@ -207,17 +137,10 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
{...attributes.popper}
>
{expanded ? (
!loading && <EmojiPicker
title={title}
onEmojiSelect={(emoji: any) => onReact(emoji.native)}
recent={frequentlyUsedEmojis}
perLine={8}
skin={onSkinTone}
emojiSize={22}
emojiButtonSize={34}
set='twitter'
theme={theme}
i18n={getI18n()}
<EmojiPickerDropdown
visible={expanded}
setVisible={setExpanded}
update={update}
/>
) : (
<HStack

82
app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx
Unescape View File

@ -1,20 +1,17 @@
import { supportsPassiveEvents } from 'detect-passive-events';
import { Map as ImmutableMap } from 'immutable';
import React, { useEffect, useState, useLayoutEffect } from 'react';
import { createPortal } from 'react-dom';
import { defineMessages, useIntl } from 'react-intl';
import { usePopper } from 'react-popper';
import { createSelector } from 'reselect';
import { useEmoji } from 'soapbox/actions/emojis';
import { changeSetting } from 'soapbox/actions/settings';
import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
import { isMobile } from 'soapbox/is-mobile';
import { RootState } from 'soapbox/store';
import { buildCustomEmojis } from '../../emoji';
import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
import type { State as PopperState } from '@popperjs/core';
import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
let EmojiPicker: any; // load asynchronously
@ -49,13 +46,9 @@ export const messages = defineMessages({
export interface IEmojiPickerDropdown {
onPickEmoji?: (emoji: Emoji) => void
condensed?: boolean
render: React.FC<{
setPopperReference: React.Ref<HTMLButtonElement>
title?: string
visible?: boolean
loading?: boolean
handleToggle: (e: Event) => void
}>
visible: boolean
setVisible: (value: boolean) => void
update: (() => Promise<Partial<PopperState>>) | null
}
const perLine = 8;
@ -132,9 +125,9 @@ const RenderAfter = ({ children, update }: any) => {
return nextTick ? children : null;
};
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, condensed, render: Render }) => {
const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
onPickEmoji, condensed, visible, setVisible, update,
}) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const settings = useSettings();
@ -145,29 +138,8 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, cond
const customEmojis = useAppSelector((state) => getCustomEmojis(state));
const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [popperReference, setPopperReference] = useState<HTMLButtonElement | null>(null);
const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false);
const placement = condensed ? 'bottom-start' : 'top-start';
const { styles, attributes, update } = usePopper(popperReference, popperElement, {
placement: isMobile(window.innerWidth) ? 'auto' : placement,
});
const handleToggle = (e: Event) => {
e.stopPropagation();
setVisible(!visible);
};
const handleDocClick = (e: any) => {
if (!containerElement?.contains(e.target) && !popperElement?.contains(e.target)) {
setVisible(false);
}
};
const handlePick = (emoji: any) => {
setVisible(false);
@ -233,17 +205,6 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, cond
};
};
useEffect(() => {
document.addEventListener('click', handleDocClick, false);
document.addEventListener('touchend', handleDocClick, listenerOptions);
return function cleanup() {
document.removeEventListener('click', handleDocClick, false);
// @ts-ignore
document.removeEventListener('touchend', handleDocClick, listenerOptions);
};
});
useEffect(() => {
// fix scrolling focus issue
if (visible) {
@ -265,29 +226,8 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, cond
}
}, [visible]);
// TODO: move to class
const style: React.CSSProperties = !isMobile(window.innerWidth) ? styles.popper : {
...styles.popper, width: '100%',
};
return (
<div className='relative' ref={setContainerElement}>
<Render
handleToggle={handleToggle}
visible={visible}
loading={loading}
title={title}
setPopperReference={setPopperReference}
/>
{createPortal(
<div
className='z-[101]'
ref={setPopperElement}
style={style}
{...attributes.popper}
>
{visible && (
visible ? (
<RenderAfter update={update}>
{!loading && (
<EmojiPicker
@ -305,11 +245,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, cond
/>
)}
</RenderAfter>
)}
</div>,
document.body,
)}
</div>
) : null
);
};

83
app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx
Unescape View File

@ -1,19 +1,70 @@
import clsx from 'clsx';
import React from 'react';
import { supportsPassiveEvents } from 'detect-passive-events';
import React, { KeyboardEvent, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { defineMessages, useIntl } from 'react-intl';
import { usePopper } from 'react-popper';
import { IconButton } from 'soapbox/components/ui';
import { isMobile } from 'soapbox/is-mobile';
import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
const EmojiPickerDropdownWrapper = (props: Omit<IEmojiPickerDropdown, 'render'>) => {
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
export const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
});
const EmojiPickerDropdownWrapper = (
props: Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed'>,
) => {
const intl = useIntl();
const title = intl.formatMessage(messages.emoji);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [popperReference, setPopperReference] = useState<HTMLButtonElement | null>(null);
const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
const [visible, setVisible] = useState(false);
const placement = props.condensed ? 'bottom-start' : 'top-start';
const { styles, attributes, update } = usePopper(popperReference, popperElement, {
placement: isMobile(window.innerWidth) ? 'auto' : placement,
});
const handleDocClick = (e: any) => {
if (!containerElement?.contains(e.target) && !popperElement?.contains(e.target)) {
setVisible(false);
}
};
const handleToggle = (e: MouseEvent | KeyboardEvent) => {
e.stopPropagation();
setVisible(!visible);
};
// TODO: move to class
const style: React.CSSProperties = !isMobile(window.innerWidth) ? styles.popper : {
...styles.popper, width: '100%',
};
useEffect(() => {
document.addEventListener('click', handleDocClick, false);
document.addEventListener('touchend', handleDocClick, listenerOptions);
return function cleanup() {
document.removeEventListener('click', handleDocClick, false);
// @ts-ignore
document.removeEventListener('touchend', handleDocClick, listenerOptions);
};
});
return (
<EmojiPickerDropdown
render={
({ setPopperReference, title, visible, loading, handleToggle }: any) => (
<div className='relative' ref={setContainerElement}>
<IconButton
className={clsx({
'text-gray-400 hover:text-gray-600': true,
'pulse-loading': visible && loading,
})}
ref={setPopperReference}
src={require('@tabler/icons/mood-happy.svg')}
@ -21,15 +72,23 @@ const EmojiPickerDropdownWrapper = (props: Omit<IEmojiPickerDropdown, 'render'>)
aria-label={title}
aria-expanded={visible}
role='button'
onClick={handleToggle}
onKeyDown={handleToggle}
onClick={handleToggle as any}
onKeyDown={handleToggle as React.KeyboardEventHandler<HTMLButtonElement>}
tabIndex={0}
/>
)
}
{...props}
/>
{createPortal(
<div
className='z-[101]'
ref={setPopperElement}
style={style}
{...attributes.popper}
>
<EmojiPickerDropdown visible={visible} setVisible={setVisible} update={update} {...props} />
</div>,
document.body,
)}
</div>
);
};

10
app/soapbox/locales/en.json
Unescape View File

@ -620,6 +620,7 @@
"email_verifilcation.exists": "This email has already been taken.",
"embed.instructions": "Embed this post on your website by copying the code below.",
"emoji_button.activity": "Activity",
"emoji_button.add_custom": "Add custom emoji",
"emoji_button.custom": "Custom",
"emoji_button.flags": "Flags",
"emoji_button.food": "Food & Drink",
@ -627,7 +628,16 @@
"emoji_button.nature": "Nature",
"emoji_button.not_found": "No emojis found.",
"emoji_button.objects": "Objects",
"emoji_button.oh_no": "Oh no!",
"emoji_button.people": "People",
"emoji_button.pick": "Pick an emoji…",
"emoji_button.skins_1": "Default",
"emoji_button.skins_2": "Light",
"emoji_button.skins_3": "Medium-Light",
"emoji_button.skins_4": "Medium",
"emoji_button.skins_5": "Medium-Dark",
"emoji_button.skins_6": "Dark",
"emoji_button.skins_choose": "Choose default skin tone",
"emoji_button.recent": "Frequently used",
"emoji_button.search": "Search…",
"emoji_button.search_results": "Search results",

Write Preview
Loading…
Cancel
Save