From c21f9ad81360e11d607080f568d94f1962429b54 Mon Sep 17 00:00:00 2001
From: wiadev <facon3@protonmail.com>
Date: Wed, 17 Jan 2018 07:19:56 -0600
Subject: [PATCH] Create TetheredDateTime component #1387

- Update Datepicker to use TetheredDateTime
---
 package.json                              |  1 +
 src/assets/css/datetime.css               | 12 +++-
 src/components/widget/DatePicker.js       |  4 +-
 src/components/widget/TetheredDateTime.js | 69 +++++++++++++++++++++++
 4 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 src/components/widget/TetheredDateTime.js

diff --git a/package.json b/package.json
index 5fdd99390..faf2bf8ff 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/css/datetime.css b/src/assets/css/datetime.css
index 1cf90ad94..6a88b458d 100644
--- a/src/assets/css/datetime.css
+++ b/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;
+} 
diff --git a/src/components/widget/DatePicker.js b/src/components/widget/DatePicker.js
index 2493671c3..1d8a0d876 100644
--- a/src/components/widget/DatePicker.js
+++ b/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}
diff --git a/src/components/widget/TetheredDateTime.js b/src/components/widget/TetheredDateTime.js
new file mode 100644
index 000000000..1620eae3f
--- /dev/null
+++ b/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>
+    );
+  }
+}