fix(frontend): 修复因 styled-components v6 breaking changes 导致的 prop 未被正…

…确过滤的问题
BillGoldenWater · May 13, 2023 · 43f1376 · 43f1376
1 parent 8d48d74
commit 43f1376
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 77 deletions.
diff --git a/frontend/src/share/component/Panel.tsx b/frontend/src/share/component/Panel.tsx
@@ -9,10 +9,10 @@ import { color, padding, radius, shadow } from "./ThemeCtx";
 import { motion } from "framer-motion";
 
 export interface PanelProps {
-  width?: Property.Width;
-  height?: Property.Height;
-  hover?: boolean;
-  noLayout?: boolean;
+  $width?: Property.Width;
+  $height?: Property.Height;
+  $hover?: boolean;
+  $noLayout?: boolean;
 }
 
 const panelFlex = css`
@@ -25,14 +25,14 @@ const panelFlex = css`
 `;
 
 export const Panel = styled(motion.div)<PanelProps>`
-  ${(p) => (p.noLayout ? "" : panelFlex)}
+  ${(p) => (p.$noLayout ? "" : panelFlex)}
 
   ${radius.normal}
 
-  ${(p) => (p.hover ? shadow.content : shadow.contentHover)}
+  ${(p) => (p.$hover ? shadow.content : shadow.contentHover)}
 
-  width: ${(p) => p.width || "100%"};
-  height: ${(p) => p.height || "fit-content"};
+  width: ${(p) => p.$width || "100%"};
+  height: ${(p) => p.$height || "fit-content"};
 
   background-color: ${color.bgContent};
 `;
diff --git a/frontend/src/share/component/Spacer.tsx b/frontend/src/share/component/Spacer.tsx
@@ -7,23 +7,23 @@ import styled, { css } from "styled-components";
 import { Property } from "csstype";
 
 interface SpacerSizeProps {
-  size: Property.Width;
+  $size: Property.Width;
 }
 
 export interface SpacerProps extends SpacerSizeProps {
-  vertical?: boolean;
+  $vertical?: boolean;
 }
 
 const vertical = css<SpacerSizeProps>`
   display: block;
-  height: ${(p) => p.size};
+  height: ${(p) => p.$size};
 `;
 
 const horizontal = css<SpacerSizeProps>`
   display: inline-block;
-  width: ${(p) => p.size};
+  width: ${(p) => p.$size};
 `;
 
 export const Spacer = styled.div<SpacerProps>`
-  ${(p) => (p.vertical ? vertical : horizontal)};
+  ${(p) => (p.$vertical ? vertical : horizontal)};
 `;
diff --git a/frontend/src/share/component/danmuItem/UserMessage.tsx b/frontend/src/share/component/danmuItem/UserMessage.tsx
@@ -54,11 +54,11 @@ export function UserMessage(props: PropsWithChildren<UserMessageProps>) {
 
   return (
     <UserMessageBase
-      mergePrev={mergePrev}
-      mergeNext={mergeNext}
-      highlightColor={highlightColor}
+      $mergePrev={mergePrev}
+      $mergeNext={mergeNext}
+      $highlightColor={highlightColor}
     >
-      {!compact && <MessageSider isAvatar={!mergePrev}>{sider}</MessageSider>}
+      {!compact && <MessageSider $isAvatar={!mergePrev}>{sider}</MessageSider>}
       <MessageMain>
         {msgUserInfo}
         <MessageContent>{children}</MessageContent>
@@ -67,12 +67,12 @@ export function UserMessage(props: PropsWithChildren<UserMessageProps>) {
   );
 }
 
-const MessageSider = styled.div<{ isAvatar: boolean }>`
+const MessageSider = styled.div<{ $isAvatar: boolean }>`
   display: flex;
 
   ${(p) =>
-    p.isAvatar ? "align-items: flex-start;" : "align-items: flex-end;"};
-  justify-content: ${(p) => (p.isAvatar ? "start" : "center")};
+    p.$isAvatar ? "align-items: flex-start;" : "align-items: flex-end;"};
+  justify-content: ${(p) => (p.$isAvatar ? "start" : "center")};
 
   min-width: 2.5rem;
 `;
@@ -103,9 +103,9 @@ const MessageContent = styled.div`
 `;
 
 interface UserMessageBaseProps {
-  mergePrev: boolean;
-  mergeNext: boolean;
-  highlightColor: string;
+  $mergePrev: boolean;
+  $mergeNext: boolean;
+  $highlightColor: string;
 }
 
 const UserMessageBase = styled.div<UserMessageBaseProps>`
@@ -117,9 +117,9 @@ const UserMessageBase = styled.div<UserMessageBaseProps>`
   ${border.normal};
   ${padding.small};
 
