From fb8f5a4874922be1f686b2a79e2881ac568c9e78 Mon Sep 17 00:00:00 2001
From: Harshit <harshit.pruthi@groww.in>
Date: Sun, 13 Sep 2020 13:41:20 +0530
Subject: [PATCH] string ref changed to callback ref

---
 src/components/Dropdown.jsx              | 19 +++++++++----------
 src/docs/components/account-dropdown.jsx | 10 +++++-----
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index 48cf2ac..cb68d5c 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -9,17 +9,17 @@ import DropdownContent from './dropdown-content.js';
 class Dropdown extends Component {
   displayName: 'Dropdown'
 
-  componentDidMount () {
+  componentDidMount() {
     window.addEventListener('click', this._onWindowClick);
     window.addEventListener('touchstart', this._onWindowClick);
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.removeEventListener('click', this._onWindowClick);
     window.removeEventListener('touchstart', this._onWindowClick);
   }
 
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     this.state = {
@@ -30,13 +30,13 @@ class Dropdown extends Component {
     this._onToggleClick = this._onToggleClick.bind(this);
   }
 
-  isActive () {
+  isActive() {
     return (typeof this.props.active === 'boolean') ?
       this.props.active :
       this.state.active;
   }
 
-  hide () {
+  hide() {
     this.setState({
       active: false
     }, () => {
@@ -46,7 +46,7 @@ class Dropdown extends Component {
     });
   }
 
-  show () {
+  show() {
     this.setState({
       active: true
     }, () => {
@@ -56,14 +56,14 @@ class Dropdown extends Component {
     });
   }
 
-  _onWindowClick (event) {
+  _onWindowClick(event) {
     const dropdownElement = findDOMNode(this);
     if (event.target !== dropdownElement && !dropdownElement.contains(event.target) && this.isActive()) {
       this.hide();
     }
   }
 
-  _onToggleClick (event) {
+  _onToggleClick(event) {
     event.preventDefault();
     if (this.isActive()) {
       this.hide();
@@ -72,7 +72,7 @@ class Dropdown extends Component {
     }
   }
 
-  render () {
+  render() {
     const { children, className, disabled, removeElement } = this.props;
     // create component classes
     const active = this.isActive();
@@ -86,7 +86,6 @@ class Dropdown extends Component {
       if (child.type === DropdownTrigger) {
         const originalOnClick = child.props.onClick;
         child = cloneElement(child, {
-          ref: 'trigger',
           onClick: (event) => {
             if (!disabled) {
               this._onToggleClick(event);
diff --git a/src/docs/components/account-dropdown.jsx b/src/docs/components/account-dropdown.jsx
index be975c0..618bdbc 100644
--- a/src/docs/components/account-dropdown.jsx
+++ b/src/docs/components/account-dropdown.jsx
@@ -3,21 +3,21 @@ import PropTypes from 'prop-types';
 import Dropdown, { DropdownTrigger, DropdownContent } from '../../../lib/components/dropdown.js';
 
 class AccountDropdown extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     this.handleLinkClick = this.handleLinkClick.bind(this);
   }
 
-  handleLinkClick () {
-    this.refs.dropdown.hide();
+  handleLinkClick() {
+    this.dropdownRef.hide();
   }
 
-  render () {
+  render() {
     const { user } = this.props;
 
     return (
-      <Dropdown className="account-dropdown" ref="dropdown">
+      <Dropdown className="account-dropdown" ref={ref => (this.dropdownRef = ref)}>
         <DropdownTrigger>
           <img className="account-dropdown__avatar" src={user.avatar_url} /><span className="account-dropdown__name">My Account</span>
         </DropdownTrigger>