material-ui 0.7.3.1

data/vendor/assets/javascripts/material-ui/components/date-picker/calendar.jsx

@@ -0,0 +1,194 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+var WindowListenable = require('../mixins/window-listenable');
+var DateTime = require('../utils/date-time');
+var KeyCode = require('../utils/key-code');
+var CalendarMonth = require('./calendar-month');
+var CalendarToolbar = require('./calendar-toolbar');
+var DateDisplay = require('./date-display');
+var SlideInTransitionGroup = require('../transition-groups/slide-in');
+
+var Calendar = React.createClass({
+
+  mixins: [Classable, WindowListenable],
+
+  propTypes: {
+    initialDate: React.PropTypes.object,
+    isActive: React.PropTypes.bool
+  },
+
+  windowListeners: {
+    'keydown': '_handleWindowKeyDown'
+  },
+
+  getDefaultProps: function() {
+    return {
+      initialDate: new Date()
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      displayDate: DateTime.getFirstDayOfMonth(this.props.initialDate),
+      selectedDate: this.props.initialDate,
+      transitionDirection: 'left'
+    };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    if (nextProps.initialDate !== this.props.initialDate) {
+      var d = nextProps.initialDate || new Date();
+      this.setState({
+        displayDate: DateTime.getFirstDayOfMonth(d),
+        selectedDate: d
+      });
+    }
+  },
+
+  render: function() {
+    var weekCount = DateTime.getWeekArray(this.state.displayDate).length;
+    var classes = this.getClasses('mui-date-picker-calendar', {
+      'mui-is-4week': weekCount === 4,
+      'mui-is-5week': weekCount === 5,
+      'mui-is-6week': weekCount === 6
+    });
+
+    return (
+      <div className={classes}>
+
+        <DateDisplay
+          className="mui-date-picker-calendar-date-display"
+          selectedDate={this.state.selectedDate} />
+
+        <div
+          className="mui-date-picker-calendar-container">
+          <CalendarToolbar
+            displayDate={this.state.displayDate}
+            onLeftTouchTap={this._handleLeftTouchTap}
+            onRightTouchTap={this._handleRightTouchTap} />
+
+          <ul className="mui-date-picker-calendar-week-title">
+            <li className="mui-date-picker-calendar-week-title-day">S</li>
+            <li className="mui-date-picker-calendar-week-title-day">M</li>
+            <li className="mui-date-picker-calendar-week-title-day">T</li>
+            <li className="mui-date-picker-calendar-week-title-day">W</li>
+            <li className="mui-date-picker-calendar-week-title-day">T</li>
+            <li className="mui-date-picker-calendar-week-title-day">F</li>
+            <li className="mui-date-picker-calendar-week-title-day">S</li>
+          </ul>
+
+          <SlideInTransitionGroup
+            direction={this.state.transitionDirection}>
+            <CalendarMonth
+              key={this.state.displayDate.toDateString()}
+              displayDate={this.state.displayDate}
+              onDayTouchTap={this._handleDayTouchTap}
+              selectedDate={this.state.selectedDate} />
+          </SlideInTransitionGroup>
+        </div>
+      </div>
+    );
+  },
+
+  getSelectedDate: function() {
+    return this.state.selectedDate;
+  },
+
+  _addDisplayDate: function(m) {
+    var newDisplayDate = DateTime.clone(this.state.displayDate);
+    newDisplayDate.setMonth(newDisplayDate.getMonth() + m);
+    this._setDisplayDate(newDisplayDate);
+  },
+
+  _addSelectedDays: function(days) {
+    this._setSelectedDate(DateTime.addDays(this.state.selectedDate, days));
+  },
+
+  _addSelectedMonths: function(months) {
+    this._setSelectedDate(DateTime.addMonths(this.state.selectedDate, months));
+  },
+
+  _setDisplayDate: function(d, newSelectedDate) {
+    var newDisplayDate = DateTime.getFirstDayOfMonth(d);
+    var direction = newDisplayDate > this.state.displayDate ? 'left' : 'right';
+
+    if (newDisplayDate !== this.state.displayDate) {
+      this.setState({
+        displayDate: newDisplayDate,
+        transitionDirection: direction,
+        selectedDate: newSelectedDate || this.state.selectedDate
+      });
+    }
+  },
+
+  _setSelectedDate: function(d) {
+    var newDisplayDate = DateTime.getFirstDayOfMonth(d);
+
+    if (newDisplayDate !== this.state.displayDate) {
+      this._setDisplayDate(newDisplayDate, d);
+    } else {
+      this.setState({
+        selectedDate: d
+      });
+    }
+  },
+
+  _handleDayTouchTap: function(e, date) {
+    this._setSelectedDate(date);
+  },
+
+  _handleLeftTouchTap: function() {
+    this._addDisplayDate(-1);
+  },
+
+  _handleRightTouchTap: function() {
+    this._addDisplayDate(1);
+  },
+
+  _handleWindowKeyDown: function(e) {
+    var newSelectedDate;
+
+    if (this.props.isActive) {
+
+      switch (e.keyCode) {
+
+        case KeyCode.UP:
+          if (e.shiftKey) {
+            this._addSelectedMonths(-1);
+          } else {
+            this._addSelectedDays(-7);
+          }
+          break;
+
+        case KeyCode.DOWN:
+          if (e.shiftKey) {
+            this._addSelectedMonths(1);
+          } else {
+            this._addSelectedDays(7);
+          }
+          break;
+
+        case KeyCode.RIGHT:
+          if (e.shiftKey) {
+            this._addSelectedMonths(1);
+          } else {
+            this._addSelectedDays(1);
+          }
+          break;
+
+        case KeyCode.LEFT:
+          if (e.shiftKey) {
+            this._addSelectedMonths(-1);
+          } else {
+            this._addSelectedDays(-1);
+          }
+          break;
+
+      }
+
+    } 
+  }
+
+});
+
+module.exports = Calendar;

