Merge pull request 1stQuad#3 from daviidovich/master

Create portal to body/custom container for better widget positioning;

Author: illusdolphin

lib/DateTimeField.js

@@ -584,7 +584,8 @@ var DateTimeField = (function (_Component) {
                     calculatePosition: this.calculatePosition,
                     showPicker: this.state.showPicker,
                     startOfWeek: this.props.startOfWeek,
-                    availableDatesStringArray: this.state.availableDatesStringArray
+                    availableDatesStringArray: this.state.availableDatesStringArray,
+                    widgetContainerId: this.props.widgetContainerId
                 }),
                 _react2['default'].createElement(
                     'div',
@@ -658,7 +659,8 @@ var DateTimeField = (function (_Component) {
             tabIndex: _propTypes2['default'].string,
             validationClass: _propTypes2['default'].string,
             startOfWeek: _propTypes2['default'].string,
-            availableDates: _propTypes2['default'].arrayOf(_propTypes2['default'].object)
+            availableDates: _propTypes2['default'].arrayOf(_propTypes2['default'].object),
+            widgetContainerId: _propTypes2['default'].string
         },
         enumerable: true
     }]);

lib/DateTimePicker.js

@@ -18,6 +18,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -157,14 +161,18 @@ var DateTimePicker = (function (_Component) {
             if (this.props.disabled) return '';
 
             return _react2['default'].createElement(
-                'div',
-                { ref: this.props.widgetRef, className: widgetClass, style: this.props.widgetStyle },
+                DateTimePickerPortal,
+                { widgetContainerId: this.props.widgetContainerId },
                 _react2['default'].createElement(
-                    'ul',
-                    { className: 'list-unstyled' },
-                    this.renderDatePicker(),
-                    this.renderSwitchButton(),
-                    this.renderTimePicker()
+                    'div',
+                    { ref: this.props.widgetRef, className: widgetClass, style: this.props.widgetStyle },
+                    _react2['default'].createElement(
+                        'ul',
+                        { className: 'list-unstyled' },
+                        this.renderDatePicker(),
+                        this.renderSwitchButton(),
+                        this.renderTimePicker()
+                    )
                 )
             );
         }
@@ -209,7 +217,8 @@ var DateTimePicker = (function (_Component) {
             setToday: _propTypes2['default'].func,
             calculatePosition: _propTypes2['default'].func,
             startOfWeek: _propTypes2['default'].string,
-            availableDatesStringArray: _propTypes2['default'].arrayOf(_propTypes2['default'].string)
+            availableDatesStringArray: _propTypes2['default'].arrayOf(_propTypes2['default'].string),
+            widgetContainerId: _propTypes2['default'].string
         },
         enumerable: true
     }]);
@@ -218,4 +227,55 @@ var DateTimePicker = (function (_Component) {
 })(_react.Component);
 
 exports['default'] = DateTimePicker;
+
+var DateTimePickerPortal = (function (_Component2) {
+    _inherits(DateTimePickerPortal, _Component2);
+
+    _createClass(DateTimePickerPortal, null, [{
+        key: 'propTypes',
+        value: {
+            widgetContainerId: _propTypes2['default'].string
+        },
+        enumerable: true
+    }]);
+
+    function DateTimePickerPortal(props) {
+        _classCallCheck(this, DateTimePickerPortal);
+
+        _get(Object.getPrototypeOf(DateTimePickerPortal.prototype), 'constructor', this).call(this, props);
+        this.state = {
+            container: null
+        };
+    }
+
+    _createClass(DateTimePickerPortal, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.updatePortalContainer();
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps) {
+            if (prevProps.widgetContainerId !== this.props.widgetContainerId) {
+                this.updatePortalContainer();
+            }
+        }
+    }, {
+        key: 'updatePortalContainer',
+        value: function updatePortalContainer() {
+            var containerElem = document.getElementById(this.props.widgetContainerId);
+            this.setState({
+                container: containerElem || document.body
+            });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            return this.state.container ? _reactDom2['default'].createPortal(this.props.children, this.state.container) : null;
+        }
+    }]);
+
+    return DateTimePickerPortal;
+})(_react.Component);
+
 module.exports = exports['default'];

src/DateTimeField.js

@@ -141,7 +141,8 @@ export default class DateTimeField extends Component {
         tabIndex: PropTypes.string,
         validationClass: PropTypes.string,
         startOfWeek: PropTypes.string,
-        availableDates: PropTypes.arrayOf(PropTypes.object)
+        availableDates: PropTypes.arrayOf(PropTypes.object),
+        widgetContainerId: PropTypes.string
     };
 
     componentWillReceiveProps = nextProps => {
@@ -680,6 +681,7 @@ export default class DateTimeField extends Component {
                     showPicker={this.state.showPicker}
                     startOfWeek={this.props.startOfWeek}
                     availableDatesStringArray={this.state.availableDatesStringArray}
+                    widgetContainerId={this.props.widgetContainerId}
                 />
                 <div
                     className={classnames('date ', {

src/DateTimePicker.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import DateTimePickerDate from './DateTimePickerDate.js';
@@ -50,7 +51,8 @@ export default class DateTimePicker extends Component {
         setToday: PropTypes.func,
         calculatePosition: PropTypes.func,
         startOfWeek: PropTypes.string,
-        availableDatesStringArray: PropTypes.arrayOf(PropTypes.string)
+        availableDatesStringArray: PropTypes.arrayOf(PropTypes.string),
+        widgetContainerId: PropTypes.string,
     };
 
     renderDatePicker = () => {
@@ -164,15 +166,51 @@ export default class DateTimePicker extends Component {
         if (this.props.disabled) return ('');
 
         return (
-            <div ref={this.props.widgetRef} className={widgetClass} style={this.props.widgetStyle}>
-                <ul className="list-unstyled">
-                    {this.renderDatePicker()}
+            <DateTimePickerPortal widgetContainerId={this.props.widgetContainerId}>
+                <div ref={this.props.widgetRef} className={widgetClass} style={this.props.widgetStyle}>
+                    <ul className="list-unstyled">
+                        {this.renderDatePicker()}
 
-                    {this.renderSwitchButton()}
+                        {this.renderSwitchButton()}
 
-                    {this.renderTimePicker()}
-                </ul>
-            </div>
+                        {this.renderTimePicker()}
+                    </ul>
+                </div>
+            </DateTimePickerPortal>
         );
     }
 }
+
+class DateTimePickerPortal extends Component {
+    static propTypes = {
+        widgetContainerId: PropTypes.string
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            container: null
+        };
+    }
+
+    componentDidMount() {
+        this.updatePortalContainer();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.widgetContainerId !== this.props.widgetContainerId) {
+            this.updatePortalContainer();
+        }
+    }
+
+    updatePortalContainer() {
+        const containerElem = document.getElementById(this.props.widgetContainerId);
+        this.setState({
+            container: containerElem || document.body
+        });
+    }
+
+    render() {
+        return this.state.container ? ReactDOM.createPortal(this.props.children, this.state.container) : null;
+    }
+}