fix: revert breaking change (#1760)

This reverts commit 64847df.
reactstrap · Jan 17, 2020 · eb37426 · eb37426
1 parent d05e6f2
commit eb37426
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 39 deletions.
diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -261,6 +261,5 @@ class Dropdown extends React.Component {
 
 Dropdown.propTypes = propTypes;
 Dropdown.defaultProps = defaultProps;
-Dropdown.Context = DropdownContext;
 
 export default Dropdown;
diff --git a/src/DropdownItem.js b/src/DropdownItem.js
@@ -41,7 +41,7 @@ class DropdownItem extends React.Component {
     }
 
     if (this.props.toggle) {
-      this.props.context.toggle(e);
+      this.context.toggle(e);
     }
   }
 
@@ -101,9 +101,6 @@ class DropdownItem extends React.Component {
 
 DropdownItem.propTypes = propTypes;
 DropdownItem.defaultProps = defaultProps;
+DropdownItem.contextType = DropdownContext;
 
-export default React.forwardRef((props, ref) => (
-  <DropdownContext.Consumer>
-    {ctx => <DropdownItem {...props} context={ctx} ref={ref} />}
-  </DropdownContext.Consumer>
-));
+export default DropdownItem;
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
@@ -40,15 +40,15 @@ class DropdownMenu extends React.Component {
       'dropdown-menu',
       {
         'dropdown-menu-right': right,
-        show: this.props.context.isOpen,
+        show: this.context.isOpen,
       }
     ), cssModule);
 
     const Tag = tag;
 
-    if (persist || (this.props.context.isOpen && !this.props.context.inNavbar)) {
+    if (persist || (this.context.isOpen && !this.context.inNavbar)) {
 
-      const position1 = directionPositionMap[this.props.context.direction] || 'bottom';
+      const position1 = directionPositionMap[this.context.direction] || 'bottom';
       const position2 = right ? 'end' : 'start';
       const poperPlacement = `${position1}-${position2}`;
       const poperModifiers = !flip ? {
@@ -70,7 +70,7 @@ class DropdownMenu extends React.Component {
               ref={ref}
               style={style}
               {...attrs}
-              aria-hidden={!this.props.context.isOpen}
+              aria-hidden={!this.context.isOpen}
               className={classes}
               x-placement={placement}
             />
@@ -84,7 +84,7 @@ class DropdownMenu extends React.Component {
         tabIndex="-1"
         role="menu"
         {...attrs}
-        aria-hidden={!this.props.context.isOpen}
+        aria-hidden={!this.context.isOpen}
         className={classes}
         x-placement={attrs.placement}
       />
@@ -94,9 +94,6 @@ class DropdownMenu extends React.Component {
 
 DropdownMenu.propTypes = propTypes;
 DropdownMenu.defaultProps = defaultProps;
+DropdownMenu.contextType = DropdownContext;
 
-export default React.forwardRef((props, ref) => (
-  <DropdownContext.Consumer>
-    {ctx => <DropdownMenu {...props} context={ctx} ref={ref} />}
-  </DropdownContext.Consumer>
-));
+export default DropdownMenu;
diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js
@@ -33,7 +33,7 @@ class DropdownToggle extends React.Component {
   }
 
   onClick(e) {
-    if (this.props.disabled || this.props.context.disabled) {
+    if (this.props.disabled || this.context.disabled) {
       e.preventDefault();
       return;
     }
@@ -46,7 +46,7 @@ class DropdownToggle extends React.Component {
       this.props.onClick(e);
     }
 
-    this.props.context.toggle(e);
+    this.context.toggle(e);
   }
 
   render() {
@@ -75,13 +75,13 @@ class DropdownToggle extends React.Component {
       Tag = tag;
     }
 
-    if (this.props.context.inNavbar) {
+    if (this.context.inNavbar) {
       return (
         <Tag
           {...props}
           className={classes}
           onClick={this.onClick}
-          aria-expanded={this.props.context.isOpen}
+          aria-expanded={this.context.isOpen}
           children={children}
         />
       );
@@ -96,7 +96,7 @@ class DropdownToggle extends React.Component {
 
             className={classes}
             onClick={this.onClick}
-            aria-expanded={this.props.context.isOpen}
+            aria-expanded={this.context.isOpen}
             children={children}
           />
         )}
@@ -107,9 +107,6 @@ class DropdownToggle extends React.Component {
 
 DropdownToggle.propTypes = propTypes;
 DropdownToggle.defaultProps = defaultProps;
+DropdownToggle.contextType = DropdownContext;
 
-export default React.forwardRef((props, ref) => (
-  <DropdownContext.Consumer>
-    {ctx => <DropdownToggle {...props} context={ctx} ref={ref} />}
-  </DropdownContext.Consumer>
-));
+export default DropdownToggle;
diff --git a/src/__tests__/DropdownItem.spec.js b/src/__tests__/DropdownItem.spec.js
@@ -104,7 +104,7 @@ describe('DropdownItem', () => {
     it('should not be called when disabled', () => {
       const e = { preventDefault: jest.fn() };
       const wrapper = mount(<DropdownItem disabled>Item</DropdownItem>);
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick(e);
       expect(e.preventDefault).toHaveBeenCalled();
@@ -113,7 +113,7 @@ describe('DropdownItem', () => {
     it('should not be called when divider is set', () => {
       const e = { preventDefault: jest.fn() };
       const wrapper = mount(<DropdownItem divider />);
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick(e);
       expect(e.preventDefault).toHaveBeenCalled();
@@ -122,7 +122,7 @@ describe('DropdownItem', () => {
     it('should not be called when header item', () => {
       const e = { preventDefault: jest.fn() };
       const wrapper = mount(<DropdownItem header>Header</DropdownItem>);
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick(e);
       expect(e.preventDefault).toHaveBeenCalled();
@@ -136,7 +136,7 @@ describe('DropdownItem', () => {
           <DropdownItem onClick={() => onClick()}>Click me</DropdownItem>
         </DropdownContext.Provider>
       );
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick(e);
       expect(onClick).toHaveBeenCalled();

diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js
@@ -178,7 +178,7 @@ describe('DropdownMenu', () => {
       </DropdownContext.Provider>
     );
 
-    expect(wrapper.childAt(0).childAt(0).children().length).toBe(0);
+    expect(wrapper.childAt(0).children().length).toBe(0);
   });
 
   it('should render custom tag', () => {
@@ -189,7 +189,7 @@ describe('DropdownMenu', () => {
     );
 
     expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.childAt(0).childAt(0).hasClass('dropdown-menu')).toBe(true);
+    expect(wrapper.childAt(0).hasClass('dropdown-menu')).toBe(true);
     expect(wrapper.getDOMNode().tagName.toLowerCase()).toBe('main');
   });
 });
diff --git a/src/__tests__/DropdownToggle.spec.js b/src/__tests__/DropdownToggle.spec.js
@@ -68,7 +68,7 @@ describe('DropdownToggle', () => {
       </DropdownContext.Provider>
     );
 
-    expect(wrapper.childAt(0).childAt(0).childAt(0).hasClass('dropdown-toggle')).toBe(true);
+    expect(wrapper.childAt(0).childAt(0).hasClass('dropdown-toggle')).toBe(true);
   });
 
   describe('color', () => {
@@ -124,7 +124,7 @@ describe('DropdownToggle', () => {
       </DropdownContext.Provider>
     );
 
-    expect(wrapper.childAt(0).childAt(0).childAt(0).hasClass('dropdown-toggle-split')).toBe(true);
+    expect(wrapper.childAt(0).childAt(0).hasClass('dropdown-toggle-split')).toBe(true);
   });
 
   describe('onClick', () => {
@@ -136,7 +136,7 @@ describe('DropdownToggle', () => {
         </DropdownContext.Provider>
       );
 
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick({});
       expect(onClick).toHaveBeenCalled();
@@ -150,7 +150,7 @@ describe('DropdownToggle', () => {
         </DropdownContext.Provider>
       );
 
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick({
         preventDefault: () => {
@@ -168,7 +168,7 @@ describe('DropdownToggle', () => {
           <DropdownToggle disabled>Ello world</DropdownToggle>
         </DropdownContext.Provider>
       );
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick(e);
       expect(e.preventDefault).toHaveBeenCalled();
@@ -204,7 +204,7 @@ describe('DropdownToggle', () => {
           <DropdownToggle nav>Ello world</DropdownToggle>
         </DropdownContext.Provider>
       );
-      const instance = wrapper.childAt(0).instance();
+      const instance = wrapper.instance();
 
       instance.onClick(e);
       expect(e.preventDefault).toHaveBeenCalled();