fix(panel): calculate margin height

crimx · May 10, 2018 · 33d1a0a · 33d1a0a
1 parent 0d86b56
commit 33d1a0a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/content/components/DictItem/_style.scss b/src/content/components/DictItem/_style.scss
@@ -37,6 +37,14 @@
   color: #333;
 }
 
+.panel-DictItem_BodyMesure {
+  overflow: hidden;
+
+  > article {
+    margin: 10px 0;
+  }
+}
+
 .panel-DictItem_Loader {
   align-self: center;
   position: relative;

diff --git a/src/content/components/DictItem/index.tsx b/src/content/components/DictItem/index.tsx
@@ -32,7 +32,7 @@ export type DictItemState = {
 }
 
 export class DictItem extends React.PureComponent<DictItemProps & { t: TranslationFunction }, DictItemState> {
-  bodyRef = React.createRef<HTMLElement>()
+  bodyRef = React.createRef<HTMLDivElement>()
   prevItemHeight = 30
   initStyle = { height: 30, opacity: 0 }
 
@@ -197,18 +197,20 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
               key={id}
               style={{ fontSize, height }}
             >
-              <article ref={this.bodyRef} style={{ opacity }}>
-                {React.createElement(require('@/components/dictionaries/' + id + '/View.tsx').default, { result: searchResult })}
-                <button
-                  className={`panel-DictItem_FoldMask ${visibleHeight < offsetHeight ? 'isActive' : ''}`}
-                  onClick={this.showFull}
-                  disabled={!isUnfold}
-                >
-                  <svg className='panel-DictItem_FoldMaskArrow' width='15' height='15' viewBox='0 0 59.414 59.414' xmlns='http://www.w3.org/2000/svg'>
-                    <path d='M58 14.146L29.707 42.44 1.414 14.145 0 15.56 29.707 45.27 59.414 15.56' />
-                  </svg>
-                </button>
-              </article>
+              <div ref={this.bodyRef} className='panel-DictItem_BodyMesure'>
+                <article style={{ opacity }}>
+                  {searchResult && React.createElement(require('@/components/dictionaries/' + id + '/View.tsx').default, { result: searchResult })}
+                  <button
+                    className={`panel-DictItem_FoldMask ${visibleHeight < offsetHeight ? 'isActive' : ''}`}
+                    onClick={this.showFull}
+                    disabled={!isUnfold}
+                  >
+                    <svg className='panel-DictItem_FoldMaskArrow' width='15' height='15' viewBox='0 0 59.414 59.414' xmlns='http://www.w3.org/2000/svg'>
+                      <path d='M58 14.146L29.707 42.44 1.414 14.145 0 15.56 29.707 45.27 59.414 15.56' />
+                    </svg>
+                  </button>
+                </article>
+              </div>
             </div>
           )}
         </Spring>