fix: update emoji-mart, add dark mode and custom categories (#1686)
This commit is contained in:
parent
46ff09b072
commit
22fd567eb1
|
@ -61,7 +61,7 @@
|
|||
"cross-env": "^6.0.3",
|
||||
"css-dedoupe": "^0.1.1",
|
||||
"css-loader": "^3.3.2",
|
||||
"emoji-mart": "^2.11.1",
|
||||
"emoji-mart": "^2.11.2",
|
||||
"emoji-regex": "^8.0.0",
|
||||
"encoding": "^0.1.12",
|
||||
"escape-html": "^1.0.3",
|
||||
|
|
|
@ -99,21 +99,6 @@
|
|||
import { on } from '../../../_utils/eventBus'
|
||||
import { createEmojiMartPicker } from '../../../_react/createEmojiMartPicker'
|
||||
|
||||
// Consistency with Mastodon FE, taken from
|
||||
// app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
|
||||
const categoriesSort = [
|
||||
'recent',
|
||||
'custom',
|
||||
'people',
|
||||
'nature',
|
||||
'foods',
|
||||
'activity',
|
||||
'places',
|
||||
'objects',
|
||||
'symbols',
|
||||
'flags'
|
||||
]
|
||||
|
||||
export default {
|
||||
async oncreate () {
|
||||
onCreateDialog.call(this)
|
||||
|
@ -146,13 +131,13 @@
|
|||
${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''}
|
||||
`),
|
||||
emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
|
||||
emojiMartProps: ({ perLine, custom }) => ({
|
||||
emojiMartProps: ({ perLine, customEmoji, categoriesSorted }) => ({
|
||||
perLine,
|
||||
custom,
|
||||
custom: customEmoji,
|
||||
color: 'var(--nav-bg)',
|
||||
emoji: 'sailboat',
|
||||
title: 'Emoji',
|
||||
include: categoriesSort,
|
||||
include: categoriesSorted,
|
||||
showPreview: true
|
||||
}),
|
||||
perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
|
||||
|
@ -166,7 +151,31 @@
|
|||
? 9
|
||||
: 10
|
||||
),
|
||||
custom: ({ $currentCustomEmoji, $autoplayGifs }) => {
|
||||
categoriesSorted: ({ $currentCustomEmoji }) => {
|
||||
// Consistency with Mastodon FE, taken from
|
||||
// - app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
|
||||
// - app/javascript/mastodon/features/emoji/emoji.js
|
||||
const customCategories = new Set(['custom'])
|
||||
for (const emoji of $currentCustomEmoji) {
|
||||
if (emoji.category) {
|
||||
customCategories.add(`custom-${emoji.category}`)
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
'recent',
|
||||
...Array.from(customCategories).sort(),
|
||||
'people',
|
||||
'nature',
|
||||
'foods',
|
||||
'activity',
|
||||
'places',
|
||||
'objects',
|
||||
'symbols',
|
||||
'flags'
|
||||
]
|
||||
},
|
||||
customEmoji: ({ $currentCustomEmoji, $autoplayGifs }) => {
|
||||
if (!$currentCustomEmoji) {
|
||||
return []
|
||||
}
|
||||
|
@ -176,7 +185,8 @@
|
|||
text: `:${emoji.shortcode}:`,
|
||||
emoticons: [],
|
||||
keywords: [emoji.shortcode],
|
||||
imageUrl: $autoplayGifs ? emoji.url : emoji.static_url
|
||||
imageUrl: $autoplayGifs ? emoji.url : emoji.static_url,
|
||||
customCategory: emoji.category
|
||||
}))
|
||||
},
|
||||
// it's jarring on mobile if the emoji picker automatically pops open the keyboard
|
||||
|
|
|
@ -6,16 +6,21 @@
|
|||
import NimblePicker from 'emoji-mart/dist-modern/components/picker/nimble-picker'
|
||||
import React from 'react'
|
||||
import { emit } from '../_utils/eventBus'
|
||||
import { store } from '../_store/store'
|
||||
import { isDarkTheme } from '../_utils/isDarkTheme'
|
||||
|
||||
function onEmojiSelected (emoji) {
|
||||
emit('emoji-selected', emoji)
|
||||
}
|
||||
|
||||
export default function createEmojiMartPickerFromData (data) {
|
||||
return props => React.createElement(NimblePicker, Object.assign({
|
||||
return props => (
|
||||
React.createElement(NimblePicker, Object.assign({
|
||||
set: 'twitter', // same as Mastodon frontend
|
||||
data, // same as Mastodon frontend
|
||||
native: true,
|
||||
onSelect: onEmojiSelected
|
||||
onSelect: onEmojiSelected,
|
||||
darkMode: isDarkTheme(store.get().currentTheme)
|
||||
}, props))
|
||||
)
|
||||
}
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
import { themes } from '../_static/themes'
|
||||
import { DEFAULT_THEME } from './themeEngine'
|
||||
|
||||
export function isDarkTheme (themeName) {
|
||||
const theme = themes.find(_ => _.name === themeName) || themes.find(_ => _.name === DEFAULT_THEME)
|
||||
return theme.dark
|
||||
}
|
|
@ -3552,10 +3552,10 @@ emittery@^0.4.1:
|
|||
resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.4.1.tgz#abe9d3297389ba424ac87e53d1c701962ce7433d"
|
||||
integrity sha512-r4eRSeStEGf6M5SKdrQhhLK5bOwOBxQhIE3YSTnZE3GpKiLfnnhE+tPtrJE79+eDJgm39BM6LSoI8SCx4HbwlQ==
|
||||
|
||||
emoji-mart@^2.11.1:
|
||||
version "2.11.1"
|
||||
resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.1.tgz#fc9330b513803c17b98c9ad289c12ab61ff05f8f"
|
||||
integrity sha512-Hr4N56YEkaPtmojO2dfgnMLLE/d5HpnhH0+M8cw9LRHpG2EgQQaCelRad3d5qQAPHI5+K0wMc/rwM0eRo0FnUA==
|
||||
emoji-mart@^2.11.2:
|
||||
version "2.11.2"
|
||||
resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.11.2.tgz#ed331867f7f55bb33c8421c9a493090fa4a378c7"
|
||||
integrity sha512-IdHZR5hc3mipTY/r0ergtqBgQ96XxmRdQDSg7fsL+GiJQQ4akMws6+cjLSyIhGQxtvNuPVNaEQiAlU00NsyZUg==
|
||||
dependencies:
|
||||
prop-types "^15.6.0"
|
||||
|
||||
|
|
Loading…
Reference in New Issue