Merge pull request #27 from dmtrKovalenko/develop

Release 1.0.0-alpha.11

__tests__/DatePicker/DatePickerModal.test.js → __tests__/DatePicker/DatePickerWrapper.test.js

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

__tests__/DateTimePicker/DateTimePickerModal.test.js → __tests__/DateTimePicker/DateTimePickerWrapper.test.js

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

__tests__/TimePicker/TimePickerModal.test.js → __tests__/TimePicker/TimePickerWrapper.test.js

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

docs/src/Demo/Demo.jsx

@@ -27,6 +27,10 @@ class Demo extends Component {
     })
   }
 
+  changeOutside = () => {
+    this.setState({ selectedDate: moment('2015-02-02 12:44') })
+  }
+
   render() {
     const { classes } = this.props
     const { selectedDate } = this.state
@@ -70,11 +74,16 @@ class Demo extends Component {
           </Button>
         </Toolbar>
 
+
         <div id="content" className={classes.content}>
           <Typography type="display2" align="center" gutterBottom>
             Here you are!
           </Typography>
 
+          <Button className={classes.changeOutside} onClick={this.changeOutside}>
+            Change all values
+          </Button>
+
           <Typography type="display1" className={classes.example}>
             Basic usage
           </Typography>
@@ -97,7 +106,7 @@ class Demo extends Component {
                 Time picker
               </Typography>
 
-              <TimePicker autoOk
+              <TimePicker
                 value={this.state.selectedDate}
                 onChange={this.handleDateChange}
               />
@@ -189,9 +198,15 @@ const styles = theme => ({
     minHeight: 'calc(100vh - 63px)',
     maxWidth: 900,
     margin: '0 auto',
+    display: 'flex',
+    flexDirection: 'column',
     '@media(max-width: 600px)': {
       minHeight: 'calc(100vh - 55px)'
     }
+  },
+  changeOutside: {
+    maxWidth: 200,
+    margin: '0 auto'
   }
 })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-pickers",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "description": "React components, that implements material design pickers for material-ui v1",
   "main": "dist/material-ui-pickers.cjs.js",
   "module": "dist/material-ui-pickers.es.js",

src/DatePicker/Calendar.jsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles, IconButton } from 'material-ui';
 
@@ -10,7 +10,7 @@ import DomainPropTypes from '../constants/prop-types';
 
 const moment = extendMoment(Moment);
 
-export class Calendar extends PureComponent {
+export class Calendar extends Component {
   static propTypes = {
     date: PropTypes.object.isRequired,
     minDate: DomainPropTypes.date,

src/DatePicker/DatePicker.jsx

@@ -48,7 +48,7 @@ export class DatePicker extends PureComponent {
   }
 
   handleYearSelect = (date) => {
-    this.props.onChange(date);
+    this.props.onChange(date, false);
     this.openCalendar();
   }
 

src/DatePicker/DatePickerModal.jsx → src/DatePicker/DatePickerWrapper.jsx

@@ -1,12 +1,12 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 
 import ModalWrapper from '../wrappers/ModalWrapper';
 import DatePicker from './DatePicker';
 import DomainPropTypes from '../constants/prop-types';
+import PickerBase from '../_shared/PickerBase';
 
-export default class DatePickerModal extends PureComponent {
+export default class DatePickerWrapper extends PickerBase {
   static propTypes = {
     value: DomainPropTypes.date,
     minDate: DomainPropTypes.date,
@@ -34,42 +34,6 @@ export default class DatePickerModal extends PureComponent {
     invalidLabel: undefined,
   }
 
-  /* eslint-disable react/sort-comp */
-  getValidDateOrCurrent = () => {
-    const date = moment(this.props.value);
-
-    return date.isValid() ? date : moment();
-  }
-
-  state = {
-    date: this.getValidDateOrCurrent(),
-  }
-
-  handleChange = (date) => {
-    this.setState({ date }, () => {
-      if (this.props.autoOk) {
-        this.handleAccept();
-        this.togglePicker();
-      }
-    });
-  }
-
-  handleAccept = () => {
-    const dateToReturn = this.props.returnMoment
-      ? this.state.date
-      : this.state.date.toDate();
-
-    this.props.onChange(dateToReturn);
-  }
-
-  handleDismiss = () => {
-    this.setState({ date: this.getValidDateOrCurrent() });
-  }
-
-  togglePicker = () => {
-    this.wrapper.togglePicker();
-  }
-
   render() {
     const { date } = this.state;
     const {

src/DateTimePicker/DateTimePickerView.jsx

@@ -3,13 +3,21 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withStyles } from 'material-ui';
 
-export const DateTimePickerView = ({
-  view, selected, children, classes,
-}) => (
-  <div className={classnames({ [classes.hidden]: view !== selected })}>
-    { children }
-  </div>
-);
+export const DateTimePickerView = (props) => {
+  const {
+    view, selected, children, classes,
+  } = props;
+
+  if (view !== selected) {
+    return null;
+  }
+
+  return (
+    <div className={classnames({ [classes.hidden]: view !== selected })}>
+      { children }
+    </div>
+  );
+};
 
 DateTimePickerView.propTypes = {
   view: PropTypes.string.isRequired,
@@ -19,13 +27,7 @@ DateTimePickerView.propTypes = {
 };
 
 const styles = {
-  hidden: {
-    pointerEvents: 'none',
-    visibility: 'hidden', // required for saving scrolls state
-    position: 'absolute', // remove relation for layout
-    left: '-9999px',
-    top: '-9999px',
-  },
+
 };
 
 export default withStyles(styles, { name: 'MuiPickerDTPickerView ' })(DateTimePickerView);

src/DateTimePicker/DateTimePickerModal.jsx → src/DateTimePicker/DateTimePickerWrapper.jsx

@@ -1,14 +1,15 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+
 import classnames from 'classnames';
 import { withStyles } from 'material-ui';
 
 import DomainPropTypes from '../constants/prop-types';
 import ModalWrapper from '../wrappers/ModalWrapper';
 import DateTimePicker from './DateTimePicker';
+import PickerBase from '../_shared/PickerBase';
 
-export class DateTimePickerModal extends Component {
+export class DateTimePickerWrapper extends PickerBase {
   static propTypes = {
     value: DomainPropTypes.date,
     format: PropTypes.string,
@@ -39,42 +40,6 @@ export class DateTimePickerModal extends Component {
     invalidLabel: undefined,
   }
 
-  /* eslint-disable react/sort-comp */
-  getValidDateOrCurrent = () => {
-    const date = moment(this.props.value);
-
-    return date.isValid() ? date : moment();
-  }
-
-  state = {
-    date: this.getValidDateOrCurrent(),
-  }
-
-  handleAccept = () => {
-    const dateToReturn = this.props.returnMoment
-      ? this.state.date
-      : this.state.date.toDate();
-
-    this.props.onChange(dateToReturn);
-  }
-
-  handleDismiss = () => {
-    this.setState({ date: this.getValidDateOrCurrent() });
-  }
-
-  handleChange = (date, isFinish) => {
-    this.setState({ date }, () => {
-      if (isFinish && this.props.autoOk) {
-        this.handleAccept();
-        this.togglePicker();
-      }
-    });
-  }
-
-  togglePicker = () => {
-    this.wrapper.togglePicker();
-  }
-
   render() {
     const { date } = this.state;
     const {
@@ -131,5 +96,5 @@ const styles = {
   },
 };
 
-export default withStyles(styles, { name: 'MuiPickerDTPickerModal' })(DateTimePickerModal);
+export default withStyles(styles, { name: 'MuiPickerDTPickerModal' })(DateTimePickerWrapper);
 

src/TimePicker/TimePicker.jsx

@@ -37,7 +37,7 @@ export class TimePicker extends Component {
       this.openMinutesView();
     }
 
-    this.props.onChange(time);
+    this.props.onChange(time, false);
   }
 
   openMinutesView = () => {

src/TimePicker/TimePickerModal.jsx → src/TimePicker/TimePickerWrapper.jsx

@@ -1,11 +1,11 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
 
 import ModalWrapper from '../wrappers/ModalWrapper';
 import TimePicker from './TimePicker';
+import PickerBase from '../_shared/PickerBase';
 
-export default class TimePickerModal extends PureComponent {
+export default class TimePickerWrapper extends PickerBase {
   static propTypes = {
     value: PropTypes.oneOfType([
       PropTypes.object,
@@ -28,42 +28,6 @@ export default class TimePickerModal extends PureComponent {
     invalidLabel: undefined,
   }
 
-  /* eslint-disable react/sort-comp */
-  getValidDateOrCurrent = () => {
-    const date = moment(this.props.value);
-
-    return date.isValid() ? date : moment();
-  }
-
-  state = {
-    date: this.getValidDateOrCurrent(),
-  }
-
-  handleChange = (date, isFinish) => {
-    this.setState({ date }, () => {
-      if (isFinish && this.props.autoOk) {
-        this.handleAccept();
-        this.togglePicker();
-      }
-    });
-  }
-
-  handleAccept = () => {
-    const dateToReturn = this.props.returnMoment
-      ? this.state.date
-      : this.state.date.toDate();
-
-    this.props.onChange(dateToReturn);
-  }
-
-  handleDismiss = () => {
-    this.setState({ date: this.getValidDateOrCurrent() });
-  }
-
-  togglePicker = () => {
-    this.wrapper.togglePicker();
-  }
-
   render() {
     const { date } = this.state;
     const {