fix(problem-list): 完善保存按钮的动画

XYShaoKang · Jan 2, 2023 · c2d87e3 · c2d87e3
1 parent 4a9a49b
commit c2d87e3
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 20 deletions.
diff --git a/src/content/components/animation.tsx b/src/content/components/animation.tsx
@@ -0,0 +1,11 @@
+import { keyframes } from 'styled-components/macro'
+
+export const rotate360Deg = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`
diff --git a/src/content/pages/problem-list/Editor.tsx b/src/content/pages/problem-list/Editor.tsx
@@ -1,20 +1,73 @@
-import { ChangeEventHandler, FC, useEffect, useState } from 'react'
+import { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react'
 import { css } from 'styled-components/macro'
 
 import { Input } from '@/components/Input'
 import { Button } from '@/components/Button'
 import ErrorToolTip from '@/components/ErrorToolTip'
+import { rotate360Deg } from '@/components/animation'
 
 interface EditorProps {
   text?: string
   onSave?: (text: string) => void | Promise<void>
   onCancel?: (...arg: any) => void
 }
 
+const Loading = () => {
+  return (
+    <div
+      css={css`
+        border-radius: 50%;
+        background: linear-gradient(
+          to right,
+          #fff 10%,
+          rgba(128, 0, 255, 0) 42%
+        );
+        position: relative;
+        transform: translateZ(0);
+        height: 16px;
+        width: 16px;
+        animation: ${rotate360Deg} 0.2s infinite linear;
+        &::before {
+          width: 50%;
+          height: 50%;
+          background: #fff;
+          border-radius: 100% 0 0 0;
+          position: absolute;
+          top: 0;
+          left: 0;
+          content: '';
+        }
+        &::after {
+          background-color: ${props => props.theme.palette.button.disable};
+          width: 75%;
+          height: 75%;
+          border-radius: 50%;
+          content: '';
+          margin: auto;
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+        }
+      `}
+    />
+  )
+}
+
 const Editor: FC<EditorProps> = ({ text: initText = '', onSave, onCancel }) => {
   const [text, setText] = useState(initText)
   const [error, setError] = useState({ message: '', show: false })
+  const [loading, setLoading] = useState(false)
+  // 判断当前组件是否挂载，还是已被卸载
+  const isMount = useRef<boolean>()
 
+  useEffect(() => {
+    isMount.current = true
+    return () => {
+      isMount.current = false
+    }
+  }, [])
   useEffect(() => {
     if (error.show) {
       setTimeout(() => {
@@ -28,14 +81,16 @@ const Editor: FC<EditorProps> = ({ text: initText = '', onSave, onCancel }) => {
   }
 
   const handleSave = async () => {
+    setLoading(true)
     if (typeof onSave === 'function') {
       try {
         await onSave(text)
-        // setText('')
+        if (isMount.current) setText('')
       } catch (error: any) {
         setError({ message: error.message, show: true })
       }
     }
+    if (isMount.current) setLoading(false)
   }
   const handleCancel = () => {
     if (typeof onCancel === 'function') {
@@ -45,7 +100,7 @@ const Editor: FC<EditorProps> = ({ text: initText = '', onSave, onCancel }) => {
 
   return (
     <div
-      css={css`
+      css={`
         width: 100%;
       `}
     >
@@ -63,14 +118,14 @@ const Editor: FC<EditorProps> = ({ text: initText = '', onSave, onCancel }) => {
         />
       </ErrorToolTip>
       <div
-        css={css`
+        css={`
           display: flex;
           justify-content: space-around;
           margin-top: 6px;
         `}
       >
         <Button
-          css={css`
+          css={`
             && {
               height: 24px;
               background-color: #555;
@@ -83,8 +138,12 @@ const Editor: FC<EditorProps> = ({ text: initText = '', onSave, onCancel }) => {
         >
           取消
         </Button>
-        <Button style={{ height: 24 }} disabled={!text} onClick={handleSave}>
-          保存
+        <Button
+          style={{ height: 24 }}
+          disabled={!text || loading}
+          onClick={handleSave}
+        >
+          {loading ? <Loading /> : '保存'}
         </Button>
       </div>
     </div>

diff --git a/src/content/pages/problem-list/FavoriteItem.tsx b/src/content/pages/problem-list/FavoriteItem.tsx
@@ -6,13 +6,14 @@ import {
   useRef,
   useState,
 } from 'react'
-import { css, keyframes } from 'styled-components/macro'
+import { css } from 'styled-components/macro'
 
 import { useAppSelector, useAppDispatch, useHover } from '@/hooks'
 import { Button } from '@/components/Button'
 import Modal from '@/components/Modal'
 import ErrorToolTip from '@/components/ErrorToolTip'
 import { ToolTip } from '@/components/ToolTip'
+import { rotate360Deg } from '@/components/animation'
 
 import {
   selectFavoriteById,
@@ -28,16 +29,6 @@ const DEFAULT_COVER =
   'https://static.leetcode.cn/cn-frontendx-assets/production/_next/static/images/default-logo-5a15811cf52298855a46a3f400663063.png'
 const DEFAULT_FAVORITE_NAME = 'Favorite'
 
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`
-
 interface FavoriteItemProps {
   idHash: string
   current: boolean
@@ -237,9 +228,9 @@ const FavoriteItem: FC<FavoriteItemProps> = ({
                     text-align: center;
                     line-height: 18px;
                     transform: translateZ(0);
-                    animation: ${rotate} 10s infinite linear;
+                    animation: ${rotate360Deg} 10s infinite linear;
                     &:hover {
-                      animation: ${rotate} 1s infinite linear;
+                      animation: ${rotate360Deg} 1s infinite linear;
                     }
                   `}
                 >