Explorar o código

Fix dropdown list position

Occasionally the dropdown list would appear to the left of its
corresponding button by a few pixels.
To reproduce this issue open a dropdown that doesn't fit in the page
(i.e. days of the month in the schedule). The dropdown list would also
snap to the correct position at the next DOM update.
Sergiu Miclea %!s(int64=8) %!d(string=hai) anos
pai
achega
e87f57846d
Modificáronse 3 ficheiros con 3 adicións e 31 borrados
  1. 0 1
      package.json
  2. 3 4
      src/components/molecules/Dropdown/Dropdown.jsx
  3. 0 26
      yarn.lock

+ 0 - 1
package.json

@@ -61,7 +61,6 @@
     "babel-register": "^6.26.0",
     "babel-register": "^6.26.0",
     "copyfiles": "^1.2.0",
     "copyfiles": "^1.2.0",
     "cross-env": "^5.0.5",
     "cross-env": "^5.0.5",
-    "document-offset": "^1.0.4",
     "express": "^4.16.1",
     "express": "^4.16.1",
     "file-loader": "^1.1.5",
     "file-loader": "^1.1.5",
     "fs": "^0.0.1-security",
     "fs": "^0.0.1-security",

+ 3 - 4
src/components/molecules/Dropdown/Dropdown.jsx

@@ -16,7 +16,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import styled from 'styled-components'
 import ReactDOM from 'react-dom'
 import ReactDOM from 'react-dom'
-import offset from 'document-offset'
 
 
 import { DropdownButton } from 'components'
 import { DropdownButton } from 'components'
 
 
@@ -117,6 +116,7 @@ class Dropdown extends React.Component {
 
 
   componentDidMount() {
   componentDidMount() {
     window.addEventListener('mousedown', this.handlePageClick, false)
     window.addEventListener('mousedown', this.handlePageClick, false)
+    this.buttonRect = this.buttonRef.getBoundingClientRect()
   }
   }
 
 
   componentDidUpdate() {
   componentDidUpdate() {
@@ -144,8 +144,7 @@ class Dropdown extends React.Component {
 
 
     let buttonHeight = this.buttonRef.offsetHeight
     let buttonHeight = this.buttonRef.offsetHeight
     let tipHeight = 8
     let tipHeight = 8
-    let buttonOffset = offset(this.buttonRef)
-    let listTop = buttonOffset.top + buttonHeight + tipHeight
+    let listTop = this.buttonRect.top + buttonHeight + tipHeight
     let listHeight = this.listRef.offsetHeight
     let listHeight = this.listRef.offsetHeight
 
 
     if (listTop + listHeight > window.innerHeight) {
     if (listTop + listHeight > window.innerHeight) {
@@ -156,7 +155,7 @@ class Dropdown extends React.Component {
     }
     }
 
 
     this.listRef.style.top = `${listTop}px`
     this.listRef.style.top = `${listTop}px`
-    this.listRef.style.left = `${buttonOffset.left}px`
+    this.listRef.style.left = `${this.buttonRect.left}px`
   }
   }
 
 
   handlePageClick() {
   handlePageClick() {

+ 0 - 26
yarn.lock

@@ -2520,14 +2520,6 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     esutils "^2.0.2"
     isarray "^1.0.0"
     isarray "^1.0.0"
 
 
-document-offset@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/document-offset/-/document-offset-1.0.4.tgz#7345b819cdfef2bb45c63ce13056416063b70085"
-  dependencies:
-    dom-support "*"
-    get-document "1.0.0"
-    within-element "0.1.0"
-
 dom-converter@~0.1:
 dom-converter@~0.1:
   version "0.1.4"
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
@@ -2545,12 +2537,6 @@ dom-serializer@0, dom-serializer@~0.1.0:
     domelementtype "~1.1.1"
     domelementtype "~1.1.1"
     entities "~1.1.1"
     entities "~1.1.1"
 
 
-dom-support@*:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/dom-support/-/dom-support-0.0.2.tgz#0e129764ffa5e203d8ab5839e2e92dc2ae14ef7c"
-  dependencies:
-    domready "*"
-
 dom-walk@^0.1.0:
 dom-walk@^0.1.0:
   version "0.1.1"
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -2579,10 +2565,6 @@ domhandler@^2.3.0:
   dependencies:
   dependencies:
     domelementtype "1"
     domelementtype "1"
 
 
-domready@*:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
-
 domutils@1.1:
 domutils@1.1:
   version "1.1.6"
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
@@ -3423,10 +3405,6 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
 
-get-document@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/get-document/-/get-document-1.0.0.tgz#4821bce66f1c24cb0331602be6cb6b12c4f01c4b"
-
 get-stream@^3.0.0:
 get-stream@^3.0.0:
   version "3.0.0"
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -7499,10 +7477,6 @@ window-size@0.1.0:
   version "0.1.0"
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
 
 
-within-element@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/within-element/-/within-element-0.1.0.tgz#b610be314fb588bf21d7bd733906e437f30e2b95"
-
 wordwrap@0.0.2:
 wordwrap@0.0.2:
   version "0.0.2"
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"