fix(panel): recalc body height when expanding menus

crimx · May 28, 2018 · b6a5714 · b6a5714
1 parent c93c7b9
commit b6a5714
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/src/components/dictionaries/cambridge/View.tsx b/src/components/dictionaries/cambridge/View.tsx
@@ -2,11 +2,17 @@ import React from 'react'
 import Speaker from '@/components/Speaker'
 import { CambridgeResult } from './engine'
 
-export default class DictCambridge extends React.PureComponent<{ result: CambridgeResult }> {
+export interface DictCambridgeProps {
+  result: CambridgeResult
+  recalcBodyHeight: () => any
+}
+
+export default class DictCambridge extends React.PureComponent<DictCambridgeProps> {
   handleEntryClick = (e: React.MouseEvent<HTMLElement>) => {
     const target = e.nativeEvent.target as HTMLDivElement
     if (target.classList && target.classList.contains('js-accord')) {
       target.classList.toggle('open')
+      this.props.recalcBodyHeight()
     }
   }
 

diff --git a/src/components/dictionaries/oald/View.tsx b/src/components/dictionaries/oald/View.tsx
@@ -2,11 +2,17 @@ import React from 'react'
 import Speaker from '@/components/Speaker'
 import { OALDResult, OALDResultLex, OALDResultRelated } from './engine'
 
-export default class DictOALD extends React.PureComponent<{ result: OALDResult }> {
+export interface DictOALDProps {
+  result: OALDResult
+  recalcBodyHeight: () => any
+}
+
+export default class DictOALD extends React.PureComponent<DictOALDProps> {
   handleEntryClick = (e: React.MouseEvent<HTMLElement>) => {
     const target = e.nativeEvent.target as HTMLSpanElement
     if (target.classList && target.classList.contains('heading')) {
       (target.parentElement as HTMLDivElement).classList.toggle('is-active')
+      this.props.recalcBodyHeight()
     }
   }
 

diff --git a/src/content/components/DictItem/index.tsx b/src/content/components/DictItem/index.tsx
@@ -167,6 +167,20 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
     })
   }
 
+  handleRecalcBodyHeight = () => {
+    setTimeout(() => {
+      if (this.bodyRef.current) {
+        const offsetHeight = Math.max(this.bodyRef.current.offsetHeight, 10) || 10
+        this.setState({
+          offsetHeight,
+          visibleHeight: offsetHeight,
+          isUnfold: true,
+          hasError: false,
+        })
+      }
+    }, 0)
+  }
+
   componentDidUpdate (prevProps: DictItemProps) {
     if (this.props.searchStatus === SearchStatus.Finished &&
         this.props.searchStatus !== prevProps.searchStatus) {
@@ -246,7 +260,13 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
             >
               <article ref={this.bodyRef} className='panel-DictItem_BodyMesure' style={{ opacity }}>
                 {searchResult && !hasError &&
-                  React.createElement(require('@/components/dictionaries/' + id + '/View.tsx').default, { result: searchResult })
+                  React.createElement(
+                    require('@/components/dictionaries/' + id + '/View.tsx').default,
+                    {
+                      result: searchResult,
+                      recalcBodyHeight: this.handleRecalcBodyHeight,
+                    }
+                  )
                 }
               </article>
               {isUnfold && searchResult && visibleHeight < offsetHeight &&