change toaster height

haiwen · Sep 27, 2024 · 77d13a4 · 77d13a4
1 parent 98cf759
commit 77d13a4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/frontend/src/components/toast/toast.js b/frontend/src/components/toast/toast.js
@@ -56,9 +56,10 @@ export default class Toast extends React.PureComponent {
 
   state = {
     isShown: true,
-    height: 0
   };
 
+  containerRef = React.createRef();
+
   componentDidUpdate(prevProps) {
     if (prevProps.isShown !== this.props.isShown) {
       // eslint-disable-next-line react/no-did-update-set-state
@@ -116,12 +117,10 @@ export default class Toast extends React.PureComponent {
 
   onRef = ref => {
     if (ref === null) return;
-
-    const { height } = ref.getBoundingClientRect();
-
-    this.setState({
-      height
-    });
+    setTimeout(() => {
+      const { height } = ref.getBoundingClientRect();
+      this.containerRef.current.style.height = height + 'px';
+    }, 1);
   };
 
   render() {
@@ -140,10 +139,9 @@ export default class Toast extends React.PureComponent {
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
             style={{
-              height: this.state.height,
               zIndex: this.props.zIndex,
-              marginBottom: this.state.isShown ? 0 : -this.state.height
             }}
+            ref={this.containerRef}
           >
             <div ref={this.onRef} style={{ padding: 8 }}>
               <Alert

diff --git a/frontend/src/components/toast/toaster.css b/frontend/src/components/toast/toaster.css
@@ -13,7 +13,8 @@
   flex-direction: column;
   align-items: center;
   height: 0;
-  transition: all 240ms cubic-bezier(0.0, 0.0, 0.2, 1);
+  margin-bottom: 0;
+  transition: all 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
 }
 
 @keyframes openAnimation {