Inline Date Picker

tyfoo · Nov 10, 2015 · 97fd0f3 · 97fd0f3
1 parent 615c4eb
commit 97fd0f3
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 4 deletions.
diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/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}

diff --git a/docs/src/app/components/raw-code/date-picker-code.txt b/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} />
diff --git a/src/date-picker/date-picker-dialog.jsx b/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>
     );
   },
 

diff --git a/src/date-picker/date-picker-inline.jsx b/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;
diff --git a/src/date-picker/date-picker.jsx b/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}