import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import DayPicker from 'react-day-picker';
import NavigationBar from './NavigationBar';
import WeekDay from './WeekDay';
import { convertModifiersToClassnames } from './utils';
import cx from 'classnames';
import theme from './theme.css';

class DatePicker extends PureComponent {
  state = {
    selectedDate: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.selectedDate !== undefined && props.selectedDate !== state.selectedDate) {
      return {
        selectedDate: props.selectedDate,
      };
    }

    return null;
  }

  handleDayClick = day => {
    this.setState(
      {
        selectedDate: day,
      },
      () => this.props.onChange(day),
    );
  };

  render() {
    const { className, modifiers, size, ...others } = this.props;
    const { selectedDate } = this.state;

    const classNames = cx(theme['date-picker'], theme[`is-${size}`], className);

    return (
      <DayPicker
        {...others}
        className={classNames}
        classNames={theme}
        modifiers={convertModifiersToClassnames(modifiers, theme)}
        navbarElement={<NavigationBar size={size} />}
        onDayClick={this.handleDayClick}
        selectedDays={selectedDate}
        weekdayElement={<WeekDay size={size} />}
      />
    );
  }
}

DatePicker.propTypes = {
  className: PropTypes.string,
  modifiers: PropTypes.object,
  onChange: PropTypes.func,
  selectedDate: PropTypes.instanceOf(Date),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
};

DatePicker.defaultProps = {
  size: 'medium',
};

export default DatePicker;

@@ -113,24 +113,82 @@
 ay-picker';%0A
+import Box, %7B omitBoxProps, pickBoxProps %7D from '../box';%0A
 import Navig
@@ -952,16 +952,103 @@
 state;%0A%0A
+    const boxProps = pickBoxProps(others);%0A    const restProps = omitBoxProps(others);%0A
     cons
@@ -1134,16 +1134,44 @@
 eturn (%0A
+      %3CBox %7B...boxProps%7D%3E%0A  
       %3CD
@@ -1179,16 +1179,18 @@
 yPicker%0A
+  
         
@@ -1193,21 +1193,24 @@
     %7B...
-other
+restProp
 s%7D%0A     
@@ -1204,32 +1204,34 @@
 tProps%7D%0A        
+ 
+ 
 className=%7Bclass
@@ -1237,32 +1237,34 @@
 sNames%7D%0A        
+  
 classNames=%7Bthem
@@ -1266,16 +1266,18 @@
 %7Btheme%7D%0A
+  
         
@@ -1343,16 +1343,18 @@
         
+  
 navbarEl
@@ -1387,24 +1387,26 @@
 =%7Bsize%7D /%3E%7D%0A
+  
         onDa
@@ -1434,32 +1434,34 @@
 yClick%7D%0A        
+  
 selectedDays=%7Bse
@@ -1472,16 +1472,18 @@
 edDate%7D%0A
+  
         
@@ -1529,17 +1529,32 @@
 %7D%0A      
-/
+  /%3E%0A      %3C/Box
 %3E%0A    );

add a Box wrapper with boxProps