feat(atoms): change dropdown logic with context

Close CW-975

src/atoms/Dropdown/DropdownBody.js

@@ -6,6 +6,7 @@ import onClickOutside from 'react-onclickoutside';
 import { Popper } from 'react-popper';
 import { Portal } from 'react-portal';
 
+import { DropdownContext, withDropdownContext, type DropdownContextData } from './DropdownPlate'
 import { createStyledTag, createTheme } from '../../utils'
 
 /**
@@ -41,11 +42,6 @@ type DropdownBodyProps = {|
   forceRender?: boolean,
   withPortal?: boolean,
   closeOnClickOutside: boolean,
-
-  /** cloned props */
-  isOpen: boolean,
-  onCloseDropdown: () => void,
-  targetWidth?: number,
 |}
 
 const name = 'dropdownBody';
@@ -109,7 +105,16 @@ const setOffset = (offset?: PropSizes) => offset && offset !== 'none'
   : fp.identity;
 
 
-class DropdownBodyBase extends PureComponent<DropdownBodyProps> {
+
+const dropdownBodyEnhancer: HOC<*, DropdownBodyProps> = compose(
+  setDisplayName('DropdownBody'),
+  withDropdownContext,
+  onClickOutside,
+);
+
+type DropdownBodyEnhancedProps = HOCBase<typeof dropdownBodyEnhancer>;
+
+class DropdownBodyBase extends PureComponent<DropdownBodyEnhancedProps> {
   static zIndex = 2000;
 
   static defaultProps = {
@@ -154,15 +159,15 @@ class DropdownBodyBase extends PureComponent<DropdownBodyProps> {
   }
 
   getBodyChildren = () => {
-    const { children, onCloseDropdown } = this.props;
+    const { children, dropdown: { closeDropdown } } = this.props;
 
     return typeof children === 'function'
-      ? children({ closeDropdown: onCloseDropdown })
+      ? children({ closeDropdown })
       : children;
   }
 
   render() {
-    const { isOpen, withPortal, forceRender, ...rest } = this.props;
+    const { withPortal, forceRender, dropdown: { isOpen }, ...rest } = this.props;
 
     const popperPlacement = this.getPopperPlacement();
     const popperModifiers = this.getPopperModifiers();
@@ -192,10 +197,6 @@ class DropdownBodyBase extends PureComponent<DropdownBodyProps> {
   }
 }
 
-const dropdownBodyEnhancer: HOC<DropdownBodyProps, DropdownBodyProps> = compose(
-  setDisplayName('DropdownBody'),
-  onClickOutside,
-);
 const DropdownBody = dropdownBodyEnhancer(DropdownBodyBase)
 
 export { DropdownBody, theme }

src/atoms/Dropdown/DropdownContext.js

@@ -0,0 +1,29 @@
+// @flow
+import React, { createContext } from 'react';
+
+
+type DropdownContextType = {|
+  targetWidth?: number,
+  isOpen: boolean,
+  toggleDropdown: () => void,
+  closeDropdown:() => void,
+  outsideClickIgnoreClass: string,
+|}
+
+const DropdownContext = createContext({
+  dropdown: {
+    outsideClickIgnoreClass: '',
+  },
+});
+
+
+const withDropdownContext: HOCProps<{ dropdown: DropdownContextType }> = (Component: React$Element<*>) => (props: *) => {
+  return (
+    <DropdownContext.Consumer>
+      { dropdownData => <Component { ...props } dropdown={ dropdownData } /> }
+    </DropdownContext.Consumer>
+  );
+};
+
+export { DropdownContext, withDropdownContext };
+export type { DropdownContextType };

src/atoms/Dropdown/DropdownHead.js

@@ -2,6 +2,9 @@
 
 import React, { PureComponent } from 'react';
 import { Target } from 'react-popper';
+import { compose } from 'recompose';
+
+import { withDropdownContext } from './DropdownContext'
 
 import { createStyledTag, createTheme } from '../../utils';
 
@@ -54,17 +57,23 @@ const DropdownPopperTarget = createStyledTag(name, {
   height:' 100%',
 });
 
-class DropdownHead extends PureComponent<DropdownHeadProps> {
+const dropdownHeadEnhancer: HOC<*, DropdownHeadProps>  = compose(
+  withDropdownContext,
+)
+
+type DropdownHeadPropsEnhanced = HOCBase<typeof dropdownHeadEnhancer>;
+
+class DropdownHeadBase extends PureComponent<DropdownHeadPropsEnhanced> {
 
   onClick = (event: MouseEvent) => {
-    const { onClick, stopClickPropagation } = this.props;
+    const { dropdown: { toggleDropdown }, stopClickPropagation } = this.props;
 
-    onClick && onClick(event);
+    toggleDropdown && toggleDropdown();
     stopClickPropagation && event.stopPropagation();
   }
 
   render() {
-    const { outsideClickIgnoreClass = '', children, ...rest } = this.props;
+    const { dropdown: { outsideClickIgnoreClass }, children, ...rest } = this.props;
 
     return (
       <DropdownHeadTag { ...rest } tagName="div" className={ outsideClickIgnoreClass } onClick={ this.onClick }>
@@ -76,4 +85,6 @@ class DropdownHead extends PureComponent<DropdownHeadProps> {
   }
 }
 
+const DropdownHead = dropdownHeadEnhancer(DropdownHeadBase);
+
 export { DropdownHead, theme}

src/atoms/Dropdown/DropdownPlate.js

@@ -7,6 +7,7 @@ import { Manager } from 'react-popper';
 
 import { DropdownHead } from './DropdownHead';
 import { DropdownBody } from './DropdownBody';
+import { DropdownContext } from './DropdownContext';
 
 /**
  * @prop {*} isOpen opened state of the dropdown
@@ -59,44 +60,25 @@ class DropdownPlateBase extends Component<DropdownControlledProps> {
 
   getIgnoreClickOutsideClass = () => `ignore-react-onclickoutside-${this.instanceIndex}`;
 
-  getHeadComponent() {
-    const { children } = this.props;
-
-    return React.Children.map(children, child =>
-      (child.type.prototype instanceof DropdownHead || child.type === DropdownHead)
-        ? React.cloneElement(child,
-          {
-            onClick: this.toggleDropdown,
-            outsideClickIgnoreClass: this.getIgnoreClickOutsideClass(),
-          })
-        : null,
-    );
-  }
-
-  getBodyComponent() {
+  render() {
     const { children, onCloseDropdown, isOpen } = this.props;
 
-    return React.Children.map(children, child =>
-      (child.type.prototype instanceof DropdownBody || child.type === DropdownBody)
-        ? React.cloneElement(child,
-          {
-            onCloseDropdown,
-            isOpen,
-            targetWidth: this.getDropdownWidth(),
-            outsideClickIgnoreClass: this.getIgnoreClickOutsideClass(),
-          })
-        : null,
-    );
-  }
+    const contextData: DropdownContextData = {
+      isOpen,
+      toggleDropdown: this.toggleDropdown,
+      closeDropdown: onCloseDropdown,
+      targetWidth: this.getDropdownWidth(),
+      outsideClickIgnoreClass: this.getIgnoreClickOutsideClass(),
+    }
 
-  render() {
     return (
-      <div ref={ this.setDropdownRef }>
-        <Manager tag={ false }>
-          { this.getHeadComponent() }
-          { this.getBodyComponent() }
-        </Manager>
-      </div>
+      <DropdownContext.Provider value={ contextData }>
+        <div ref={ this.setDropdownRef }>
+          <Manager tag={ false }>
+            { children }
+          </Manager>
+        </div>
+      </DropdownContext.Provider>
     );
   }
 }
@@ -115,4 +97,6 @@ const dropDownEnhancer: { (any): React$ComponentType<DropdownControlledProps | D
   ),
 );
 
-export const DropdownPlate = dropDownEnhancer(DropdownPlateBase);
+const DropdownPlate = dropDownEnhancer(DropdownPlateBase);
+
+export { DropdownPlate };