Merge pull request #1523 from maxceem/issue-1497

Issue #1497 - Dropdown menu doesn't take viewport bounds into consideration.

Author: Vic G

src/components/ProjectStatus/ProjectStatus.scss

@@ -178,6 +178,11 @@ $status-height: 20px;
     z-index: 2;
     transition: 250ms all;
 
+    &.dropdown-up {
+      top: auto;
+      bottom: 0;
+    }
+
     .status-header {
       @include roboto-medium;
       font-size: $tc-label-md;

src/components/ProjectStatus/editableProjectStatus.js

@@ -11,6 +11,68 @@ import {
   PROJECT_STATUS_CANCELLED
 } from '../../config/constants'
 
+const hocStatusDropdown = (CompositeComponent) => {
+  class StatusDropdown extends Component {
+    shouldDropdownUp() {
+      if (this.refs.dropdown) {
+        const bounds = this.refs.dropdown.getBoundingClientRect()
+        const windowHeight = window.innerHeight
+
+        return bounds.top > windowHeight / 2
+      }
+
+      return false
+    }
+
+    render() {
+      const { canEdit, isOpen, handleClick, onItemSelect, showText, withoutLabel, unifiedHeader, status } = this.props
+      const selected = PROJECT_STATUS.filter((opt) => opt.value === status)[0]
+
+      this.shouldDropdownUp()
+      return (
+        <div className="project-status-dropdown" ref="dropdown">
+          <div
+            className={cn('status-header', 'ps-' + selected.value, { active: isOpen, editable: canEdit })}
+            onClick={handleClick}
+          >
+            <CompositeComponent
+              status={selected}
+              showText={showText}
+              withoutLabel={withoutLabel}
+              unifiedHeader={unifiedHeader}
+            />
+            { canEdit && <i className="caret" ><SVGIconImage filePath="arrow-9px-carret-down-normal" /></i> }
+          </div>
+          { isOpen && canEdit &&
+            <div className={cn('status-dropdown', { 'dropdown-up': this.shouldDropdownUp() })}>
+              <div className="status-header">Project Status</div>
+              <ul>
+                {
+                  PROJECT_STATUS.map((item) =>
+                    <li key={item.value}>
+                      <a
+                        href="javascript:"
+                        className={cn('status-option', 'ps-' + item.value, { active: item.value === status })}
+                        onClick={(e) => {
+                          onItemSelect(item.value, e)
+                        }}
+                      >
+                        <ProjectStatus status={item} showText />
+                      </a>
+                    </li>
+                  )
+                }
+              </ul>
+            </div>
+          }
+        </div>
+      )
+    }
+  }
+
+  return StatusDropdown
+}
+
 const editableProjectStatus = (CompositeComponent) => class extends Component {
   constructor(props) {
     super(props)
@@ -56,50 +118,10 @@ const editableProjectStatus = (CompositeComponent) => class extends Component {
     this.setState({ statusChangeReason : _.get(reason, 'value') })
   }
 
-  renderDropdown(props) {
-    const { canEdit, isOpen, handleClick, onItemSelect, showText, withoutLabel, unifiedHeader, status } = props
-    const selected = PROJECT_STATUS.filter((opt) => opt.value === status)[0]
-    return (
-      <div className="project-status-dropdown">
-        <div className={cn('status-header', 'ps-' + selected.value, { active: isOpen, editable: canEdit })} onClick={handleClick}>
-          <CompositeComponent
-            status={selected}
-            showText={showText}
-            withoutLabel={withoutLabel}
-            unifiedHeader={unifiedHeader}
-          />
-          { canEdit && <i className="caret" ><SVGIconImage filePath="arrow-9px-carret-down-normal" /></i> }
-        </div>
-        { isOpen && canEdit &&
-          <div className="status-dropdown">
-            <div className="status-header">Project Status</div>
-            <ul>
-              {
-                PROJECT_STATUS.map((item) =>
-                  <li key={item.value}>
-                    <a
-                      href="javascript:"
-                      className={cn('status-option', 'ps-' + item.value, { active: item.value === status })}
-                      onClick={(e) => {
-                        onItemSelect(item.value, e)
-                      }}
-                    >
-                      <ProjectStatus status={item} showText />
-                    </a>
-                  </li>
-                )
-              }
-            </ul>
-          </div>
-        }
-      </div>
-    )
-  }
-
   render() {
     const { showStatusChangeDialog, newStatus, statusChangeReason } = this.state
     const { canEdit } = this.props
-    const ProjectStatusDropdown = canEdit ? enhanceDropdown(this.renderDropdown) : this.renderDropdown
+    const ProjectStatusDropdown = canEdit ? enhanceDropdown(hocStatusDropdown(CompositeComponent)) : hocStatusDropdown(CompositeComponent)
     return (
       <div className={cn('panel', 'EditableProjectStatus', {'modal-active': showStatusChangeDialog})}>
         <div className="modal-overlay"></div>