From c60d4fe04babbd09cf5d484262fa7601f4f8e2df Mon Sep 17 00:00:00 2001 From: David Rojas Camaggi Date: Mon, 15 May 2017 10:15:54 -0400 Subject: PLT-5671 Remove jquery from EmojiPicker component (#6281) (#6394) --- webapp/components/emoji_picker/emoji_picker.jsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) (limited to 'webapp/components/emoji_picker') 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) { -- cgit v1.2.3-1-g7c22