diff options
author | ThibG <thib@sitedethib.com> | 2019-03-27 14:37:44 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-03-27 14:37:44 +0100 |
commit | 0418bdd71f59b4d7e9f3498f2990c8b044f310e1 (patch) | |
tree | 77638b42c9f4d795275a5080bcb7fd45009aa88e /app/javascript/flavours/glitch/features/emoji_picker/index.js | |
parent | 7535c607f40cb31fbb68c8f416992c3c5fcc929d (diff) | |
parent | 3a2f646cb125c80b82a2a67a622994d332ede811 (diff) |
Merge pull request #969 from ThibG/glitch-soc/fixes/revert-emojimart
Revert emojimart update
Diffstat (limited to 'app/javascript/flavours/glitch/features/emoji_picker/index.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/emoji_picker/index.js | 51 |
1 files changed, 11 insertions, 40 deletions
diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index d963039dc..a78117971 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -129,7 +129,6 @@ class ModifierPickerMenu extends React.PureComponent { active: PropTypes.bool, onSelect: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, - modifier: PropTypes.number, }; handleClick = e => { @@ -166,36 +165,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> ); } @@ -227,22 +210,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> ); } |