-  border-color: ${(p) => p.highlightColor};
+  border-color: ${(p) => p.$highlightColor};
   ${(p) => {
-    if (p.mergePrev) {
+    if (p.$mergePrev) {
       return css`
         border-top-width: 0;
         border-top-left-radius: 0;
@@ -130,7 +130,7 @@ const UserMessageBase = styled.div<UserMessageBaseProps>`
     }
   }};
   ${(p) => {
-    if (p.mergeNext) {
+    if (p.$mergeNext) {
       return css`
         border-bottom-width: 0;
         border-bottom-left-radius: 0;

diff --git a/frontend/src/share/component/input/InputBase.tsx b/frontend/src/share/component/input/InputBase.tsx
@@ -41,7 +41,7 @@ export function InputBase({
             {...layoutProps}
             ref={setExtraRef}
             style={styles.popper}
-            expand={focus}
+            $expand={focus}
             initial={{ height: "fit-content" }}
             exit={{ height: 0 }}
             transition={{ type: "spring", damping: 50, stiffness: 600 }}
@@ -65,10 +65,10 @@ const MainContainer = styled(motion.div)`
   display: flex;
 `;
 
-const ExtraContainer = styled(motion.div)<{ expand: boolean }>`
+const ExtraContainer = styled(motion.div)<{ $expand: boolean }>`
   position: absolute;
 
-  ${(p) => (p.expand ? "overflow-y: auto;" : "overflow-y: hidden;")};
+  ${(p) => (p.$expand ? "overflow-y: auto;" : "overflow-y: hidden;")};
 
   max-height: 50vh;
 

diff --git a/frontend/src/share/component/userInfo/UserAvatar.tsx b/frontend/src/share/component/userInfo/UserAvatar.tsx
@@ -20,15 +20,15 @@ export function UserAvatar({
   const frame = faceFrame ? <UserAvatarFrame src={faceFrame} /> : null;
 
   return (
-    <UserAvatarBase size={size ? size : "1.25rem"}>
+    <UserAvatarBase $size={size ? size : "1.25rem"}>
       <UserAvatarContent src={face || defaultUserInfo.face || ""} />
       {frame}
     </UserAvatarBase>
   );
 }
 
 interface UserAvatarBaseProps {
-  size: string;
+  $size: string;
 }
 
 const UserAvatarBase = styled.div<UserAvatarBaseProps>`
@@ -37,12 +37,12 @@ const UserAvatarBase = styled.div<UserAvatarBaseProps>`
 
   vertical-align: bottom;
 
-  width: ${(p) => p.size};
-  height: ${(p) => p.size};
-  min-width: ${(p) => p.size};
-  min-height: ${(p) => p.size};
-  max-width: ${(p) => p.size};
-  max-height: ${(p) => p.size};
+  width: ${(p) => p.$size};
+  height: ${(p) => p.$size};
+  min-width: ${(p) => p.$size};
+  min-height: ${(p) => p.$size};
+  max-width: ${(p) => p.$size};
+  max-height: ${(p) => p.$size};
 `;
 
 const UserAvatarContent = styled.img`

diff --git a/frontend/src/share/component/userInfo/UserInfoIcon.tsx b/frontend/src/share/component/userInfo/UserInfoIcon.tsx
@@ -13,18 +13,18 @@ interface UserInfoIconProps {
 }
 
 export function UserInfoIcon({ color, text }: UserInfoIconProps) {
-  return <UserInfoIconBase bgColor={color}>{text}</UserInfoIconBase>;
+  return <UserInfoIconBase $bgColor={color}>{text}</UserInfoIconBase>;
 }
 
-const UserInfoIconBase = styled.div<{ bgColor: Property.Color }>`
+const UserInfoIconBase = styled.div<{ $bgColor: Property.Color }>`
   display: inline-flex;
   align-items: center;
 
   padding: calc(${borderValue.normal} + ${borderValue.small});
 
   ${radius.small};
 
-  background-color: ${(p) => p.bgColor};
+  background-color: ${(p) => p.$bgColor};
 
   ${font.userName}
 `;
diff --git a/frontend/src/share/component/userInfo/UserMedal.tsx b/frontend/src/share/component/userInfo/UserMedal.tsx
@@ -44,27 +44,27 @@ export function UserMedal(props: UserMedalProps) {
 
   return (
     <UserMedalBase
-      isLighted={isLighted}
-      borderColor={borderColor}
-      bgStartColor={bgStartColor}
-      bgEndColor={bgEndColor}
+      $isLighted={isLighted}
+      $borderColor={borderColor}
+      $bgStartColor={bgStartColor}
+      $bgEndColor={bgEndColor}
     >
       <div>{medalName}</div>
-      <UserMedalLevel color={txtColor}>{level}</UserMedalLevel>
+      <UserMedalLevel $color={txtColor}>{level}</UserMedalLevel>
       {guardIcon}
     </UserMedalBase>
   );
 }
 
 interface UserMedalBaseProps {
-  borderColor: Property.Color;
-  bgStartColor: Property.Color;
-  bgEndColor: Property.Color;
-  isLighted?: boolean | null;
+  $borderColor: Property.Color;
+  $bgStartColor: Property.Color;
+  $bgEndColor: Property.Color;
+  $isLighted?: boolean | null;
 }
 
 const UserMedalBase = styled.div<UserMedalBaseProps>`
-  ${(p) => (p.isLighted ? "" : "filter: grayscale(1);")};
+  ${(p) => (p.$isLighted ? "" : "filter: grayscale(1);")};
 
   display: inline-flex;
   align-items: center;
@@ -76,8 +76,8 @@ const UserMedalBase = styled.div<UserMedalBaseProps>`
 
   background: linear-gradient(
     45deg,
-    ${(p) => p.bgStartColor},
-    ${(p) => p.bgEndColor}
+    ${(p) => p.$bgStartColor},
+    ${(p) => p.$bgEndColor}
   );
 
   & > * {
@@ -86,7 +86,7 @@ const UserMedalBase = styled.div<UserMedalBaseProps>`
 `;
 
 interface UserMedalIconProps {
-  color: Property.Color;
+  $color: Property.Color;
 }
 
 const icon = css`
@@ -102,7 +102,7 @@ const icon = css`
 const UserMedalLevel = styled.div<UserMedalIconProps>`
   ${icon};
 
-  color: ${(p) => p.color};
+  color: ${(p) => p.$color};
 
   padding: ${borderValue.small};
 `;