Dev bqx

packages/competition/src/App.tsx

@@ -8,15 +8,15 @@ function App() {
     <>
       <SheetWrapper>
         <div style={{ width: "100vw", backgroundColor: "white" }}>
-          <div style={{ height: "19900px" }}></div>
+          {/* <div style={{ height: "19900px" }}></div> */}
           <Button onClick={() => setVisible(true)}>test</Button>
           <div style={{ height: "19900px" }}></div>
         </div>
       </SheetWrapper>
       <Sheet
         visible={visible}
         onCancel={() => setVisible(false)}
-        width={400}
+        width={500}
       ></Sheet>
     </>
   );

packages/ui/lib/Sheet/Sheet.module.scss

@@ -1,3 +1,14 @@
+@use '../variables' as *;
+$animation-duration: $duration-400;
+$padding-left-right-distance: 20px;
+
+@mixin animation($name) {
+  animation-name: $name;
+  animation-duration: $animation-duration;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
 .base {
   height: 100vh;
   width: 100vw;
@@ -6,14 +17,12 @@
   top: 0;
   z-index: 2;
   box-sizing: border-box;
-  background-color: rgb(0, 0, 0, 0.4);
+  background-color: $background-shadow-color;
   &.showAnimation {
-    animation: showShadow 0.4s;
-    animation-fill-mode: forwards;
+    @include animation(showShadow);
   }
   &.hideAnimation {
-    animation: hideShadow 0.4s;
-    animation-fill-mode: forwards;
+    @include animation(hideShadow);
   }
   .sheetContent {
     top: 0;
@@ -24,30 +33,28 @@
     box-sizing: border-box;
     opacity: 1;
     right: 0;
-    padding: 20px;
+    padding: $padding-left-right-distance;
     opacity: 1;
     &.showAnimation {
-      animation: slideSheet 0.4s;
-      animation-fill-mode: forwards;
+      @include animation(showSlideSheet);
     }
     &.hideAnimation {
-      animation: hideSlideSheet 0.4s;
-      animation-fill-mode: forwards;
+      @include animation(hideSlideSheet);
     }
     .sheetMainContent {
       padding: 10px 0;
       overflow-y: scroll;
       display: flex;
       position: relative;
       height: calc(100vh - 32px - 60px);
-      top: 31px;
+      top: 30px;
     }
     .sheetFooter {
       height: 50px;
       position: absolute;
       bottom: 20px;
       width: -webkit-fill-available;
-      padding-right: 20px;
+      padding-right: $padding-left-right-distance;
       text-align: end;
       background-color: var(--white-color);
     }
@@ -76,7 +83,7 @@
           align-items: center;
           justify-content: center;
           svg {
-            transition: all 0.4s ease-in-out;
+            transition: all $animation-duration ease-in-out;
           }
           &:hover {
             svg {
@@ -90,13 +97,13 @@
 }
 
 .wrapper {
-  transition: all 400ms ease-in-out;
+  transition: all $animation-duration ease-in-out;
   border-radius: 15px;
   & > div {
-    transition: all 0.4s ease-in-out;
+    transition: all $animation-duration ease-in-out;
   }
   &.show {
-    padding: 10px;
+    padding: 12px;
     & > div {
       border-radius: 15px;
     }
@@ -105,25 +112,25 @@
 
 @keyframes showShadow {
   from {
-    background-color: rgb(0, 0, 0, 0);
+    background-color: rgb(var(--black-color-rgb), 0);
   }
   to {
-    background-color: rgb(0, 0, 0, 0.4);
+    background-color: $background-shadow-color;
   }
 }
 
 @keyframes hideShadow {
   from {
-    background-color: rgb(0, 0, 0, 0.4);
+    background-color: $background-shadow-color;
   }
   to {
-    background-color: rgb(0, 0, 0, 0);
+    background-color: rgb(var(--black-color-rgb), 0);
   }
 }
 
-@keyframes slideSheet {
+@keyframes showSlideSheet {
   from {
-    right: -30vw;
+    right: -30%;
   }
   to {
     right: 0;
@@ -135,6 +142,6 @@
     right: 0;
   }
   to {
-    right: -30vw;
+    right: -30%;
   }
 }

packages/ui/lib/Sheet/SheetWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { Children, useEffect } from 'react';
+import React from 'react';
 import { useWrapperVisibleStore } from './useWrapperVisibleStore';
 import styles from './Sheet.module.scss';
 
@@ -19,7 +19,7 @@ export const SheetWrapper = React.forwardRef<HTMLDivElement, SheetWrapperProps>(
 
     return (
       <>
-        <div style={{ backgroundColor: backgroundColor }}>  
+        <div style={{ backgroundColor: backgroundColor }}>
           <div
             ref={ref}
             className={`${styles['wrapper']} ${styles[wrapperVisible ? 'show' : '']}`}

packages/ui/lib/Toast/Toast.module.scss

@@ -1,18 +1,35 @@
 @use '../variables' as *;
+$animation-duration: $duration-400;
+$border-radius: $radius-5;
+@mixin animation($name) {
+  animation-name: $name;
+  animation-duration: $animation-duration;
+  animation-timing-function: ease-in-out;
+}
+@mixin type($type-name) {
+  color: var(--#{$type-name}-color);
+  .closeButton {
+    .icon {
+      fill: var(--#{$type-name}-color);
+    }
+  }
+}
 .base {
-  border-radius: 5px;
+  border-radius: $border-radius;
   gap: 10px;
   box-sizing: border-box;
   opacity: 0;
+  transform: translateY(100px);
   overflow: hidden;
-  transition: all 0.3s ease-in;
+  transition: all $animation-duration ease-in-out;
   padding: 12px 10px 16px 20px;
   display: flex !important;
   @include shadow;
   background-color: var(--white-color);
   &.visible {
     opacity: 1;
     scale: 1;
+    transform: translateY(0);
   }
   .sider {
     position: absolute;
@@ -50,7 +67,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      transition: all 0.4s ease-in-out;
+      transition: all $animation-duration ease-in-out;
       &:hover {
         scale: 1.05;
       }
@@ -68,36 +85,16 @@
     margin-top: 10px;
   }
   &.info {
-    color: var(--primary-color);
-    .closeButton {
-      .icon {
-        fill: var(--primary-color);
-      }
-    }
+    @include type(primary);
   }
   &.success {
-    color: var(--success-color);
-    .closeButton {
-      .icon {
-        fill: var(--success-color);
-      }
-    }
+    @include type(success);
   }
   &.warning {
-    color: var(--warning-color);
-    .closeButton {
-      .icon {
-        fill: var(--warning-color);
-      }
-    }
+    @include type(warning);
   }
   &.error {
-    color: var(--danger-color);
-    .closeButton {
-      .icon {
-        fill: var(--danger-color);
-      }
-    }
+    @include type(danger);
   }
   &.small {
     width: 300px;
@@ -123,47 +120,26 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-}
-.toastShow {
-  position: fixed;
-  right: 10px;
-  bottom: 10px;
-  animation-name: slideIn;
-  animation-duration: 0.4s;
-  transition: all 0.4s ease-in-out;
-}
-
-.toastHide {
-  position: fixed;
-  right: 10px;
-  bottom: 10px;
-  animation-name: slideHide;
-  animation-duration: 0.8s;
+  .toastShow {
+    position: fixed;
+    right: 10px;
+    bottom: 10px;
+    @include animation(slideIn);
+    transition: all $animation-duration ease-in-out;
+  }
+  .toastHide {
+    bottom: -100px;
+    opacity: 0;
+  }
 }
 
 @keyframes slideIn {
   from {
-    opacity: 0;
+    opacity: 0.2;
     transform: translateY(100%);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
-
-@keyframes slideHide {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(100%);
-  }
-}
-
-.dataExpand {
-  transform: translateY(-200px) !important;
-}

packages/ui/lib/Toast/Toast.tsx

@@ -47,7 +47,6 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     ref,
   ) => {
     const [visible, setVisble] = useState(true);
-    const [innerVisible, setInnerVisible] = useState(true);
 
     const toastClass = classNames(
       styles['base'],
@@ -58,18 +57,12 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     );
 
     useEffect(() => {
-      if (!visible && close) {
-        // A delay is set here, in order to see the animation in its entirety
-        setTimeout(() => {
-          setInnerVisible(false);
-          close();
-        }, 300);
-      }
+      if (!visible && close) close();
     }, [visible, close]);
 
     return (
       <>
-        {innerVisible && (
+        {
           <div style={{ padding: '10px' }}>
             <div
               ref={ref}
@@ -102,7 +95,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
               </div>
             </div>
           </div>
-        )}
+        }
       </>
     );
   },

packages/ui/lib/Toast/showToast.tsx

@@ -41,13 +41,12 @@ export const showToast = (props?: ToastProps) => {
 const moreTimeClose = (div: HTMLDivElement) => {
   setTimeout(() => {
     const ToasthideClass: string = classNames(styles['toastHide']);
-    div.className = ToasthideClass;
-
+    div.classList.add(ToasthideClass);
     setTimeout(() => {
       toastContainer?.removeChild(div);
       toasts = toasts.filter((toast) => toast !== div);
-    }, 300);
-  }, 6000);
+    }, 400);
+  }, 5000);
 };
 
 const moreThreeClose = () => {
@@ -62,7 +61,9 @@ const moreThreeClose = () => {
 };
 
 const closeToast = (div: HTMLDivElement) => {
-  div.remove();
+  setTimeout(() => {
+    div.remove();
+  }, 300);
   toasts = toasts.filter((toast) => toast !== div);
   addListener(div);
   expand(toasts);

packages/ui/lib/_variables.scss

@@ -75,3 +75,5 @@ $font-size-14: 14px;
   opacity: 0.4;
 }
 
+//background color
+$background-shadow-color: rgb(var(--black-color-rgb), 0.6);