[TimePicker] Port component mui#4796

fixed lint errores

docs/site/src/demos/pickers/SimpleTimePicker.js

@@ -1,14 +1,19 @@
 // @flow weak
 
 import React from 'react';
-import TimeDisplay from 'material-ui/TimePicker/TimeDisplay';
 import TimePicker from 'material-ui/TimePicker/TimePicker';
 
 export default function BasicTimePicker() {
   return (
     <div>
       <div>
-        <TimePicker autoOk format="24hr" hintText="24hr Format" />
+        <TimePicker hintText="12hr Format" />
+      </div>
+      <div>
+        <TimePicker format="24hr" hintText="24hr Format" />
+      </div>
+      <div>
+        <TimePicker autoOk format="24hr" hintText="24hr Format with autoOk" />
       </div>
     </div>);
 }

docs/site/src/demos/tables/EnhancedTable.js

@@ -136,15 +136,15 @@ function EnhancedTableToolbar(props, context) {
         {numSelected > 0 ? (
           <Text type="subheading">{numSelected} selected</Text>
         ) : (
-          <Text type="title">Nutrition</Text>
+        <Text type="title">Nutrition</Text>
         )}
       </div>
       <div className={classes.spacer} />
       <div className={classes.actions}>
         {numSelected > 0 ? (
           <IconButton>delete</IconButton>
         ) : (
-          <IconButton>filter_list</IconButton>
+        <IconButton>filter_list</IconButton>
         )}
       </div>
     </Toolbar>

src/TimePicker/Clock.js

@@ -8,7 +8,6 @@ import ClockHours from './ClockHours';
 import ClockMinutes from './ClockMinutes';
 
 export const styleSheet = createStyleSheet('Clock', (theme) => {
-  console.log(theme);
   return {
     clock: {
       userSelect: 'none',
@@ -178,8 +177,8 @@ class Clock extends Component {
           format={this.props.format}
           affix={this.getAffix()}
           onSelectAffix={this.handleSelectAffix}
-          onSelectHour={this.setMode.bind(this, 'hour')}
-          onSelectMin={this.setMode.bind(this, 'minute')}
+          onSelectHour={() => { this.setMode('hour'); }}
+          onSelectMin={() => { this.setMode('minute'); }}
         />
         <div className={classNames({ [classes.container]: true })} >
           <div className={classNames({ [classes.circle]: true })} />

src/TimePicker/ClockHours.js

@@ -8,7 +8,7 @@ import ClockPointer from './ClockPointer';
 import { getTouchEventOffsetValues, rad2deg } from '../utils/timeUtils';
 
 
-export const styleSheet = createStyleSheet('ClockHours', (theme) => {
+export const styleSheet = createStyleSheet('ClockHours', () => {
   return {
     root: {
       height: '100%',
@@ -60,7 +60,7 @@ class ClockHours extends Component {
     };
   }
 
-  isMousePressed(event) {
+  isMousePressed = (event) => {
     if (typeof event.buttons === 'undefined') {
       return event.nativeEvent.which;
     }

src/TimePicker/ClockMinutes.js

@@ -7,7 +7,7 @@ import ClockNumber from './ClockNumber';
 import ClockPointer from './ClockPointer';
 import { getTouchEventOffsetValues, rad2deg } from '../utils/timeUtils';
 
-export const styleSheet = createStyleSheet('ClockMinutes', (theme) => {
+export const styleSheet = createStyleSheet('ClockMinutes', () => {
   return {
     root: {
       height: '100%',

src/TimePicker/TimePicker.js

@@ -32,10 +32,6 @@ class TimePicker extends Component {
      * The initial time value of the TimePicker.
      */
     defaultTime: PropTypes.object,
-    /**
-     * Override the inline-styles of TimePickerDialog's body element.
-     */
-    dialogBodyStyle: PropTypes.object,
     /**
      * Override the inline-styles of TimePickerDialog's root element.
      */
@@ -73,8 +69,10 @@ class TimePicker extends Component {
     /**
      * If true, uses ("noon" / "midnight") instead of ("12 a.m." / "12 p.m.").
      *
-     * It's technically more correct to refer to "12 noon" and "12 midnight" rather than "12 a.m." and "12 p.m."
-     * and it avoids confusion between different locales. By default (for compatibility reasons) TimePicker uses
+     * It's technically more correct to refer to "12 noon" and "12 midnight"
+     * rather than "12 a.m." and "12 p.m."
+     * and it avoids confusion between different locales.
+     * By default (for compatibility reasons) TimePicker uses
      * ("12 a.m." / "12 p.m.").
      */
     pedantic: PropTypes.bool,
@@ -182,7 +180,6 @@ class TimePicker extends Component {
       autoOk,
       cancelLabel,
       defaultTime, // eslint-disable-line no-unused-vars
-      dialogBodyStyle,
       dialogStyle,
       format,
       okLabel,
@@ -215,7 +212,6 @@ class TimePicker extends Component {
         </TextField>
         <TimePickerDialog
           ref={(dialogWindow) => { this.dialogWindow = dialogWindow; }}
-          bodyStyle={dialogBodyStyle}
           initialTime={this.state.dialogTime}
           onAccept={this.handleAcceptDialog}
           format={format}

src/TimePicker/TimePicker.spec.js

@@ -1,11 +1,12 @@
+// @flow weak
 /* eslint-env mocha */
+
 import React from 'react';
-import {shallow} from 'enzyme';
-import {assert} from 'chai';
+import { assert } from 'chai';
 import { createShallowWithContext } from 'test/utils';
 
 import TimePicker from './TimePicker';
-import {addHours, formatTime} from '../utils/timeUtils';
+import { addHours, formatTime } from '../utils/timeUtils';
 import { TextFieldInput } from '../TextField';
 
 describe('<TimePicker />', () => {

src/TimePicker/TimePickerDialog.js

@@ -9,7 +9,7 @@ import Clock from './Clock';
 import { Dialog, DialogActions } from '../Dialog';
 import Button from '../Button';
 
-export const styleSheet = createStyleSheet('TimePickerDialog', (theme) => {
+export const styleSheet = createStyleSheet('TimePickerDialog', () => {
   return {
     dialogRoot: {
       fontSize: 14,
@@ -23,7 +23,6 @@ export const styleSheet = createStyleSheet('TimePickerDialog', (theme) => {
 class TimePickerDialog extends Component {
   static propTypes = {
     autoOk: PropTypes.bool,
-    bodyStyle: PropTypes.object,
     cancelLabel: PropTypes.node,
     format: PropTypes.oneOf(['ampm', '24hr']),
     initialTime: PropTypes.object,
@@ -92,7 +91,6 @@ class TimePickerDialog extends Component {
 
   render() {
     const {
-      bodyStyle,
       initialTime,
       onAccept, // eslint-disable-line no-unused-vars
       format,

src/TimePicker/TimePickerDialog.spec.js

@@ -1,6 +1,6 @@
+// @flow weak
 /* eslint-env mocha */
 import React from 'react';
-import { shallow } from 'enzyme';
 import { createShallowWithContext } from 'test/utils';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';

src/TimePicker/index.js

@@ -1 +1,3 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
 export default from './TimePicker';

src/utils/timeUtils.js

@@ -36,7 +36,7 @@ export function formatTime(date, format = 'ampm', pedantic = false) {
 
   if (format === 'ampm') {
     const isAM = hours < 12;
-    hours = hours % 12;
+    hours %= 12;
     const additional = isAM ? ' am' : ' pm';
     hours = (hours || 12).toString();