Merge pull request mui#2120 from oliviertassinari/inline

[DatePicker] Add inline property

docs/src/app/components/pages/components/date-picker.jsx

@@ -29,6 +29,12 @@ export default class DatePickerPage extends React.Component {
  {
  name: 'Props',
  infoArray: [
+ {
+ name: 'container',
+ type: 'one of: dialog, container',
+ header: 'default: dialog',
+ desc: 'The date pickers container type',
+ },
  {
  name: 'DateTimeFormat',
  type: 'func',
@@ -215,6 +221,15 @@ export default class DatePickerPage extends React.Component {
  hintText="Landscape Dialog"
  mode="landscape" />
 
+ <DatePicker
+ hintText="Inline"
+ container="inline" />
+
+ <DatePicker
+ hintText="Inline (AutoOk)"
+ container="inline"
+ autoOk={true} />
+
  <DatePicker
  hintText="Controlled Date Input"
  value={this.state.controlledDate}

docs/src/app/components/raw-code/date-picker-code.txt

@@ -23,3 +23,12 @@
  DateTimeFormat={Intl.DateTimeFormat}
  wordings={{ok: 'OK', cancel: 'Annuler'}}
  locale="fr" />
+//Inline Picker
+<DatePicker
+ hintText="Inline"
+ container="inline" />
+//Inline Picker (AutoOk)
+<DatePicker
+ hintText="Inline (AutoOk)"
+ container="inline"
+ autoOk={true} />

src/date-picker/date-picker-dialog.jsx

@@ -7,6 +7,7 @@ const CssEvent = require('../utils/css-event');
 const KeyCode = require('../utils/key-code');
 const Calendar = require('./calendar');
 const Dialog = require('../dialog');
+const DatePickerInline = require('./date-picker-inline');
 const FlatButton = require('../flat-button');
 const DefaultRawTheme = require('../styles/raw-themes/light-raw-theme');
 const ThemeManager = require('../styles/theme-manager');
@@ -39,6 +40,7 @@ const DatePickerDialog = React.createClass({
  },
 
  propTypes: {
+ container: React.PropTypes.oneOf(['dialog', 'inline']),
  DateTimeFormat: React.PropTypes.func,
  locale: React.PropTypes.string,
  wordings: React.PropTypes.object,
@@ -69,6 +71,7 @@ const DatePickerDialog = React.createClass({
  getDefaultProps: function() {
  return {
  DateTimeFormat: DateTime.DateTimeFormat,
+ container: 'dialog',
  locale: 'en-US',
  wordings: {
  ok: 'OK',
@@ -104,6 +107,7 @@ const DatePickerDialog = React.createClass({
  initialDate,
  onAccept,
  style,
+ container,
  ...other,
  } = this.props;
 
@@ -150,9 +154,11 @@ const DatePickerDialog = React.createClass({
  onTouchTap={this._handleOKTouchTap} />
  );
  }
-
+ // will change later when Popover is available.
+ const Container = (container === 'inline' ? DatePickerInline : Dialog);
  return (
- <Dialog {...other}
+ <Container
+ {...other}
  ref="dialog"
  style={styles.root}
  contentStyle={styles.dialogContent}
@@ -176,7 +182,7 @@ const DatePickerDialog = React.createClass({
  shouldDisableDate={this.props.shouldDisableDate}
  showYearSelector={this.props.showYearSelector}
  mode={this.props.mode} />
- </Dialog>
+ </Container>
  );
  },
 

src/date-picker/date-picker-inline.jsx

@@ -0,0 +1,62 @@
+const React = require('react');
+const Paper = require('../paper');
+
+const DatePickerInline = React.createClass({
+
+ propTypes: {
+ open: React.PropTypes.bool,
+ },
+
+ getDefaultProps() {
+ return {
+ open: false,
+ };
+ },
+
+ render() {
+ const {
+ actions,
+ children,
+ open,
+ style,
+ ...other,
+ } = this.props;
+
+ if (!open) {
+ return <span />;
+ }
+
+ const styles = {
+ actions: {
+ marginRight: 8,
+ paddingBottom: 12,
+ textAlign: 'right',
+ },
+ container: {
+ zIndex: 3,
+ width: '100%',
+ position: 'relative',
+ display: 'block',
+ },
+ subContainer: {
+ position: 'absolute',
+ height: 'auto',
+ },
+ };
+ return (
+ <div style={styles.container}>
+ <div style={styles.subContainer}>
+ <Paper {...other}>
+ {children}
+ <div style={styles.actions}>
+ {actions}
+ </div>
+ </Paper>
+ </div>
+ </div>
+ );
+ },
+
+});
+
+module.exports = DatePickerInline;

src/date-picker/date-picker.jsx

@@ -28,6 +28,7 @@ const DatePicker = React.createClass({
  },
 
  propTypes: {
+ container: React.PropTypes.oneOf(['dialog', 'inline']),
  DateTimeFormat: React.PropTypes.func,
  locale: React.PropTypes.string,
  wordings: React.PropTypes.object,
@@ -37,7 +38,7 @@ const DatePicker = React.createClass({
  hideToolbarYearChange: React.PropTypes.bool,
  maxDate: React.PropTypes.object,
  minDate: React.PropTypes.object,
- mode: React.PropTypes.oneOf(['portrait', 'landscape', 'inline']),
+ mode: React.PropTypes.oneOf(['portrait', 'landscape']),
  onDismiss: React.PropTypes.func,
  onChange: React.PropTypes.func,
  onFocus: React.PropTypes.func,
@@ -83,6 +84,7 @@ const DatePicker = React.createClass({
 
  render() {
  let {
+ container,
  DateTimeFormat,
  locale,
  wordings,
@@ -113,6 +115,7 @@ const DatePicker = React.createClass({
  onFocus={this._handleInputFocus}
  onTouchTap={this._handleInputTouchTap}/>
  <DatePickerDialog
+ container={container}
  ref="dialogWindow"
  DateTimeFormat={DateTimeFormat}
  locale={locale}