Stateless DatePicker

Author: soyjavi

components/date_picker/dialog.jsx

@@ -6,26 +6,30 @@ import Dialog from '../dialog';
 
 class CalendarDialog extends React.Component {
   static propTypes = {
+    active: React.PropTypes.bool,
     initialDate: React.PropTypes.object,
-    onDateSelected: React.PropTypes.func
+    onCancel: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onSelect: React.PropTypes.func
   };
 
   static defaultProps = {
+    active: false,
     initialDate: new Date()
   };
 
   state = {
-    active: false,
     date: this.props.initialDate,
     display: 'months',
     actions: [
-      { label: 'Cancel', className: style.button, onClick: this.onDateCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.onDateSelected.bind(this) }
+      { label: 'Cancel', className: style.button, onClick: this.handleCancel.bind(this) },
+      { label: 'Ok', className: style.button, onClick: this.handleSelect.bind(this) }
     ]
   };
 
   handleCalendarChange = (date) => {
     this.setState({date, display: 'months'});
+    if (this.props.onChange) this.props.onChange(date);
   };
 
   displayMonths = () => {
@@ -36,25 +40,20 @@ class CalendarDialog extends React.Component {
     this.setState({display: 'years'});
   };
 
-  onDateCancel () {
-    this.setState({active: false});
-  }
-
-  onDateSelected () {
-    if (this.props.onDateSelected) this.props.onDateSelected(this.state.date);
-    this.setState({active: false});
+  handleCancel () {
+    if (this.props.onCancel) this.props.onCancel(this.state.date);
   }
 
-  show () {
-    this.setState({active: true});
+  handleSelect () {
+    if (this.props.onSelect) this.props.onSelect(this.state.date);
   }
 
   render () {
     const display = `display-${this.state.display}`;
     const headerClassName = `${style.header} ${style[display]}`;
 
     return (
-      <Dialog active={this.state.active} type="custom" className={style.dialog} actions={this.state.actions}>
+      <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.state.actions}>
           <header className={headerClassName}>
             <span className={style.weekday}>
               {time.getFullDayOfWeek(this.state.date.getDay())}

components/date_picker/index.jsx

@@ -8,6 +8,7 @@ import style from './style';
 class DatePicker extends React.Component {
   static propTypes = {
     className: React.PropTypes.string,
+    onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
 
@@ -16,17 +17,22 @@ class DatePicker extends React.Component {
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
+    dialog: false
   };
 
-  handleDateSelected = (value) => {
-    this.refs.input.setValue(this.formatDate(value));
-    this.setState({value});
+  handleCalendarCancel = () => {
+    this.setState({dialog: false});
+  };
+
+  handleCalendarChange = (value) => {
+    this.setState({dialog: false, value: value});
+    if (this.props.onChange) this.props.onChange(value);
   };
 
   handleMouseDown = (event) => {
     events.pauseEvent(event);
-    this.refs.dialog.show();
+    this.setState({dialog: true});
   };
 
   formatDate (date) {
@@ -47,20 +53,15 @@ class DatePicker extends React.Component {
         />
         <CalendarDialog
           ref='dialog'
+          active={this.state.dialog}
           initialDate={this.state.value}
-          onDateSelected={this.handleDateSelected}
+          onCancel={this.handleCalendarCancel}
+          onChange={this.handleCalendarChange}
+          onSelect={this.handleCalendarChange}
         />
       </div>
     );
   }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({value});
-  }
 }
 
 export default DatePicker;

spec/components/pickers.jsx

@@ -2,23 +2,31 @@ import React from 'react';
 import DatePicker from '../../components/date_picker';
 import TimePicker from '../../components/time_picker';
 
-const PickersTest = () => {
-  const datetime = new Date(1995, 11, 17);
-  datetime.setHours(17);
-  datetime.setMinutes(28);
-
-  return (
-    <section>
-      <h5>Pickers</h5>
-      <p>Date pickers and time pickers with Material flavour.</p>
-
-      <DatePicker />
-      <DatePicker value={datetime} />
-
-      <TimePicker />
-      <TimePicker value={datetime} format='ampm' />
-    </section>
-  );
-};
+const datetime = new Date(1995, 11, 17);
+datetime.setHours(17);
+datetime.setMinutes(28);
+
+class PickersTest extends React.Component {
+
+  handleDatePickerChange = (value) => {
+    console.log('handleDatePickerChange', value);
+  };
+
+  render () {
+    return (
+      <section>
+        <h5>Pickers</h5>
+        <p>Date pickers and time pickers with Material flavour.</p>
+
+        <DatePicker onChange={this.handleDatePickerChange}/>
+        <DatePicker value={datetime} />
+
+        <TimePicker />
+        <TimePicker value={datetime} format='ampm' />
+      </section>
+    );
+  }
+
+}
 
 export default PickersTest;