Create TetheredDateTime component #1387

- Update Datepicker to use TetheredDateTime

package.json

@@ -85,6 +85,7 @@
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",
     "react-tagsinput": "~3.18.0",
+    "react-tether": "^0.6.0",
     "react-translate-component": "~0.14.0",
     "redux": "~3.7.2",
     "redux-thunk": "~2.2.0",

src/assets/css/datetime.css

@@ -23,8 +23,8 @@
 }
 
 .rdtPicker {
-    display: none;
-    position: absolute;
+    display: block;
+    position: static;
     width: 260px;
     padding: 0;
     margin-top: 3px;
@@ -230,3 +230,11 @@ td.rdtYear:hover {
 .rdtDayPart {
     margin-top: 43px;
 }
+
+.tether-element {
+    z-index: 9;
+}
+
+.tether-out-of-bounds-top .rdtPicker {
+    visibility: hidden;
+} 

src/components/widget/DatePicker.js

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import Datetime from "react-datetime";
 import { connect } from "react-redux";
-
+import TetheredDateTime from "./TetheredDateTime";
 import { addNotification } from "../../actions/AppActions";
 
 const propTypes = {
@@ -89,7 +89,7 @@ class DatePicker extends Component {
   render() {
     return (
       <div tabIndex="-1" onKeyDown={this.handleKeydown}>
-        <Datetime
+        <TetheredDateTime
           closeOnTab={true}
           renderDay={this.renderDay}
           renderInput={this.renderInput}

src/components/widget/TetheredDateTime.js

@@ -0,0 +1,69 @@
+import React from "react";
+import DateTime from "react-datetime";
+import CalendarContainer from "react-datetime/src/CalendarContainer";
+import TetherComponent from "react-tether";
+
+export default class TetheredDateTime extends DateTime {
+  render() {
+    const { open } = this.state;
+    let className =
+      "rdt" +
+      (this.props.className
+        ? Array.isArray(this.props.className)
+          ? " " + this.props.className.join(" ")
+          : " " + this.props.className
+        : "");
+    let children = [];
+
+    if (this.props.input) {
+      const props = {
+        type: "text",
+        className: "form-control",
+        onFocus: this.openCalendar,
+        onChange: this.onInputChange,
+        onKeyDown: this.onInputKey,
+        value: this.state.inputValue,
+        ...this.props.inputProps
+      };
+
+      if (this.props.renderInput) {
+        children = [
+          <div key="i">{this.props.renderInput(props, this.openCalendar)}</div>
+        ];
+      } else {
+        children = [<input key="i" {...props} />];
+      }
+    } else {
+      className += " rdtStatic";
+    }
+
+    return (
+      <div className={className}>
+        <TetherComponent
+          attachment="top left"
+          targetAttachment="bottom left"
+          constraints={[
+            {
+              to: "scrollParent"
+            },
+            {
+              to: "window",
+              pin: ["bottom"]
+            }
+          ]}
+        >
+          {children}
+          {open && (
+            <div className="rdtPicker">
+              <CalendarContainer
+                view={this.state.currentView}
+                viewProps={this.getComponentProps()}
+                onClickOutside={this.handleClickOutside}
+              />
+            </div>
+          )}
+        </TetherComponent>
+      </div>
+    );
+  }
+}