data/vendor/assets/javascripts/material-ui/components/date-picker/date-display.jsx

@@ -0,0 +1,79 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+var DateTime = require('../utils/date-time');
+var SlideInTransitionGroup = require('../transition-groups/slide-in');
+
+var DateDisplay = React.createClass({
+
+  mixins: [Classable],
+
+  propTypes: {
+    selectedDate: React.PropTypes.object.isRequired
+  },
+
+  getInitialState: function() {
+    return {
+      transitionDirection: 'up'
+    };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    var direction;
+
+    if (nextProps.selectedDate !== this.props.selectedDate) {
+      direction = nextProps.selectedDate > this.props.selectedDate ? 'up' : 'down';
+      this.setState({
+        transitionDirection: direction
+      });
+    }
+  },
+
+  render: function() {
+    var {
+      selectedDate,
+      ...other
+    } = this.props;
+    var classes = this.getClasses('mui-date-picker-date-display');
+    var dayOfWeek = DateTime.getDayOfWeek(this.props.selectedDate);
+    var month = DateTime.getShortMonth(this.props.selectedDate);
+    var day = this.props.selectedDate.getDate();
+    var year = this.props.selectedDate.getFullYear();
+
+    return (
+      <div {...other} className={classes}>
+
+        <SlideInTransitionGroup
+          className="mui-date-picker-date-display-dow"
+          direction={this.state.transitionDirection}>
+          <div key={dayOfWeek}>{dayOfWeek}</div>
+        </SlideInTransitionGroup>
+
+        <div className="mui-date-picker-date-display-date">
+
+          <SlideInTransitionGroup
+            className="mui-date-picker-date-display-month"
+            direction={this.state.transitionDirection}>
+            <div key={month}>{month}</div>
+          </SlideInTransitionGroup>
+
+          <SlideInTransitionGroup
+            className="mui-date-picker-date-display-day"
+            direction={this.state.transitionDirection}>
+            <div key={day}>{day}</div>
+          </SlideInTransitionGroup>
+
+          <SlideInTransitionGroup
+            className="mui-date-picker-date-display-year"
+            direction={this.state.transitionDirection}>
+            <div key={year}>{year}</div>
+          </SlideInTransitionGroup>
+
+        </div>
+
+      </div>
+    );
+  }
+
+});
+
+module.exports = DateDisplay;

data/vendor/assets/javascripts/material-ui/components/date-picker/date-picker-dialog.jsx

