fc2e2d2cfc
* Fix error logs * Improve LBC sticker flow/clarity * Show inline error if custom sticker amount below min * Sort emojis alphabetically * Improve loading of Images * Improve quality and display of emojis and fix CSS * Display both USD and LBC prices * Default to LBC tip if creator can't receive USD * Don't clear text-field after sticker is sent * Refactor notification component * Handle notifications * Don't show profile pic on sticker livestream comments * Change Sticker icon * Fix wording and number rounding * Fix blurring emojis * Disable non functional emote buttons
66 lines
2.1 KiB
JavaScript
66 lines
2.1 KiB
JavaScript
// @flow
|
|
import 'scss/component/_emote-selector.scss';
|
|
import { EMOTES_48px as EMOTES } from 'constants/emotes';
|
|
import * as ICONS from 'constants/icons';
|
|
import Button from 'component/button';
|
|
import EMOJIS from 'emoji-dictionary';
|
|
import OptimizedImage from 'component/optimizedImage';
|
|
import React from 'react';
|
|
|
|
const OLD_QUICK_EMOJIS = [
|
|
EMOJIS.getUnicode('rocket'),
|
|
EMOJIS.getUnicode('jeans'),
|
|
EMOJIS.getUnicode('fire'),
|
|
EMOJIS.getUnicode('heart'),
|
|
EMOJIS.getUnicode('open_mouth'),
|
|
];
|
|
|
|
type Props = { commentValue: string, setCommentValue: (string) => void, closeSelector: () => void };
|
|
|
|
export default function EmoteSelector(props: Props) {
|
|
const { commentValue, setCommentValue, closeSelector } = props;
|
|
|
|
function addEmoteToComment(emote: string) {
|
|
setCommentValue(
|
|
commentValue + (commentValue && commentValue.charAt(commentValue.length - 1) !== ' ' ? ` ${emote} ` : `${emote} `)
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="emoteSelector">
|
|
<Button button="close" icon={ICONS.REMOVE} onClick={closeSelector} />
|
|
|
|
<div className="emoteSelector__list">
|
|
<div className="emoteSelector__listRow">
|
|
<div className="emoteSelector__listRowItems">
|
|
{OLD_QUICK_EMOJIS.map((emoji) => (
|
|
<Button
|
|
key={emoji}
|
|
label={emoji}
|
|
title={`:${EMOJIS.getName(emoji)}:`}
|
|
button="alt"
|
|
className="button--file-action"
|
|
onClick={() => addEmoteToComment(emoji)}
|
|
/>
|
|
))}
|
|
{EMOTES.map((emote) => {
|
|
const emoteName = emote.name.toLowerCase();
|
|
|
|
return (
|
|
<Button
|
|
key={emoteName}
|
|
title={emoteName}
|
|
button="alt"
|
|
className="button--file-action"
|
|
onClick={() => addEmoteToComment(emoteName)}
|
|
>
|
|
<OptimizedImage src={emote.url} waitLoad />
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|