refactor(emoji-picker): update emoji-mart to latest version
This commit is contained in:
AtilaU19
parent
f1dbc8a8eb
commit
ac3c7790d4
@ -101,28 +101,13 @@ const ReactionsDropdown = styled.div`
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
.emoji-mart-bar {
|
||||
display: none;
|
||||
}
|
||||
.emoji-mart-search {
|
||||
display: none;
|
||||
}
|
||||
.emoji-mart-category[aria-label="Frequently Used"] {
|
||||
display: none;
|
||||
}
|
||||
.emoji-mart-category-label{
|
||||
display: none;
|
||||
}
|
||||
.emoji-mart{
|
||||
border: none;
|
||||
}
|
||||
@media(min-width: 600px) {
|
||||
.emoji-mart-scroll{
|
||||
overflow:hidden;
|
||||
padding: 0;
|
||||
height: 270px;
|
||||
width: 280px;
|
||||
}
|
||||
overflow: hidden;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
max-height: 270px;
|
||||
width: 270px;
|
||||
em-emoji {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -249,7 +249,7 @@ class MessageForm extends PureComponent {
|
||||
stopUserTyping,
|
||||
} = this.props;
|
||||
const { message } = this.state;
|
||||
let msg = message.trim();
|
||||
const msg = message.trim();
|
||||
|
||||
if (msg.length < minMessageLength) return;
|
||||
|
||||
@ -289,8 +289,6 @@ class MessageForm extends PureComponent {
|
||||
<Styled.EmojiPickerWrapper>
|
||||
<Styled.EmojiPicker
|
||||
onEmojiSelect={(emojiObject) => this.handleEmojiSelect(emojiObject)}
|
||||
showPreview={false}
|
||||
showSkinTones={false}
|
||||
/>
|
||||
</Styled.EmojiPickerWrapper>
|
||||
);
|
||||
|
||||
@ -109,21 +109,11 @@ const EmojiButton = styled(Button)`
|
||||
`;
|
||||
|
||||
const EmojiPickerWrapper = styled.div`
|
||||
.emoji-mart {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.emoji-mart-anchor {
|
||||
cursor: pointer;
|
||||
}
|
||||
.emoji-mart-emoji {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
.emoji-mart-category-list {
|
||||
span {
|
||||
cursor: pointer !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
em-emoji-picker {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
padding-bottom: 5px;
|
||||
`;
|
||||
|
||||
const EmojiPicker = styled(EmojiPickerComponent)``;
|
||||
|
||||
@ -1,26 +1,16 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { Picker } from 'emoji-mart';
|
||||
import 'emoji-mart/css/emoji-mart.css';
|
||||
import data from '@emoji-mart/data';
|
||||
import Picker from '@emoji-mart/react';
|
||||
|
||||
const DISABLE_EMOJIS = Meteor.settings.public.chat.disableEmojis;
|
||||
const FREQUENT_SORT_ON_CLICK = Meteor.settings.public.chat.emojiPicker.frequentEmojiSortOnClick;
|
||||
|
||||
const propTypes = {
|
||||
intl: PropTypes.shape({
|
||||
formatMessage: PropTypes.func.isRequired,
|
||||
}).isRequired,
|
||||
onEmojiSelect: PropTypes.func.isRequired,
|
||||
style: PropTypes.shape({}),
|
||||
showPreview: PropTypes.bool,
|
||||
showSkinTones: PropTypes.bool,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
style: null,
|
||||
showPreview: true,
|
||||
showSkinTones: true,
|
||||
};
|
||||
|
||||
const emojisToExclude = [
|
||||
@ -31,8 +21,6 @@ const EmojiPicker = (props) => {
|
||||
const {
|
||||
intl,
|
||||
onEmojiSelect,
|
||||
showPreview,
|
||||
showSkinTones,
|
||||
} = props;
|
||||
|
||||
const i18n = {
|
||||
@ -65,23 +53,19 @@ const EmojiPicker = (props) => {
|
||||
|
||||
return (
|
||||
<Picker
|
||||
emoji=""
|
||||
onSelect={(emojiObject, event) => onEmojiSelect(emojiObject, event)}
|
||||
enableFrequentEmojiSort={FREQUENT_SORT_ON_CLICK}
|
||||
native
|
||||
title=""
|
||||
data={data}
|
||||
onEmojiSelect={(emojiObject, event) => onEmojiSelect(emojiObject, event)}
|
||||
emojiSize={24}
|
||||
emojiTooltip
|
||||
i18n={i18n}
|
||||
showPreview={showPreview}
|
||||
showSkinTones={showSkinTones}
|
||||
useButton
|
||||
emojisToShowFilter={(emoji) => !emojisToExclude.includes(emoji.unified)}
|
||||
previewPosition="none"
|
||||
skinTonePosition="none"
|
||||
theme="light"
|
||||
dynamicWidth
|
||||
exceptEmojis={emojisToExclude}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
EmojiPicker.propTypes = propTypes;
|
||||
EmojiPicker.defaultProps = defaultProps;
|
||||
|
||||
export default injectIntl(EmojiPicker);
|
||||
|
||||
@ -1,71 +1,47 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { Picker } from 'emoji-mart';
|
||||
import 'emoji-mart/css/emoji-mart.css';
|
||||
import data from '@emoji-mart/data';
|
||||
import { init } from 'emoji-mart';
|
||||
|
||||
const propTypes = {
|
||||
intl: PropTypes.shape({
|
||||
formatMessage: PropTypes.func.isRequired,
|
||||
}).isRequired,
|
||||
onEmojiSelect: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
};
|
||||
|
||||
const emojisToExclude = [
|
||||
const emojisToInclude = [
|
||||
// reactions
|
||||
'1F605', '1F61C', '1F604', '1F609', '1F602', '1F92A',
|
||||
'1F634', '1F62C', '1F633', '1F60D', '02665', '1F499',
|
||||
'1F615', '1F61F', '1F928', '1F644', '1F612', '1F621',
|
||||
'1F614', '1F625', '1F62D', '1F62F', '1F631', '1F630',
|
||||
'1F44F', '1F44C', '1F44D', '1F44E', '1F4AA', '1F44A',
|
||||
'1F64C', '1F64F', '1F440', '1F4A9', '1F921', '1F480',
|
||||
'😄', '😅', '😂', '😉', '😍', '😜',
|
||||
'🤪', '🤨', '😒', '🙄', '😬', '😔',
|
||||
'😴', '😕', '😟', '😯', '😳', '😰',
|
||||
'😥', '😭', '😱', '😡', '💀', '💩',
|
||||
'🤡', '👌', '👍', '👎', '👊', '👏',
|
||||
'🙌', '🙏', '💪', '👀', '❤️', '💙',
|
||||
];
|
||||
|
||||
const inlineStyle = {
|
||||
margin: '.5rem 0',
|
||||
alignSelf: 'center',
|
||||
width: '100%',
|
||||
};
|
||||
|
||||
const ReactionsPicker = (props) => {
|
||||
const {
|
||||
intl,
|
||||
onEmojiSelect,
|
||||
style,
|
||||
} = props;
|
||||
|
||||
const i18n = {
|
||||
notfound: intl.formatMessage({ id: 'app.emojiPicker.notFound' }),
|
||||
clear: intl.formatMessage({ id: 'app.emojiPicker.clear' }),
|
||||
skintext: intl.formatMessage({ id: 'app.emojiPicker.skintext' }),
|
||||
categories: {
|
||||
reactions: intl.formatMessage({ id: 'app.emojiPicker.categories.reactions' }),
|
||||
},
|
||||
categorieslabel: intl.formatMessage({ id: 'app.emojiPicker.categories.label' }),
|
||||
};
|
||||
init({ data });
|
||||
|
||||
return (
|
||||
<Picker
|
||||
onSelect={(emojiObject, event) => onEmojiSelect(emojiObject, event)}
|
||||
native
|
||||
emoji=""
|
||||
title=""
|
||||
emojiSize={30}
|
||||
emojiTooltip
|
||||
style={Object.assign(inlineStyle, style)}
|
||||
i18n={i18n}
|
||||
showPreview={false}
|
||||
showSkinTones={false}
|
||||
emojisToShowFilter={(emoji) => emojisToExclude.includes(emoji.unified)}
|
||||
/>
|
||||
|
||||
<>
|
||||
{emojisToInclude.map((native) => (
|
||||
<em-emoji
|
||||
key={native}
|
||||
native={native}
|
||||
size="30"
|
||||
onClick={() => onEmojiSelect({ native })}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
ReactionsPicker.propTypes = propTypes;
|
||||
ReactionsPicker.defaultProps = defaultProps;
|
||||
|
||||
export default injectIntl(ReactionsPicker);
|
||||
export default ReactionsPicker;
|
||||
|
||||
@ -31,6 +31,8 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.9",
|
||||
"@browser-bunyan/server-stream": "^1.8.0",
|
||||
"@emoji-mart/data": "^1.1.2",
|
||||
"@emoji-mart/react": "^1.1.1",
|
||||
"@emotion/react": "^11.10.8",
|
||||
"@emotion/styled": "^11.10.8",
|
||||
"@jitsi/sdp-interop": "0.1.14",
|
||||
@ -45,7 +47,7 @@
|
||||
"browser-bunyan": "^1.8.0",
|
||||
"classnames": "^2.2.6",
|
||||
"darkreader": "^4.9.46",
|
||||
"emoji-mart": "^3.0.1",
|
||||
"emoji-mart": "^5.5.2",
|
||||
"eventemitter2": "~6.4.6",
|
||||
"fastdom": "^1.0.10",
|
||||
"fibers": "^4.0.2",
|
||||
|
||||
@ -597,8 +597,7 @@ public:
|
||||
autoConvertEmoji: true
|
||||
emojiPicker:
|
||||
enable: false
|
||||
frequentEmojiSortOnClick: false
|
||||
# e.g.: disableEmojis: ['1F595','1F922']
|
||||
# e.g.: disableEmojis: ['grin','laughing']
|
||||
disableEmojis: []
|
||||
userReaction:
|
||||
enabled: true
|
||||
|
||||
Loading…
Reference in New Issue
Block a user