diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx index c190c4c1754433..e6d4cb8e833a23 100644 --- 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" /> + + + + +//Inline Picker + +//Inline Picker (AutoOk) + diff --git a/src/date-picker/date-picker-dialog.jsx b/src/date-picker/date-picker-dialog.jsx index 8d6cd1d026d191..9ad9ac3311c5e1 100644 --- 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 ( - - + ); }, diff --git a/src/date-picker/date-picker-inline.jsx b/src/date-picker/date-picker-inline.jsx new file mode 100644 index 00000000000000..122864f261462e --- /dev/null +++ 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 ; + } + + const styles = { + actions: { + marginRight: 8, + paddingBottom: 12, + textAlign: 'right', + }, + container: { + zIndex: 3, + width: '100%', + position: 'relative', + display: 'block', + }, + subContainer: { + position: 'absolute', + height: 'auto', + }, + }; + return ( +
+
+ + {children} +
+ {actions} +
+
+
+
+ ); + }, + +}); + +module.exports = DatePickerInline; diff --git a/src/date-picker/date-picker.jsx b/src/date-picker/date-picker.jsx index 211a0f25bd77d2..7c1153f2d9c20a 100644 --- 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}/>