diff options
author | David Rojas Camaggi <drojascamaggi@gmail.com> | 2017-05-15 10:15:54 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-05-15 10:15:54 -0400 |
commit | c60d4fe04babbd09cf5d484262fa7601f4f8e2df (patch) | |
tree | 6024949452d87dbc8a47b76b3c9cd9262705d7b4 /webapp/components/emoji_picker/emoji_picker.jsx | |
parent | 4da45c0e760b3a62506f94948749df3b73397385 (diff) | |
download | chat-c60d4fe04babbd09cf5d484262fa7601f4f8e2df.tar.gz chat-c60d4fe04babbd09cf5d484262fa7601f4f8e2df.tar.bz2 chat-c60d4fe04babbd09cf5d484262fa7601f4f8e2df.zip |
PLT-5671 Remove jquery from EmojiPicker component (#6281) (#6394)
Diffstat (limited to 'webapp/components/emoji_picker/emoji_picker.jsx')
-rw-r--r-- | webapp/components/emoji_picker/emoji_picker.jsx | 21 |
1 files changed, 11 insertions, 10 deletions
diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx index 13438e08e..b4e67df29 100644 --- a/webapp/components/emoji_picker/emoji_picker.jsx +++ b/webapp/components/emoji_picker/emoji_picker.jsx @@ -3,11 +3,9 @@ import React from 'react'; -import $ from 'jquery'; import * as Emoji from 'utils/emoji.jsx'; import EmojiStore from 'stores/emoji_store.jsx'; import PureRenderMixin from 'react-addons-pure-render-mixin'; -import ReactDOM from 'react-dom'; import * as Utils from 'utils/utils.jsx'; import ReactOutsideEvent from 'react-outside-event'; import {FormattedMessage} from 'react-intl'; @@ -110,11 +108,11 @@ class EmojiPicker extends React.Component { } handleScroll() { - const items = $(ReactDOM.findDOMNode(this.refs.items)); - - const contentTop = items.scrollTop(); - const contentTopPadding = parseInt(items.css('padding-top'), 10); - const scrollPct = (contentTop / (items[0].scrollHeight - items[0].clientHeight)) * 100.0; + const items = this.refs.items; + const contentTop = items.scrollTop; + const itemsPaddingTop = getComputedStyle(items).paddingTop; + const contentTopPadding = parseInt(itemsPaddingTop, 10); + const scrollPct = (contentTop / (items.scrollHeight - items.clientHeight)) * 100.0; if (scrollPct > 99.0) { this.setState({category: 'custom'}); @@ -122,9 +120,12 @@ class EmojiPicker extends React.Component { } for (const category of CATEGORIES) { - const header = $(ReactDOM.findDOMNode(this.refs[category])); - const headerBottomMargin = parseInt(header.css('margin-bottom'), 10) + parseInt(header.css('padding-bottom'), 10); - const headerBottom = header[0].offsetTop + header.height() + headerBottomMargin; + const header = this.refs[category]; + const headerStyle = getComputedStyle(header); + const headerBottomMargin = parseInt(headerStyle.marginBottom, 10); + const headerBottomPadding = parseInt(headerStyle.paddingBottom, 10); + const headerBottomSpace = headerBottomMargin + headerBottomPadding; + const headerBottom = header.offsetTop + header.offsetHeight + headerBottomSpace; // If category is the first one visible, highlight it in the bar at the top if (headerBottom - contentTopPadding >= contentTop) { |