Просмотр исходного кода

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 8 лет назад
Родитель
Сommit
e87f57846d
3 измененных файлов с 3 добавлено и 31 удалено
  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",
     "copyfiles": "^1.2.0",
     "cross-env": "^5.0.5",
-    "document-offset": "^1.0.4",
     "express": "^4.16.1",
     "file-loader": "^1.1.5",
     "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 styled from 'styled-components'
 import ReactDOM from 'react-dom'
-import offset from 'document-offset'
 
 import { DropdownButton } from 'components'
 
@@ -117,6 +116,7 @@ class Dropdown extends React.Component {
 
   componentDidMount() {
     window.addEventListener('mousedown', this.handlePageClick, false)
+    this.buttonRect = this.buttonRef.getBoundingClientRect()
   }
 
   componentDidUpdate() {
@@ -144,8 +144,7 @@ class Dropdown extends React.Component {
 
     let buttonHeight = this.buttonRef.offsetHeight
     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
 
     if (listTop + listHeight > window.innerHeight) {
@@ -156,7 +155,7 @@ class Dropdown extends React.Component {
     }
 
     this.listRef.style.top = `${listTop}px`
-    this.listRef.style.left = `${buttonOffset.left}px`
+    this.listRef.style.left = `${this.buttonRect.left}px`
   }
 
   handlePageClick() {

+ 0 - 26
yarn.lock

@@ -2520,14 +2520,6 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     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:
   version "0.1.4"
   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"
     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:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -2579,10 +2565,6 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
-domready@*:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
-
 domutils@1.1:
   version "1.1.6"
   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"
   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:
   version "3.0.0"
   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"
   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:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"