[webapp-perf] Change inline arrow function in ref

components/color_input.jsx

@@ -42,7 +42,7 @@ class ColorInput extends React.Component {
 
  checkClick = (e) => {
  const colorPickerDOMNode = ReactDom.findDOMNode(this.colorPicker);
- if (!colorPickerDOMNode.contains(e.target)) {
+ if (!colorPickerDOMNode || !colorPickerDOMNode.contains(e.target)) {
  this.setState({isOpened: false});
  }
  };
@@ -60,6 +60,10 @@ class ColorInput extends React.Component {
  }
  };
 
+ getColorPicker = (node) => {
+ this.colorPicker = node;
+ };
+
  render() {
  const {color} = this.props;
  const {isOpened} = this.state;
@@ -85,9 +89,7 @@ class ColorInput extends React.Component {
  </span>
  {isOpened && (
  <div
- ref={(item) => {
- this.colorPicker = item;
- }}
+ ref={this.getColorPicker}
  className='color-popover'
  >
  <ChromePicker

components/edit_channel_purpose_modal/edit_channel_purpose_modal.jsx

@@ -128,6 +128,10 @@ export default class EditChannelPurposeModal extends React.Component {
  this.setState({purpose: e.target.value});
  }
 
+ getPurpose = (node) => {
+ this.purpose = node;
+ };
+
  render() {
  let serverError = null;
  if (this.state.serverError) {
@@ -193,9 +197,7 @@ export default class EditChannelPurposeModal extends React.Component {
  {channelPurposeModal}
  </p>
  <textarea
- ref={(e) => {
- this.purpose = e;
- }}
+ ref={this.getPurpose}
  className='form-control no-resize'
  rows='6'
  maxLength='250'

components/emoji_picker/emoji_picker.jsx

@@ -393,14 +393,16 @@ export default class EmojiPicker extends React.Component {
  return <div className='emoji-picker__categories'>{emojiPickerCategories}</div>;
  }
 
+ getSearchInput = (node) => {
+ this.searchInput = node;
+ };
+
  emojiSearch() {
  return (
  <div className='emoji-picker__search-container'>
  <span className='fa fa-search emoji-picker__search-icon'/>
  <input
- ref={(input) => {
- this.searchInput = input;
- }}
+ ref={this.getSearchInput}
  className='emoji-picker__search'
  type='text'
  onChange={this.handleFilterChange}

components/post_view/post/post.jsx

@@ -195,6 +195,10 @@ export default class Post extends React.PureComponent {
  return className + ' ' + sameUserClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss;
  }
 
+ getRef = (node) => {
+ this.domNode = node;
+ }
+
  render() {
  const post = this.props.post || {};
  const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
@@ -261,9 +265,7 @@ export default class Post extends React.PureComponent {
 
  return (
  <div
- ref={(div) => {
- this.domNode = div;
- }}
+ ref={this.getRef}
  >
  <div
  id={'post_' + post.id}

components/post_view/post_attachment_opengraph/post_attachment_opengraph.jsx

@@ -171,19 +171,25 @@ export default class PostAttachmentOpenGraph extends React.PureComponent {
  return null;
  }
 
+ getSmallImageContainer = (node) => {
+ this.smallImageContainer = node;
+ }
+
  wrapInSmallImageContainer(imageElement) {
  return (
  <div
  className='attachment__image__container--openraph'
- ref={(div) => {
- this.smallImageContainer = div;
- }}
+ ref={this.getSmallImageContainer}
  >
  {imageElement}
  </div>
  );
  }
 
+ getSmallImageElement = (node) => {
+ this.smallImageElement = node;
+ }
+
  imageTag(imageUrl, renderingForLargeImage = false) {
  var element = null;
  if (
@@ -211,9 +217,7 @@ export default class PostAttachmentOpenGraph extends React.PureComponent {
  <img
  className={'attachment__image attachment__image--openraph'}
  src={imageUrl}
- ref={(img) => {
- this.smallImageElement = img;
- }}
+ ref={this.getSmallImageElement}
  />
  );
  }

components/rename_channel_modal/rename_channel_modal.jsx

@@ -221,6 +221,10 @@ export class RenameChannelModal extends React.PureComponent {
  this.setState({displayName: e.target.value});
  }
 
+ getTextbox = (node) => {
+ this.textbox = node;
+ }
+
  render() {
  let displayNameError = null;
  let displayNameClass = 'form-group';
@@ -283,9 +287,7 @@ export class RenameChannelModal extends React.PureComponent {
  <input
  onChange={this.onDisplayNameChange}
  type='text'
- ref={(e) => {
- this.textbox = e;
- }}
+ ref={this.getTextbox}
  id='display_name'
  className='form-control'
  placeholder={formatMessage(holders.displayNameHolder)}

components/search_bar/search_bar.jsx

@@ -158,6 +158,10 @@ export default class SearchBar extends React.Component {
  );
  }
 
+ getSearch = (node) => {
+ this.search = node;
+ }
+
  render() {
  const flagIcon = Constants.FLAG_ICON_SVG;
  const searchIcon = Constants.SEARCH_ICON_SVG;
@@ -284,9 +288,7 @@ export default class SearchBar extends React.Component {
  />
  <SuggestionBox
  id='searchBox'
- ref={(search) => {
- this.search = search;
- }}
+ ref={this.getSearch}
  className='search-bar'
  placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
  value={this.props.searchTerms}