mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-22 09:08:24 +00:00
Fix emoji-mart crashing web UI on search by reverting the upgrade to 2.10.0 (#10413)
Fix #10315
This reverts commit db06b25376.
This commit is contained in:
Eugen Rochko
GitHub
parent
79227d153b
commit
8fb69f1366
|
|
@ -50,7 +50,6 @@ class ModifierPickerMenu extends React.PureComponent {
|
|||
active: PropTypes.bool,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
modifier: PropTypes.number,
|
||||
};
|
||||
|
||||
handleClick = e => {
|
||||
|
|
@ -87,36 +86,20 @@ class ModifierPickerMenu extends React.PureComponent {
|
|||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
if (this.node) {
|
||||
this.node.querySelector('li:first-child button').focus(); // focus the first element when opened
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { active, modifier } = this.props;
|
||||
const { active } = this.props;
|
||||
|
||||
return (
|
||||
<ul
|
||||
className='emoji-picker-dropdown__modifiers__menu'
|
||||
style={{ display: active ? 'block' : 'none' }}
|
||||
role='menuitem'
|
||||
ref={this.setRef}
|
||||
>
|
||||
{[1, 2, 3, 4, 5, 6].map(i => (
|
||||
<li
|
||||
onClick={this.handleClick}
|
||||
role='menuitemradio'
|
||||
aria-checked={i === (modifier || 1)}
|
||||
data-index={i}
|
||||
key={i}
|
||||
>
|
||||
<Emoji
|
||||
emoji='fist' set='twitter' size={22} sheetSize={32} skin={i}
|
||||
backgroundImageFn={backgroundImageFn}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
|
||||
<button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
|
||||
<button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
|
||||
<button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
|
||||
<button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button>
|
||||
<button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button>
|
||||
<button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -148,22 +131,10 @@ class ModifierPicker extends React.PureComponent {
|
|||
render () {
|
||||
const { active, modifier } = this.props;
|
||||
|
||||
function setRef(ref) {
|
||||
if (!ref) {
|
||||
return;
|
||||
}
|
||||
// TODO: It would be nice if we could pass props directly to emoji-mart's buttons.
|
||||
const button = ref.querySelector('button');
|
||||
button.setAttribute('aria-haspopup', 'true');
|
||||
button.setAttribute('aria-expanded', active);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='emoji-picker-dropdown__modifiers'>
|
||||
<div ref={setRef}>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
|
||||
</div>
|
||||
<ModifierPickerMenu active={active} modifier={modifier} onSelect={this.handleSelect} onClose={this.props.onClose} />
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
|
||||
<ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Picker from 'emoji-mart/dist-modern/components/picker/picker';
|
||||
import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji';
|
||||
import Picker from 'emoji-mart/dist-es/components/picker/picker';
|
||||
import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
|
||||
|
||||
export {
|
||||
Picker,
|
||||
|
|
|
|||
|
|
@ -3226,11 +3226,11 @@ a.status-card.compact:hover {
|
|||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
button {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 3px 8px;
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import '../../../node_modules/emoji-mart/css/emoji-mart.css';
|
||||
|
||||
.emoji-mart {
|
||||
&,
|
||||
* {
|
||||
|
|
@ -53,14 +51,6 @@
|
|||
|
||||
&:hover {
|
||||
color: darken($lighter-text-color, 4%);
|
||||
|
||||
svg {
|
||||
fill: darken($lighter-text-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $lighter-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,19 +59,11 @@
|
|||
|
||||
&:hover {
|
||||
color: darken($highlight-text-color, 4%);
|
||||
|
||||
svg {
|
||||
fill: darken($highlight-text-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
|
|
@ -101,6 +83,7 @@
|
|||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
max-height: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -120,14 +103,15 @@
|
|||
}
|
||||
|
||||
.emoji-mart-search {
|
||||
margin: 10px 40px 10px 5px;
|
||||
padding: 10px;
|
||||
padding-right: 45px;
|
||||
background: $simple-background-color;
|
||||
|
||||
input {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 7px 9px;
|
||||
font-family: $font-sans-serif;
|
||||
font-family: inherit;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: rgba($ui-secondary-color, 0.3);
|
||||
|
|
@ -182,7 +166,6 @@
|
|||
font-weight: 500;
|
||||
padding: 5px 6px;
|
||||
background: $simple-background-color;
|
||||
font-family: $font-sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,16 +11,7 @@ module.exports = {
|
|||
options: {
|
||||
babelrc: false,
|
||||
plugins: [
|
||||
[
|
||||
'transform-react-remove-prop-types',
|
||||
{
|
||||
mode: 'remove',
|
||||
removeImport: true,
|
||||
additionalLibraries: [
|
||||
'../../utils/shared-props', // emoji-mart
|
||||
],
|
||||
},
|
||||
],
|
||||
'transform-react-remove-prop-types',
|
||||
],
|
||||
cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
|
||||
cacheCompression: env.NODE_ENV === 'production',
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
"cssnano": "^4.1.10",
|
||||
"detect-passive-events": "^1.0.2",
|
||||
"dotenv": "^6.2.0",
|
||||
"emoji-mart": "^2.10.0",
|
||||
"emoji-mart": "Gargron/emoji-mart#build",
|
||||
"es6-symbol": "^3.1.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"exif-js": "^2.3.0",
|
||||
|
|
|
|||
|
|
@ -3173,12 +3173,9 @@ elliptic@^6.0.0:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.0"
|
||||
|
||||
emoji-mart@^2.10.0:
|
||||
version "2.10.0"
|
||||
resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.10.0.tgz#e1adec430f4963f79055b12b80e6d60c5abb742d"
|
||||
integrity sha512-VhcX463f8TDaQc1Tpc8rI31E15+8KXOYff1vwjokjMT52bZlCQCyq3zrnNScSYjv95f1+R4DMMreeuPvYFvOhg==
|
||||
dependencies:
|
||||
prop-types "^15.6.0"
|
||||
emoji-mart@Gargron/emoji-mart#build:
|
||||
version "2.6.2"
|
||||
resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9"
|
||||
|
||||
emoji-regex@^6.5.1:
|
||||
version "6.5.1"
|
||||
|
|
|
|||
Loading…
Reference in a new issue