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

Scroll to bottom when showing paste input

Sergiu Miclea 8 лет назад
Родитель
Сommit
e940e690bf

+ 5 - 5
src/components/molecules/Modal/Modal.jsx

@@ -69,13 +69,13 @@ class NewModal extends React.Component {
     window.removeEventListener('resize', this.positionModal, true)
   }
 
-  handleChildUpdate(scrollableRef) {
+  handleChildUpdate(scrollableRef, scrollOffset) {
     if (scrollableRef) {
       this.scrollableRef = scrollableRef
     }
 
     setTimeout(() => {
-      this.positionModal()
+      this.positionModal(scrollOffset)
     }, 100)
   }
 
@@ -95,7 +95,7 @@ class NewModal extends React.Component {
     window.scroll(0, this.windowScrollY)
   }
 
-  positionModal() {
+  positionModal(scrollOffset) {
     let pageNode = this.modalDiv && this.modalDiv.node.firstChild
     let contentNode = pageNode && pageNode.firstChild
     if (!contentNode) {
@@ -117,7 +117,7 @@ class NewModal extends React.Component {
     contentNode.style.top = `${top}px`
     contentNode.style.height = height
     contentNode.style.opacity = 1
-    scrollableNode.scrollTo(0, scrollTop)
+    scrollableNode.scrollTo(0, scrollTop + scrollOffset)
   }
 
   renderTitle() {
@@ -163,7 +163,7 @@ class NewModal extends React.Component {
 
     let children = React.Children.map(this.props.children,
       child => React.cloneElement(child, {
-        onResizeUpdate: scrollableRef => { this.handleChildUpdate(scrollableRef) },
+        onResizeUpdate: (scrollableRef, scrollOffset) => { this.handleChildUpdate(scrollableRef, scrollOffset) },
       })
     )
 

+ 1 - 1
src/components/organisms/Endpoint/Endpoint.jsx

@@ -353,7 +353,7 @@ class Endpoint extends React.Component {
           handleCancelClick: () => { this.handleCancelClick() },
           scrollableRef: ref => { this.scrollableRef = ref },
           onRef: ref => { this.contentPluginRef = ref },
-          onResizeUpdate: () => { this.props.onResizeUpdate(this.scrollableRef) },
+          onResizeUpdate: (scrollableRef, scrollOffset) => { this.props.onResizeUpdate(this.scrollableRef, scrollOffset) },
         })}
         {this.renderButtons()}
         <Tooltip />

+ 5 - 1
src/plugins/endpoint/azure/ContentPlugin.jsx

@@ -93,7 +93,11 @@ class ContentPlugin extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     if (this.cloudProfileChanged || prevState.showPasteInput !== this.state.showPasteInput) {
-      this.props.onResizeUpdate(this.fieldsRef)
+      let scrollOffset = 0
+      if (prevState.showPasteInput !== this.state.showPasteInput && this.state.showPasteInput) {
+        scrollOffset = 100
+      }
+      this.props.onResizeUpdate(this.fieldsRef, scrollOffset)
       this.cloudProfileChanged = false
     }
   }