@@ -0,0 +1,118 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+var WindowListenable = require('../mixins/window-listenable');
+var KeyCode = require('../utils/key-code');
+var Calendar = require('./calendar');
+var DialogWindow = require('../dialog-window');
+var FlatButton = require('../flat-button');
+
+var DatePickerDialog = React.createClass({
+
+  mixins: [Classable, WindowListenable],
+
+  propTypes: {
+    initialDate: React.PropTypes.object,
+    onAccept: React.PropTypes.func,
+    onShow: React.PropTypes.func,
+    onDismiss: React.PropTypes.func,
+  },
+
+  windowListeners: {
+    'keyup': '_handleWindowKeyUp'
+  },
+
+  getInitialState: function() {
+    return {
+      isCalendarActive: false
+    };
+  },
+
+  render: function() {
+    var {
+      initialDate,
+      onAccept,
+      ...other
+    } = this.props;
+    var classes = this.getClasses('mui-date-picker-dialog');
+    var actions = [
+      <FlatButton
+        key={0}
+        label="Cancel"
+        secondary={true}
+        onTouchTap={this._handleCancelTouchTap} />,
+      <FlatButton
+        key={1}
+        label="OK"
+        secondary={true}
+        onTouchTap={this._handleOKTouchTap} />
+    ];
+
+    return (
+      <DialogWindow {...other}
+        ref="dialogWindow"
+        className={classes}
+        actions={actions}
+        contentClassName="mui-date-picker-dialog-window"
+        onDismiss={this._handleDialogDismiss}
+        onShow={this._handleDialogShow}
+        repositionOnUpdate={false}>
+        <Calendar
+          ref="calendar"
+          initialDate={this.props.initialDate}
+          isActive={this.state.isCalendarActive} />
+      </DialogWindow>
+    );
+  },
+
+  show: function() {
+    this.refs.dialogWindow.show();
+  },
+
+  dismiss: function() {
+    this.refs.dialogWindow.dismiss();
+  },
+
+  _handleCancelTouchTap: function() {
+    this.dismiss();
+  },
+
+  _handleOKTouchTap: function() {
+    this.dismiss();
+    if (this.props.onAccept) {
+      this.props.onAccept(this.refs.calendar.getSelectedDate());
+    }
+  },
+
+  _handleDialogShow: function() {
+    this.setState({
+      isCalendarActive: true
+    });
+
+    if(this.props.onShow) {
+      this.props.onShow();
+    }
+  },
+
+  _handleDialogDismiss: function() {
+    this.setState({
+      isCalendarActive: false
+    });
+
+    if(this.props.onDismiss) {
+      this.props.onDismiss();
+    }
+  },
+
+  _handleWindowKeyUp: function(e) {
+    if (this.refs.dialogWindow.isOpen()) {
+      switch (e.keyCode) {
+        case KeyCode.ENTER:
+          this._handleOKTouchTap();
+          break;
+      }
+    } 
+  }
+
+});
+
+module.exports = DatePickerDialog;

data/vendor/assets/javascripts/material-ui/components/date-picker/date-picker.jsx

@@ -0,0 +1,116 @@
+var React = require('react');
+var Classable = require('../mixins/classable');
+var WindowListenable = require('../mixins/window-listenable');
+var DateTime = require('../utils/date-time');
+var KeyCode = require('../utils/key-code');
+var DatePickerDialog = require('./date-picker-dialog');
+var TextField = require('../text-field');
+
+var DatePicker = React.createClass({
+
+  mixins: [Classable, WindowListenable],
+
+  propTypes: {
+    defaultDate: React.PropTypes.object,
+    formatDate: React.PropTypes.func,
+    mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']),
+    onFocus: React.PropTypes.func,
+    onTouchTap: React.PropTypes.func,
+    onChange: React.PropTypes.func,
+    onShow: React.PropTypes.func,
+    onDismiss: React.PropTypes.func,
+  },
+
+  windowListeners: {
+    'keyup': '_handleWindowKeyUp'
+  },
+
+  getDefaultProps: function() {
+    return {
+      formatDate: DateTime.format
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      date: this.props.defaultDate,
+      dialogDate: new Date()
+    };
+  },
+
+  render: function() {
+    var {
+      formatDate,
+      mode,
+      onFocus,
+      onTouchTap,
+      onShow,
+      onDismiss,
+      ...other
+    } = this.props;
+    var classes = this.getClasses('mui-date-picker', {
+      'mui-is-landscape': this.props.mode === 'landscape',
+      'mui-is-inline': this.props.mode === 'inline'
+    });
+    var defaultInputValue;
+
+    if (this.props.defaultDate) {
+      defaultInputValue = this.props.formatDate(this.props.defaultDate);
+    }
+
+    return (
+      <div className={classes}>
+        <TextField
+          {...other}
+          ref="input"
+          defaultValue={defaultInputValue}
+          onFocus={this._handleInputFocus}
+          onTouchTap={this._handleInputTouchTap} />
+        <DatePickerDialog
+          ref="dialogWindow"
+          initialDate={this.state.dialogDate}
+          onAccept={this._handleDialogAccept}
+          onShow={onShow}
+          onDismiss={onDismiss} />
+      </div>
+
+    );
+  },
+
+  getDate: function() {
+    return this.state.date;
+  },
+
+  setDate: function(d) {
+    this.setState({
+      date: d
+    });
+    this.refs.input.setValue(this.props.formatDate(d));
+  },
+
+  _handleDialogAccept: function(d) {
+    this.setDate(d);
+    if (this.props.onChange) this.props.onChange(null, d);
+  },
+
+  _handleInputFocus: function(e) {
+    e.target.blur();
+    if (this.props.onFocus) this.props.onFocus(e);
+  },
+
+  _handleInputTouchTap: function(e) {
+    this.setState({
+      dialogDate: this.getDate()
+    });
+
+    this.refs.dialogWindow.show();
+    if (this.props.onTouchTap) this.props.onTouchTap(e);
+  },
+
+  _handleWindowKeyUp: function(e) {
+    //TO DO: open the dialog if input has focus
+  }
+
+});
+
+module.exports = DatePicker;