import React, { PropTypes, Component, cloneElement } from 'react';
import cx from 'classnames';

import Control from '../Control/Control';
import ControlGroup from '../ControlGroup/ControlGroup';
import ControlIcon from '../Control/ControlIcon';

import css from './ControlLayer.css';

import { DEFAULT_ZOOM } from '../../../constants/mapbox';

export default class ControlLayer extends Component {
  static propTypes = {
    className: PropTypes.string,
    controlGroupClassName: PropTypes.string,
    children: PropTypes.element.isRequired,
  };

  constructor(props) {
    super(props);
    const { children: { zoom } } = props;

    this.state = {
      zoom: zoom || DEFAULT_ZOOM,
    };
  }

  handleZoomOut = () => {
    this.setState(({ zoom }) => ({ zoom: zoom - 1 }));
  };

  handleZoomIn = () => {
    this.setState(({ zoom }) => ({ zoom: zoom + 1 }));
  };

  handleMoveEnd = (...args) => {
    const { children: child } = this.props;
    const { onMoveEnd: childOnMoveEnd } = child.props;
    const { zoom } = args[1];

    this.setState({ zoom });
    if (typeof childOnMoveEnd === 'function') childOnMoveEnd(...args);
  };

  render() {
    const { children: child, className, controlGroupClassName } = this.props;
    const { zoom } = this.state;

    return (
      <div className={ cx(css.root, className) }>
        <ControlGroup className={ cx(css.controlGroup, controlGroupClassName) }>
          <Control onClick={ this.handleZoomIn }>
            <ControlIcon name="plus" />
          </Control>
          <Control onClick={ this.handleZoomOut }>
            <ControlIcon name="minus" />
          </Control>
        </ControlGroup>
        { cloneElement(child, {
          zoom,
          onMoveEnd: this.handleMoveEnd,
        }) }
      </div>
    );
  }
}
@@ -22,33 +22,8 @@
 ypes
-, Component, cloneElement
  %7D f
@@ -258,990 +258,151 @@
 ';%0A%0A
-import %7B DEFAULT_ZOOM %7D from '../../../constants/mapbox';%0A%0Aexport default class ControlLayer extends Component %7B%0A  static propTypes
+const ControlLayer = (props)
  =
+%3E
  %7B%0A  
-  className: PropTypes.string,%0A    controlGroupClassName: PropTypes.string,%0A    children: PropTypes.element.isRequired,%0A  %7D;%0A%0A  constructor(props) %7B%0A    super(props);%0A    const %7B children: %7B zoom %7D %7D = props;%0A%0A    this.state = %7B%0A      zoom: zoom %7C%7C DEFAULT_ZOOM,%0A    %7D;%0A  %7D%0A%0A  handleZoomOut = () =%3E %7B%0A    this.setState((%7B zoom %7D) =%3E (%7B zoom: zoom - 1 %7D));%0A  %7D;%0A%0A  handleZoomIn = () =%3E %7B%0A    this.setState((%7B zoom %7D) =%3E (%7B zoom: zoom + 1 %7D));%0A  %7D;%0A%0A  handleMoveEnd = (...args) =%3E %7B%0A    const %7B children: child %7D = this.props;%0A    const %7B onMoveEnd: childOnMoveEnd %7D = child.props;%0A    const %7B zoom %7D = args%5B1%5D;%0A%0A    this.setState(%7B zoom %7D);%0A    if (typeof childOnMoveEnd === 'function') childOnMoveEnd(...args);%0A  %7D;%0A%0A  render() %7B%0A    const %7B children: child, className, controlGroupClassName %7D = this.props;%0A    const %7B zoom %7D = this.state;%0A%0A  
+const %7B%0A    children,%0A    className,%0A    controlGroupClassName,%0A    onZoomIn,%0A    onZoomOut,%0A  %7D = props;%0A%0A
   re
@@ -408,18 +408,16 @@
 eturn (%0A
-  
     %3Cdiv
@@ -452,26 +452,24 @@
 assName) %7D%3E%0A
-  
       %3CContr
@@ -535,34 +535,32 @@
 ame) %7D%3E%0A        
- 
- 
 %3CControl onClick
@@ -558,35 +558,26 @@
 l onClick=%7B 
-this.handle
+on
 ZoomIn %7D%3E%0A  
@@ -570,26 +570,24 @@
 onZoomIn %7D%3E%0A
-  
           %3CC
@@ -612,34 +612,32 @@
 lus%22 /%3E%0A        
-  
 %3C/Control%3E%0A     
@@ -627,26 +627,24 @@
  %3C/Control%3E%0A
-  
         %3CCon
@@ -658,27 +658,18 @@
 Click=%7B 
-this.handle
+on
 ZoomOut 
@@ -667,26 +667,24 @@
 nZoomOut %7D%3E%0A
-  
           %3CC
@@ -706,26 +706,24 @@
 =%22minus%22 /%3E%0A
-  
         %3C/Co
@@ -727,34 +727,32 @@
 /Control%3E%0A      
-  
 %3C/ControlGroup%3E%0A
@@ -761,125 +761,291 @@
     
-  
 %7B c
-loneElement(child, %7B%0A          zoom,%0A          onMoveEnd: this.handleMoveEnd,%0A        %7D) %7D%0A      %3C/div%3E%0A    );%0A  %7D%0A%7D
+hildren %7D%0A    %3C/div%3E%0A  );%0A%7D;%0A%0AControlLayer.propTypes = %7B%0A  className: PropTypes.string,%0A  controlGroupClassName: PropTypes.string,%0A  children: PropTypes.element.isRequired,%0A  onZoomIn: PropTypes.func.isRequired,%0A  onZoomOut: PropTypes.func.isRequired,%0A%7D;%0A%0Aexport default ControlLayer;

Make the map's `<ControlLayer />` a dumb component