Merge pull request #15 from dmtrKovalenko/develop

Release 1.0.0-alpha.7

.eslintrc

@@ -4,7 +4,8 @@
   "rules": {
     "react/forbid-prop-types": 0,
     "react/jsx-filename-extension": 0,
-    "no-param-reassign": 0
+    "no-param-reassign": 0,
+    "import/no-named-as-default": 0
   },
   "globals": {
     "document": true

README.md

@@ -1,4 +1,6 @@
-# Material-UI picker
+# Material-UI pickers
+[![npm package](https://img.shields.io/npm/v/material-ui-pickers.svg)](https://www.npmjs.org/package/material-ui-pickers)
+[![Build Status](https://api.travis-ci.org/dmtrKovalenko/material-ui-pickers.svg?branch=master)](https://travis-ci.org/dmtrKovalenko/material-ui-pickers)
 > Components, that implements material design date and time pickers for material-ui v1
 
 ## [Click here for demo](https://material-ui-pic.firebaseapp.com/)
@@ -12,14 +14,22 @@ Available as npm package
 npm install material-ui-pickers -S
 ```
 
+We are using material-ui-icons font to display icons. We are working on additional way to pass icons,but for now its required. Just add this to your html 
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+
 ### Usage
 Here is a quick example of how to use this package
 
 ```jsx
+import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers'
+
 class App extends Component {
   state = {
     selectedDate: new Date(),
-    selectedTime: new Date()
+    selectedTime: new Date(),
+    selectedDateTime: new Date()
   }
 
   handleDateChange = date => {
@@ -30,8 +40,12 @@ class App extends Component {
     this.setState({ selectedTime: time })
   }
 
+  handleDateTimeChange = dateTime => {
+    this.setState({ selectedDateTime: dateTime })
+  }
+
   render() {
-    const { selectedDate, selectedTime } = this.state
+    const { selectedDate, selectedTime, selectedDateTime } = this.state
 
     return (
       <div>
@@ -44,6 +58,11 @@ class App extends Component {
           value={selectedTime}
           onChange={this.handleDateChange}
         />
+
+        <DateTimePicker
+          value={this.state.selectedDateTime}
+          onChange={this.handleDateTimeChange}
+        />
       </div>
     )
   }
@@ -54,27 +73,41 @@ class App extends Component {
 Here is a list of available props
 
 #### Datepicker
+* date - string, number, Date object, Moment object ([anything](https://momentjs.com/docs/#/parsing/), that can be parsed by moment)
+
 Prop | Type | Default | Definition
 ------------ | ------------- | ------------- | -------------
-value | string, number, Date object, Moment object | null | Datepicker value
+value | date | new Date() | Datepicker value
 format | string | 'MMMM Do' | Moment format string for input
 autoOk | boolean | false | Auto accept date on selection
 disableFuture | boolean | false | Disable future dates
 animateYearScrolling | boolean | false | Will animate year selection (note that will work for browser supports scrollIntoView api)
 openToYearSelection | boolean | false | Open datepicker from year selection
-minDate | string, number, Date object, Moment object | '1900-01-01' | Minimum selectable date
-maxDate | string, number, Date object, Moment object | '2100-01-01' | Maximum selectable date
+minDate | date | '1900-01-01' | Minimum selectable date
+maxDate | date | '2100-01-01' | Maximum selectable date
 
 #### Timepicker
 Prop | Type | Default | Definition
 ------------ | ------------- | ------------- | -------------
-value | string, number, Date object, Moment object | null | Timepicker value
+value | date | new Date() | Timepicker value
 format | string | 'MMMM Do' | Moment format string for input
 autoOk | boolean | false | Auto accept time on selection
 
+#### DateTimepicker
+Prop | Type | Default | Definition
+------------ | ------------- | ------------- | -------------
+value | date | new Date() | Timepicker value
+format | string | 'MMMM Do hh:mm a' | Moment format string for input
+autoOk | boolean | false | Auto accept time on selection
+autoSubmit | boolean | true | On change show next time input (year -> date -> hour -> minute)
+showTabs | boolean | false | Show date/time tabs
+openTo | one of 'year', 'date', 'hour', 'minutes' | 'date' | Open to particular view
+animateYearScrolling | boolean | false | Will animate year selection
+minDate | date | '1900-01-01' | Minimum selectable date
+maxDate | date | '2100-01-01' | Maximum selectable date
+
 ### Known Issues
 1. 24 hour displaying for timepicker (now supporting only am/pm)
-2. DateTime picker (wrapper above date and time)
 
 They would be added/fixed in one of the nearest release :)
 

__tests__/DatePicker/Calendar.test.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import moment from 'moment';
 import { shallow } from 'enzyme';
-import Calendar from '../../src/DatePicker/Calendar';
+import { Calendar } from '../../src/DatePicker/Calendar';
 
 describe('Calendar', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<Calendar />);
+    component = shallow(<Calendar classes={{}} date={moment('01-01-2017')} />);
   });
 
   it('Should renders', () => {

__tests__/DatePicker/CalendarHeader.test.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import moment from 'moment';
 import { shallow } from 'enzyme';
-import CalendarHeader from '../../src/DatePicker/CalendarHeader';
+import { CalendarHeader } from '../../src/DatePicker/CalendarHeader';
 
 describe('CalendarHeader', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<CalendarHeader />);
+    component = shallow(<CalendarHeader classes={{}} currentMonth={moment('01-01-2017')} />);
   });
 
   it('Should renders', () => {

__tests__/DatePicker/DatePicker.test.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import moment from 'moment';
 import { shallow } from 'enzyme';
-import DatePicker from '../../src/DatePicker/DatePicker';
+import { DatePicker } from '../../src/DatePicker/DatePicker';
 
 describe('DatePicker', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<DatePicker />);
+    component = shallow(<DatePicker classes={{}} date={moment('01-01-2017')} />);
   });
 
   it('Should renders', () => {

__tests__/DatePicker/YearSelection.test.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import YearSelection from '../../src/DatePicker/YearSelection';
+import moment from 'moment';
+import { YearSelection } from '../../src/DatePicker/YearSelection';
 
 describe('YearSelection', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<YearSelection /> );
+    component = shallow(<YearSelection classes={{}} date={moment('01-01-2017')} />);
   });
 
   it('Should renders', () => {

__tests__/DateTimePicker/DateTimePicker.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import moment from 'moment';
+import { shallow } from 'enzyme';
+import { DateTimePicker } from '../../src/DateTimePicker/DateTimePicker';
+
+describe('DateTimePicker', () => {
+  let component;
+
+  beforeEach(() => {
+    component = shallow(<DateTimePicker
+      date={moment('01-01-2017')}
+      classes={{}}
+    />);
+  });
+
+  it('Should renders', () => {
+    console.log(component.debug()); // TODO REMOVE ME
+    expect(component).toBeTruthy();
+  });
+});

__tests__/DateTimePicker/DateTimePickerHeader.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import moment from 'moment';
+import { shallow } from 'enzyme';
+import { DateTimePickerHeader } from '../../src/DateTimePicker/DateTimePickerHeader';
+
+describe('DateTimePickerHeader', () => {
+  let component;
+
+  beforeEach(() => {
+    component = shallow(<DateTimePickerHeader
+      setMeridiemMode={() => jest.fn()}
+      date={moment('01-01-2017')}
+      classes={{}}
+    />);
+  });
+
+  it('Should renders', () => {
+    console.log(component.debug()); // TODO REMOVE ME
+    expect(component).toBeTruthy();
+  });
+});

__tests__/DateTimePicker/DateTimePickerModal.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DateTimePickerModal } from '../../src/DateTimePicker/DateTimePickerModal';
+
+describe('DateTimePickerModal', () => {
+  let component;
+
+  beforeEach(() => {
+    component = shallow(<DateTimePickerModal classes={{}} />);
+  });
+
+  it('Should renders', () => {
+    console.log(component.debug()); // TODO REMOVE ME
+    expect(component).toBeTruthy();
+  });
+});

__tests__/DateTimePicker/DateTimePickerTabs.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DateTimePickerTabs } from '../../src/DateTimePicker/DateTimePickerTabs';
+
+describe('DateTimePickerTabs', () => {
+  let component;
+
+  beforeEach(() => {
+    component = shallow(<DateTimePickerTabs
+      theme={{ palette: { type: 'light' } }}
+      classes={{}}
+    />);
+  });
+
+  it('Should renders', () => {
+    console.log(component.debug()); // TODO REMOVE ME
+    expect(component).toBeTruthy();
+  });
+});

__tests__/DateTimePicker/DateTimePickerView.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DateTimePickerView } from '../../src/DateTimePicker/DateTimePickerView';
+
+describe('DateTimePickerView', () => {
+  let component;
+
+  beforeEach(() => {
+    component = shallow(<DateTimePickerView classes={{}} />);
+  });
+
+  it('Should renders', () => {
+    console.log(component.debug()); // TODO REMOVE ME
+    expect(component).toBeTruthy();
+  });
+});

__tests__/TimePicker/Clock.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Clock from '../../src/TimePicker/Clock';
+import { Clock } from '../../src/TimePicker/Clock';
 
 describe('Clock', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<Clock /> );
+    component = shallow(<Clock classes={{}} />);
   });
 
   it('Should renders', () => {

__tests__/TimePicker/ClockNumber.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ClockNumber from '../../src/TimePicker/ClockNumber';
+import { ClockNumber } from '../../src/TimePicker/ClockNumber';
 
 describe('ClockNumber', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<ClockNumber />);
+    component = shallow(<ClockNumber classes={{}} index={0} />);
   });
 
   it('Should renders', () => {

__tests__/TimePicker/ClockPointer.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ClockPointer from '../../src/TimePicker/ClockPointer';
+import { ClockPointer } from '../../src/TimePicker/ClockPointer';
 
 describe('ClockPointer', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<ClockPointer />);
+    component = shallow(<ClockPointer classes={{}} />);
   });
 
   it('Should renders', () => {

__tests__/TimePicker/TimePicker.test.js

@@ -1,12 +1,16 @@
 import React from 'react';
+import moment from 'moment';
 import { shallow } from 'enzyme';
-import TimePicker from '../../src/TimePicker/TimePicker';
+import { TimePicker } from '../../src/TimePicker/TimePicker';
 
 describe('TimePicker', () => {
   let component;
 
   beforeEach(() => {
-    component = shallow(<TimePicker />);
+    component = shallow(<TimePicker
+      classes={{}}
+      date={moment('01-01-2017 12:00')}
+    />);
   });
 
   it('Should renders', () => {

__tests__/TimePicker/utils/time-utils.test.js

@@ -0,0 +1,18 @@
+import moment from 'moment';
+import { getHours, getMinutes, convertToMeridiem } from '../../../src/TimePicker/utils/time-utils';
+
+describe('Time utils', () => {
+  it('Should properly calculate hours', () => {
+    expect(getHours(25, 50)).toBe(10);
+  });
+
+  it('Should properly calculate minutes', () => {
+    expect(getMinutes(25, 50)).toBe(51);
+  });
+
+  it('Should convert time to meridiem', () => {
+    const time = convertToMeridiem(moment('2017-01-01T16:00'), 'am');
+    expect(time.hours()).toBe(4);
+  });
+});
+

__tests__/wrappers/ModalWrapper.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ModalWrapper from '../../src/wrappers/ModalWrapper';
+
+describe('ModalWrapper', () => {
+  let component;
+
+  beforeEach(() => {
+    component = shallow(<ModalWrapper value={new Date()} />);
+  });
+
+  it('Should renders', () => {
+    console.log(component.debug()); // TODO REMOVE ME
+    expect(component).toBeTruthy();
+  });
+});

docs/public/index.html

@@ -11,8 +11,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

docs/src/Demo/Demo.css

@@ -32,6 +32,9 @@ main {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  min-height: 160px;
+  padding-top: 40px;
+  margin: 30px auto 50px;
 }
 
 .picker {