Reorganize pickers

components/date_picker/Calendar.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import CssTransitionGroup from 'react-addons-css-transition-group';
-import { SlideLeft, SlideRight } from '../../animations';
-import FontIcon from '../../font_icon';
-import Ripple from '../../ripple';
-import Month from './Month';
-import time from '../../utils/time';
-import utils from '../../utils/utils';
-import style from './style';
+import { SlideLeft, SlideRight } from '../animations';
+import FontIcon from '../font_icon';
+import Ripple from '../ripple';
+import CalendarMonth from './CalendarMonth';
+import time from '../utils/time';
+import utils from '../utils/utils';
+import style from './style.calendar';
 
 class Calendar extends React.Component {
   static propTypes = {
@@ -99,13 +99,14 @@ class Calendar extends React.Component {
           <Ripple ref='rippleRight' className={style.ripple} spread={1.2} centered />
         </FontIcon>
         <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
-          <Month
+          <CalendarMonth
             key={this.state.viewDate.getMonth()}
             maxDate={this.props.maxDate}
             minDate={this.props.minDate}
             viewDate={this.state.viewDate}
             selectedDate={this.props.selectedDate}
-            onDayClick={this.handleDayClick} />
+            onDayClick={this.handleDayClick}
+          />
         </CssTransitionGroup>
       </div>
     );

components/date_picker/CalendarDay.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import time from '../../utils/time';
-import style from './style';
+import time from '../utils/time';
+import style from './style.calendar';
 
 class Day extends React.Component {
   static propTypes = {

components/date_picker/CalendarMonth.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import time from '../../utils/time';
-import utils from '../../utils/utils';
-import Day from './Day';
-import style from './style';
+import CalendarDay from './CalendarDay';
+import time from '../utils/time';
+import utils from '../utils/utils';
+import style from './style.calendar';
 
 class Month extends React.Component {
   static propTypes = {
@@ -29,7 +29,7 @@ class Month extends React.Component {
       const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
 
       return (
-        <Day
+        <CalendarDay
           key={i}
           day={i}
           disabled={disabled}

components/date_picker/DatePicker.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CalendarDialog from './DatePickerDialog';
+import DatePickerDialog from './DatePickerDialog';
 import events from '../utils/events';
 import Input from '../input';
 import style from './style';
@@ -46,7 +46,7 @@ class DatePicker extends React.Component {
           type='text'
           value={date}
         />
-        <CalendarDialog
+        <DatePickerDialog
           active={this.state.active}
           maxDate={this.props.maxDate}
           minDate={this.props.minDate}

components/date_picker/DatePickerDialog.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Calendar from './calendar';
+import Calendar from './Calendar';
 import Dialog from '../dialog';
 import style from './style';
 import time from '../utils/time';

components/date_picker/_config.scss

@@ -13,3 +13,18 @@ $datepicker-month-font-size: $font-size-big;
 $datepicker-day-font-size: 5 * $unit;
 $datepicker-day-line-height: 4 * $unit;
 $datepicker-year-font-size: $font-size-small;
+
+$calendar-primary: $color-primary;
+$calendar-primary-contrast: $color-primary-contrast;
+$calendar-primary-color: $calendar-primary !default;
+$calendar-primary-contrast-color: $calendar-primary-contrast !default;
+$calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
+$calendar-arrows-color: $palette-grey-600 !default;
+$calendar-arrows-font-size: 2 * $unit;
+$calendar-arrows-ripple-duration: 450ms;
+$calendar-year-font-size: 2.4;
+$calendar-day-font-size: 1.3 * $unit;
+$calendar-day-disable-opacity: 0.25;
+$calendar-row-height: 3 * $unit;
+$calendar-day-padding: .2 * $unit;
+$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;

components/date_picker/calendar/_config.scss

@@ -1,14 +0,0 @@
-$calendar-primary: $color-primary;
-$calendar-primary-contrast: $color-primary-contrast;
-$calendar-primary-color: $calendar-primary !default;
-$calendar-primary-contrast-color: $calendar-primary-contrast !default;
-$calendar-primary-hover-color: rgba($calendar-primary, 0.21) !default;
-$calendar-arrows-color: $palette-grey-600 !default;
-$calendar-arrows-font-size: 2 * $unit;
-$calendar-arrows-ripple-duration: 450ms;
-$calendar-year-font-size: 2.4;
-$calendar-day-font-size: 1.3 * $unit;
-$calendar-day-disable-opacity: 0.25;
-$calendar-row-height: 3 * $unit;
-$calendar-day-padding: .2 * $unit;
-$calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;

components/date_picker/calendar/index.jsx

@@ -1 +0,0 @@
-export default from './Calendar.jsx';

components/date_picker/style.calendar.scss

@@ -1,4 +1,4 @@
-@import "../../base";
+@import "../base";
 @import "./config";
 
 .root {

components/time_picker/Clock.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import style from './style';
-import time from '../../utils/time';
-import Hours from './Hours';
-import Minutes from './Minutes';
+import style from './style.clock';
+import time from '../utils/time';
+import Hours from './ClockHours';
+import Minutes from './ClockMinutes';
 
 class Clock extends React.Component {
   static propTypes = {

components/time_picker/ClockFace.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import style from './style';
+import style from './style.clock';
 
 class Face extends React.Component {
   static propTypes = {

components/time_picker/ClockHand.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import style from './style';
-import events from '../../utils/events';
-import prefixer from '../../utils/prefixer';
-import utils from '../../utils/utils';
+import style from './style.clock';
+import events from '../utils/events';
+import prefixer from '../utils/prefixer';
+import utils from '../utils/utils';
 
 class Hand extends React.Component {
   static propTypes = {

components/time_picker/ClockHours.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import utils from '../../utils/utils';
-import Face from './Face';
-import Hand from './Hand';
+import utils from '../utils/utils';
+import Face from './ClockFace';
+import Hand from './ClockHand';
 
 const outerNumbers = [0, ...utils.range(13, 24)];
 const innerNumbers = [12, ...utils.range(1, 12)];

components/time_picker/ClockMinutes.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import utils from '../../utils/utils';
-import style from './style';
-import Face from './Face';
-import Hand from './Hand';
+import utils from '../utils/utils';
+import style from './style.clock';
+import Face from './ClockFace';
+import Hand from './ClockHand';
 
 const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;

components/time_picker/TimePickerDialog.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import style from './style';
 import time from '../utils/time';
-import Clock from './clock';
+import Clock from './Clock';
 import Dialog from '../dialog';
 
 class TimePickerDialog extends React.Component {

components/time_picker/_config.scss

@@ -11,3 +11,17 @@ $timepicker-primary-dark-color: $timepicker-primary-dark !default;
 $timepicker-ampm-height: 2.2 * $unit;
 $timepicker-ampm-width: 4 * $unit;
 $timepicker-dialog-width: 30 * $unit;
+
+$clock-padding: 1.5 * $unit 2 * $unit;
+$clock-primary: $color-primary;
+$clock-primary-contrast: $color-primary-contrast;
+$clock-primary-dark: $color-primary-dark;
+$clock-primary-color: $clock-primary !default;
+$clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
+$clock-primary-contrast-color: $clock-primary-contrast !default;
+$clock-primary-dark-color: $clock-primary-dark !default;
+$clock-number-size: 2 * $unit;
+$clock-hand-width: .4 * $unit;
+$clock-hand-dot-size: 1 * $unit;
+$clock-knob-size: 3.4 * $unit;
+$clock-knob-small-size: 1.2 * $unit;

components/time_picker/clock/_config.scss

@@ -1,13 +0,0 @@
-$clock-padding: 1.5 * $unit 2 * $unit;
-$clock-primary: $color-primary;
-$clock-primary-contrast: $color-primary-contrast;
-$clock-primary-dark: $color-primary-dark;
-$clock-primary-color: $clock-primary !default;
-$clock-primary-hover-color: rgba($clock-primary, 0.20) !default;
-$clock-primary-contrast-color: $clock-primary-contrast !default;
-$clock-primary-dark-color: $clock-primary-dark !default;
-$clock-number-size: 2 * $unit;
-$clock-hand-width: .4 * $unit;
-$clock-hand-dot-size: 1 * $unit;
-$clock-knob-size: 3.4 * $unit;
-$clock-knob-small-size: 1.2 * $unit;

components/time_picker/clock/index.jsx

@@ -1 +0,0 @@
-export default from './Clock.jsx';

components/time_picker/style.clock.scss

@@ -1,4 +1,4 @@
-@import "../../base";
+@import "../base";
 @import "./config";
 
 .root {

components/tooltip/Tooltip.jsx

@@ -49,7 +49,6 @@ class Tooltip extends React.Component {
   handleParentMouseOut = () => {
     if (this.state.active) {
       this.deferredHide = setTimeout(() => { this.setState({active: false}); }, HIDE_TIMEOUT);
-      console.log(this.deferredHide);
     }
   };